chore(Breadcrumbs): Remove the CSS modules feature flag from the Breadcrumbs component (#5874)

Author: jonrohan

.changeset/long-numbers-vanish.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Remove the CSS modules feature flag from the Breadcrumbs component

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

@@ -1,57 +1,13 @@
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React from 'react'
-import styled from 'styled-components'
-import Box from '../Box'
-import {get} from '../constants'
 import type {SxProp} from '../sx'
-import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
 import classes from './Breadcrumbs.module.css'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
-import {useFeatureFlag} from '../FeatureFlags'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {toggleSxComponent} from '../internal/utils/toggleSxComponent'
 
 const SELECTED_CLASS = 'selected'
-const CSS_MODULES_FLAG = 'primer_react_css_modules_ga'
-
-const Wrapper = toggleStyledComponent(
-  CSS_MODULES_FLAG,
-  'li',
-  styled.li`
-    display: inline-block;
-    white-space: nowrap;
-    list-style: none;
-    &::after {
-      font-size: ${get('fontSizes.1')};
-      content: '';
-      display: inline-block;
-      height: 0.8em;
-      margin: 0 0.5em;
-      border-right: 0.1em solid;
-      border-color: ${get('colors.fg.muted')};
-      transform: rotate(15deg) translateY(0.0625em);
-    }
-    &:first-child {
-      margin-left: 0;
-    }
-    &:last-child {
-      &::after {
-        content: none;
-      }
-    }
-  `,
-)
-
-const BreadcrumbsBase = toggleStyledComponent(
-  CSS_MODULES_FLAG,
-  'nav',
-  styled.nav<SxProp>`
-    display: flex;
-    justify-content: space-between;
-    ${sx};
-  `,
-)
 
 export type BreadcrumbsProps = React.PropsWithChildren<
   {
@@ -60,31 +16,16 @@ export type BreadcrumbsProps = React.PropsWithChildren<
 >
 
 const BreadcrumbsList = ({children}: React.PropsWithChildren) => {
-  const enabled = useFeatureFlag(CSS_MODULES_FLAG)
-  if (enabled) {
-    return <ol className={classes.BreadcrumbsList}>{children}</ol>
-  }
-
-  return (
-    <Box as="ol" my={0} pl={0}>
-      {children}
-    </Box>
-  )
+  return <ol className={classes.BreadcrumbsList}>{children}</ol>
 }
 
-function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren<BreadcrumbsProps>) {
-  const enabled = useFeatureFlag(CSS_MODULES_FLAG)
-  const wrappedChildren = React.Children.map(children, child => (
-    <Wrapper className={clsx({[classes.ItemWrapper]: enabled})}>{child}</Wrapper>
-  ))
+const BreadcrumbsBaseComponent = toggleSxComponent('nav') as React.ComponentType<BreadcrumbsProps>
+function Breadcrumbs({className, children, sx: sxProp}: BreadcrumbsProps) {
+  const wrappedChildren = React.Children.map(children, child => <li className={classes.ItemWrapper}>{child}</li>)
   return (
-    <BreadcrumbsBase
-      className={clsx(className, {[classes.BreadcrumbsBase]: enabled})}
-      aria-label="Breadcrumbs"
-      sx={sxProp}
-    >
+    <BreadcrumbsBaseComponent className={clsx(className, classes.BreadcrumbsBase)} aria-label="Breadcrumbs" sx={sxProp}>
       <BreadcrumbsList>{wrappedChildren}</BreadcrumbsList>
-    </BreadcrumbsBase>
+    </BreadcrumbsBaseComponent>
   )
 }
 
@@ -93,41 +34,18 @@ type StyledBreadcrumbsItemProps = {
   selected?: boolean
   className?: string
 } & SxProp &
-  React.ComponentPropsWithoutRef<'a'>
-
-const StyledBreadcrumbsItem = toggleStyledComponent(
-  CSS_MODULES_FLAG,
-  'a',
-  styled.a`
-    color: ${get('colors.accent.fg')};
-    display: inline-block;
-    font-size: ${get('fontSizes.1')};
-    text-decoration: none;
-    &:hover,
-    &:focus {
-      text-decoration: underline;
-    }
-    &.selected {
-      color: ${get('colors.fg.default')};
-      pointer-events: none;
-    }
-    &.selected:focus {
-      text-decoration: none;
-    }
-    ${sx};
-  `,
-)
+  React.HTMLAttributes<HTMLAnchorElement> &
+  React.ComponentPropsWithRef<'a'>
 
+const BreadcrumbsItemBaseComponent = toggleSxComponent('a') as React.ComponentType<StyledBreadcrumbsItemProps>
 const BreadcrumbsItem = React.forwardRef(({selected, className, ...rest}, ref) => {
-  const enabled = useFeatureFlag(CSS_MODULES_FLAG)
   return (
-    <StyledBreadcrumbsItem
-      className={clsx(className, {
+    <BreadcrumbsItemBaseComponent
+      className={clsx(className, classes.Item, {
         [SELECTED_CLASS]: selected,
-        [classes.Item]: enabled,
-        [classes.ItemSelected]: enabled && selected,
+        [classes.ItemSelected]: selected,
       })}
-      aria-current={selected ? 'page' : null}
+      aria-current={selected ? 'page' : undefined}
       ref={ref}
       {...rest}
     />
@@ -149,7 +67,7 @@ export const Breadcrumb = Object.assign(Breadcrumbs, {Item: BreadcrumbsItem})
 /**
  * @deprecated Use the `BreadcrumbsProps` type instead
  */
-export type BreadcrumbProps = ComponentProps<typeof BreadcrumbsBase>
+export type BreadcrumbProps = BreadcrumbsProps
 
 /**
  * @deprecated Use the `BreadcrumbsItemProps` type instead

packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx

@@ -3,7 +3,6 @@ import Breadcrumbs, {Breadcrumb} from '..'
 import {render, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
-import {FeatureFlags} from '../../FeatureFlags'
 
 describe('Breadcrumbs', () => {
   behavesAsComponent({Component: Breadcrumbs, options: {skipAs: true}})
@@ -14,21 +13,9 @@ describe('Breadcrumbs', () => {
   })
 
   it('should support `className` on the outermost element', () => {
-    const Element = () => <Breadcrumbs className={'test-class-name'} />
-    const FeatureFlagElement = () => {
-      return (
-        <FeatureFlags
-          flags={{
-            primer_react_css_modules_staff: true,
-            primer_react_css_modules_ga: true,
-          }}
-        >
-          <Element />
-        </FeatureFlags>
-      )
-    }
-    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
-    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<Breadcrumbs className={'test-class-name'} />).container.firstChild).toHaveClass(
+      'test-class-name',
+    )
   })
 
   it('should have no axe violations', async () => {

packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap

@@ -1,32 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Breadcrumbs.Item respects the "selected" prop 1`] = `
-.c0 {
-  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  display: inline-block;
-  font-size: 14px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover,
-.c0:focus {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c0.selected {
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  pointer-events: none;
-}
-
-.c0.selected:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 <a
   aria-current="page"
-  className="c0 selected"
+  className="Item selected ItemSelected"
 />
 `;