diff --git a/.changeset/long-numbers-vanish.md b/.changeset/long-numbers-vanish.md new file mode 100644 index 00000000000..b9381e248af --- /dev/null +++ b/.changeset/long-numbers-vanish.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Remove the CSS modules feature flag from the Breadcrumbs component diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx index ee33f08a482..e252f1b4e78 100644 --- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx +++ b/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` - 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
    {children}
- } - - return ( - - {children} - - ) + return
    {children}
} -function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren) { - const enabled = useFeatureFlag(CSS_MODULES_FLAG) - const wrappedChildren = React.Children.map(children, child => ( - {child} - )) +const BreadcrumbsBaseComponent = toggleSxComponent('nav') as React.ComponentType +function Breadcrumbs({className, children, sx: sxProp}: BreadcrumbsProps) { + const wrappedChildren = React.Children.map(children, child =>
  • {child}
  • ) return ( - + {wrappedChildren} - + ) } @@ -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 & + React.ComponentPropsWithRef<'a'> +const BreadcrumbsItemBaseComponent = toggleSxComponent('a') as React.ComponentType const BreadcrumbsItem = React.forwardRef(({selected, className, ...rest}, ref) => { - const enabled = useFeatureFlag(CSS_MODULES_FLAG) return ( - @@ -149,7 +67,7 @@ export const Breadcrumb = Object.assign(Breadcrumbs, {Item: BreadcrumbsItem}) /** * @deprecated Use the `BreadcrumbsProps` type instead */ -export type BreadcrumbProps = ComponentProps +export type BreadcrumbProps = BreadcrumbsProps /** * @deprecated Use the `BreadcrumbsItemProps` type instead diff --git a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx b/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx index 1c584bbdb5f..a424ac61591 100644 --- a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx +++ b/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 = () => - const FeatureFlagElement = () => { - return ( - - - - ) - } - expect(HTMLRender().container.firstChild).toHaveClass('test-class-name') - expect(HTMLRender().container.firstChild).toHaveClass('test-class-name') + expect(HTMLRender().container.firstChild).toHaveClass( + 'test-class-name', + ) }) it('should have no axe violations', async () => { diff --git a/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap b/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap index 250ad1236ce..80e84320bc2 100644 --- a/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +++ b/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; -} - `;