From 4c48ca215cd10425cef29ce22799a6a2fe3ea122 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 18 Dec 2024 22:35:50 +0000
Subject: [PATCH 1/3] Remove CSS modules feature flag from Header

---
 packages/react/src/Header/Header.tsx | 136 ++++++++-------------------
 1 file changed, 41 insertions(+), 95 deletions(-)

diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 33c7a6b7b0d..785c9abc82c 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -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>
   )
 })
 

From 956014f075f330645eacee33cc0048b779baefd3 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 19 Dec 2024 19:20:23 +0000
Subject: [PATCH 2/3] Adjust Header for as prop

---
 packages/react/src/Header/Header.tsx         | 36 +++++++++-----------
 packages/react/src/__tests__/Header.test.tsx |  2 +-
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 785c9abc82c..0d5c2c6efc8 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -1,6 +1,5 @@
 import type {Location, Pathname} from 'history'
 import type {SxProp} from '../sx'
-import type {ComponentProps} from '../utils/types'
 import React from 'react'
 import {clsx} from 'clsx'
 import classes from './Header.module.css'
@@ -8,17 +7,17 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../uti
 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}
+export type HeaderProps = React.ComponentProps<'header'> & SxProp & {as?: React.ElementType}
+export type HeaderItemProps = React.ComponentProps<'div'> & SxProp & {full?: boolean}
+export type HeaderLinkProps = React.ComponentProps<'a'> & SxProp & {to?: Location | Pathname; as?: React.ElementType}
 
-const Header = React.forwardRef<HTMLElement, StyledHeaderProps>(function Header(
-  {children, className, sx: sxProp = defaultSxProp, ...rest},
+const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header(
+  {children, className, sx: sxProp = defaultSxProp, as = 'header', ...rest},
   forwardRef,
 ) {
-  if (sxProp !== defaultSxProp) {
+  if (sxProp !== defaultSxProp || as !== 'header') {
     return (
-      <Box as={'header'} sx={sxProp} ref={forwardRef} className={clsx(className, classes.Header)} {...rest}>
+      <Box as={as} sx={sxProp} ref={forwardRef} className={clsx(className, classes.Header)} {...rest}>
         {children}
       </Box>
     )
@@ -28,12 +27,12 @@ const Header = React.forwardRef<HTMLElement, StyledHeaderProps>(function Header(
       {children}
     </header>
   )
-}) as PolymorphicForwardRefComponent<'header', StyledHeaderProps>
+}) as PolymorphicForwardRefComponent<'header', HeaderProps>
 
 Header.displayName = 'Header'
 
-const HeaderItem = React.forwardRef<HTMLDivElement, StyledHeaderItemProps>(function HeaderItem(
-  {children, className, sx: sxProp = defaultSxProp, ...rest},
+const HeaderItem = React.forwardRef<HTMLDivElement, HeaderItemProps>(function HeaderItem(
+  {children, className, sx: sxProp = defaultSxProp, full, ...rest},
   forwardRef,
 ) {
   if (sxProp !== defaultSxProp) {
@@ -43,7 +42,7 @@ const HeaderItem = React.forwardRef<HTMLDivElement, StyledHeaderItemProps>(funct
         sx={sxProp}
         ref={forwardRef}
         className={clsx(className, classes.HeaderItem)}
-        data-full={rest.full}
+        data-full={full}
         {...rest}
       >
         {children}
@@ -51,7 +50,7 @@ const HeaderItem = React.forwardRef<HTMLDivElement, StyledHeaderItemProps>(funct
     )
   }
   return (
-    <div ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={rest.full} {...rest}>
+    <div ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={full} {...rest}>
       {children}
     </div>
   )
@@ -59,13 +58,13 @@ const HeaderItem = React.forwardRef<HTMLDivElement, StyledHeaderItemProps>(funct
 
 HeaderItem.displayName = 'Header.Item'
 
-const HeaderLink = React.forwardRef<HTMLAnchorElement, StyledHeaderLinkProps>(function HeaderLink(
-  {children, className, sx: sxProp = defaultSxProp, ...rest},
+const HeaderLink = React.forwardRef<HTMLAnchorElement, HeaderLinkProps>(function HeaderLink(
+  {children, className, sx: sxProp = defaultSxProp, as = 'a', ...rest},
   forwardRef,
 ) {
-  if (sxProp !== defaultSxProp) {
+  if (sxProp !== defaultSxProp || as !== 'a') {
     return (
-      <Box as={'a'} sx={sxProp} ref={forwardRef} className={clsx(className, classes.HeaderLink)} {...rest}>
+      <Box as={as} sx={sxProp} ref={forwardRef} className={clsx(className, classes.HeaderLink)} {...rest}>
         {children}
       </Box>
     )
@@ -79,7 +78,4 @@ const HeaderLink = React.forwardRef<HTMLAnchorElement, StyledHeaderLinkProps>(fu
 
 HeaderLink.displayName = 'Header.Link'
 
-export type HeaderProps = ComponentProps<typeof Header>
-export type HeaderLinkProps = ComponentProps<typeof HeaderLink>
-export type HeaderItemProps = ComponentProps<typeof HeaderItem>
 export default Object.assign(Header, {Link: HeaderLink, Item: HeaderItem})
diff --git a/packages/react/src/__tests__/Header.test.tsx b/packages/react/src/__tests__/Header.test.tsx
index e084cc9e8c6..02673ed76da 100644
--- a/packages/react/src/__tests__/Header.test.tsx
+++ b/packages/react/src/__tests__/Header.test.tsx
@@ -13,7 +13,7 @@ describe('Header', () => {
   })
 
   describe('Header.Item', () => {
-    behavesAsComponent({Component: Header.Item})
+    behavesAsComponent({Component: Header.Item, options: {skipAs: true}})
 
     it('accepts and applies className', () => {
       expect(render(<Header.Item className="primer" />).props.className).toContain('primer')

From da74370cddc2e332dbcfb9e3afe98a2a3640be40 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 19 Dec 2024 11:34:48 -0800
Subject: [PATCH 3/3] Create shaggy-comics-whisper.md

---
 .changeset/shaggy-comics-whisper.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/shaggy-comics-whisper.md

diff --git a/.changeset/shaggy-comics-whisper.md b/.changeset/shaggy-comics-whisper.md
new file mode 100644
index 00000000000..a665f985634
--- /dev/null
+++ b/.changeset/shaggy-comics-whisper.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove CSS modules feature flag from Header