Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(Header): Remove CSS modules feature flag from Header #5510

Merged
merged 6 commits into from
Feb 14, 2025
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Remove CSS modules feature flag from Header
jonrohan committed Dec 18, 2024
commit 4c48ca215cd10425cef29ce22799a6a2fe3ea122
136 changes: 41 additions & 95 deletions packages/react/src/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,133 +1,79 @@
import type {Location, Pathname} from 'history'
import styled, {css} 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 React from 'react'
import {clsx} from 'clsx'
import classes from './Header.module.css'
import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
import {defaultSxProp} from '../utils/defaultSxProp'
import Box from '../Box'

type StyledHeaderProps = React.ComponentProps<'header'> & SxProp
type StyledHeaderItemProps = React.ComponentProps<'div'> & SxProp & {full?: boolean}
type StyledHeaderLinkProps = React.ComponentProps<'a'> & SxProp & {to?: Location | Pathname}

const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'

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},
{children, className, sx: sxProp = defaultSxProp, ...rest},
forwardRef,
) {
const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
if (sxProp !== defaultSxProp) {
return (
<Box as={'header'} sx={sxProp} ref={forwardRef} className={clsx(className, classes.Header)} {...rest}>
{children}
</Box>
)
}
return (
<StyledHeader ref={forwardRef} className={clsx(className, {[classes.Header]: enabled})} {...rest}>
<header ref={forwardRef} className={clsx(className, classes.Header)} {...rest}>
{children}
</StyledHeader>
</header>
)
}) 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},
const HeaderItem = React.forwardRef<HTMLDivElement, StyledHeaderItemProps>(function HeaderItem(
{children, className, sx: sxProp = defaultSxProp, ...rest},
forwardRef,
) {
const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
if (sxProp !== defaultSxProp) {
return (
<Box
as={'div'}
sx={sxProp}
ref={forwardRef}
className={clsx(className, classes.HeaderItem)}
data-full={rest.full}
{...rest}
>
{children}
</Box>
)
}
return (
<StyledHeaderItem
ref={forwardRef}
className={clsx(className, enabled && classes.HeaderItem)}
data-full={rest.full}
{...rest}
>
<div ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={rest.full} {...rest}>
{children}
</StyledHeaderItem>
</div>
)
})

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};
`,
)

const HeaderLink = React.forwardRef<HTMLElement, StyledHeaderLinkProps>(function HeaderLink(
{children, className, ...rest},
const HeaderLink = React.forwardRef<HTMLAnchorElement, StyledHeaderLinkProps>(function HeaderLink(
{children, className, sx: sxProp = defaultSxProp, ...rest},
forwardRef,
) {
const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
if (sxProp !== defaultSxProp) {
return (
<Box as={'a'} sx={sxProp} ref={forwardRef} className={clsx(className, classes.HeaderLink)} {...rest}>
{children}
</Box>
)
}
return (
<StyledHeaderLink ref={forwardRef} className={clsx(className, enabled && classes.HeaderLink)} {...rest}>
<a ref={forwardRef} className={clsx(className, classes.HeaderLink)} {...rest}>
{children}
</StyledHeaderLink>
</a>
)
})