Remove CSS modules feature flag from SubNav

.changeset/gentle-sloths-march.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Removing the CSS modules feature flag from the SubNav component.

packages/react/src/SubNav/SubNav.dev.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import type {Meta} from '@storybook/react'
 import SubNav from './SubNav'
 import type {ComponentProps} from '../utils/types'
-import {FeatureFlags} from '../FeatureFlags'
 
 import styles from './SubNav.dev.module.css'
 
@@ -15,26 +14,19 @@ export default {
 } as Meta<ComponentProps<typeof SubNav>>
 
 export const WithCss = () => (
-  <FeatureFlags
-    flags={{
-      primer_react_css_modules_staff: true,
-      primer_react_css_modules_ga: true,
-    }}
-  >
-    <SubNav aria-label="Main" className={styles.SubNavDev}>
-      <SubNav.Links className={styles.SubNavLinksDev}>
-        <SubNav.Link href="#home" selected className={styles.SubNavLinkDev}>
-          Home
-        </SubNav.Link>
-        <SubNav.Link href="#documentation" className={styles.SubNavLinkDev}>
-          Documentation
-        </SubNav.Link>
-        <SubNav.Link href="#support" className={styles.SubNavLinkDev}>
-          Support
-        </SubNav.Link>
-      </SubNav.Links>
-    </SubNav>
-  </FeatureFlags>
+  <SubNav aria-label="Main" className={styles.SubNavDev}>
+    <SubNav.Links className={styles.SubNavLinksDev}>
+      <SubNav.Link href="#home" selected className={styles.SubNavLinkDev}>
+        Home
+      </SubNav.Link>
+      <SubNav.Link href="#documentation" className={styles.SubNavLinkDev}>
+        Documentation
+      </SubNav.Link>
+      <SubNav.Link href="#support" className={styles.SubNavLinkDev}>
+        Support
+      </SubNav.Link>
+    </SubNav.Links>
+  </SubNav>
 )
 
 export const WithSx = () => (
@@ -58,33 +50,26 @@ export const WithSx = () => (
 )
 
 export const WithSxAndCSS = () => (
-  <FeatureFlags
-    flags={{
-      primer_react_css_modules_staff: true,
-      primer_react_css_modules_ga: true,
-    }}
+  <SubNav
+    aria-label="Main"
+    sx={{p: 1, display: 'flex', border: '2px solid', borderColor: 'border.default'}}
+    className={styles.SubNavDev}
   >
-    <SubNav
-      aria-label="Main"
-      sx={{p: 1, display: 'flex', border: '2px solid', borderColor: 'border.default'}}
-      className={styles.SubNavDev}
-    >
-      <SubNav.Links sx={{m: 2}} className={styles.SubNavLinksDev}>
-        <SubNav.Link
-          href="#home"
-          selected
-          className={styles.SubNavLinkDev}
-          sx={{'&:is([data-selected])': {backgroundColor: 'danger.fg'}}}
-        >
-          Home
-        </SubNav.Link>
-        <SubNav.Link href="#documentation" className={styles.SubNavLinkDev}>
-          Documentation
-        </SubNav.Link>
-        <SubNav.Link href="#support" sx={{color: 'accent.fg', fontWeight: 'bold'}} className={styles.SubNavLinkDev}>
-          Support
-        </SubNav.Link>
-      </SubNav.Links>
-    </SubNav>
-  </FeatureFlags>
+    <SubNav.Links sx={{m: 2}} className={styles.SubNavLinksDev}>
+      <SubNav.Link
+        href="#home"
+        selected
+        className={styles.SubNavLinkDev}
+        sx={{'&:is([data-selected])': {backgroundColor: 'danger.fg'}}}
+      >
+        Home
+      </SubNav.Link>
+      <SubNav.Link href="#documentation" className={styles.SubNavLinkDev}>
+        Documentation
+      </SubNav.Link>
+      <SubNav.Link href="#support" sx={{color: 'accent.fg', fontWeight: 'bold'}} className={styles.SubNavLinkDev}>
+        Support
+      </SubNav.Link>
+    </SubNav.Links>
+  </SubNav>
 )

packages/react/src/SubNav/SubNav.tsx

@@ -1,17 +1,12 @@
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React from 'react'
-import styled from 'styled-components'
-import {get} from '../constants'
-import type {SxProp} from '../sx'
-import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
-import {useFeatureFlag} from '../FeatureFlags'
 
 import styles from './SubNav.module.css'
-
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
+import {defaultSxProp} from '../utils/defaultSxProp'
+import type {SxProp} from '../sx'
+import Box from '../Box'
 
 type StyledSubNavProps = React.ComponentProps<'nav'> & {
   actions?: React.ReactNode
@@ -20,150 +15,90 @@ type StyledSubNavProps = React.ComponentProps<'nav'> & {
   label?: string
 } & SxProp
 type StyledSubNavLinksProps = React.ComponentProps<'div'> & SxProp
-type StyledSubNavLinkProps = React.ComponentProps<'a'> & SxProp & {to?: To; selected?: boolean}
-
-// SubNav
-
-const StyledSubNav = toggleStyledComponent(
-  CSS_MODULES_FEATURE_FLAG,
-  'nav',
-  styled.nav<SxProp>`
-    display: flex;
-    justify-content: space-between;
-
-    .SubNav-body {
-      display: flex;
-      margin-bottom: -1px;
-
-      > * {
-        margin-left: ${get('space.2')};
-      }
-
-      > *:first-child {
-        margin-left: 0;
-      }
-    }
-
-    .SubNav-actions {
-      align-self: center;
-    }
-
-    ${sx};
-  `,
-)
+type StyledSubNavLinkProps = React.ComponentProps<'a'> & {to?: To; selected?: boolean} & SxProp
 
 const SubNav = React.forwardRef<HTMLElement, StyledSubNavProps>(function SubNav(
-  {actions, className, children, label, ...rest},
+  {actions, className, children, label, sx: sxProp = defaultSxProp, ...rest},
   forwardRef,
 ) {
-  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+  if (sxProp !== defaultSxProp) {
+    return (
+      <Box
+        as="nav"
+        ref={forwardRef}
+        sx={sxProp}
+        className={clsx(className, 'SubNav', styles.SubNav)}
+        aria-label={label}
+        {...rest}
+      >
+        <div className={clsx('SubNav-body', styles.Body)}>{children}</div>
+        {actions && <div className={clsx('SubNav-actions', styles.Actions)}>{actions}</div>}
+      </Box>
+    )
+  }
   return (
-    <StyledSubNav
-      ref={forwardRef}
-      className={clsx(className, 'SubNav', {[styles.SubNav]: enabled})}
-      aria-label={label}
-      {...rest}
-    >
-      <div className={clsx('SubNav-body', {[styles.Body]: enabled})}>{children}</div>
-      {actions && <div className={clsx('SubNav-actions', {[styles.Actions]: enabled})}>{actions}</div>}
-    </StyledSubNav>
+    <nav ref={forwardRef} className={clsx(className, 'SubNav', styles.SubNav)} aria-label={label} {...rest}>
+      <div className={clsx('SubNav-body', styles.Body)}>{children}</div>
+      {actions && <div className={clsx('SubNav-actions', styles.Actions)}>{actions}</div>}
+    </nav>
   )
 })
 SubNav.displayName = 'SubNav'
 
 // SubNav.Links
 
-const StyledSubNavLinks = toggleStyledComponent(
-  CSS_MODULES_FEATURE_FLAG,
-  'div',
-  styled.div<SubNavLinksProps>`
-    display: flex;
-    ${sx};
-  `,
+const SubNavLinks = React.forwardRef<HTMLDivElement, StyledSubNavLinksProps>(
+  ({children, className, sx: sxProp = defaultSxProp, ...rest}, forwardRef) => {
+    if (sxProp !== defaultSxProp) {
+      return (
+        <Box as="div" ref={forwardRef} sx={sxProp} className={clsx(className, styles.Links)} {...rest}>
+          {children}
+        </Box>
+      )
+    }
+    return (
+      <div ref={forwardRef} className={clsx(className, styles.Links)} {...rest}>
+        {children}
+      </div>
+    )
+  },
 )
-
-const SubNavLinks = React.forwardRef<HTMLElement, StyledSubNavLinksProps>(function SubNavLink(
-  {children, className, ...rest},
-  forwardRef,
-) {
-  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
-  return (
-    <StyledSubNavLinks ref={forwardRef} className={clsx(className, enabled && styles.Links)} {...rest}>
-      {children}
-    </StyledSubNavLinks>
-  )
-})
 SubNavLinks.displayName = 'SubNav.Links'
 
 // SubNav.Link
 
-const StyledSubNavLink = toggleStyledComponent(
-  CSS_MODULES_FEATURE_FLAG,
-  'a',
-  styled.a.attrs<StyledSubNavLinkProps>(props => ({
-    className: clsx('SubNav-item', props.selected && 'selected', props.className),
-  }))<StyledSubNavLinkProps>`
-    padding-left: ${get('space.3')};
-    padding-right: ${get('space.3')};
-    font-weight: ${get('fontWeights.semibold')};
-    font-size: ${get('fontSizes.1')};
-    line-height: 20px; //custom value for SubNav
-    min-height: 34px; //custom value for SubNav
-    color: ${get('colors.fg.default')};
-    text-align: center;
-    text-decoration: none;
-    border-top: 1px solid ${get('colors.border.default')};
-    border-bottom: 1px solid ${get('colors.border.default')};
-    border-right: 1px solid ${get('colors.border.default')};
-    display: flex;
-    align-items: center;
-
-    &:first-of-type {
-      border-top-left-radius: ${get('radii.2')};
-      border-bottom-left-radius: ${get('radii.2')};
-      border-left: 1px solid ${get('colors.border.default')};
-    }
-
-    &:last-of-type {
-      border-top-right-radius: ${get('radii.2')};
-      border-bottom-right-radius: ${get('radii.2')};
-    }
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-      background-color: ${get('colors.canvas.subtle')};
-      transition: background-color 0.2s ease;
+const SubNavLink = React.forwardRef<HTMLAnchorElement, StyledSubNavLinkProps>(
+  ({children, className, sx: sxProp = defaultSxProp, ...rest}, forwardRef) => {
+    if (sxProp !== defaultSxProp) {
+      return (
+        <Box
+          as="a"
+          ref={forwardRef}
+          sx={sxProp}
+          className={clsx(className, styles.Link)}
+          data-selected={rest.selected}
+          aria-current={rest.selected}
+          {...rest}
+        >
+          {children}
+        </Box>
+      )
     }
 
-    &.selected {
-      color: ${get('colors.fg.onEmphasis')};
-      background-color: ${get('colors.accent.emphasis')};
-      border-color: ${get('colors.accent.emphasis')};
-    }
-
-    ${sx};
-  `,
+    return (
+      <a
+        ref={forwardRef}
+        className={clsx(className, styles.Link)}
+        data-selected={rest.selected}
+        aria-current={rest.selected}
+        {...rest}
+      >
+        {children}
+      </a>
+    )
+  },
 )
 
-const SubNavLink = React.forwardRef<HTMLElement, StyledSubNavLinkProps>(function SubNavLink(
-  {children, className, ...rest},
-  forwardRef,
-) {
-  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
-  return (
-    <StyledSubNavLink
-      ref={forwardRef}
-      className={clsx(className, enabled && styles.Link)}
-      data-selected={rest.selected}
-      aria-current={rest.selected}
-      {...rest}
-    >
-      {children}
-    </StyledSubNavLink>
-  )
-})
-
 SubNavLink.displayName = 'SubNav.Link'
 
 export type SubNavProps = ComponentProps<typeof SubNav>

packages/react/src/__tests__/SubNav.test.tsx

@@ -3,31 +3,16 @@ import {SubNav} from '..'
 import {render, rendersClass, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
-import {FeatureFlags} from '../FeatureFlags'
 
 describe('SubNav', () => {
-  behavesAsComponent({Component: SubNav})
+  behavesAsComponent({Component: SubNav, options: {skipAs: true}})
 
   checkExports('SubNav', {
     default: SubNav,
   })
 
   it('should support `className` on the outermost element', () => {
-    const Element = () => <SubNav className={'test-class-name'} />
-    const FeatureFlagElement = () => {
-      return (
-        <FeatureFlags
-          flags={{
-            primer_react_css_modules_staff: true,
-            primer_react_css_modules_ga: true,
-          }}
-        >
-          <Element />
-        </FeatureFlags>
-      )
-    }
-    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
-    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<SubNav className={'test-class-name'} />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('should have no axe violations', async () => {

packages/react/src/__tests__/SubNavLink.test.tsx

@@ -5,7 +5,7 @@ import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
 
 describe('SubNav.Link', () => {
-  behavesAsComponent({Component: SubNav.Link})
+  behavesAsComponent({Component: SubNav.Link, options: {skipAs: true}})
 
   it('renders an <a> by default', () => {
     expect(render(<SubNav.Link />).type).toEqual('a')