From ad818ebc63ec2f4b0fac985f817897481e27ee61 Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Thu, 30 Jan 2025 17:57:51 +0100 Subject: [PATCH 1/7] Rename current docs file to react --- apps/docs/content/components/Breadcrumbs/{index.mdx => react.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename apps/docs/content/components/Breadcrumbs/{index.mdx => react.mdx} (100%) diff --git a/apps/docs/content/components/Breadcrumbs/index.mdx b/apps/docs/content/components/Breadcrumbs/react.mdx similarity index 100% rename from apps/docs/content/components/Breadcrumbs/index.mdx rename to apps/docs/content/components/Breadcrumbs/react.mdx From 64053b367398ce1e43e02d9fdc1be67200a67a4c Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Thu, 30 Jan 2025 17:59:01 +0100 Subject: [PATCH 2/7] Add interface guidelines --- .../components/Breadcrumbs/images/anatomy.png | Bin 0 -> 21361 bytes .../Breadcrumbs/images/variants.png | Bin 0 -> 20096 bytes .../content/components/Breadcrumbs/index.mdx | 75 ++++++++++++++++++ 3 files changed, 75 insertions(+) create mode 100644 apps/docs/content/components/Breadcrumbs/images/anatomy.png create mode 100644 apps/docs/content/components/Breadcrumbs/images/variants.png create mode 100644 apps/docs/content/components/Breadcrumbs/index.mdx diff --git a/apps/docs/content/components/Breadcrumbs/images/anatomy.png b/apps/docs/content/components/Breadcrumbs/images/anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..c02af4907169dc77f12946c5c87f35975a479453 GIT binary patch literal 21361 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 XIY;~x(>n{DXpkCDS3j3^P6X literal 0 HcmV?d00001 diff --git a/apps/docs/content/components/Breadcrumbs/images/variants.png b/apps/docs/content/components/Breadcrumbs/images/variants.png new file mode 100644 index 0000000000000000000000000000000000000000..131a094f17d2e26c45a325ebd151ae6ee6aa918d GIT binary patch literal 20096 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 literal 0 HcmV?d00001 diff --git a/apps/docs/content/components/Breadcrumbs/index.mdx b/apps/docs/content/components/Breadcrumbs/index.mdx new file mode 100644 index 000000000..3d10f9a51 --- /dev/null +++ b/apps/docs/content/components/Breadcrumbs/index.mdx @@ -0,0 +1,75 @@ +--- +title: Breadcrumbs +description: Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level. +--- + +import ComponentLayout from '../../../src/layouts/component-layout' + +import anatomy from './images/anatomy.png' +import variants from './images/variants.png' +import doOverflow from './images/do-overflow.png' +import dontOverflow from './images/dont-overflow.png' + +export default ComponentLayout + +## Anatomy + +Breadcrumbs with location-based annotations for parent-level links, divider, and current page. + +## Usage + +Use breadcrumbs to display a user's path within a site's hierarchy, helping them understand their location and easily navigate back to higher-level pages, especially on sites with deep structures. + +Breadcrumbs are most appropriate on pages that: + +- Do not have a section-level navigation +- May need the ability to quickly go back to the previous (parent) page + +### Placement + +Place breadcrumbs at the top of the page, below the header and any navigation bar, to ensure they are immediately visible and accessible to users as they begin navigating the page. + +Align breadcrumbs with the main content area to maintain a consistent and orderly layout, helping users easily associate the breadcrumbs with the content they are navigating. + +Use consistent placement across all pages of the site so that users can rely on breadcrumbs as a stable navigation tool. + +## Accessibility + +Ensure that the text of each individual Breadcrumb item fits entirely within a 320px wide viewport. Failure to do this violates [WCAG 1.4.10 Reflow](https://github.com/github/accessibility-audit-guide/blob/main/web/WCAG/1.4.10%20Reflow.md). + + + + + + Use short Breadcrumb item names to ensure they fit within a 320px wide + viewport. + + + + + + Don't allow Breadcrumb item names to overflow the 320px wide viewport, as + this violates WCAG 1.4.10 Reflow. + + + + +## Options + +### Variants + +The breadcrumbs component is available in two variants: a default variant, where links use the standard text color, positioning the navigation as a secondary element on the page, and an accent variant, which emphasizes parent links with an accent color. The default variant is suitable for most scenarios, while the accent variant should be reserved for pages where the breadcrumbs are essential for navigation. + +The two breadcrumbs variants available: default and accent + +## Related components + +- [Anchor nav](/components/AnchorNav): To display navigation for different sections of a page. +- [Pagination](/components/Pagination): To display navigation for content that is split into sequential pages. +- [Sub nav](/components/SubNav): To display the secondary navigation of a site. From fd852ba14ed74e94b3b185ab191feb3bc16667d7 Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Thu, 30 Jan 2025 17:59:37 +0100 Subject: [PATCH 3/7] Remove redundant accessibility section from React docs --- .../content/components/Breadcrumbs/react.mdx | 24 ------------------- 1 file changed, 24 deletions(-) diff --git a/apps/docs/content/components/Breadcrumbs/react.mdx b/apps/docs/content/components/Breadcrumbs/react.mdx index 25f96eb97..c69757650 100644 --- a/apps/docs/content/components/Breadcrumbs/react.mdx +++ b/apps/docs/content/components/Breadcrumbs/react.mdx @@ -9,9 +9,6 @@ import {Label} from '@primer/react' import {BreadcrumbVariants} from '@primer/react-brand' import {PropTableValues} from '../../../src/components' -import doOverflow from './images/do-overflow.png' -import dontOverflow from './images/dont-overflow.png' - ```js import {Breadcrumbs} from '@primer/react-brand' ``` @@ -42,27 +39,6 @@ import {Breadcrumbs} from '@primer/react-brand' ``` -## Accessibility - -Ensure that the text of each individual Breadcrumb item fits entirely within a 320px wide viewport. Failure to do this violates [WCAG 1.4.10 Reflow](https://github.com/github/accessibility-audit-guide/blob/main/web/WCAG/1.4.10%20Reflow.md). - - - - - - Use short Breadcrumb item names to ensure they fit within a 320px wide - viewport. - - - - - - Don't allow Breadcrumb item names to overflow the 320px wide viewport, as - this violates WCAG 1.4.10 Reflow. - - - - ## Component props ### Breadcrumbs From f147364609b114a5249e2d147cd8d808e898f85f Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Fri, 31 Jan 2025 15:34:00 +0100 Subject: [PATCH 4/7] Update apps/docs/content/components/Breadcrumbs/index.mdx Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- apps/docs/content/components/Breadcrumbs/index.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/content/components/Breadcrumbs/index.mdx b/apps/docs/content/components/Breadcrumbs/index.mdx index 3d10f9a51..53911a466 100644 --- a/apps/docs/content/components/Breadcrumbs/index.mdx +++ b/apps/docs/content/components/Breadcrumbs/index.mdx @@ -25,8 +25,8 @@ Use breadcrumbs to display a user's path within a site's hierarchy, helping them Breadcrumbs are most appropriate on pages that: -- Do not have a section-level navigation -- May need the ability to quickly go back to the previous (parent) page +- Are missing section-level navigation elements E.g. [SubNav](/components/SubNav) +- Need to surface contextually-relevant content through its parent page(s) ### Placement From fb2205e83859ebca509d87467375317b570fed44 Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Fri, 31 Jan 2025 15:35:10 +0100 Subject: [PATCH 5/7] Update apps/docs/content/components/Breadcrumbs/index.mdx Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- apps/docs/content/components/Breadcrumbs/index.mdx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/docs/content/components/Breadcrumbs/index.mdx b/apps/docs/content/components/Breadcrumbs/index.mdx index 53911a466..ed2eb1fbc 100644 --- a/apps/docs/content/components/Breadcrumbs/index.mdx +++ b/apps/docs/content/components/Breadcrumbs/index.mdx @@ -61,7 +61,10 @@ Ensure that the text of each individual Breadcrumb item fits entirely within a 3 ### Variants -The breadcrumbs component is available in two variants: a default variant, where links use the standard text color, positioning the navigation as a secondary element on the page, and an accent variant, which emphasizes parent links with an accent color. The default variant is suitable for most scenarios, while the accent variant should be reserved for pages where the breadcrumbs are essential for navigation. +The breadcrumbs component is available in two variants: + +- The default variant uses the standard text color, positioning the navigation as a secondary element on the page. This is suitable for most scenarios. +- The accent variant emphasizes parent links with an accent color. This variant should should be reserved for pages where the breadcrumbs are essential for navigation. Date: Fri, 31 Jan 2025 15:38:08 +0100 Subject: [PATCH 6/7] Update apps/docs/content/components/Breadcrumbs/react.mdx Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- apps/docs/content/components/Breadcrumbs/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/content/components/Breadcrumbs/react.mdx b/apps/docs/content/components/Breadcrumbs/react.mdx index c69757650..b01c5c8a6 100644 --- a/apps/docs/content/components/Breadcrumbs/react.mdx +++ b/apps/docs/content/components/Breadcrumbs/react.mdx @@ -2,7 +2,7 @@ title: Breadcrumbs source: https://github.com/primer/brand/tree/main/packages/react/src/Breadcrumbs/Breadcrumbs.tsx storybook: '/brand/storybook/?path=/story/components-breadcrumbs--playground' -description: Use breadcrumbs to enable wayfinding through navigational links +description: Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level. --- import {Label} from '@primer/react' From f2274920cf1eb6ec52f02b2b2dfcaad01df99001 Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Fri, 31 Jan 2025 15:37:57 +0100 Subject: [PATCH 7/7] Add missing exports component layout --- apps/docs/content/components/Breadcrumbs/react.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/docs/content/components/Breadcrumbs/react.mdx b/apps/docs/content/components/Breadcrumbs/react.mdx index b01c5c8a6..f06ada3c4 100644 --- a/apps/docs/content/components/Breadcrumbs/react.mdx +++ b/apps/docs/content/components/Breadcrumbs/react.mdx @@ -5,10 +5,14 @@ storybook: '/brand/storybook/?path=/story/components-breadcrumbs--playground' description: Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level. --- +import ComponentLayout from '../../../src/layouts/component-layout' + import {Label} from '@primer/react' import {BreadcrumbVariants} from '@primer/react-brand' import {PropTableValues} from '../../../src/components' +export default ComponentLayout + ```js import {Breadcrumbs} from '@primer/react-brand' ```