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 6a6ee596c57..0fe1a78ef99 100644 --- a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts +++ b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts @@ -5,7 +5,6 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({ primer_react_action_list_item_as_button: false, primer_react_select_panel_with_modern_action_list: 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, }) 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