Revert "Convert Breadcrumbs and Breadcrumbs.Item to CSS modules b…

…ehind th…" This reverts commit 6d8b7f4.
primer · Oct 9, 2024 · ab51628 · ab51628
1 parent 6d8b7f4
commit ab51628
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 246 deletions.
diff --git a/.changeset/mighty-buckets-push.md b/.changeset/mighty-buckets-push.md
diff --git a/e2e/components/Breadcrumbs.test.ts b/e2e/components/Breadcrumbs.test.ts
@@ -11,32 +11,6 @@ test.describe('Breadcrumbs', () => {
             id: 'components-breadcrumbs--default',
             globals: {
               colorScheme: theme,
-              featureFlags: {
-                primer_react_css_modules_team: true,
-              },
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Breadcrumbs.Default.${theme}.png`)
-
-          // Hover state
-          await page.getByRole('link', {name: 'Home'}).hover()
-          expect(await page.screenshot()).toMatchSnapshot(`Breadcrumbs.Default.${theme}.hover.png`)
-
-          // Focus state
-          await page.keyboard.press('Tab')
-          expect(await page.screenshot()).toMatchSnapshot(`Breadcrumbs.Default.${theme}.focus.png`)
-        })
-
-        test('default @vrt (styled components)', async ({page}) => {
-          await visit(page, {
-            id: 'components-breadcrumbs--default',
-            globals: {
-              colorScheme: theme,
-              featureFlags: {
-                primer_react_css_modules_team: false,
-              },
             },
           })
 
@@ -57,28 +31,6 @@ test.describe('Breadcrumbs', () => {
             id: 'components-breadcrumbs--default',
             globals: {
               colorScheme: theme,
-              featureFlags: {
-                primer_react_css_modules_team: true,
-              },
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
-        })
-
-        test('axe @aat (styled components)', async ({page}) => {
-          await visit(page, {
-            id: 'components-breadcrumbs--default',
-            globals: {
-              colorScheme: theme,
-              featureFlags: {
-                primer_react_css_modules_team: false,
-              },
             },
           })
           await expect(page).toHaveNoViolations({

diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
@@ -209,7 +209,6 @@ const StyledBanner = toggleStyledComponent(
    * line-height of `20px` so that means that the height of icons should match
    * that value.
    */
-  'div',
   styled.div`
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;

diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.module.css b/packages/react/src/Breadcrumbs/Breadcrumbs.module.css
diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -7,82 +7,52 @@ 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 {FeatureFlags, useFeatureFlag} from '../FeatureFlags'
-import Link from '../Link'
 
 const SELECTED_CLASS = 'selected'
 
-const Wrapper = toggleStyledComponent(
-  'primer_react_css_modules_team',
-  'li',
-  styled.li`
+const Wrapper = styled.li`
+  display: inline-block;
+  white-space: nowrap;
+  list-style: none;
+  &::after {
+    font-size: ${get('fontSizes.1')};
+    content: '';
     display: inline-block;
-    white-space: nowrap;
-    list-style: none;
+    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 {
-      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;
-      }
+      content: none;
     }
-  `,
-)
+  }
+`
 
-const BreadcrumbsBase = toggleStyledComponent(
-  'primer_react_css_modules_team',
-  'nav',
-  styled.nav<SxProp>`
-    display: flex;
-    justify-content: space-between;
-    ${sx};
-  `,
-)
+const BreadcrumbsBase = styled.nav<SxProp>`
+  display: flex;
+  justify-content: space-between;
+  ${sx};
+`
 
 export type BreadcrumbsProps = React.PropsWithChildren<
   {
     className?: string
   } & SxProp
 >
 
-const BreadcrumbsList = ({children}: React.PropsWithChildren) => {
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
-  if (enabled) {
-    return <ol className={classes.BreadcrumbsList}>{children}</ol>
-  }
-
-  return (
-    <Box as="ol" my={0} pl={0}>
-      {children}
-    </Box>
-  )
-}
-
 function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren<BreadcrumbsProps>) {
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
-  const wrappedChildren = React.Children.map(children, child => (
-    <Wrapper className={clsx({[classes.ItemWrapper]: enabled})}>{child}</Wrapper>
-  ))
+  const wrappedChildren = React.Children.map(children, child => <Wrapper>{child}</Wrapper>)
   return (
-    <BreadcrumbsBase
-      className={clsx(className, {[classes.BreadcrumbsBase]: enabled})}
-      aria-label="Breadcrumbs"
-      sx={sxProp}
-    >
-      <BreadcrumbsList>{wrappedChildren}</BreadcrumbsList>
+    <BreadcrumbsBase className={className} aria-label="Breadcrumbs" sx={sxProp}>
+      <Box as="ol" my={0} pl={0}>
+        {wrappedChildren}
+      </Box>
     </BreadcrumbsBase>
   )
 }
@@ -92,46 +62,27 @@ type StyledBreadcrumbsItemProps = {
   selected?: boolean
 } & SxProp
 
-const StyledBreadcrumbsItem = toggleStyledComponent(
-  'primer_react_css_modules_team',
-  'a',
-  styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
-    className: clsx(props.selected && SELECTED_CLASS, props.className),
-    'aria-current': props.selected ? 'page' : null,
-  }))<StyledBreadcrumbsItemProps>`
-    color: ${get('colors.accent.fg')};
-    display: inline-block;
-    font-size: ${get('fontSizes.1')};
+const BreadcrumbsItem = styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
+  className: clsx(props.selected && SELECTED_CLASS, props.className),
+  'aria-current': props.selected ? 'page' : null,
+}))<StyledBreadcrumbsItemProps>`
+  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;
-    &:hover,
-    &:focus {
-      text-decoration: underline;
-    }
-    &.selected {
-      color: ${get('colors.fg.default')};
-      pointer-events: none;
-    }
-    &.selected:focus {
-      text-decoration: none;
-    }
-    ${sx};
-  `,
-)
-const BreadcrumbsItem = ({
-  selected,
-  ...props
-}: StyledBreadcrumbsItemProps & React.ComponentPropsWithoutRef<typeof Link>) => {
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
-  if (enabled) {
-    return (
-      // Remove this when the feature flag is removed from Link
-      <FeatureFlags flags={{primer_react_css_modules_ga: true}}>
-        <Link className={clsx(classes.Item, {[classes.ItemSelected]: selected})} {...props} />
-      </FeatureFlags>
-    )
   }
-  return <StyledBreadcrumbsItem selected={selected} {...props} />
-}
+  ${sx};
+`
 
 Breadcrumbs.displayName = 'Breadcrumbs'
 

diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -10,7 +10,6 @@ import {useFeatureFlag} from '../FeatureFlags'
 
 const StyledButtonGroup = toggleStyledComponent(
   'primer_react_css_modules_staff',
-  'div',
   styled.div`
     display: inline-flex;
     vertical-align: middle;

diff --git a/packages/react/src/internal/utils/__tests__/toggleStyledComponent.test.tsx b/packages/react/src/internal/utils/__tests__/toggleStyledComponent.test.tsx
@@ -5,32 +5,8 @@ import {toggleStyledComponent} from '../toggleStyledComponent'
 import styled from 'styled-components'
 
 describe('toggleStyledComponent', () => {
-  test('renders the component as `defaultAs` when flag is enabled and no `as` prop is provided', () => {
-    const TestComponent = toggleStyledComponent('testFeatureFlag', 'span', ({as: BaseComponent = 'div'}) => (
-      <BaseComponent />
-    ))
-    const {container} = render(
-      <FeatureFlags flags={{testFeatureFlag: true}}>
-        <TestComponent />
-      </FeatureFlags>,
-    )
-    expect(container.firstChild).toBeInstanceOf(HTMLSpanElement)
-  })
-
-  test('renders the component as `defaultAs` when flag is disabled and no `as` prop is provided', () => {
-    const TestComponent = toggleStyledComponent('testFeatureFlag', 'span', ({as: BaseComponent = 'div'}) => (
-      <BaseComponent />
-    ))
-    const {container} = render(
-      <FeatureFlags flags={{testFeatureFlag: false}}>
-        <TestComponent />
-      </FeatureFlags>,
-    )
-    expect(container.firstChild).toBeInstanceOf(HTMLSpanElement)
-  })
-
   test('renders the `as` prop when flag is enabled', () => {
-    const TestComponent = toggleStyledComponent('testFeatureFlag', 'div', () => <div />)
+    const TestComponent = toggleStyledComponent('testFeatureFlag', () => <div />)
     const {container} = render(
       <FeatureFlags flags={{testFeatureFlag: true}}>
         <TestComponent as="button" />
@@ -40,7 +16,7 @@ describe('toggleStyledComponent', () => {
   })
 
   test('renders a div as fallback when flag is enabled and no `as` prop is provided', () => {
-    const TestComponent = toggleStyledComponent('testFeatureFlag', 'div', () => <div />)
+    const TestComponent = toggleStyledComponent('testFeatureFlag', () => <div />)
     const {container} = render(
       <FeatureFlags flags={{testFeatureFlag: true}}>
         <TestComponent />
@@ -50,7 +26,7 @@ describe('toggleStyledComponent', () => {
   })
 
   test('renders Box with `as` if `sx` is provided and flag is enabled', () => {
-    const TestComponent = toggleStyledComponent('testFeatureFlag', 'div', () => styled.div``)
+    const TestComponent = toggleStyledComponent('testFeatureFlag', () => styled.div``)
     const {container} = render(
       <FeatureFlags flags={{testFeatureFlag: true}}>
         <TestComponent as="button" sx={{color: 'red'}} />
@@ -62,7 +38,7 @@ describe('toggleStyledComponent', () => {
   })
 
   test('renders styled component when flag is disabled', () => {
-    const StyledComponent = toggleStyledComponent('testFeatureFlag', 'div', styled.div.attrs({['data-styled']: true})``)
+    const StyledComponent = toggleStyledComponent('testFeatureFlag', styled.div.attrs({['data-styled']: true})``)
     const {container} = render(
       <FeatureFlags flags={{testFeatureFlag: false}}>
         <StyledComponent />