From 3f563278d77b996edf15ac1e2d3f1a75ccfcc997 Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Tue, 8 Jul 2025 15:04:14 -0400
Subject: [PATCH 1/4] Clean up the feature flag

---
 .../src/FeatureFlags/DefaultFeatureFlags.ts   |  1 -
 .../SegmentedControl.test.tsx                 | 37 ++++-------
 .../SegmentedControlIconButton.tsx            | 62 ++++++-------------
 3 files changed, 31 insertions(+), 69 deletions(-)

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 d5630fe41b3..859a2fb577d 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
@@ -8,7 +8,6 @@ import theme from '../theme'
 import {BaseStyles, ThemeProvider} from '..'
 import {act} from 'react-test-renderer'
 import {viewportRanges} from '../hooks/useResponsiveValue'
-import {FeatureFlags} from '../FeatureFlags'
 
 const segmentData = [
   {
@@ -182,19 +181,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(
-      <FeatureFlags
-        flags={{
-          primer_react_segmented_control_tooltip: true,
-        }}
-      >
-        <SegmentedControl aria-label="File view">
-          {segmentData.map(({label, icon}) => (
-            <SegmentedControl.IconButton icon={icon} aria-label={label} key={label} />
-          ))}
-        </SegmentedControl>
-      </FeatureFlags>,
+      <SegmentedControl aria-label="File view">
+        {segmentData.map(({label, icon}) => (
+          <SegmentedControl.IconButton icon={icon} aria-label={label} key={label} />
+        ))}
+      </SegmentedControl>
     )
 
     for (const datum of segmentData) {
@@ -205,19 +198,13 @@ 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(
-      <FeatureFlags
-        flags={{
-          primer_react_segmented_control_tooltip: true,
-        }}
-      >
-        <SegmentedControl aria-label="File view">
-          {segmentData.map(({label, icon, description}) => (
-            <SegmentedControl.IconButton icon={icon} aria-label={label} description={description} key={label} />
-          ))}
-        </SegmentedControl>
-      </FeatureFlags>,
+      <SegmentedControl aria-label="File view">
+        {segmentData.map(({label, icon, description}) => (
+          <SegmentedControl.IconButton icon={icon} aria-label={label} description={description} key={label} />
+        ))}
+      </SegmentedControl>
     )
 
     for (const datum of segmentData) {
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
index 399f67be575..483b943e820 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,33 @@ export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<Segmen
   tooltipDirection,
   ...rest
 }) => {
-  const tooltipFlagEnabled = useFeatureFlag('primer_react_segmented_control_tooltip')
-  if (tooltipFlagEnabled) {
-    return (
-      <BoxWithFallback
-        as="li"
-        sx={sxProp}
-        className={clsx(classes.Item, className)}
-        data-selected={selected || undefined}
-      >
-        <Tooltip
-          type={description ? undefined : 'label'}
-          text={description ? description : ariaLabel}
-          direction={tooltipDirection}
-        >
-          <BoxWithFallback
-            as="button"
-            aria-current={selected}
-            // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
-            aria-label={description ? ariaLabel : undefined}
-            className={clsx(classes.Button, classes.IconButton)}
-            {...rest}
-          >
-            <span className={clsx(classes.Content, 'segmentedControl-content')}>
-              {isElement(Icon) ? Icon : <Icon />}
-            </span>
-          </BoxWithFallback>
-        </Tooltip>
-      </BoxWithFallback>
-    )
-  } else {
-    // This can be removed when primer_react_segmented_control_tooltip feature flag is GA-ed.
-    return (
-      <BoxWithFallback
-        as="li"
-        sx={sxProp}
-        className={clsx(classes.Item, className)}
-        data-selected={selected || undefined}
+  return (
+    <BoxWithFallback
+      as="li"
+      sx={sxProp}
+      className={clsx(classes.Item, className)}
+      data-selected={selected || undefined}
+    >
+      <Tooltip
+        type={description ? undefined : 'label'}
+        text={description ? description : ariaLabel}
+        direction={tooltipDirection}
       >
         <BoxWithFallback
           as="button"
-          aria-label={ariaLabel}
           aria-current={selected}
+          // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
+          aria-label={description ? ariaLabel : undefined}
           className={clsx(classes.Button, classes.IconButton)}
           {...rest}
         >
-          <span className={clsx(classes.Content, 'segmentedControl-content')}>{isElement(Icon) ? Icon : <Icon />}</span>
+          <span className={clsx(classes.Content, 'segmentedControl-content')}>
+            {isElement(Icon) ? Icon : <Icon />}
+          </span>
         </BoxWithFallback>
-      </BoxWithFallback>
-    )
-  }
+      </Tooltip>
+    </BoxWithFallback>
+  )
 }
 
 export default SegmentedControlIconButton

From 599b56f16900b312d1db97b4a394c6395c568e92 Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Tue, 8 Jul 2025 15:24:00 -0400
Subject: [PATCH 2/4] Create strong-mangos-rest.md

---
 .changeset/strong-mangos-rest.md | 5 +++++
 1 file changed, 5 insertions(+)
 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.

From a96b168f9538bffd70f78809771976df3898089f Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Fri, 18 Jul 2025 10:42:00 -0400
Subject: [PATCH 3/4] fix lint issues

---
 packages/react/src/SegmentedControl/SegmentedControl.test.tsx | 4 ++--
 .../react/src/SegmentedControl/SegmentedControlIconButton.tsx | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
index 6bda9a91343..06ab43e041c 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
@@ -149,7 +149,7 @@ describe('SegmentedControl', () => {
         {segmentData.map(({label, icon}) => (
           <SegmentedControl.IconButton icon={icon} aria-label={label} key={label} />
         ))}
-      </SegmentedControl>
+      </SegmentedControl>,
     )
 
     for (const datum of segmentData) {
@@ -166,7 +166,7 @@ describe('SegmentedControl', () => {
         {segmentData.map(({label, icon, description}) => (
           <SegmentedControl.IconButton icon={icon} aria-label={label} description={description} key={label} />
         ))}
-      </SegmentedControl>
+      </SegmentedControl>,
     )
 
     for (const datum of segmentData) {
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
index 483b943e820..5dcd7a8f326 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -54,9 +54,7 @@ export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<Segmen
           className={clsx(classes.Button, classes.IconButton)}
           {...rest}
         >
-          <span className={clsx(classes.Content, 'segmentedControl-content')}>
-            {isElement(Icon) ? Icon : <Icon />}
-          </span>
+          <span className={clsx(classes.Content, 'segmentedControl-content')}>{isElement(Icon) ? Icon : <Icon />}</span>
         </BoxWithFallback>
       </Tooltip>
     </BoxWithFallback>

From df6357928d57d6ff6b91fa2d02ce5ed6c8307ffc Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Fri, 18 Jul 2025 11:16:33 -0400
Subject: [PATCH 4/4] Fix test

---
 .../SegmentedControl/SegmentedControl.test.tsx    | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
index 06ab43e041c..9a7b2aac5c9 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
@@ -178,21 +178,6 @@ describe('SegmentedControl', () => {
     }
   })
 
-  it('renders icon button with aria-label and no tooltip', () => {
-    const {getByRole} = render(
-      <SegmentedControl aria-label="File view">
-        {segmentData.map(({label, icon}) => (
-          <SegmentedControl.IconButton icon={icon} aria-label={label} key={label} />
-        ))}
-      </SegmentedControl>,
-    )
-
-    for (const datum of segmentData) {
-      const labelledButton = getByRole('button', {name: datum.label})
-      expect(labelledButton).toHaveAttribute('aria-label', datum.label)
-    }
-  })
-
   it('calls onChange with index of clicked segment button', async () => {
     const user = userEvent.setup()
     const handleChange = vi.fn()