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

.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);
+ }
+}