From 27b3a270196f189889ec5936e0d894590eb6ce9e Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Thu, 7 Aug 2025 16:22:47 -0700 Subject: [PATCH 01/17] Ensure that when aria-disabled is set, the selected tab doesn't change --- .../SegmentedControl.dev.stories.tsx | 42 +++++++++++++++++++ .../src/SegmentedControl/SegmentedControl.tsx | 12 ++++-- 2 files changed, 51 insertions(+), 3 deletions(-) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx index 3f44f7db7db..e3934236119 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx @@ -13,6 +13,48 @@ export default { parameters: {controls: {exclude: excludedControlKeys}}, } as Meta +export const WithAriaDisabled = () => { + const handleOnClick = (event: React.MouseEvent) => { + const isAriaDisabled = event.currentTarget.getAttribute('aria-disabled') === 'true' + if (isAriaDisabled) { + return + } + alert('Button clicked!') + } + + return ( + + + Preview + + + Raw + + + Blame + + + ) +} + export const WithCss = () => ( > = ({ const sharedChildProps = { onClick: onChange ? (event: React.MouseEvent) => { - onChange(index) - isUncontrolled && setSelectedIndexInternalState(index) + const isAriaDisabled = event.currentTarget.getAttribute('aria-disabled') === 'true' + if (!isAriaDisabled) { + onChange(index) + isUncontrolled && setSelectedIndexInternalState(index) + } child.props.onClick && child.props.onClick(event) } : (event: React.MouseEvent) => { + const isAriaDisabled = event.currentTarget.getAttribute('aria-disabled') === 'true' child.props.onClick && child.props.onClick(event) - isUncontrolled && setSelectedIndexInternalState(index) + if (!isAriaDisabled) { + isUncontrolled && setSelectedIndexInternalState(index) + } }, selected: index === selectedIndex, style: { From 94c4b25dc8637054d79fda3b87d2043e7009f91c Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 11 Aug 2025 14:21:58 +0000 Subject: [PATCH 02/17] Add `disabled` prop to `SegmentedControl.Button` --- .../SegmentedControl.examples.stories.tsx | 22 +++++++++++++++++++ .../src/SegmentedControl/SegmentedControl.tsx | 8 +++---- .../SegmentedControlButton.tsx | 4 ++++ 3 files changed, 30 insertions(+), 4 deletions(-) create mode 100644 packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx diff --git a/packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx new file mode 100644 index 00000000000..891d350b911 --- /dev/null +++ b/packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx @@ -0,0 +1,22 @@ +import type {Meta} from '@storybook/react-vite' +import {SegmentedControl} from '.' +import {EyeIcon, FileCodeIcon, PeopleIcon} from '@primer/octicons-react' + +export default { + title: 'Components/SegmentedControl/Examples', + component: SegmentedControl, +} as Meta + +export const WithDisabledButtons = () => ( + + + Preview + + + Raw + + + Blame + + +) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx index b3cc668b52d..144e39b5caa 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx @@ -172,17 +172,17 @@ const Root: React.FC> = ({ const sharedChildProps = { onClick: onChange ? (event: React.MouseEvent) => { - const isAriaDisabled = event.currentTarget.getAttribute('aria-disabled') === 'true' + const isAriaDisabled = child.props.disabled === true if (!isAriaDisabled) { onChange(index) isUncontrolled && setSelectedIndexInternalState(index) + child.props.onClick && child.props.onClick(event) } - child.props.onClick && child.props.onClick(event) } : (event: React.MouseEvent) => { - const isAriaDisabled = event.currentTarget.getAttribute('aria-disabled') === 'true' - child.props.onClick && child.props.onClick(event) + const isAriaDisabled = child.props.disabled === true if (!isAriaDisabled) { + child.props.onClick && child.props.onClick(event) isUncontrolled && setSelectedIndexInternalState(index) } }, diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx index cafd127ca20..a4de432e4fb 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx @@ -17,6 +17,8 @@ export type SegmentedControlButtonProps = { defaultSelected?: boolean /** The leading icon comes before item label */ leadingIcon?: React.FunctionComponent> | React.ReactElement + /** Applies `aria-disabled` to the button. This will disable certain functionality, such as `onClick` events. */ + disabled?: boolean } & SxProp & ButtonHTMLAttributes @@ -26,6 +28,7 @@ const SegmentedControlButton: React.FC Date: Tue, 29 Jul 2025 11:32:08 -0400 Subject: [PATCH 03/17] Re-introduce the reverted "Clean up the feature flag for `primer_react_segmented_control_tooltip`" This reverts commit 602b29acecf2276e34c4caaf652d60ded8a09b56. --- .changeset/strong-mangos-rest.md | 5 ++ .../src/FeatureFlags/DefaultFeatureFlags.ts | 1 - .../SegmentedControl.test.tsx | 52 ++++------------- .../SegmentedControlIconButton.tsx | 58 +++++-------------- 4 files changed, 33 insertions(+), 83 deletions(-) create mode 100644 .changeset/strong-mangos-rest.md diff --git a/.changeset/strong-mangos-rest.md b/.changeset/strong-mangos-rest.md new file mode 100644 index 00000000000..fd1a71a67bc --- /dev/null +++ b/.changeset/strong-mangos-rest.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Remove the feature flag for `primer_react_segmented_control_tooltip` and GA tootip by default behavior. diff --git a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts index 9a387d232bb..a874ad32307 100644 --- a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts +++ b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts @@ -3,7 +3,6 @@ import {FeatureFlagScope} from './FeatureFlagScope' export const DefaultFeatureFlags = FeatureFlagScope.create({ primer_react_action_list_item_as_button: false, primer_react_overlay_overflow: false, - primer_react_segmented_control_tooltip: false, primer_react_select_panel_fullscreen_on_narrow: false, primer_react_select_panel_order_selected_at_top: false, primer_react_select_panel_remove_active_descendant: false, diff --git a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx index 7506c9fc151..9a7b2aac5c9 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx @@ -5,7 +5,6 @@ import {describe, expect, it, vi} from 'vitest' import BaseStyles from '../BaseStyles' import theme from '../theme' import ThemeProvider from '../ThemeProvider' -import {FeatureFlags} from '../FeatureFlags' import {SegmentedControl} from '../SegmentedControl' const segmentData = [ @@ -144,19 +143,13 @@ describe('SegmentedControl', () => { } }) - it('renders icon button with tooltip as label when feature flag is enabled', () => { + it('renders icon button with tooltip as label', () => { const {getByRole, getByText} = render( - - - {segmentData.map(({label, icon}) => ( - - ))} - - , + + {segmentData.map(({label, icon}) => ( + + ))} + , ) for (const datum of segmentData) { @@ -167,41 +160,20 @@ describe('SegmentedControl', () => { } }) - it('renders icon button with tooltip description when feature flag is enabled', () => { + it('renders icon button with tooltip description', () => { const {getByRole, getByText} = render( - - - {segmentData.map(({label, icon, description}) => ( - - ))} - - , - ) - - for (const datum of segmentData) { - const labelledButton = getByRole('button', {name: datum.label}) - const tooltipElement = getByText(datum.description) - expect(labelledButton).toHaveAttribute('aria-describedby', tooltipElement.id) - expect(labelledButton).toHaveAccessibleName(datum.label) - expect(labelledButton).toHaveAttribute('aria-label', datum.label) - } - }) - - it('renders icon button with aria-label and no tooltip', () => { - const {getByRole} = render( - {segmentData.map(({label, icon}) => ( - + {segmentData.map(({label, icon, description}) => ( + ))} , ) for (const datum of segmentData) { const labelledButton = getByRole('button', {name: datum.label}) + const tooltipElement = getByText(datum.description) + expect(labelledButton).toHaveAttribute('aria-describedby', tooltipElement.id) + expect(labelledButton).toHaveAccessibleName(datum.label) expect(labelledButton).toHaveAttribute('aria-label', datum.label) } }) diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx index 399f67be575..5dcd7a8f326 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx @@ -3,7 +3,6 @@ import type React from 'react' import type {IconProps} from '@primer/octicons-react' import type {SxProp} from '../sx' import {isElement} from 'react-is' -import {useFeatureFlag} from '../FeatureFlags' import type {TooltipDirection} from '../TooltipV2' import classes from './SegmentedControl.module.css' import {clsx} from 'clsx' @@ -35,56 +34,31 @@ export const SegmentedControlIconButton: React.FC { - const tooltipFlagEnabled = useFeatureFlag('primer_react_segmented_control_tooltip') - if (tooltipFlagEnabled) { - return ( - - - - - {isElement(Icon) ? Icon : } - - - - - ) - } else { - // This can be removed when primer_react_segmented_control_tooltip feature flag is GA-ed. - return ( - + {isElement(Icon) ? Icon : } - - ) - } + + + ) } export default SegmentedControlIconButton From c2aad6e4d6738b75e10794cfa58b783176293c95 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Fri, 29 Aug 2025 15:55:32 -0400 Subject: [PATCH 04/17] Update strong-mangos-rest.md --- .changeset/strong-mangos-rest.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/strong-mangos-rest.md b/.changeset/strong-mangos-rest.md index fd1a71a67bc..9e84333ec54 100644 --- a/.changeset/strong-mangos-rest.md +++ b/.changeset/strong-mangos-rest.md @@ -2,4 +2,5 @@ "@primer/react": minor --- -Remove the feature flag for `primer_react_segmented_control_tooltip` and GA tootip by default behavior. +- Remove the feature flag for `primer_react_segmented_control_tooltip` and GA tootip by default behavior. +- Ensure that when `disabled` is applied, the tooltip is still triggered. From af99208f894d2319643c95bc59aa5131ba7322a1 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Fri, 29 Aug 2025 16:01:27 -0400 Subject: [PATCH 05/17] Update packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../SegmentedControl/SegmentedControl.examples.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx index 891d350b911..bddec47b3a8 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx @@ -9,13 +9,13 @@ export default { export const WithDisabledButtons = () => ( - + Preview Raw - + Blame From 307289d702ea2dc184c73fac186c10aded2ac7e8 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Fri, 29 Aug 2025 16:01:52 -0400 Subject: [PATCH 06/17] Update .changeset/strong-mangos-rest.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .changeset/strong-mangos-rest.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/strong-mangos-rest.md b/.changeset/strong-mangos-rest.md index 9e84333ec54..03b2ff7b98d 100644 --- a/.changeset/strong-mangos-rest.md +++ b/.changeset/strong-mangos-rest.md @@ -2,5 +2,5 @@ "@primer/react": minor --- -- Remove the feature flag for `primer_react_segmented_control_tooltip` and GA tootip by default behavior. +Remove the feature flag for `primer_react_segmented_control_tooltip` and GA tooltip by default behavior. - Ensure that when `disabled` is applied, the tooltip is still triggered. From 088b0518d14c537b2e27516fa028abb1846124e8 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Thu, 4 Sep 2025 11:12:37 -0400 Subject: [PATCH 07/17] Update SegmentedControl.dev.stories.tsx --- .../SegmentedControl.dev.stories.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx index e3934236119..890cd5858d1 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx @@ -13,10 +13,10 @@ export default { parameters: {controls: {exclude: excludedControlKeys}}, } as Meta -export const WithAriaDisabled = () => { +export const WithDisabled = () => { const handleOnClick = (event: React.MouseEvent) => { - const isAriaDisabled = event.currentTarget.getAttribute('aria-disabled') === 'true' - if (isAriaDisabled) { + const isDisabled = event.currentTarget.getAttribute('disabled') === 'true' + if (isDisabled) { return } alert('Button clicked!') @@ -27,14 +27,14 @@ export const WithAriaDisabled = () => { Preview { Raw Date: Thu, 4 Sep 2025 15:49:34 -0400 Subject: [PATCH 08/17] Aria-disabled and disabled (#6725) Co-authored-by: Tyler Jones --- .../SegmentedControl.dev.stories.tsx | 44 ++++++++++++++++--- .../src/SegmentedControl/SegmentedControl.tsx | 8 ++-- .../SegmentedControlButton.tsx | 5 ++- .../SegmentedControlIconButton.stories.tsx | 8 ++++ .../SegmentedControlIconButton.tsx | 7 +++ 5 files changed, 62 insertions(+), 10 deletions(-) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx index 890cd5858d1..2cc0127e2fe 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx @@ -13,12 +13,46 @@ export default { parameters: {controls: {exclude: excludedControlKeys}}, } as Meta +export const WithAriaDisabled = () => { + const handleOnClick = () => { + alert('Button clicked!') + } + + return ( + + + Preview + + + Raw + + + Blame + + + ) +} + export const WithDisabled = () => { - const handleOnClick = (event: React.MouseEvent) => { - const isDisabled = event.currentTarget.getAttribute('disabled') === 'true' - if (isDisabled) { - return - } + const handleOnClick = () => { alert('Button clicked!') } diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx index 144e39b5caa..8c362ee55a7 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx @@ -172,16 +172,16 @@ const Root: React.FC> = ({ const sharedChildProps = { onClick: onChange ? (event: React.MouseEvent) => { - const isAriaDisabled = child.props.disabled === true - if (!isAriaDisabled) { + const isDisabled = child.props.disabled === true || child.props['aria-disabled'] === true + if (!isDisabled) { onChange(index) isUncontrolled && setSelectedIndexInternalState(index) child.props.onClick && child.props.onClick(event) } } : (event: React.MouseEvent) => { - const isAriaDisabled = child.props.disabled === true - if (!isAriaDisabled) { + const isDisabled = child.props.disabled === true || child.props['aria-disabled'] === true + if (!isDisabled) { child.props.onClick && child.props.onClick(event) isUncontrolled && setSelectedIndexInternalState(index) } diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx index a4de432e4fb..0c31ea5c1d9 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx @@ -19,6 +19,8 @@ export type SegmentedControlButtonProps = { leadingIcon?: React.FunctionComponent> | React.ReactElement /** Applies `aria-disabled` to the button. This will disable certain functionality, such as `onClick` events. */ disabled?: boolean + /** Applies `aria-disabled` to the button. This will disable certain functionality, such as `onClick` events. */ + 'aria-disabled'?: boolean } & SxProp & ButtonHTMLAttributes @@ -29,6 +31,7 @@ const SegmentedControlButton: React.FC { diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx index 5dcd7a8f326..414b757cdf2 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx @@ -21,6 +21,10 @@ export type SegmentedControlIconButtonProps = { description?: string /** The direction for the tooltip.*/ tooltipDirection?: TooltipDirection + /** Whether the button is disabled. */ + disabled?: boolean + /** Whether the button is aria-disabled. */ + 'aria-disabled'?: boolean } & SxProp & ButtonHTMLAttributes @@ -32,6 +36,8 @@ export const SegmentedControlIconButton: React.FC { return ( @@ -52,6 +58,7 @@ export const SegmentedControlIconButton: React.FC {isElement(Icon) ? Icon : } From 9acdcc4522c0635d16c30b923fb7860498f1228f Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Fri, 12 Sep 2025 14:22:49 -0400 Subject: [PATCH 09/17] Add styles --- .../src/SegmentedControl/SegmentedControl.module.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css index c0371ea8fdc..9e77ccfdcc7 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.module.css +++ b/packages/react/src/SegmentedControl/SegmentedControl.module.css @@ -118,6 +118,17 @@ width: 0; } + &[aria-disabled='true']:not([aria-current="true"]) { + cursor: not-allowed; + color: var(--fgColor-disabled); + background-color: transparent; + + & svg { + fill: var(--fgColor-disabled); + color: var(--fgColor-disabled); + } + } + @media (pointer: coarse) { &::before { position: absolute; From d99fc85bbb99dc4619711efb9ca59ac7f12a8d39 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 15 Sep 2025 09:02:14 -0400 Subject: [PATCH 10/17] Run format --- packages/react/src/SegmentedControl/SegmentedControl.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css index 9e77ccfdcc7..ebfd5c705db 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.module.css +++ b/packages/react/src/SegmentedControl/SegmentedControl.module.css @@ -118,7 +118,7 @@ width: 0; } - &[aria-disabled='true']:not([aria-current="true"]) { + &[aria-disabled='true']:not([aria-current='true']) { cursor: not-allowed; color: var(--fgColor-disabled); background-color: transparent; From 3984849e42e5e1e43fb00e68275690d9949fcf52 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 15 Sep 2025 09:07:38 -0400 Subject: [PATCH 11/17] Remove `:hover` and `:active` styles when disabled --- .../react/src/SegmentedControl/SegmentedControl.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css index ebfd5c705db..1ababc36c62 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.module.css +++ b/packages/react/src/SegmentedControl/SegmentedControl.module.css @@ -189,11 +189,11 @@ } .Button:not([aria-current='true']) { - &:hover .Content { + &:hover:not([aria-disabled='true']) .Content { background-color: var(--controlTrack-bgColor-hover); } - &:active .Content { + &:active:not([aria-disabled='true']) .Content { background-color: var(--controlTrack-bgColor-active); } } From 3b957817ff475602d4c770619fcc2ac678bc3d67 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 15 Sep 2025 10:06:23 -0400 Subject: [PATCH 12/17] Move `:not` --- .../react/src/SegmentedControl/SegmentedControl.module.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css index 1ababc36c62..87225d28f75 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.module.css +++ b/packages/react/src/SegmentedControl/SegmentedControl.module.css @@ -188,12 +188,12 @@ } } -.Button:not([aria-current='true']) { - &:hover:not([aria-disabled='true']) .Content { +.Button:not([aria-current='true']):not([aria-disabled='true']) { + &:hover .Content { background-color: var(--controlTrack-bgColor-hover); } - &:active:not([aria-disabled='true']) .Content { + &:active .Content { background-color: var(--controlTrack-bgColor-active); } } From 9ff45d69d8add1df88c4b800e770ec972dd03d9a Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 15 Sep 2025 10:31:49 -0400 Subject: [PATCH 13/17] Fix lint --- packages/react/src/SegmentedControl/SegmentedControl.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css index 87225d28f75..4c3d5324f1a 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.module.css +++ b/packages/react/src/SegmentedControl/SegmentedControl.module.css @@ -188,7 +188,7 @@ } } -.Button:not([aria-current='true']):not([aria-disabled='true']) { +.Button:not([aria-current='true'], [aria-disabled='true']) { &:hover .Content { background-color: var(--controlTrack-bgColor-hover); } From fe20f4f855c3b38570013073d7de04d2a900b707 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Tue, 21 Oct 2025 11:47:32 -0400 Subject: [PATCH 14/17] Lint fix --- packages/react/src/SegmentedControl/SegmentedControl.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx index 79ce87d74f3..b9fe4db2085 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx @@ -3,7 +3,6 @@ import {EyeIcon, FileCodeIcon, PeopleIcon} from '@primer/octicons-react' import userEvent from '@testing-library/user-event' import {describe, expect, it, vi} from 'vitest' import BaseStyles from '../BaseStyles' -import {FeatureFlags} from '../FeatureFlags' import {SegmentedControl} from '../SegmentedControl' const segmentData = [ From 30ecae04d0b090859c02d3e2e30583bb17f14479 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 1 Dec 2025 14:41:44 +0000 Subject: [PATCH 15/17] Changes from feedback --- .../SegmentedControl.examples.stories.tsx | 2 +- .../react/src/SegmentedControl/SegmentedControl.tsx | 10 ++++++++-- .../src/SegmentedControl/SegmentedControlButton.tsx | 7 +++---- .../SegmentedControlIconButton.stories.tsx | 4 ---- .../SegmentedControl/SegmentedControlIconButton.tsx | 7 +++---- 5 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx index bddec47b3a8..f92bb535066 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx @@ -15,7 +15,7 @@ export const WithDisabledButtons = () => ( Raw - + Blame diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx index 40faa00a468..d168930066d 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx @@ -167,7 +167,10 @@ const Root: React.FC> = ({ const sharedChildProps = { onClick: onChange ? (event: React.MouseEvent) => { - const isDisabled = child.props.disabled === true || child.props['aria-disabled'] === true + const isDisabled = + child.props.disabled === true || + child.props['aria-disabled'] === 'true' || + child.props['aria-disabled'] === true if (!isDisabled) { onChange(index) isUncontrolled && setSelectedIndexInternalState(index) @@ -175,7 +178,10 @@ const Root: React.FC> = ({ } } : (event: React.MouseEvent) => { - const isDisabled = child.props.disabled === true || child.props['aria-disabled'] === true + const isDisabled = + child.props.disabled === true || + child.props['aria-disabled'] === 'true' || + child.props['aria-disabled'] === true if (!isDisabled) { child.props.onClick && child.props.onClick(event) isUncontrolled && setSelectedIndexInternalState(index) diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx index 86471a6cd88..c48236301a4 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx @@ -19,8 +19,6 @@ export type SegmentedControlButtonProps = { leadingIcon?: React.FunctionComponent> | React.ReactElement /** Applies `aria-disabled` to the button. This will disable certain functionality, such as `onClick` events. */ disabled?: boolean - /** Applies `aria-disabled` to the button. This will disable certain functionality, such as `onClick` events. */ - 'aria-disabled'?: boolean /** Optional counter to display on the right side of the button */ count?: number | string } & ButtonHTMLAttributes @@ -31,12 +29,13 @@ const SegmentedControlButton: FCWithSlotMarker { + const {'aria-disabled': ariaDisabled, ...rest} = props + return (