feat(SubNav): Convert SubNav to CSS modules behind team feature flag (#…

…5202)

* feat(SubNav): Convert SubNav to CSS modules behind team feature flag

* update border color var

* update line height

* revert border var change

* add vrt tests

* test(vrt): update snapshots

---------

Co-authored-by: hussam-i-am <hussam-i-am@users.noreply.github.com>

.changeset/shiny-chefs-matter.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Update `SubNav` component to use CSS modules behind the feature flag primer_react_css_modules_team

e2e/components/SubNav.test.ts

@@ -36,4 +36,58 @@ test.describe('SubNav', () => {
       })
     }
   })
+
+  test.describe('Dev: With Sx', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-subnav-dev--with-sx',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`SubNav.Dev.WithSx.${theme}.png`)
+        })
+      })
+    }
+  })
+
+  test.describe('Dev: With CSS', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-subnav-dev--with-css',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`SubNav.Dev.WithCSS.${theme}.png`)
+        })
+      })
+    }
+  })
+
+  test.describe('Dev: With Sx and CSS', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-subnav-dev--with-sx-and-css',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`SubNav.Dev.WithSxAndCSS.${theme}.png`)
+        })
+      })
+    }
+  })
 })

packages/react/src/SubNav/SubNav.dev.module.css

@@ -0,0 +1,17 @@
+.SubNavDev {
+  padding: var(--base-size-4);
+  border: var(--borderWidth-thick) solid var(--borderColor-default);
+}
+
+.SubNavLinksDev {
+  margin: var(--base-size-8);
+}
+
+.SubNavLinkDev {
+  font-weight: var(--text-title-weight-large);
+  color: var(--fgColor-accent);
+
+  &:is([data-selected]) {
+    background-color: var(--bgColor-open-emphasis);
+  }
+}

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

@@ -0,0 +1,92 @@
+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'
+
+export default {
+  title: 'Components/SubNav/Dev',
+  component: SubNav,
+  subcomponents: {
+    'SubNav.Link': SubNav.Link,
+  },
+} as Meta<ComponentProps<typeof SubNav>>
+
+export const WithCss = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      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>
+)
+
+export const WithSx = () => (
+  <SubNav aria-label="Main" sx={{p: 1, display: 'flex', border: '2px solid', borderColor: 'border.default'}}>
+    <SubNav.Links sx={{m: 2}}>
+      <SubNav.Link
+        href="#home"
+        selected
+        sx={{color: 'accent.fg', fontWeight: 'bold', '&:is([data-selected])': {backgroundColor: 'danger.fg'}}}
+      >
+        Home
+      </SubNav.Link>
+      <SubNav.Link href="#documentation" sx={{color: 'accent.fg', fontWeight: 'bold'}}>
+        Documentation
+      </SubNav.Link>
+      <SubNav.Link href="#support" sx={{color: 'accent.fg', fontWeight: 'bold'}}>
+        Support
+      </SubNav.Link>
+    </SubNav.Links>
+  </SubNav>
+)
+
+export const WithSxAndCSS = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      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.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>
+)

packages/react/src/SubNav/SubNav.module.css

@@ -0,0 +1,69 @@
+.SubNav {
+  display: flex;
+  justify-content: space-between;
+}
+
+.Body {
+  display: flex;
+  /* stylelint-disable-next-line primer/spacing */
+  margin-bottom: -1px;
+
+  & > * {
+    margin-left: var(--base-size-8);
+  }
+
+  & > *:first-child {
+    margin-left: 0;
+  }
+}
+
+.Actions {
+  align-self: center;
+}
+
+.Links {
+  display: flex;
+}
+
+.Link {
+  display: flex;
+  min-height: 34px; /* custom values for SubNav */
+  padding-right: var(--base-size-16);
+  padding-left: var(--base-size-16);
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-medium);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 20px; /* custom values for SubNav */
+  color: var(--fgColor-default);
+  text-align: center;
+  text-decoration: none;
+  border-top: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-right: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+  align-items: center;
+
+  &:first-of-type {
+    border-left: var(--borderWidth-thin) solid var(--borderColor-default);
+    border-top-left-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }
+
+  &:last-of-type {
+    border-top-right-radius: var(--borderRadius-medium);
+    border-bottom-right-radius: var(--borderRadius-medium);
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: var(--bgColor-muted);
+    transition: background-color 0.2s ease;
+  }
+
+  &:is([data-selected]) {
+    color: var(--fgColor-onEmphasis);
+    background-color: var(--bgColor-accent-emphasis);
+    /* stylelint-disable-next-line primer/colors */
+    border-color: var(--bgColor-accent-emphasis);
+  }
+}