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

.changeset/odd-frogs-listen.md

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

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

@@ -0,0 +1,11 @@
+.HeaderDev {
+ background-color: var(--label-olive-bgColor-active);
+}
+
+.HeaderDevItem {
+ padding-left: var(--base-size-24);
+}
+
+.HeaderDevLink {
+ color: var(--color-prettylights-syntax-markup-inserted-text);
+}

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

@@ -0,0 +1,76 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import {MarkGithubIcon} from '@primer/octicons-react'
+
+import Header from './Header'
+import Avatar from '../Avatar'
+import Octicon from '../Octicon'
+
+import classes from './Header.dev.module.css'
+import {FeatureFlags} from '../FeatureFlags'
+
+export default {
+ title: 'Components/Header/Dev',
+ component: Header,
+} as Meta<typeof Header>
+
+export const WithCss = () => (
+ <FeatureFlags
+ flags={{
+ primer_react_css_modules_team: true,
+ primer_react_css_modules_staff: true,
+ primer_react_css_modules_ga: true,
+ }}
+ >
+ <Header as="summary" className={classes.HeaderDev}>
+ <Header.Item id="github">
+ <Header.Link href="#" className={classes.HeaderDevLink}>
+ <Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
+ <span>GitHub</span>
+ </Header.Link>
+ </Header.Item>
+ <Header.Item full>Menu</Header.Item>
+ <Header.Item className={classes.HeaderDevItem}>
+ <Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
+ </Header.Item>
+ </Header>
+ </FeatureFlags>
+)
+
+export const WithSx = () => (
+ <Header as="summary" sx={{backgroundColor: 'blue'}}>
+ <Header.Item id="github">
+ <Header.Link href="#" sx={{fontSize: 3}}>
+ <Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
+ <span>GitHub</span>
+ </Header.Link>
+ </Header.Item>
+ <Header.Item full>Menu</Header.Item>
+ <Header.Item sx={{mr: 2}}>
+ <Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
+ </Header.Item>
+ </Header>
+)
+
+export const WithSxAndCSS = () => (
+ <FeatureFlags
+ flags={{
+ primer_react_css_modules_team: true,
+ primer_react_css_modules_staff: true,
+ primer_react_css_modules_ga: true,
+ }}
+ >
+ <Header as="summary" className={classes.HeaderDev} sx={{backgroundColor: 'orange'}}>
+ <Header.Item id="github">
+ <Header.Link href="#" className={classes.HeaderDevLink} sx={{p: 0, color: 'black'}}>
+ <Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
+ <span>GitHub</span>
+ </Header.Link>
+ </Header.Item>
+ <Header.Item full>Menu</Header.Item>
+ <Header.Item className={classes.HeaderDevItem} sx={{m: 0}}>
+ <Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
+ </Header.Item>
+ </Header>
+ </FeatureFlags>
+)

packages/react/src/Header/Header.module.css

@@ -0,0 +1,39 @@
+.Header {
+ z-index: 32;
+ display: flex;
+ padding: var(--base-size-16);
+ overflow: auto;
+ font-size: var(--text-body-size-medium);
+ line-height: var(--text-title-lineHeight-large);
+ color: var(--header-fgColor-default);
+ background-color: var(--header-bgColor);
+ align-items: center;
+ flex-wrap: nowrap;
+}
+
+.HeaderItem {
+ display: flex;
+ margin-right: var(--base-size-16);
+ align-self: stretch;
+ align-items: center;
+ flex-wrap: nowrap;
+
+ &:where([data-full]) {
+ flex: auto;
+ }
+}
+
+.HeaderLink {
+ display: flex;
+ font-weight: var(--text-title-weight-large);
+ color: var(--header-fgColor-logo);
+ text-decoration: none;
+ white-space: nowrap;
+ cursor: pointer;
+ align-items: center;
+
+ &:hover,
+ &:focus {
+ color: var(--header-fgColor-default);
+ }
+}

packages/react/src/Header/Header.tsx

@@ -4,68 +4,132 @@ 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 React from 'react'
+import {clsx} from 'clsx'
+import classes from './Header.module.css'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
-type StyledHeaderItemProps = {full?: boolean} & SxProp
-type StyledHeaderProps = SxProp
-type StyledHeaderLinkProps = {to?: Location | Pathname} & SxProp
-
-const Header = styled.header<StyledHeaderProps>`
- z-index: 32;
- display: flex;
- padding: ${get('space.3')};
- font-size: ${get('fontSizes.1')};
- line-height: ${get('lineHeights.default')};
- color: ${get('colors.header.text')};
- background-color: ${get('colors.header.bg')};
- align-items: center;
- flex-wrap: nowrap;
- overflow: auto;
-
- ${sx};
-`
-const HeaderItem = styled.div<StyledHeaderItemProps>`
- display: flex;
- margin-right: ${get('space.3')};
- align-self: stretch;
- align-items: center;
- flex-wrap: nowrap;
-
- ${({full}) =>
- full &&
- css`
- flex: auto;
- `};
-
- ${sx};
-`
+type StyledHeaderProps = React.ComponentProps<'header'> & SxProp
+type StyledHeaderItemProps = React.ComponentProps<'div'> & SxProp & {full?: boolean}
+type StyledHeaderLinkProps = React.ComponentProps<'a'> & SxProp & {to?: Location | Pathname}
 
-HeaderItem.displayName = 'Header.Item'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 
-const HeaderLink = styled.a.attrs<StyledHeaderLinkProps>(({to}) => {
- const isReactRouter = typeof to === 'string'
- if (isReactRouter) {
- // according to their docs, NavLink supports aria-current:
- // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
- return {'aria-current': 'page'}
- } else {
- return {}
- }
-})<StyledHeaderLinkProps>`
- font-weight: ${get('fontWeights.bold')};
- color: ${get('colors.header.logo')};
- white-space: nowrap;
- cursor: pointer;
- text-decoration: none;
- display: flex;
- align-items: center;
-
- &:hover,
- &:focus {
+const StyledHeader = toggleStyledComponent(
+ CSS_MODULES_FEATURE_FLAG,
+ 'header',
+ styled.header<StyledHeaderProps>`
+ z-index: 32;
+ display: flex;
+ padding: ${get('space.3')};
+ font-size: ${get('fontSizes.1')};
+ line-height: ${get('lineHeights.default')};
  color: ${get('colors.header.text')};
- }
+ background-color: ${get('colors.header.bg')};
+ align-items: center;
+ flex-wrap: nowrap;
+ overflow: auto;
+
+ ${sx};
+ `,
+)
+
+const Header = React.forwardRef<HTMLElement, StyledHeaderProps>(function Header(
+ {children, className, ...rest},
+ forwardRef,
+) {
+ const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+ return (
+ <StyledHeader ref={forwardRef} className={clsx(className, {[classes.Header]: enabled})} {...rest}>
+ {children}
+ </StyledHeader>
+ )
+}) as PolymorphicForwardRefComponent<'header', StyledHeaderProps>
+
+Header.displayName = 'Header'
+
+const StyledHeaderItem = toggleStyledComponent(
+ CSS_MODULES_FEATURE_FLAG,
+ 'div',
+ styled.div<StyledHeaderItemProps>`
+ display: flex;
+ margin-right: ${get('space.3')};
+ align-self: stretch;
+ align-items: center;
+ flex-wrap: nowrap;
+
+ ${({full}) =>
+ full &&
+ css`
+ flex: auto;
+ `};
+
+ ${sx};
+ `,
+)
+
+const HeaderItem = React.forwardRef<HTMLElement, StyledHeaderItemProps>(function HeaderItem(
+ {children, className, ...rest},
+ forwardRef,
+) {
+ const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+ return (
+ <StyledHeaderItem
+ ref={forwardRef}
+ className={clsx(className, enabled && classes.HeaderItem)}
+ data-full={rest.full}
+ {...rest}
+ >
+ {children}
+ </StyledHeaderItem>
+ )
+})
+
+HeaderItem.displayName = 'Header.Item'
+
+const StyledHeaderLink = toggleStyledComponent(
+ CSS_MODULES_FEATURE_FLAG,
+ 'a',
+ styled.a.attrs<StyledHeaderLinkProps>(({to}) => {
+ const isReactRouter = typeof to === 'string'
+ if (isReactRouter) {
+ // according to their docs, NavLink supports aria-current:
+ // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
+ return {'aria-current': 'page'}
+ } else {
+ return {}
+ }
+ })<StyledHeaderLinkProps>`
+ font-weight: ${get('fontWeights.bold')};
+ color: ${get('colors.header.logo')};
+ white-space: nowrap;
+ cursor: pointer;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+
+ &:hover,
+ &:focus {
+ color: ${get('colors.header.text')};
+ }
+
+ ${sx};
+ `,
+)
 
- ${sx};
-`
+const HeaderLink = React.forwardRef<HTMLElement, StyledHeaderLinkProps>(function HeaderLink(
+ {children, className, ...rest},
+ forwardRef,
+) {
+ const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+ return (
+ <StyledHeaderLink ref={forwardRef} className={clsx(className, enabled && classes.HeaderLink)} {...rest}>
+ {children}
+ </StyledHeaderLink>
+ )
+})
 
 HeaderLink.displayName = 'Header.Link'