chore: Move components from staff CSS modules feature flag to ga (#5710)

jonrohan · web-flow · commit b1cdc6337d0b · 2025-02-21T18:29:21.000Z
* Moving Autocomplete to CSS modules ga flag

* Move AvatarStack from staff to ga feature flag

* Moving ConfirmationDialog to `primer_react_css_modules_ga` feature flag

* Moving DataTable to `primer_react_css_modules_ga` feature flag

* Moving UnderlinePanels to `primer_react_css_modules_ga` feature flag

* Moving InlineMessage to `primer_react_css_modules_ga` feature flag

* Moving KeybindingHint to `primer_react_css_modules_ga` feature flag

* Moving NavList to `primer_react_css_modules_ga` feature flag

* Moving Overlay to `primer_react_css_modules_ga` feature flag

* Moving PageHeader to `primer_react_css_modules_ga` feature flag

* Moving PageLayout to `primer_react_css_modules_ga` feature flag

* Moving Pagination to `primer_react_css_modules_ga` feature flag

* Moving SegmentedControl to `primer_react_css_modules_ga` feature flag

* Moving SelectPanel to `primer_react_css_modules_ga` feature flag

* Moving SubNav to `primer_react_css_modules_ga` feature flag

* Moving Token to `primer_react_css_modules_ga` feature flag

* Moving Tooltip to `primer_react_css_modules_ga` feature flag

* Moving BaseStyles to `primer_react_css_modules_ga` feature flag

* Moving SideNav to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-1.md b/.changeset/strong-cobras-refuse-1.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving AvatarStack to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-10.md b/.changeset/strong-cobras-refuse-10.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving PageLayout to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-11.md b/.changeset/strong-cobras-refuse-11.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving Pagination to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-12.md b/.changeset/strong-cobras-refuse-12.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving SegmentedControl to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-13.md b/.changeset/strong-cobras-refuse-13.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving SelectPanel to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-14.md b/.changeset/strong-cobras-refuse-14.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving SubNav to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-15.md b/.changeset/strong-cobras-refuse-15.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving Token to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-16.md b/.changeset/strong-cobras-refuse-16.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving Tooltip to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-17.md b/.changeset/strong-cobras-refuse-17.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving BaseStyles to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-18.md b/.changeset/strong-cobras-refuse-18.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving SideNav to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-2.md b/.changeset/strong-cobras-refuse-2.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving ConfirmationDialog to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-3.md b/.changeset/strong-cobras-refuse-3.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving DataTable to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-4.md b/.changeset/strong-cobras-refuse-4.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving UnderlinePanels to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-5.md b/.changeset/strong-cobras-refuse-5.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving InlineMessage to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-6.md b/.changeset/strong-cobras-refuse-6.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving KeybindingHint to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-7.md b/.changeset/strong-cobras-refuse-7.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving NavList to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-8.md b/.changeset/strong-cobras-refuse-8.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving Overlay to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse-9.md b/.changeset/strong-cobras-refuse-9.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving PageHeader to `primer_react_css_modules_ga` feature flag
diff --git a/.changeset/strong-cobras-refuse.md b/.changeset/strong-cobras-refuse.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving Autocomplete to `primer_react_css_modules_ga` feature flag
diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.tsx b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
@@ -122,7 +122,7 @@ export type AutocompleteMenuInternalProps<T extends AutocompleteItemProps> = {
   ['aria-labelledby']: string
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 /**
  * Announces a message to screen readers at a slowed-down rate. This is useful when you want to announce don't want to
diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
@@ -50,7 +50,7 @@ function AutocompleteOverlay({
     setShowMenu(false)
   }, [setShowMenu])
 
-  const enabled = useFeatureFlag('primer_react_css_modules_staff')
+  const enabled = useFeatureFlag('primer_react_css_modules_ga')
 
   if (typeof window === 'undefined') {
     return null
diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx
@@ -22,7 +22,7 @@ type StyledAvatarStackWrapperProps = {
   count?: number
 } & SxProp
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 const AvatarStackWrapper = toggleStyledComponent(
   CSS_MODULES_FEATURE_FLAG,
diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx
@@ -14,7 +14,7 @@ import classes from './BaseStyles.module.css'
 // load polyfill for :focus-visible
 import 'focus-visible'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>`
   * { box-sizing: border-box; }
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
@@ -46,7 +46,7 @@ export interface ConfirmationDialogProps {
   confirmButtonType?: 'normal' | 'primary' | 'danger'
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 const StyledConfirmationHeader = toggleStyledComponent(
   CSS_MODULES_FEATURE_FLAG,
diff --git a/packages/react/src/DataTable/Table.tsx b/packages/react/src/DataTable/Table.tsx
@@ -18,7 +18,7 @@ import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import {Button} from '../internal/components/ButtonReset'
 import classes from './Table.module.css'
 
-const cssModulesFlag = 'primer_react_css_modules_staff'
+const cssModulesFlag = 'primer_react_css_modules_ga'
 
 // ----------------------------------------------------------------------------
 // Table
diff --git a/packages/react/src/InlineMessage/InlineMessage.tsx b/packages/react/src/InlineMessage/InlineMessage.tsx
@@ -9,7 +9,7 @@ import classes from './InlineMessage.module.css'
 import type {SxProp} from '../sx'
 type MessageVariant = 'critical' | 'success' | 'unavailable' | 'warning'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> &
   SxProp & {
diff --git a/packages/react/src/KeybindingHint/KeybindingHint.tsx b/packages/react/src/KeybindingHint/KeybindingHint.tsx
@@ -10,7 +10,7 @@ import {clsx} from 'clsx'
 
 /** `kbd` element with style resets. */
 const Kbd = ({children, className}: {children: ReactNode; className?: string}) => {
-  const enabled = useFeatureFlag('primer_react_css_modules_staff')
+  const enabled = useFeatureFlag('primer_react_css_modules_ga')
 
   return (
     <Text
diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx
@@ -39,7 +39,7 @@ export type NavListProps = {
 } & SxProp &
   React.ComponentProps<'nav'>
 
-const NavBox = toggleStyledComponent('primer_react_css_modules_staff', 'nav', styled.nav<SxProp>(sx))
+const NavBox = toggleStyledComponent('primer_react_css_modules_ga', 'nav', styled.nav<SxProp>(sx))
 
 const Root = React.forwardRef<HTMLElement, NavListProps>(({children, ...props}, ref) => {
   return (
@@ -70,7 +70,7 @@ export type NavListItemProps = {
 
 const Item = React.forwardRef<HTMLAnchorElement, NavListItemProps>(
   ({'aria-current': ariaCurrent, children, defaultOpen, sx: sxProp = defaultSxProp, ...props}, ref) => {
-    const enabled = useFeatureFlag('primer_react_css_modules_staff')
+    const enabled = useFeatureFlag('primer_react_css_modules_ga')
     const {depth} = React.useContext(SubNavContext)
 
     // Get SubNav from children
@@ -161,7 +161,7 @@ function ItemWithSubNav({
     }
   }, [subNav, buttonId])
 
-  const enabled = useFeatureFlag('primer_react_css_modules_staff')
+  const enabled = useFeatureFlag('primer_react_css_modules_ga')
   if (enabled) {
     if (sxProp !== defaultSxProp) {
       return (
@@ -255,7 +255,7 @@ const SubNavContext = React.createContext<{depth: number}>({depth: 0})
 const SubNav = React.forwardRef(({children, sx: sxProp = defaultSxProp}: NavListSubNavProps, forwardedRef) => {
   const {buttonId, subNavId, isOpen} = React.useContext(ItemWithSubNavContext)
   const {depth} = React.useContext(SubNavContext)
-  const enabled = useFeatureFlag('primer_react_css_modules_staff')
+  const enabled = useFeatureFlag('primer_react_css_modules_ga')
   if (!buttonId || !subNavId) {
     // eslint-disable-next-line no-console
     console.error('NavList.SubNav must be a child of a NavList.Item')
@@ -362,7 +362,7 @@ export type NavListGroupProps = {
 
 const defaultSx = {}
 const Group: React.FC<NavListGroupProps> = ({title, children, sx: sxProp = defaultSx, ...props}) => {
-  const enabled = useFeatureFlag('primer_react_css_modules_staff')
+  const enabled = useFeatureFlag('primer_react_css_modules_ga')
 
   if (enabled) {
     if (sxProp !== defaultSx) {
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
@@ -18,7 +18,7 @@ import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import classes from './Overlay.module.css'
 import {clsx} from 'clsx'
 
-const CSS_MODULES_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FLAG = 'primer_react_css_modules_ga'
 
 type StyledOverlayProps = {
   width?: keyof typeof widthMap
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
@@ -66,7 +66,7 @@ const hiddenOnNarrow = {
   wide: false,
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 // Root
 // -----------------------------------------------------------------------------
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
@@ -65,7 +65,7 @@ export type PageLayoutProps = {
   style?: React.CSSProperties
 } & SxProp
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 const containerWidths = {
   full: '100%',
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
@@ -12,7 +12,7 @@ import {useFeatureFlag} from '../FeatureFlags'
 import {clsx} from 'clsx'
 import classes from './Pagination.module.css'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 const getViewportRangesToHidePages = (showPages: PaginationProps['showPages']) => {
   if (showPages && typeof showPages !== 'boolean') {
diff --git a/packages/react/src/SegmentedControl/getSegmentedControlStyles.ts b/packages/react/src/SegmentedControl/getSegmentedControlStyles.ts
@@ -1,7 +1,7 @@
 import {get} from '../constants'
 import type {SegmentedControlButtonProps} from './SegmentedControlButton'
 
-export const SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+export const SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 export const directChildLayoutAdjustments = {
   ':first-child': {
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -343,7 +343,7 @@ export function SelectPanel({
     }
   }, [open, dataLoadedOnce, onFilterChange, filterValue, items, loadingManagedExternally, listContainerElement])
 
-  const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+  const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
   const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
 
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
diff --git a/packages/react/src/SideNav.tsx b/packages/react/src/SideNav.tsx
@@ -12,7 +12,7 @@ import {toggleStyledComponent} from './internal/utils/toggleStyledComponent'
 import classes from './SideNav.module.css'
 import {useFeatureFlag} from './FeatureFlags'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 type SideNavBaseProps = {
   as?: React.ElementType
diff --git a/packages/react/src/SubNav/SubNav.tsx b/packages/react/src/SubNav/SubNav.tsx
@@ -11,7 +11,7 @@ import {useFeatureFlag} from '../FeatureFlags'
 
 import styles from './SubNav.module.css'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 type StyledSubNavProps = React.ComponentProps<'nav'> & {
   actions?: React.ReactNode
diff --git a/packages/react/src/Token/AvatarToken.tsx b/packages/react/src/Token/AvatarToken.tsx
@@ -16,7 +16,7 @@ export interface AvatarTokenProps extends TokenBaseProps {
   avatarSrc: string
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 const AvatarContainer = toggleStyledComponent(
   CSS_MODULES_FEATURE_FLAG,
diff --git a/packages/react/src/Token/IssueLabelToken.tsx b/packages/react/src/Token/IssueLabelToken.tsx
@@ -19,7 +19,7 @@ export interface IssueLabelTokenProps extends TokenBaseProps {
   fillColor?: string
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 const tokenBorderWidthPx = 1
 
 const lightModeStyles = {
diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx
@@ -23,7 +23,7 @@ export interface TokenProps extends TokenBaseProps, SxProp {
   leadingVisual?: React.ElementType
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 const tokenBorderWidthPx = 1
 
diff --git a/packages/react/src/Token/TokenBase.tsx b/packages/react/src/Token/TokenBase.tsx
@@ -116,7 +116,7 @@ const variants = variant<
   },
 })
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 const StyledTokenBase = toggleStyledComponent(
   CSS_MODULES_FEATURE_FLAG,
diff --git a/packages/react/src/Token/_RemoveTokenButton.tsx b/packages/react/src/Token/_RemoveTokenButton.tsx
@@ -18,7 +18,7 @@ interface TokenButtonProps extends SxProp {
   isParentInteractive?: boolean
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 const variants = variant<{height: string; width: string}, TokenSizeKeys>({
   prop: 'size',
diff --git a/packages/react/src/Token/_TokenTextContainer.tsx b/packages/react/src/Token/_TokenTextContainer.tsx
@@ -6,7 +6,7 @@ import classes from './_TokenTextContainer.module.css'
 import {useFeatureFlag} from '../FeatureFlags'
 import {clsx} from 'clsx'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 const StyledTokenTextContainer = toggleStyledComponent(
   CSS_MODULES_FEATURE_FLAG,
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -17,7 +17,7 @@ import {KeybindingHint, type KeybindingHintProps} from '../KeybindingHint'
 import VisuallyHidden from '../_VisuallyHidden'
 import useSafeTimeout from '../hooks/useSafeTimeout'
 
-const CSS_MODULE_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULE_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 const animationStyles = `
   animation-name: tooltip-appear;
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
@@ -29,7 +29,7 @@ import classes from './UnderlinePanels.module.css'
 import {toggleStyledComponent} from '../../internal/utils/toggleStyledComponent'
 import {clsx} from 'clsx'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 export type UnderlinePanelsProps = {
   /**
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -18,7 +18,7 @@ import {clsx} from 'clsx'
 // The gap between the list items. It is a constant because the gap is used to calculate the possible number of items that can fit in the container.
 export const GAP = 8
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 const StyledComponentUnderlineWrapper = toggleStyledComponent(
   CSS_MODULES_FEATURE_FLAG,
