diff --git a/.changeset/itchy-horses-travel.md b/.changeset/itchy-horses-travel.md new file mode 100644 index 00000000000..0d2de07087f --- /dev/null +++ b/.changeset/itchy-horses-travel.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Rename `Breadcrumb` component to `Breadcrumbs` diff --git a/.changeset/pretty-walls-brake.md b/.changeset/pretty-walls-brake.md new file mode 100644 index 00000000000..f731b925620 --- /dev/null +++ b/.changeset/pretty-walls-brake.md @@ -0,0 +1,5 @@ +--- +"@primer/components": major +--- + +Remove `.Breadcrumb` classname from the root element of the `Breadcrumbs` component. This change shouldn't break anything unless you have styles, scripts, or tests that reference the `.Breadcrumb` classname. diff --git a/docs/content/Breadcrumbs.md b/docs/content/Breadcrumbs.md index 081a38f212b..82cb55e1e24 100644 --- a/docs/content/Breadcrumbs.md +++ b/docs/content/Breadcrumbs.md @@ -1,7 +1,7 @@ --- title: Breadcrumbs status: Alpha -source: https://github.com/primer/react/blob/main/src/Breadcrumb.tsx +source: https://github.com/primer/react/blob/main/src/Breadcrumbs.tsx --- Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that: @@ -10,7 +10,7 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d - Do not have a section-level navigation - May need the ability to quickly go back to the previous (parent) page -To use Breadcrumb with [react-router](https://github.com/ReactTraining/react-router) or +To use Breadcrumbs with [react-router](https://github.com/ReactTraining/react-router) or [react-router-dom](https://www.npmjs.com/package/react-router-dom), pass `as={NavLink}` and omit the `selected` prop. This ensures that the NavLink gets `activeClassName='selected'` @@ -18,13 +18,13 @@ This ensures that the NavLink gets `activeClassName='selected'` ## Default example ```jsx live - - Home - About - + + Home + About + Team - - + + ``` ## System props @@ -35,15 +35,15 @@ System props are deprecated in all components except [Box](/Box). Please use the -Breadcrumb and Breadcrumb.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. +Breadcrumbs and Breadcrumbs.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props -### Breadcrumb +### Breadcrumbs -The `Breadcrumb` component does not receive any additional props besides `COMMON` system props. +The `Breadcrumbs` component does not receive any additional props besides `COMMON` system props. -### Breadcrumb.Item +### Breadcrumbs.Item | Prop name | Type | Default | Description | | :-------- | :------ | :-----: | :----------------------------------------------- | diff --git a/src/Breadcrumb.tsx b/src/Breadcrumbs.tsx similarity index 59% rename from src/Breadcrumb.tsx rename to src/Breadcrumbs.tsx index 15eb8576616..1a2640aa8fc 100644 --- a/src/Breadcrumb.tsx +++ b/src/Breadcrumbs.tsx @@ -31,7 +31,7 @@ const Wrapper = styled.li` } ` -const BreadcrumbBase = styled.nav` +const BreadcrumbsBase = styled.nav` display: flex; justify-content: space-between; ${COMMON}; @@ -39,31 +39,30 @@ const BreadcrumbBase = styled.nav` ${sx}; ` -export type BreadcrumbProps = ComponentProps +export type BreadcrumbsProps = ComponentProps -function Breadcrumb({className, children, theme, ...rest}: React.PropsWithChildren) { - const classes = classnames(className, 'Breadcrumb') +function Breadcrumbs({className, children, theme, ...rest}: React.PropsWithChildren) { const wrappedChildren = React.Children.map(children, child => {child}) return ( - + {wrappedChildren} - + ) } -type StyledBreadcrumbItemProps = { +type StyledBreadcrumbsItemProps = { to?: History.LocationDescriptor selected?: boolean } & SystemCommonProps & SxProp -const BreadcrumbItem = styled.a.attrs(props => ({ +const BreadcrumbsItem = styled.a.attrs(props => ({ activeClassName: typeof props.to === 'string' ? 'selected' : '', className: classnames(props.selected && SELECTED_CLASS, props.className), 'aria-current': props.selected ? 'page' : null -}))` +}))` color: ${get('colors.accent.fg')}; display: inline-block; font-size: ${get('fontSizes.1')}; @@ -79,9 +78,24 @@ const BreadcrumbItem = styled.a.attrs(props => ({ ${sx}; ` -Breadcrumb.displayName = 'Breadcrumb' +Breadcrumbs.displayName = 'Breadcrumbs' -BreadcrumbItem.displayName = 'Breadcrumb.Item' +BreadcrumbsItem.displayName = 'Breadcrumbs.Item' -export type BreadcrumbItemProps = ComponentProps -export default Object.assign(Breadcrumb, {Item: BreadcrumbItem}) +export type BreadcrumbsItemProps = ComponentProps +export default Object.assign(Breadcrumbs, {Item: BreadcrumbsItem}) + +/** + * @deprecated Use the `Breadcrumbs` component instead (i.e. `` → ``) + */ +export const Breadcrumb = Object.assign(Breadcrumbs, {Item: BreadcrumbsItem}) + +/** + * @deprecated Use the `BreadcrumbsProps` type instead + */ +export type BreadcrumbProps = ComponentProps + +/** + * @deprecated Use the `BreadcrumbsItemProps` type instead + */ +export type BreadcrumbItemProps = ComponentProps diff --git a/src/__tests__/Breadcrumb.tsx b/src/__tests__/Breadcrumb.tsx deleted file mode 100644 index ea345656fd3..00000000000 --- a/src/__tests__/Breadcrumb.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' -import {Breadcrumb} from '..' -import {render, rendersClass, behavesAsComponent, checkExports} from '../utils/testing' -import {COMMON} from '../constants' -import {render as HTMLRender, cleanup} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' -import 'babel-polyfill' -expect.extend(toHaveNoViolations) - -describe('Breadcrumb', () => { - behavesAsComponent({Component: Breadcrumb, systemPropArray: [COMMON]}) - - checkExports('Breadcrumb', { - default: Breadcrumb - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - cleanup() - }) - - it('renders a