From edbcd711d4fe95e14921defdb12f0f8fd09b11d7 Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Thu, 20 Mar 2025 13:30:16 -0400 Subject: [PATCH 1/3] docs(breadcrumbs): Updates images for v6. --- .../components/breadcrumb/breadcrumb.md | 10 ++- .../breadcrumb/img/breadcrumbs-placement.svg | 48 +++++++++++ .../breadcrumb/img/breadcrumbs-usage.svg | 81 +++++++++++++++++++ 3 files changed, 137 insertions(+), 2 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-placement.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-usage.svg diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md index d5147c3113..4831810a66 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md @@ -3,9 +3,13 @@ id: Breadcrumb section: components --- +import '../components.css'; + ## Usage -Example of breadcrumbs +
+![Breadcrumbs show under the masthead.](.img/breadcrumbs-usage.svg) +
Use breadcrumbs in addition to your global navigation to display a user's location in the application. @@ -17,7 +21,9 @@ Use breadcrumbs in addition to your global navigation to display a user's locati ## Placement Breadcrumbs should be placed underneath the masthead, at the top of the page. There should be 16px of padding both between the breadcrumb and the masthead, and between the breadcrumbs and anything that comes below. -Placement of breadcrumbs and padding +
+![Breadcrumbs shown underneath the masthead and at the top of the page above the page content.](.img/breadcrumbs-placement.svg) +
## Accessibility For information regarding accessibility, visit the [breadcrumb accessibility](/components/breadcrumb/accessibility) tab. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-placement.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-placement.svg new file mode 100644 index 0000000000..0a037c0302 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-placement.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-usage.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-usage.svg new file mode 100644 index 0000000000..e4b9bb1dfc --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/img/breadcrumbs-usage.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From de7fef851b678f56aa77376ea343949e8b51a138 Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Thu, 20 Mar 2025 14:19:02 -0400 Subject: [PATCH 2/3] Fixing image paths --- .../design-guidelines/components/breadcrumb/breadcrumb.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md index 4831810a66..696a02f191 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md @@ -8,7 +8,7 @@ import '../components.css'; ## Usage
-![Breadcrumbs show under the masthead.](.img/breadcrumbs-usage.svg) +![Breadcrumbs show under the masthead.](./img/breadcrumbs-usage.svg)
Use breadcrumbs in addition to your global navigation to display a user's location in the application. @@ -22,7 +22,7 @@ Use breadcrumbs in addition to your global navigation to display a user's locati Breadcrumbs should be placed underneath the masthead, at the top of the page. There should be 16px of padding both between the breadcrumb and the masthead, and between the breadcrumbs and anything that comes below.
-![Breadcrumbs shown underneath the masthead and at the top of the page above the page content.](.img/breadcrumbs-placement.svg) +![Breadcrumbs shown underneath the masthead and at the top of the page above the page content.](./img/breadcrumbs-placement.svg)
## Accessibility From c01a83f779e615de798634a50bd71035d3298846 Mon Sep 17 00:00:00 2001 From: Andrew Ronaldson Date: Wed, 9 Apr 2025 20:04:57 -0300 Subject: [PATCH 3/3] chore(breadcrumbs): added token name --- .../design-guidelines/components/breadcrumb/breadcrumb.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md index 696a02f191..11e407943d 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/breadcrumb/breadcrumb.md @@ -19,7 +19,7 @@ Use breadcrumbs in addition to your global navigation to display a user's locati * Breadcrumbs in PatternFly are intended to show the location of a page in the site hierarchy, and are **not intended to map the user's path through the application**. ## Placement -Breadcrumbs should be placed underneath the masthead, at the top of the page. There should be 16px of padding both between the breadcrumb and the masthead, and between the breadcrumbs and anything that comes below. +Breadcrumbs should be placed underneath the masthead, at the top of the page. There should be `--pf-t--global--spacer--md` (16px) of padding both between the breadcrumb and the masthead, and between the breadcrumbs and anything that comes below.
![Breadcrumbs shown underneath the masthead and at the top of the page above the page content.](./img/breadcrumbs-placement.svg)