Fix `SegmentedButton` border doesn't respect hovered, focused, selected states #161942

TahaTesser · 2025-01-21T13:26:25Z

Fixes SegmentedButton does not set its MaterialState for side

Code Sample

expand to view the code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const SegmentedButtonApp());
}

enum Calendar { day, week, month, year }

class SegmentedButtonApp extends StatefulWidget {
  const SegmentedButtonApp({super.key});

  @override
  State<SegmentedButtonApp> createState() => _SegmentedButtonAppState();
}

class _SegmentedButtonAppState extends State<SegmentedButtonApp> {
  Calendar calendarView = Calendar.day;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        segmentedButtonTheme: SegmentedButtonThemeData(
          style: ButtonStyle(
            side: WidgetStateProperty.resolveWith(
              (Set<WidgetState> states) {
                if (states.contains(WidgetState.disabled)) {
                  return const BorderSide(color: Colors.grey, width: 2);
                }
                if (states.contains(WidgetState.hovered)) {
                  return const BorderSide(color: Colors.green, width: 2);
                }
                if (states.contains(WidgetState.focused)) {
                  return const BorderSide(color: Colors.pinkAccent, width: 2);
                }
                // if (states.contains(WidgetState.selected)) {
                //   return const BorderSide(color: Colors.brown, width: 2);
                // }

                return const BorderSide(color: Colors.amber, width: 2);
              },
            ),
          ),
        ),
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            spacing: 20,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SegmentedButton<Calendar>(
                segments: const <ButtonSegment<Calendar>>[
                  ButtonSegment<Calendar>(
                      value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day)),
                  ButtonSegment<Calendar>(
                      value: Calendar.week,
                      label: Text('Week'),
                      icon: Icon(Icons.calendar_view_week)),
                  ButtonSegment<Calendar>(
                      value: Calendar.month,
                      label: Text('Month'),
                      icon: Icon(Icons.calendar_view_month)),
                  ButtonSegment<Calendar>(
                      value: Calendar.year, label: Text('Year'), icon: Icon(Icons.calendar_today)),
                ],
                selected: <Calendar>{calendarView},
              ),
              SegmentedButton<Calendar>(
                segments: const <ButtonSegment<Calendar>>[
                  ButtonSegment<Calendar>(
                      value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day)),
                  ButtonSegment<Calendar>(
                      value: Calendar.week,
                      label: Text('Week'),
                      icon: Icon(Icons.calendar_view_week)),
                  ButtonSegment<Calendar>(
                      value: Calendar.month,
                      label: Text('Month'),
                      icon: Icon(Icons.calendar_view_month)),
                  ButtonSegment<Calendar>(
                      value: Calendar.year, label: Text('Year'), icon: Icon(Icons.calendar_today)),
                ],
                selected: <Calendar>{calendarView},
                onSelectionChanged: (Set<Calendar> newSelection) {
                  setState(() {
                    calendarView = newSelection.first;
                  });
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

Before

Screen.Recording.2025-01-21.at.15.23.24.mov

After

Screen.Recording.2025-01-21.at.15.22.33.mov

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

packages/flutter/test/material/segmented_button_test.dart

QuncCccccc

Based on the specs, it seems if a segment is disabled, we should be able to show the disabled state on border of the specific segment (not the whole SegmentedButton). So It's not clear what expected behavior would be when a specific segment is hovered, focused and pressed. Let me double check with the material team.

packages/flutter/lib/src/material/segmented_button.dart

QuncCccccc · 2025-02-05T06:39:56Z

Filed a bug and asked for clarification: b/394478041

QuncCccccc

I haven't heard about the update from the material team, but I do see there's a token to indicate the outline of the whole segmented button, so I think this feature makes sense:)

Sorry for the late response. Trying my best to speed up! I'll make sure we make some progress this week!

packages/flutter/lib/src/material/segmented_button.dart

packages/flutter/test/material/segmented_button_test.dart

QuncCccccc

LGTM! Thanks so much for your patience.

packages/flutter/lib/src/material/segmented_button.dart

TahaTesser · 2025-03-12T11:01:05Z

@victorsanni Could you please approve? :)

victorsanni

LGTM

auto-submit · 2025-03-12T17:12:11Z

autosubmit label was removed for flutter/flutter/161942, because - The status or check suite Google testing has failed. Please fix the issues identified (or deflake) before re-applying this label.

victorsanni · 2025-03-12T17:43:32Z

I was looking at the google testing failures, they are all image diffs. Seems like the disabled segmented button is now black instead of gray. I wasn't following the earlier conversation, but is that intended?

QuncCccccc · 2025-03-12T17:49:35Z

I'll look at the internal use case to see how they use the segmented buttons. I think we handle the disabled state correctly here🤔

dkwingsmt · 2025-04-02T18:26:28Z

@QuncCccccc How's the investigation going? (from triage)

QuncCccccc · 2025-04-09T04:06:43Z

packages/flutter/lib/src/material/segmented_button.dart

+  bool _focused = false;
+  bool get _selected => widget.selected.isNotEmpty;
+
+  Set<WidgetState> get _states => <WidgetState>{


When we disable one of the segments by setting ButtonSegment.enabled to false, _states cannot really add WidgetState.disabled to the set, so the disabledBorder in line 628 is actually not the real disabled border and then incorrect side is applied to the disabled segment. This causes the google testing failures.

QuncCccccc · 2025-04-09T04:15:48Z

packages/flutter/lib/src/material/segmented_button.dart

+    final BorderSide effectiveSide =
+        resolve<BorderSide?>((ButtonStyle? style) => style?.side) ?? BorderSide.none;
+    final OutlinedBorder enabledBorder = effectiveBorder.copyWith(side: effectiveSide);
+    final OutlinedBorder disabledBorder = effectiveBorder.copyWith(side: effectiveSide);


Following my explanation above, this disabledBorder will never get the disabled value if a segment is disabled by setting ButtonSegment.enabled (like the screenshot below). So we might still need to use the original implementation to handle the disabled state.

dkwingsmt · 2025-05-21T18:02:51Z

Gentle ping @TahaTesser

@TahaTesser

## Description This PR fixes `SegmentedButton` border side not depending on the current state. It's based on one @TahaTesser 's great PR: see #161942. 🙏 I updated some logic related to disabled border which led to Taha’s PR failing internal Google tests. I also added a test to verify the disabled border. <details><summary>Code sample for screenshots</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(const SegmentedButtonApp()); } enum Calendar { day, week, month, year } class SegmentedButtonApp extends StatefulWidget { const SegmentedButtonApp({super.key}); @OverRide State<SegmentedButtonApp> createState() => _SegmentedButtonAppState(); } class _SegmentedButtonAppState extends State<SegmentedButtonApp> { Calendar? calendarView; @OverRide Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( segmentedButtonTheme: SegmentedButtonThemeData( style: ButtonStyle( side: WidgetStateProperty.fromMap(<WidgetStatesConstraint, BorderSide?>{ WidgetState.disabled: const BorderSide(color: Colors.grey, width: 2), WidgetState.selected & WidgetState.hovered: const BorderSide( color: Colors.blue, width: 2, ), WidgetState.selected & WidgetState.focused: const BorderSide( color: Colors.pinkAccent, width: 2, ), WidgetState.hovered: const BorderSide(color: Colors.green, width: 2), WidgetState.focused: const BorderSide(color: Colors.purple, width: 2), WidgetState.any: const BorderSide(color: Colors.amber, width: 2), }), ), ), ), home: Scaffold( body: Center( child: SegmentedButton<Calendar>( segments: const <ButtonSegment<Calendar>>[ ButtonSegment<Calendar>( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), enabled: false, ), ButtonSegment<Calendar>( value: Calendar.week, label: Text('Week'), icon: Icon(Icons.calendar_view_week), ), ButtonSegment<Calendar>( value: Calendar.month, label: Text('Month'), icon: Icon(Icons.calendar_view_month), ), ButtonSegment<Calendar>( value: Calendar.year, label: Text('Year'), icon: Icon(Icons.calendar_today), ), ], selected: <Calendar>{?calendarView}, emptySelectionAllowed: true, onSelectionChanged: (Set<Calendar> newSelection) { setState(() { calendarView = newSelection.isEmpty ? null : newSelection.first; }); }, ), ), floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)), ), ); } } ``` </details> # Before https://github.com/user-attachments/assets/1581f431-f87a-4af3-8ef6-f1f0d170e54a # After https://github.com/user-attachments/assets/156a8a64-3d9f-4323-9a1d-60624f5ac5d4 ## Related Issue Fixes [SegmentedButton does not set its MaterialState for side ](#159884) ## Tests Adds 2 tests.

@TahaTesser

## Description This PR fixes `SegmentedButton` border side not depending on the current state. It's based on one @TahaTesser 's great PR: see flutter#161942. 🙏 I updated some logic related to disabled border which led to Taha’s PR failing internal Google tests. I also added a test to verify the disabled border. <details><summary>Code sample for screenshots</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(const SegmentedButtonApp()); } enum Calendar { day, week, month, year } class SegmentedButtonApp extends StatefulWidget { const SegmentedButtonApp({super.key}); @OverRide State<SegmentedButtonApp> createState() => _SegmentedButtonAppState(); } class _SegmentedButtonAppState extends State<SegmentedButtonApp> { Calendar? calendarView; @OverRide Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( segmentedButtonTheme: SegmentedButtonThemeData( style: ButtonStyle( side: WidgetStateProperty.fromMap(<WidgetStatesConstraint, BorderSide?>{ WidgetState.disabled: const BorderSide(color: Colors.grey, width: 2), WidgetState.selected & WidgetState.hovered: const BorderSide( color: Colors.blue, width: 2, ), WidgetState.selected & WidgetState.focused: const BorderSide( color: Colors.pinkAccent, width: 2, ), WidgetState.hovered: const BorderSide(color: Colors.green, width: 2), WidgetState.focused: const BorderSide(color: Colors.purple, width: 2), WidgetState.any: const BorderSide(color: Colors.amber, width: 2), }), ), ), ), home: Scaffold( body: Center( child: SegmentedButton<Calendar>( segments: const <ButtonSegment<Calendar>>[ ButtonSegment<Calendar>( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), enabled: false, ), ButtonSegment<Calendar>( value: Calendar.week, label: Text('Week'), icon: Icon(Icons.calendar_view_week), ), ButtonSegment<Calendar>( value: Calendar.month, label: Text('Month'), icon: Icon(Icons.calendar_view_month), ), ButtonSegment<Calendar>( value: Calendar.year, label: Text('Year'), icon: Icon(Icons.calendar_today), ), ], selected: <Calendar>{?calendarView}, emptySelectionAllowed: true, onSelectionChanged: (Set<Calendar> newSelection) { setState(() { calendarView = newSelection.isEmpty ? null : newSelection.first; }); }, ), ), floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)), ), ); } } ``` </details> # Before https://github.com/user-attachments/assets/1581f431-f87a-4af3-8ef6-f1f0d170e54a # After https://github.com/user-attachments/assets/156a8a64-3d9f-4323-9a1d-60624f5ac5d4 ## Related Issue Fixes [SegmentedButton does not set its MaterialState for side ](flutter#159884) ## Tests Adds 2 tests.

@TahaTesser

## Description This PR fixes `SegmentedButton` border side not depending on the current state. It's based on one @TahaTesser 's great PR: see flutter#161942. 🙏 I updated some logic related to disabled border which led to Taha’s PR failing internal Google tests. I also added a test to verify the disabled border. <details><summary>Code sample for screenshots</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(const SegmentedButtonApp()); } enum Calendar { day, week, month, year } class SegmentedButtonApp extends StatefulWidget { const SegmentedButtonApp({super.key}); @OverRide State<SegmentedButtonApp> createState() => _SegmentedButtonAppState(); } class _SegmentedButtonAppState extends State<SegmentedButtonApp> { Calendar? calendarView; @OverRide Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( segmentedButtonTheme: SegmentedButtonThemeData( style: ButtonStyle( side: WidgetStateProperty.fromMap(<WidgetStatesConstraint, BorderSide?>{ WidgetState.disabled: const BorderSide(color: Colors.grey, width: 2), WidgetState.selected & WidgetState.hovered: const BorderSide( color: Colors.blue, width: 2, ), WidgetState.selected & WidgetState.focused: const BorderSide( color: Colors.pinkAccent, width: 2, ), WidgetState.hovered: const BorderSide(color: Colors.green, width: 2), WidgetState.focused: const BorderSide(color: Colors.purple, width: 2), WidgetState.any: const BorderSide(color: Colors.amber, width: 2), }), ), ), ), home: Scaffold( body: Center( child: SegmentedButton<Calendar>( segments: const <ButtonSegment<Calendar>>[ ButtonSegment<Calendar>( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), enabled: false, ), ButtonSegment<Calendar>( value: Calendar.week, label: Text('Week'), icon: Icon(Icons.calendar_view_week), ), ButtonSegment<Calendar>( value: Calendar.month, label: Text('Month'), icon: Icon(Icons.calendar_view_month), ), ButtonSegment<Calendar>( value: Calendar.year, label: Text('Year'), icon: Icon(Icons.calendar_today), ), ], selected: <Calendar>{?calendarView}, emptySelectionAllowed: true, onSelectionChanged: (Set<Calendar> newSelection) { setState(() { calendarView = newSelection.isEmpty ? null : newSelection.first; }); }, ), ), floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)), ), ); } } ``` </details> # Before https://github.com/user-attachments/assets/1581f431-f87a-4af3-8ef6-f1f0d170e54a # After https://github.com/user-attachments/assets/156a8a64-3d9f-4323-9a1d-60624f5ac5d4 ## Related Issue Fixes [SegmentedButton does not set its MaterialState for side ](flutter#159884) ## Tests Adds 2 tests.

@TahaTesser

## Description This PR fixes `SegmentedButton` border side not depending on the current state. It's based on one @TahaTesser 's great PR: see flutter#161942. 🙏 I updated some logic related to disabled border which led to Taha’s PR failing internal Google tests. I also added a test to verify the disabled border. <details><summary>Code sample for screenshots</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(const SegmentedButtonApp()); } enum Calendar { day, week, month, year } class SegmentedButtonApp extends StatefulWidget { const SegmentedButtonApp({super.key}); @OverRide State<SegmentedButtonApp> createState() => _SegmentedButtonAppState(); } class _SegmentedButtonAppState extends State<SegmentedButtonApp> { Calendar? calendarView; @OverRide Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( segmentedButtonTheme: SegmentedButtonThemeData( style: ButtonStyle( side: WidgetStateProperty.fromMap(<WidgetStatesConstraint, BorderSide?>{ WidgetState.disabled: const BorderSide(color: Colors.grey, width: 2), WidgetState.selected & WidgetState.hovered: const BorderSide( color: Colors.blue, width: 2, ), WidgetState.selected & WidgetState.focused: const BorderSide( color: Colors.pinkAccent, width: 2, ), WidgetState.hovered: const BorderSide(color: Colors.green, width: 2), WidgetState.focused: const BorderSide(color: Colors.purple, width: 2), WidgetState.any: const BorderSide(color: Colors.amber, width: 2), }), ), ), ), home: Scaffold( body: Center( child: SegmentedButton<Calendar>( segments: const <ButtonSegment<Calendar>>[ ButtonSegment<Calendar>( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), enabled: false, ), ButtonSegment<Calendar>( value: Calendar.week, label: Text('Week'), icon: Icon(Icons.calendar_view_week), ), ButtonSegment<Calendar>( value: Calendar.month, label: Text('Month'), icon: Icon(Icons.calendar_view_month), ), ButtonSegment<Calendar>( value: Calendar.year, label: Text('Year'), icon: Icon(Icons.calendar_today), ), ], selected: <Calendar>{?calendarView}, emptySelectionAllowed: true, onSelectionChanged: (Set<Calendar> newSelection) { setState(() { calendarView = newSelection.isEmpty ? null : newSelection.first; }); }, ), ), floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)), ), ); } } ``` </details> # Before https://github.com/user-attachments/assets/1581f431-f87a-4af3-8ef6-f1f0d170e54a # After https://github.com/user-attachments/assets/156a8a64-3d9f-4323-9a1d-60624f5ac5d4 ## Related Issue Fixes [SegmentedButton does not set its MaterialState for side ](flutter#159884) ## Tests Adds 2 tests.

@TahaTesser

## Description This PR fixes `SegmentedButton` border side not depending on the current state. It's based on one @TahaTesser 's great PR: see flutter#161942. 🙏 I updated some logic related to disabled border which led to Taha’s PR failing internal Google tests. I also added a test to verify the disabled border. <details><summary>Code sample for screenshots</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(const SegmentedButtonApp()); } enum Calendar { day, week, month, year } class SegmentedButtonApp extends StatefulWidget { const SegmentedButtonApp({super.key}); @OverRide State<SegmentedButtonApp> createState() => _SegmentedButtonAppState(); } class _SegmentedButtonAppState extends State<SegmentedButtonApp> { Calendar? calendarView; @OverRide Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( segmentedButtonTheme: SegmentedButtonThemeData( style: ButtonStyle( side: WidgetStateProperty.fromMap(<WidgetStatesConstraint, BorderSide?>{ WidgetState.disabled: const BorderSide(color: Colors.grey, width: 2), WidgetState.selected & WidgetState.hovered: const BorderSide( color: Colors.blue, width: 2, ), WidgetState.selected & WidgetState.focused: const BorderSide( color: Colors.pinkAccent, width: 2, ), WidgetState.hovered: const BorderSide(color: Colors.green, width: 2), WidgetState.focused: const BorderSide(color: Colors.purple, width: 2), WidgetState.any: const BorderSide(color: Colors.amber, width: 2), }), ), ), ), home: Scaffold( body: Center( child: SegmentedButton<Calendar>( segments: const <ButtonSegment<Calendar>>[ ButtonSegment<Calendar>( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), enabled: false, ), ButtonSegment<Calendar>( value: Calendar.week, label: Text('Week'), icon: Icon(Icons.calendar_view_week), ), ButtonSegment<Calendar>( value: Calendar.month, label: Text('Month'), icon: Icon(Icons.calendar_view_month), ), ButtonSegment<Calendar>( value: Calendar.year, label: Text('Year'), icon: Icon(Icons.calendar_today), ), ], selected: <Calendar>{?calendarView}, emptySelectionAllowed: true, onSelectionChanged: (Set<Calendar> newSelection) { setState(() { calendarView = newSelection.isEmpty ? null : newSelection.first; }); }, ), ), floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)), ), ); } } ``` </details> # Before https://github.com/user-attachments/assets/1581f431-f87a-4af3-8ef6-f1f0d170e54a # After https://github.com/user-attachments/assets/156a8a64-3d9f-4323-9a1d-60624f5ac5d4 ## Related Issue Fixes [SegmentedButton does not set its MaterialState for side ](flutter#159884) ## Tests Adds 2 tests.

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jan 21, 2025

TahaTesser marked this pull request as ready for review January 21, 2025 16:01

TahaTesser changed the title ~~Fix SegmentedButton border doesn't respect hovered, focused state~~ Fix SegmentedButton border doesn't respect hovered, focused, selected states Jan 22, 2025

Piinks requested a review from QuncCccccc January 29, 2025 19:19

victorsanni self-requested a review January 29, 2025 19:19

victorsanni reviewed Jan 31, 2025

View reviewed changes

packages/flutter/test/material/segmented_button_test.dart Outdated Show resolved Hide resolved

TahaTesser requested a review from victorsanni January 31, 2025 12:14

TahaTesser force-pushed the segmented_button_side_states branch from 97133ad to 5f4a194 Compare February 4, 2025 13:50

QuncCccccc reviewed Feb 5, 2025

View reviewed changes

packages/flutter/lib/src/material/segmented_button.dart Outdated Show resolved Hide resolved

packages/flutter/lib/src/material/segmented_button.dart Show resolved Hide resolved

TahaTesser force-pushed the segmented_button_side_states branch from bbb0745 to 4ff767b Compare February 5, 2025 13:20

TahaTesser requested review from QuncCccccc February 7, 2025 11:54

QuncCccccc reviewed Feb 25, 2025

View reviewed changes

packages/flutter/lib/src/material/segmented_button.dart Outdated Show resolved Hide resolved

packages/flutter/test/material/segmented_button_test.dart Outdated Show resolved Hide resolved

TahaTesser force-pushed the segmented_button_side_states branch from f0ce435 to 6825b07 Compare February 26, 2025 14:41

TahaTesser requested a review from matanlurey as a code owner February 26, 2025 14:41

TahaTesser removed the request for review from matanlurey February 26, 2025 14:42

QuncCccccc approved these changes Mar 12, 2025

View reviewed changes

packages/flutter/lib/src/material/segmented_button.dart Outdated Show resolved Hide resolved

packages/flutter/lib/src/material/segmented_button.dart Show resolved Hide resolved

TahaTesser force-pushed the segmented_button_side_states branch from 6825b07 to 74e10d3 Compare March 12, 2025 10:59

TahaTesser requested review from victorsanni and removed request for victorsanni March 12, 2025 11:00

victorsanni approved these changes Mar 12, 2025

View reviewed changes

victorsanni added the autosubmit Merge PR when tree becomes green via auto submit App label Mar 12, 2025

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Mar 12, 2025

QuncCccccc self-requested a review March 14, 2025 22:31

QuncCccccc reviewed Apr 9, 2025

View reviewed changes

TahaTesser added 5 commits June 4, 2025 23:18

Fix SegmentedButton border doesn't respect hovered, focused state

9b554f6

Address feedback

ec4f2f4

Fix arrangment

5f3d4f4

Address feedback

4a8b1f0

Address feedback

4653dd7

TahaTesser force-pushed the segmented_button_side_states branch from 74e10d3 to 4653dd7 Compare June 4, 2025 20:19

QuncCccccc self-requested a review June 4, 2025 20:30

TahaTesser closed this Jun 6, 2025

QuncCccccc mentioned this pull request Jun 6, 2025

SegmentedButton does not set its MaterialState for side #159884

Closed

bleroux mentioned this pull request Jul 25, 2025

Fix SegmentedButton border doesn't reflect states #172754

Merged

Fix SegmentedButton border doesn't respect hovered, focused, selected states #161942

Fix SegmentedButton border doesn't respect hovered, focused, selected states #161942

Uh oh!

Conversation

TahaTesser commented Jan 21, 2025

Code Sample

Before

After

Pre-launch Checklist

Uh oh!

Uh oh!

QuncCccccc left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

QuncCccccc commented Feb 5, 2025

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

TahaTesser commented Mar 12, 2025

Uh oh!

victorsanni left a comment

Choose a reason for hiding this comment

Uh oh!

auto-submit bot commented Mar 12, 2025

Uh oh!

victorsanni commented Mar 12, 2025

Uh oh!

QuncCccccc commented Mar 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dkwingsmt commented Apr 2, 2025

Uh oh!

QuncCccccc Apr 9, 2025

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Apr 9, 2025

Choose a reason for hiding this comment

Uh oh!

dkwingsmt commented May 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Fix `SegmentedButton` border doesn't respect hovered, focused, selected states #161942

Fix `SegmentedButton` border doesn't respect hovered, focused, selected states #161942

QuncCccccc left a comment •

edited

Loading

QuncCccccc commented Mar 12, 2025 •

edited

Loading