From d040ec8d5b9ef083a71c5a1a272ef2d7699630f9 Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Mon, 28 Jul 2025 23:59:40 -0400
Subject: [PATCH] =?UTF-8?q?Revert=20"Clean=20up=20the=20feature=20flag=20f?=
 =?UTF-8?q?or=20`primer=5Freact=5Fsegmented=5Fcontrol=5Ftooltip=E2=80=A6"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 210aaa6e8c68c6f671290ff4fbc77515182f1833.
---
 .changeset/strong-mangos-rest.md              |  5 --
 .../src/FeatureFlags/DefaultFeatureFlags.ts   |  1 +
 .../SegmentedControl.test.tsx                 | 52 +++++++++++++----
 .../SegmentedControlIconButton.tsx            | 58 ++++++++++++++-----
 4 files changed, 83 insertions(+), 33 deletions(-)
 delete mode 100644 .changeset/strong-mangos-rest.md

diff --git a/.changeset/strong-mangos-rest.md b/.changeset/strong-mangos-rest.md
deleted file mode 100644
index fd1a71a67bc..00000000000
--- a/.changeset/strong-mangos-rest.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@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 0fe1a78ef99..6a6ee596c57 100644
--- a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
+++ b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
@@ -5,6 +5,7 @@ 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 9a7b2aac5c9..7506c9fc151 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
@@ -5,6 +5,7 @@ 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 = [
@@ -143,13 +144,19 @@ describe('SegmentedControl', () => {
     }
   })
 
-  it('renders icon button with tooltip as label', () => {
+  it('renders icon button with tooltip as label when feature flag is enabled', () => {
     const {getByRole, getByText} = render(
-      <SegmentedControl aria-label="File view">
-        {segmentData.map(({label, icon}) => (
-          <SegmentedControl.IconButton icon={icon} aria-label={label} key={label} />
-        ))}
-      </SegmentedControl>,
+      <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>,
     )
 
     for (const datum of segmentData) {
@@ -160,13 +167,19 @@ describe('SegmentedControl', () => {
     }
   })
 
-  it('renders icon button with tooltip description', () => {
+  it('renders icon button with tooltip description when feature flag is enabled', () => {
     const {getByRole, getByText} = render(
-      <SegmentedControl aria-label="File view">
-        {segmentData.map(({label, icon, description}) => (
-          <SegmentedControl.IconButton icon={icon} aria-label={label} description={description} key={label} />
-        ))}
-      </SegmentedControl>,
+      <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>,
     )
 
     for (const datum of segmentData) {
@@ -178,6 +191,21 @@ 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()
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
index 5dcd7a8f326..399f67be575 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -3,6 +3,7 @@ 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'
@@ -34,31 +35,56 @@ export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<Segmen
   tooltipDirection,
   ...rest
 }) => {
-  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}
+  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}
       >
         <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>
         </BoxWithFallback>
-      </Tooltip>
-    </BoxWithFallback>
-  )
+      </BoxWithFallback>
+    )
+  }
 }
 
 export default SegmentedControlIconButton