From c854b6fb5cd3eb122e4d0500a8e01842fffb0d68 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Mon, 22 Apr 2024 15:07:31 -0400 Subject: [PATCH 01/38] feat(breadcrumb): add `` --- .changeset/metal-snakes-wave.md | 19 ++++ elements/rh-breadcrumb/README.md | 22 +++++ .../rh-breadcrumb/demo/color-context.html | 16 ++++ .../rh-breadcrumb/demo/rh-breadcrumb.html | 13 +++ elements/rh-breadcrumb/docs/00-overview.md | 23 +++++ elements/rh-breadcrumb/docs/10-style.md | 14 +++ elements/rh-breadcrumb/docs/20-guidelines.md | 8 ++ elements/rh-breadcrumb/docs/30-code.md | 16 ++++ .../rh-breadcrumb/docs/40-accessibility.md | 4 + elements/rh-breadcrumb/docs/screenshot.png | Bin 15513 -> 18087 bytes .../rh-breadcrumb/rh-breadcrumb-lightdom.css | 90 ++++++++++++++++++ elements/rh-breadcrumb/rh-breadcrumb.css | 33 +++++++ elements/rh-breadcrumb/rh-breadcrumb.ts | 52 ++++++++++ .../rh-breadcrumb/test/rh-breadcrumb.e2e.ts | 12 +++ .../rh-breadcrumb/test/rh-breadcrumb.spec.ts | 17 ++++ 15 files changed, 339 insertions(+) create mode 100644 .changeset/metal-snakes-wave.md create mode 100644 elements/rh-breadcrumb/README.md create mode 100644 elements/rh-breadcrumb/demo/color-context.html create mode 100644 elements/rh-breadcrumb/demo/rh-breadcrumb.html create mode 100644 elements/rh-breadcrumb/docs/10-style.md create mode 100644 elements/rh-breadcrumb/docs/20-guidelines.md create mode 100644 elements/rh-breadcrumb/docs/30-code.md create mode 100644 elements/rh-breadcrumb/docs/40-accessibility.md mode change 100755 => 100644 elements/rh-breadcrumb/docs/screenshot.png create mode 100644 elements/rh-breadcrumb/rh-breadcrumb-lightdom.css create mode 100644 elements/rh-breadcrumb/rh-breadcrumb.css create mode 100644 elements/rh-breadcrumb/rh-breadcrumb.ts create mode 100644 elements/rh-breadcrumb/test/rh-breadcrumb.e2e.ts create mode 100644 elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts diff --git a/.changeset/metal-snakes-wave.md b/.changeset/metal-snakes-wave.md new file mode 100644 index 0000000000..469a6ecf4a --- /dev/null +++ b/.changeset/metal-snakes-wave.md @@ -0,0 +1,19 @@ +--- +"@rhds/elements": minor +--- + +✨ Added ``. + +A breadcrumb navigation is a secondary navigation element consisting of a list +of links to the parent pages of the current page in hierarchical order. It +helps users find their place within a website or web application. + +```html + +
    +
  1. Home
  2. +
  3. About
  4. +
  5. Our Team
  6. +
+
+``` diff --git a/elements/rh-breadcrumb/README.md b/elements/rh-breadcrumb/README.md new file mode 100644 index 0000000000..3a6b646fae --- /dev/null +++ b/elements/rh-breadcrumb/README.md @@ -0,0 +1,22 @@ +# Breadcrumb + +A breadcrumb trail consists of a list of links to the parent pages of +the current page in hierarchical order. It helps users find their +place within a website or web application. Breadcrumbs are often +placed horizontally before a page's main content. + +## Usage + +Place the following on your page with your site's breadcrumb +navigation inside as an ordered list: + +```html + +
    +
  1. Home
  2. +
  3. About
  4. +
  5. Our Team
  6. +
  7. Jamie Simeon Walinsky-Choeffer
  8. +
+
+``` diff --git a/elements/rh-breadcrumb/demo/color-context.html b/elements/rh-breadcrumb/demo/color-context.html new file mode 100644 index 0000000000..d24c82999f --- /dev/null +++ b/elements/rh-breadcrumb/demo/color-context.html @@ -0,0 +1,16 @@ + + +
    +
  1. Home
  2. +
  3. About
  4. +
  5. Our Team
  6. +
  7. Jamie Simeon Walinsky-Choeffer Houseman Stalinsky
  8. +
+
+
+ + + diff --git a/elements/rh-breadcrumb/demo/rh-breadcrumb.html b/elements/rh-breadcrumb/demo/rh-breadcrumb.html new file mode 100644 index 0000000000..05c9f1b71d --- /dev/null +++ b/elements/rh-breadcrumb/demo/rh-breadcrumb.html @@ -0,0 +1,13 @@ + +
    +
  1. Home
  2. +
  3. About
  4. +
  5. Our Team
  6. +
  7. Jamie Simeon Walinsky-Choeffer Houseman Stalinsky
  8. +
+
+ + + diff --git a/elements/rh-breadcrumb/docs/00-overview.md b/elements/rh-breadcrumb/docs/00-overview.md index e69de29bb2..aead77d231 100644 --- a/elements/rh-breadcrumb/docs/00-overview.md +++ b/elements/rh-breadcrumb/docs/00-overview.md @@ -0,0 +1,23 @@ +## Overview + +{{ tagName | getElementDescription }} + +## Sample element + + +
    +
  1. Home
  2. +
  3. About
  4. +
  5. Our Team
  6. +
  7. Jamie Simeon Walinsky-Choeffer Houseman Stalinsky
  8. +
+
+ +## Demo + +{% playground tagName=tagName %}{% endplayground %} +{% cta href="./demo/", target="_blank" %}View the demo{% endcta %} + +## When to use + + - When a user needs to know where they are within a site diff --git a/elements/rh-breadcrumb/docs/10-style.md b/elements/rh-breadcrumb/docs/10-style.md new file mode 100644 index 0000000000..20830bda0b --- /dev/null +++ b/elements/rh-breadcrumb/docs/10-style.md @@ -0,0 +1,14 @@ +## Style + +## Theme + +## Configuration + +## Placement + +## Space + +## Interaction States + + + diff --git a/elements/rh-breadcrumb/docs/20-guidelines.md b/elements/rh-breadcrumb/docs/20-guidelines.md new file mode 100644 index 0000000000..861043ed44 --- /dev/null +++ b/elements/rh-breadcrumb/docs/20-guidelines.md @@ -0,0 +1,8 @@ +## Usage + +## Behavior + +## Writing Content + +## Best Practices + diff --git a/elements/rh-breadcrumb/docs/30-code.md b/elements/rh-breadcrumb/docs/30-code.md new file mode 100644 index 0000000000..78f9a25bc3 --- /dev/null +++ b/elements/rh-breadcrumb/docs/30-code.md @@ -0,0 +1,16 @@ +{% renderInstall %}{% endrenderInstall %} + +## Usage + +```html + +
    +
  1. Home
  2. +
  3. About
  4. +
  5. Our Team
  6. +
  7. Jamie Simeon Walinsky-Choeffer
  8. +
+
+``` + +{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %} diff --git a/elements/rh-breadcrumb/docs/40-accessibility.md b/elements/rh-breadcrumb/docs/40-accessibility.md new file mode 100644 index 0000000000..c1200f5cf2 --- /dev/null +++ b/elements/rh-breadcrumb/docs/40-accessibility.md @@ -0,0 +1,4 @@ +## Keyboard navigation + +## Focus order + diff --git a/elements/rh-breadcrumb/docs/screenshot.png b/elements/rh-breadcrumb/docs/screenshot.png old mode 100755 new mode 100644 index ea0e8e25de14283ccfbfadd36ef6cf27f4ad08b3..4ff168a797ca223da93c989509da6e7a29577a1f GIT binary patch literal 18087 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 a8%J7)UIV|MUAt?%?$UYtbJb_A-~T^#Fy@p1 diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css new file mode 100644 index 0000000000..3a40c82845 --- /dev/null +++ b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css @@ -0,0 +1,90 @@ +rh-breadcrumb { + /* stylelint-disable-next-line max-line-length */ + --_breadcrumb-caret-image: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23707070'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); + --_breadcrumb-link-color: + var( + --rh-breadcrumb-link-color, + var(--rh-color-interactive-blue-darker, #0066cc) + ); + --_breadcrumb-link-current-page: + var( + --rh-breadcrumb-link-current-page, + var(--rh-color-gray-60, #4d4d4d) + ); + + display: block; +} + +[color-palette="dark"] rh-breadcrumb { + /* stylelint-disable-next-line max-line-length */ + --_breadcrumb-caret-image: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg width='10' height='15' viewBox='0 0 10 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_232_19612)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23C7C7C7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19612'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); + --_breadcrumb-link-color: + var( + --rh-breadcrumb-link-color, + var(--rh-color-interactive-blue-lighter, #92c5f9) + ); + --_breadcrumb-link-current-page: + var( + --rh-breadcrumb-link-current-page, + var(--rh-color-text-secondary-on-dark, #c7c7c7) + ); +} + +rh-breadcrumb ol { + container-type: inline-size; + container-name: breadcrumbs-list; + font-size: var(--rh-font-size-body-text-sm, 0.875rem); + line-height: var(--rh-line-height-body-text, 1.5); + margin-block: 0; + padding-inline-start: 0; +} + +rh-breadcrumb > ol > li { + background-image: var(--_breadcrumb-caret-image); + background-position: calc(100% - 14px) center; + background-repeat: no-repeat; + background-size: 12px; + display: inline-block; + padding-inline-end: var(--rh-breadcrumb-li-padding-inline-end, 42px); + vertical-align: bottom; +} + +rh-breadcrumb > ol > li:first-child { + padding-inline-start: 0; +} + +rh-breadcrumb > ol > li:last-child { + background-image: none; + max-width: 27ch; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +rh-breadcrumb > ol > li, +rh-breadcrumb > ol > li > a { + color: var(--_breadcrumb-link-color); +} + +rh-breadcrumb > ol > li > a { + text-decoration: none; +} + +rh-breadcrumb > ol > li > a:is(:hover, :focus) { + text-decoration: underline; +} + +rh-breadcrumb > ol > li:first-child > a { + margin-inline-start: 0; +} + +rh-breadcrumb > ol > li:last-child, +rh-breadcrumb > ol > li > a[aria-current="page"] { + color: var(--_breadcrumb-link-current-page); +} + +@container breadcrumbs-list (min-width: 992px) { + rh-breadcrumb > ol > li:last-child { + max-width: none; + } +} diff --git a/elements/rh-breadcrumb/rh-breadcrumb.css b/elements/rh-breadcrumb/rh-breadcrumb.css new file mode 100644 index 0000000000..1cbdb47354 --- /dev/null +++ b/elements/rh-breadcrumb/rh-breadcrumb.css @@ -0,0 +1,33 @@ +:host { + display: block; +} + +#container { + /* stylelint-disable-next-line max-line-length */ + --_breadcrumb-caret-image: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23707070'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); + --_breadcrumb-link-color: + var( + --rh-breadcrumb-link-color, + var(--rh-color-interactive-blue-darker, #0066cc) + ); + --_breadcrumb-link-current-page: + var( + --rh-breadcrumb-link-current-page, + var(--rh-color-gray-60, #4d4d4d) + ); +} + +.dark#container { + /* stylelint-disable-next-line max-line-length */ + --_breadcrumb-caret-image: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg width='10' height='15' viewBox='0 0 10 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_232_19612)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23C7C7C7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19612'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); + --_breadcrumb-link-color: + var( + --rh-breadcrumb-link-color, + var(--rh-color-interactive-blue-lighter, #92c5f9) + ); + --_breadcrumb-link-current-page: + var( + --rh-breadcrumb-link-current-page, + var(--rh-color-text-secondary-on-dark, #c7c7c7) + ); +} diff --git a/elements/rh-breadcrumb/rh-breadcrumb.ts b/elements/rh-breadcrumb/rh-breadcrumb.ts new file mode 100644 index 0000000000..90754b3645 --- /dev/null +++ b/elements/rh-breadcrumb/rh-breadcrumb.ts @@ -0,0 +1,52 @@ +import { LitElement, html } from 'lit'; +import { customElement } from 'lit/decorators/custom-element.js'; +import { property } from 'lit/decorators/property.js'; +import { classMap } from 'lit/directives/class-map.js'; + +import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js'; + +import styles from './rh-breadcrumb.css'; + +/** + * A breadcrumb navigation is a secondary navigation element consisting of a list + * of links to the parent pages of the current page in hierarchical order. It + * helps users find their place within a website or web application. + * @summary Links displaying a hierarchical location + * + * @slot - Place an ordered list (`
    `) of your breadcrumbs into the slot + * + * @csspart container - container element for slotted breadcrumb + * + * @cssprop --rh-breadcrumb-li-padding-inline-end + * Sets the spacing between each breadcrumb item. + * {@default `var(--rh-breadcrumb-li-padding-inline-end, 42px)`} + * @cssprop --rh-breadcrumb-caret-image + * Defines the background image separating each breadcrumb item + * {@default `var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg width='10' height='15' viewBox='0 0 10 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_232_19612)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23C7C7C7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19612'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"))`} + */ +@customElement('rh-breadcrumb') +export class RhBreadcrumb extends LitElement { + @property({ type: Array }) items: string[] = []; + + /** + * Sets color theme based on parent context + */ + @colorContextConsumer() private on?: ColorTheme; + + static readonly styles = [styles]; + + render() { + const { on = '' } = this; + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'rh-breadcrumb': RhBreadcrumb; + } +} diff --git a/elements/rh-breadcrumb/test/rh-breadcrumb.e2e.ts b/elements/rh-breadcrumb/test/rh-breadcrumb.e2e.ts new file mode 100644 index 0000000000..90b6097848 --- /dev/null +++ b/elements/rh-breadcrumb/test/rh-breadcrumb.e2e.ts @@ -0,0 +1,12 @@ +import { test } from '@playwright/test'; +import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js'; + +const tagName = 'rh-breadcrumb'; + +test.describe(tagName, () => { + test('snapshot', async ({ page }) => { + const componentPage = new PfeDemoPage(page, tagName); + await componentPage.navigate(); + await componentPage.snapshot(); + }); +}); diff --git a/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts b/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts new file mode 100644 index 0000000000..eec887682b --- /dev/null +++ b/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts @@ -0,0 +1,17 @@ +import { expect, html } from '@open-wc/testing'; +import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; +import { RhBreadcrumb } from '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js'; + +describe('', function() { + describe('simply instantiating', function() { + let element: RhBreadcrumb; + it('should upgrade', async function() { + element = await createFixture(html``); + const klass = customElements.get('rh-breadcrumb'); + expect(element) + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(RhBreadcrumb); + }); + }); +}); From d15957506b060bacdc5243a9f064ca9a63164dc2 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 23 Apr 2024 09:48:56 -0400 Subject: [PATCH 02/38] fix(breadcrumb): add breadcrumbs to elements nav --- docs/_data/comingSoonItems.yaml | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/_data/comingSoonItems.yaml b/docs/_data/comingSoonItems.yaml index ac522796d9..e0a1b68421 100644 --- a/docs/_data/comingSoonItems.yaml +++ b/docs/_data/comingSoonItems.yaml @@ -1,2 +1 @@ -- rh-breadcrumb - rh-footnote \ No newline at end of file From cee4dfc765838b07a3536cb0c4a645446703c24f Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 23 Apr 2024 09:49:23 -0400 Subject: [PATCH 03/38] fix(breadcrumb): rearrange dark selector in CSS --- elements/rh-breadcrumb/rh-breadcrumb.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-breadcrumb/rh-breadcrumb.css b/elements/rh-breadcrumb/rh-breadcrumb.css index 1cbdb47354..5d6ea3072f 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb.css +++ b/elements/rh-breadcrumb/rh-breadcrumb.css @@ -17,7 +17,7 @@ ); } -.dark#container { +#container.dark { /* stylelint-disable-next-line max-line-length */ --_breadcrumb-caret-image: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg width='10' height='15' viewBox='0 0 10 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_232_19612)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23C7C7C7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19612'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); --_breadcrumb-link-color: From fedfe31b4392c5641a55d69fecd3a3edb93c7faa Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 23 Apr 2024 09:50:43 -0400 Subject: [PATCH 04/38] feat(breadcrumb): add new no link demo --- elements/rh-breadcrumb/demo/last-no-link.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 elements/rh-breadcrumb/demo/last-no-link.html diff --git a/elements/rh-breadcrumb/demo/last-no-link.html b/elements/rh-breadcrumb/demo/last-no-link.html new file mode 100644 index 0000000000..d542ccead7 --- /dev/null +++ b/elements/rh-breadcrumb/demo/last-no-link.html @@ -0,0 +1,13 @@ + +
      +
    1. Home
    2. +
    3. About
    4. +
    5. Our Team
    6. +
    7. Jamie Simeon Walinsky-Choeffer Houseman Stalinsky
    8. +
    +
    + + + From bd88f24f2336bdcd0e6ce67f8f2e291a5bc2407f Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 23 Apr 2024 09:53:12 -0400 Subject: [PATCH 05/38] chore(breadcrumb): lint `00-overview.md` list --- elements/rh-breadcrumb/docs/00-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-breadcrumb/docs/00-overview.md b/elements/rh-breadcrumb/docs/00-overview.md index aead77d231..ab121f1802 100644 --- a/elements/rh-breadcrumb/docs/00-overview.md +++ b/elements/rh-breadcrumb/docs/00-overview.md @@ -20,4 +20,4 @@ ## When to use - - When a user needs to know where they are within a site +- When a user needs to know where they are within a site From b1d4a4c806f861ffe8da1bc8cd6c9895c373f8b4 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 23 Apr 2024 09:57:30 -0400 Subject: [PATCH 06/38] docs(breadcrumb): fix sample element in docs --- elements/rh-breadcrumb/docs/00-overview.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/elements/rh-breadcrumb/docs/00-overview.md b/elements/rh-breadcrumb/docs/00-overview.md index ab121f1802..22128438af 100644 --- a/elements/rh-breadcrumb/docs/00-overview.md +++ b/elements/rh-breadcrumb/docs/00-overview.md @@ -1,3 +1,5 @@ + + ## Overview {{ tagName | getElementDescription }} From 40d2c8f011ec7c2257ff5a33d84a0d1e58a94cdd Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 24 Apr 2024 12:27:07 -0400 Subject: [PATCH 07/38] feat(breadcrumb): add visited styling --- .../rh-breadcrumb/rh-breadcrumb-lightdom.css | 27 ++++++++++--------- elements/rh-breadcrumb/rh-breadcrumb.css | 10 +++++++ 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css index 3a40c82845..1c09290a10 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css +++ b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css @@ -11,23 +11,18 @@ rh-breadcrumb { --rh-breadcrumb-link-current-page, var(--rh-color-gray-60, #4d4d4d) ); - - display: block; -} - -[color-palette="dark"] rh-breadcrumb { - /* stylelint-disable-next-line max-line-length */ - --_breadcrumb-caret-image: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg width='10' height='15' viewBox='0 0 10 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_232_19612)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23C7C7C7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19612'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); - --_breadcrumb-link-color: + --_breadcrumb-link-color-visited: var( --rh-breadcrumb-link-color, - var(--rh-color-interactive-blue-lighter, #92c5f9) + var(--rh-color-interactive-purple-darker, #5e40be) ); - --_breadcrumb-link-current-page: + --_breadcrumb-link-color-visited-hover: var( - --rh-breadcrumb-link-current-page, - var(--rh-color-text-secondary-on-dark, #c7c7c7) + --rh-breadcrumb-link-color-visited-hover, + var(--rh-color-interactive-purple-darkest, #21134d) ); + + display: block; } rh-breadcrumb ol { @@ -78,6 +73,14 @@ rh-breadcrumb > ol > li:first-child > a { margin-inline-start: 0; } +rh-breadcrumb > ol > li > a:visited { + color: var(--_breadcrumb-link-color-visited); +} + +rh-breadcrumb > ol > li > a:visited:hover { + color: var(--_breadcrumb-link-color-visited-hover); +} + rh-breadcrumb > ol > li:last-child, rh-breadcrumb > ol > li > a[aria-current="page"] { color: var(--_breadcrumb-link-current-page); diff --git a/elements/rh-breadcrumb/rh-breadcrumb.css b/elements/rh-breadcrumb/rh-breadcrumb.css index 5d6ea3072f..244a2a4d14 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb.css +++ b/elements/rh-breadcrumb/rh-breadcrumb.css @@ -30,4 +30,14 @@ --rh-breadcrumb-link-current-page, var(--rh-color-text-secondary-on-dark, #c7c7c7) ); + --_breadcrumb-link-color-visited: + var( + --rh-breadcrumb-link-color, + var(--rh-color-interactive-purple-lighter, #b6a6e9) + ); + --_breadcrumb-link-color-visited-hover: + var( + --rh-breadcrumb-link-color-visited-hover, + var(--rh-color-interactive-purple-lightest, #ece6ff) + ); } From 7d23207919e1babe3d5b968dae9de81ffe70046c Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 24 Apr 2024 16:59:55 -0400 Subject: [PATCH 08/38] test(breadcrumb): add tests --- .../rh-breadcrumb/test/rh-breadcrumb.spec.ts | 40 ++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts b/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts index eec887682b..44b2abdd37 100644 --- a/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts +++ b/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts @@ -1,5 +1,8 @@ -import { expect, html } from '@open-wc/testing'; +import { expect, html, nextFrame } from '@open-wc/testing'; +import { sendKeys } from '@web/test-runner-commands'; import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; +import { allUpdates } from '@patternfly/pfe-tools/test/utils.js'; + import { RhBreadcrumb } from '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js'; describe('', function() { @@ -14,4 +17,39 @@ describe('', function() { .to.be.an.instanceOf(RhBreadcrumb); }); }); + + describe('when the element loads', function() { + let element: RhBreadcrumb; + beforeEach(async function() { + element = await createFixture(html` + +
      +
    1. Home
    2. +
    3. About
    4. +
    5. Our Team
    6. +
    7. Jamie Simeon Walinsky-Choeffer Houseman Stalinsky
    8. +
    +
    + `); + await element.updateComplete; + }); + + it('should be accessible', async function() { + await expect(element) + .to.be.accessible(); + }); + + describe('pressing the tab key', function() { + beforeEach(async function() { + await sendKeys({ press: 'Tab' }); + await allUpdates(element); + await nextFrame(); + }); + + it('should focus the first link', function() { + const firstBreadcrumb = element.querySelector('a'); + expect(document.activeElement).to.equal(firstBreadcrumb); + }); + }); + }); }); From 65140856b84124a8785f33dafc126f7c292996c3 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 25 Apr 2024 13:28:52 -0400 Subject: [PATCH 09/38] test(breadcrumb): add more tests --- .../rh-breadcrumb/test/rh-breadcrumb.spec.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts b/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts index 44b2abdd37..def2aafe3b 100644 --- a/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts +++ b/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts @@ -39,6 +39,20 @@ describe('', function() { .to.be.accessible(); }); + it('should contain an ordered list, list items, and anchor tags', function() { + const olElement = element.querySelector('ol'); + expect(olElement).to.exist; + + const listItemElements = element.querySelectorAll('li'); + expect(listItemElements).to.have.lengthOf.at.least(1); + + listItemElements.forEach(function(li) { + const anchorElement = li.querySelector('a'); + expect(anchorElement).to.exist; + expect(anchorElement.getAttribute('href')).to.not.be.empty; + }); + }); + describe('pressing the tab key', function() { beforeEach(async function() { await sendKeys({ press: 'Tab' }); @@ -50,6 +64,12 @@ describe('', function() { const firstBreadcrumb = element.querySelector('a'); expect(document.activeElement).to.equal(firstBreadcrumb); }); + + it('should underline the first link when focused', function() { + const firstBreadcrumb = element.querySelector('a'); + const computedStyle = getComputedStyle(firstBreadcrumb); + expect(computedStyle.textDecorationLine).to.equal('underline'); + }); }); }); }); From 7ae500d1e816601d38f03f355b5f0e0a7c150d6c Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Fri, 17 May 2024 12:10:35 -0400 Subject: [PATCH 10/38] fix(breadcrumb): remove last `
  1. ` truncation --- elements/rh-breadcrumb/rh-breadcrumb-lightdom.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css index 1c09290a10..b9c703a65a 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css +++ b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css @@ -50,10 +50,6 @@ rh-breadcrumb > ol > li:first-child { rh-breadcrumb > ol > li:last-child { background-image: none; - max-width: 27ch; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } rh-breadcrumb > ol > li, From bafdc14ee4c3ecdd1a53b8d15527635a45f25f16 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Mon, 20 May 2024 14:11:52 -0400 Subject: [PATCH 11/38] fix(breadcrumb): update breadcrumb demo html --- elements/rh-breadcrumb/demo/color-context.html | 10 ++++++---- elements/rh-breadcrumb/demo/last-no-link.html | 10 ++++++---- elements/rh-breadcrumb/demo/rh-breadcrumb.html | 10 ++++++---- elements/rh-breadcrumb/docs/00-overview.md | 10 ++++++---- elements/rh-breadcrumb/docs/30-code.md | 10 ++++++---- elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts | 10 ++++++---- 6 files changed, 36 insertions(+), 24 deletions(-) diff --git a/elements/rh-breadcrumb/demo/color-context.html b/elements/rh-breadcrumb/demo/color-context.html index d24c82999f..a5edba2e6e 100644 --- a/elements/rh-breadcrumb/demo/color-context.html +++ b/elements/rh-breadcrumb/demo/color-context.html @@ -1,10 +1,12 @@
      -
    1. Home
    2. -
    3. About
    4. -
    5. Our Team
    6. -
    7. Jamie Simeon Walinsky-Choeffer Houseman Stalinsky
    8. +
    9. Home
    10. +
    11. Products
    12. +
    13. Red Hat OpenShift on AWS
    14. +
    15. 4
    16. +
    17. Introduction to ROSA
    18. +
    19. Chapter 1. Understanding ROSA
    diff --git a/elements/rh-breadcrumb/demo/last-no-link.html b/elements/rh-breadcrumb/demo/last-no-link.html index d542ccead7..6f138723a5 100644 --- a/elements/rh-breadcrumb/demo/last-no-link.html +++ b/elements/rh-breadcrumb/demo/last-no-link.html @@ -1,9 +1,11 @@
      -
    1. Home
    2. -
    3. About
    4. -
    5. Our Team
    6. -
    7. Jamie Simeon Walinsky-Choeffer Houseman Stalinsky
    8. +
    9. Home
    10. +
    11. Products
    12. +
    13. Red Hat OpenShift on AWS
    14. +
    15. 4
    16. +
    17. Introduction to ROSA
    18. +
    19. Chapter 1. Understanding ROSA
    diff --git a/elements/rh-breadcrumb/demo/rh-breadcrumb.html b/elements/rh-breadcrumb/demo/rh-breadcrumb.html index 05c9f1b71d..b7095a9677 100644 --- a/elements/rh-breadcrumb/demo/rh-breadcrumb.html +++ b/elements/rh-breadcrumb/demo/rh-breadcrumb.html @@ -1,9 +1,11 @@
      -
    1. Home
    2. -
    3. About
    4. -
    5. Our Team
    6. -
    7. Jamie Simeon Walinsky-Choeffer Houseman Stalinsky
    8. +
    9. Home
    10. +
    11. Products
    12. +
    13. Red Hat OpenShift on AWS
    14. +
    15. 4
    16. +
    17. Introduction to ROSA
    18. +
    19. Chapter 1. Understanding ROSA
    diff --git a/elements/rh-breadcrumb/docs/00-overview.md b/elements/rh-breadcrumb/docs/00-overview.md index 22128438af..38fc936bce 100644 --- a/elements/rh-breadcrumb/docs/00-overview.md +++ b/elements/rh-breadcrumb/docs/00-overview.md @@ -8,10 +8,12 @@
      -
    1. Home
    2. -
    3. About
    4. -
    5. Our Team
    6. -
    7. Jamie Simeon Walinsky-Choeffer Houseman Stalinsky
    8. +
    9. Home
    10. +
    11. Products
    12. +
    13. Red Hat OpenShift on AWS
    14. +
    15. 4
    16. +
    17. Introduction to ROSA
    18. +
    19. Chapter 1. Understanding ROSA
    diff --git a/elements/rh-breadcrumb/docs/30-code.md b/elements/rh-breadcrumb/docs/30-code.md index 78f9a25bc3..ba1cb0f79f 100644 --- a/elements/rh-breadcrumb/docs/30-code.md +++ b/elements/rh-breadcrumb/docs/30-code.md @@ -5,10 +5,12 @@ ```html
      -
    1. Home
    2. -
    3. About
    4. -
    5. Our Team
    6. -
    7. Jamie Simeon Walinsky-Choeffer
    8. +
    9. Home
    10. +
    11. Products
    12. +
    13. Red Hat OpenShift on AWS
    14. +
    15. 4
    16. +
    17. Introduction to ROSA
    18. +
    19. Chapter 1. Understanding ROSA
    ``` diff --git a/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts b/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts index def2aafe3b..0fee06f0bb 100644 --- a/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts +++ b/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts @@ -24,10 +24,12 @@ describe('', function() { element = await createFixture(html`
      -
    1. Home
    2. -
    3. About
    4. -
    5. Our Team
    6. -
    7. Jamie Simeon Walinsky-Choeffer Houseman Stalinsky
    8. +
    9. Home
    10. +
    11. Products
    12. +
    13. Red Hat OpenShift on AWS
    14. +
    15. 4
    16. +
    17. Introduction to ROSA
    18. +
    19. Chapter 1. Understanding ROSA
    `); From 928a71b8d2f847512711fb88d77192f34f3f7f89 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Mon, 20 May 2024 16:57:06 -0400 Subject: [PATCH 12/38] feat(breadcrumb): add subtle variant + dark theme --- .../rh-breadcrumb/demo/color-context.html | 19 +++++++++ elements/rh-breadcrumb/demo/subtle.html | 15 +++++++ .../rh-breadcrumb/rh-breadcrumb-lightdom.css | 39 +++++++++++++++++-- elements/rh-breadcrumb/rh-breadcrumb.css | 29 +++++++------- elements/rh-breadcrumb/rh-breadcrumb.ts | 2 + 5 files changed, 84 insertions(+), 20 deletions(-) create mode 100644 elements/rh-breadcrumb/demo/subtle.html diff --git a/elements/rh-breadcrumb/demo/color-context.html b/elements/rh-breadcrumb/demo/color-context.html index a5edba2e6e..daf820308a 100644 --- a/elements/rh-breadcrumb/demo/color-context.html +++ b/elements/rh-breadcrumb/demo/color-context.html @@ -9,6 +9,19 @@
  2. Chapter 1. Understanding ROSA
+ +

Subtle:

+ + +
    +
  1. Home
  2. +
  3. Products
  4. +
  5. Red Hat OpenShift on AWS
  6. +
  7. 4
  8. +
  9. Introduction to ROSA
  10. +
  11. Chapter 1. Understanding ROSA
  12. +
+
@@ -16,3 +29,9 @@ import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js'; import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js'; + + diff --git a/elements/rh-breadcrumb/demo/subtle.html b/elements/rh-breadcrumb/demo/subtle.html new file mode 100644 index 0000000000..c680d64104 --- /dev/null +++ b/elements/rh-breadcrumb/demo/subtle.html @@ -0,0 +1,15 @@ + +
    +
  1. Home
  2. +
  3. Products
  4. +
  5. Red Hat OpenShift on AWS
  6. +
  7. 4
  8. +
  9. Introduction to ROSA
  10. +
  11. Chapter 1. Understanding ROSA
  12. +
+
+ + + diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css index b9c703a65a..e90948b5d0 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css +++ b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css @@ -1,6 +1,8 @@ rh-breadcrumb { /* stylelint-disable-next-line max-line-length */ - --_breadcrumb-caret-image: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23707070'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); + --_breadcrumb-caret-image-default: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23000000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); + /* stylelint-disable-next-line max-line-length */ + --_breadcrumb-caret-image-subtle: var(--rh-breadcrumb-caret-image-subtle, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23707070'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); --_breadcrumb-link-color: var( --rh-breadcrumb-link-color, @@ -9,7 +11,12 @@ rh-breadcrumb { --_breadcrumb-link-current-page: var( --rh-breadcrumb-link-current-page, - var(--rh-color-gray-60, #4d4d4d) + var(--rh-color-text-primary-on-light, #151515) + ); + --_breadcrumb-link-current-page-subtle: + var( + --rh-breadcrumb-link-current-page-subtle, + var(--rh-color-text-secondary-on-light, #4d4d4d) ); --_breadcrumb-link-color-visited: var( @@ -21,6 +28,16 @@ rh-breadcrumb { --rh-breadcrumb-link-color-visited-hover, var(--rh-color-interactive-purple-darkest, #21134d) ); + --_breadcrumb-link-color-focus: + var( + --rh-breadcrumb-link-color-focus, + var(--rh-color-border-interactive-on-light, #0066cc) + ); + --_breadcrumb-link-color-focus-outline-color: + var( + --rh-breadcrumb-link-color-focus-outline-color, + var(--rh-color-border-interactive-on-light, #0066cc) + ); display: block; } @@ -35,15 +52,19 @@ rh-breadcrumb ol { } rh-breadcrumb > ol > li { - background-image: var(--_breadcrumb-caret-image); + background-image: var(--_breadcrumb-caret-image-default); background-position: calc(100% - 14px) center; background-repeat: no-repeat; - background-size: 12px; + background-size: 10px; display: inline-block; padding-inline-end: var(--rh-breadcrumb-li-padding-inline-end, 42px); vertical-align: bottom; } +rh-breadcrumb[variant="subtle"] > ol > li { + background-image: var(--_breadcrumb-caret-image-subtle); +} + rh-breadcrumb > ol > li:first-child { padding-inline-start: 0; } @@ -65,6 +86,11 @@ rh-breadcrumb > ol > li > a:is(:hover, :focus) { text-decoration: underline; } +rh-breadcrumb > ol > li > a:is(:focus, :focus-visible) { + outline: 2px solid var(--_breadcrumb-link-color-focus-outline-color); + border-radius: var(--rh-border-radius-default, 3px); +} + rh-breadcrumb > ol > li:first-child > a { margin-inline-start: 0; } @@ -82,6 +108,11 @@ rh-breadcrumb > ol > li > a[aria-current="page"] { color: var(--_breadcrumb-link-current-page); } +rh-breadcrumb[variant="subtle"] > ol > li:last-child, +rh-breadcrumb[variant="subtle"] > ol > li > a[aria-current="page"] { + color: var(--_breadcrumb-link-current-page-subtle); +} + @container breadcrumbs-list (min-width: 992px) { rh-breadcrumb > ol > li:last-child { max-width: none; diff --git a/elements/rh-breadcrumb/rh-breadcrumb.css b/elements/rh-breadcrumb/rh-breadcrumb.css index 244a2a4d14..b2eb2c7dc1 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb.css +++ b/elements/rh-breadcrumb/rh-breadcrumb.css @@ -2,24 +2,11 @@ display: block; } -#container { - /* stylelint-disable-next-line max-line-length */ - --_breadcrumb-caret-image: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23707070'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); - --_breadcrumb-link-color: - var( - --rh-breadcrumb-link-color, - var(--rh-color-interactive-blue-darker, #0066cc) - ); - --_breadcrumb-link-current-page: - var( - --rh-breadcrumb-link-current-page, - var(--rh-color-gray-60, #4d4d4d) - ); -} - #container.dark { /* stylelint-disable-next-line max-line-length */ - --_breadcrumb-caret-image: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg width='10' height='15' viewBox='0 0 10 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_232_19612)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23C7C7C7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19612'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); + --_breadcrumb-caret-image-default: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23ffffff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); + /* stylelint-disable-next-line max-line-length */ + --_breadcrumb-caret-image-subtle: var(--rh-breadcrumb-caret-image-subtle, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23a3a3a3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); --_breadcrumb-link-color: var( --rh-breadcrumb-link-color, @@ -30,6 +17,11 @@ --rh-breadcrumb-link-current-page, var(--rh-color-text-secondary-on-dark, #c7c7c7) ); + --_breadcrumb-link-current-page-subtle: + var( + --rh-breadcrumb-link-current-page-subtle, + var(--rh-color-text-secondary-on-dark, #c7c7c7) + ); --_breadcrumb-link-color-visited: var( --rh-breadcrumb-link-color, @@ -40,4 +32,9 @@ --rh-breadcrumb-link-color-visited-hover, var(--rh-color-interactive-purple-lightest, #ece6ff) ); + --_breadcrumb-link-color-focus-outline-color: + var( + --rh-breadcrumb-link-color-focus-outline-color, + var(--rh-color-border-interactive-on-dark, #92c5f9) + ); } diff --git a/elements/rh-breadcrumb/rh-breadcrumb.ts b/elements/rh-breadcrumb/rh-breadcrumb.ts index 90754b3645..2633dd83f6 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb.ts +++ b/elements/rh-breadcrumb/rh-breadcrumb.ts @@ -28,6 +28,8 @@ import styles from './rh-breadcrumb.css'; export class RhBreadcrumb extends LitElement { @property({ type: Array }) items: string[] = []; + @property({ reflect: true }) variant?: 'subtle'; + /** * Sets color theme based on parent context */ From 84c82e05c4145cb2fc4d7c133b57fa237570a341 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Mon, 20 May 2024 16:57:37 -0400 Subject: [PATCH 13/38] fix(breadcrumb): increase breadcrumb space on mobile --- elements/rh-breadcrumb/rh-breadcrumb-lightdom.css | 1 + 1 file changed, 1 insertion(+) diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css index e90948b5d0..97f35d73fa 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css +++ b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css @@ -57,6 +57,7 @@ rh-breadcrumb > ol > li { background-repeat: no-repeat; background-size: 10px; display: inline-block; + margin-block-end: var(--rh-space-md, 8px); padding-inline-end: var(--rh-breadcrumb-li-padding-inline-end, 42px); vertical-align: bottom; } From d9ca41537f764f892f6c2ab8d728649d53618f51 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 21 May 2024 10:50:42 -0400 Subject: [PATCH 14/38] fix(breadcrumb): fix dark current page text color --- elements/rh-breadcrumb/rh-breadcrumb.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-breadcrumb/rh-breadcrumb.css b/elements/rh-breadcrumb/rh-breadcrumb.css index b2eb2c7dc1..ee6ce44881 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb.css +++ b/elements/rh-breadcrumb/rh-breadcrumb.css @@ -15,7 +15,7 @@ --_breadcrumb-link-current-page: var( --rh-breadcrumb-link-current-page, - var(--rh-color-text-secondary-on-dark, #c7c7c7) + var(--rh-color-text-primary-on-dark, #ffffff) ); --_breadcrumb-link-current-page-subtle: var( From bc2101aa9c9981b022df287c678fee73f12cada9 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 21 May 2024 10:56:27 -0400 Subject: [PATCH 15/38] fix(breadcrumb): change `href` value to `#`. --- elements/rh-breadcrumb/demo/color-context.html | 16 ++++++++-------- elements/rh-breadcrumb/demo/last-no-link.html | 8 ++++---- elements/rh-breadcrumb/demo/rh-breadcrumb.html | 8 ++++---- elements/rh-breadcrumb/demo/subtle.html | 8 ++++---- elements/rh-breadcrumb/docs/00-overview.md | 8 ++++---- elements/rh-breadcrumb/docs/30-code.md | 8 ++++---- .../rh-breadcrumb/test/rh-breadcrumb.spec.ts | 8 ++++---- 7 files changed, 32 insertions(+), 32 deletions(-) diff --git a/elements/rh-breadcrumb/demo/color-context.html b/elements/rh-breadcrumb/demo/color-context.html index daf820308a..14542cc88a 100644 --- a/elements/rh-breadcrumb/demo/color-context.html +++ b/elements/rh-breadcrumb/demo/color-context.html @@ -2,10 +2,10 @@
  1. Home
  2. -
  3. Products
  4. -
  5. Red Hat OpenShift on AWS
  6. -
  7. 4
  8. -
  9. Introduction to ROSA
  10. +
  11. Products
  12. +
  13. Red Hat OpenShift on AWS
  14. +
  15. 4
  16. +
  17. Introduction to ROSA
  18. Chapter 1. Understanding ROSA
@@ -15,10 +15,10 @@

Subtle:

  1. Home
  2. -
  3. Products
  4. -
  5. Red Hat OpenShift on AWS
  6. -
  7. 4
  8. -
  9. Introduction to ROSA
  10. +
  11. Products
  12. +
  13. Red Hat OpenShift on AWS
  14. +
  15. 4
  16. +
  17. Introduction to ROSA
  18. Chapter 1. Understanding ROSA
diff --git a/elements/rh-breadcrumb/demo/last-no-link.html b/elements/rh-breadcrumb/demo/last-no-link.html index 6f138723a5..b0cebfa826 100644 --- a/elements/rh-breadcrumb/demo/last-no-link.html +++ b/elements/rh-breadcrumb/demo/last-no-link.html @@ -1,10 +1,10 @@
  1. Home
  2. -
  3. Products
  4. -
  5. Red Hat OpenShift on AWS
  6. -
  7. 4
  8. -
  9. Introduction to ROSA
  10. +
  11. Products
  12. +
  13. Red Hat OpenShift on AWS
  14. +
  15. 4
  16. +
  17. Introduction to ROSA
  18. Chapter 1. Understanding ROSA
diff --git a/elements/rh-breadcrumb/demo/rh-breadcrumb.html b/elements/rh-breadcrumb/demo/rh-breadcrumb.html index b7095a9677..992229479e 100644 --- a/elements/rh-breadcrumb/demo/rh-breadcrumb.html +++ b/elements/rh-breadcrumb/demo/rh-breadcrumb.html @@ -1,10 +1,10 @@
  1. Home
  2. -
  3. Products
  4. -
  5. Red Hat OpenShift on AWS
  6. -
  7. 4
  8. -
  9. Introduction to ROSA
  10. +
  11. Products
  12. +
  13. Red Hat OpenShift on AWS
  14. +
  15. 4
  16. +
  17. Introduction to ROSA
  18. Chapter 1. Understanding ROSA
diff --git a/elements/rh-breadcrumb/demo/subtle.html b/elements/rh-breadcrumb/demo/subtle.html index c680d64104..bc96973973 100644 --- a/elements/rh-breadcrumb/demo/subtle.html +++ b/elements/rh-breadcrumb/demo/subtle.html @@ -1,10 +1,10 @@
  1. Home
  2. -
  3. Products
  4. -
  5. Red Hat OpenShift on AWS
  6. -
  7. 4
  8. -
  9. Introduction to ROSA
  10. +
  11. Products
  12. +
  13. Red Hat OpenShift on AWS
  14. +
  15. 4
  16. +
  17. Introduction to ROSA
  18. Chapter 1. Understanding ROSA
diff --git a/elements/rh-breadcrumb/docs/00-overview.md b/elements/rh-breadcrumb/docs/00-overview.md index 38fc936bce..ea16ed3b58 100644 --- a/elements/rh-breadcrumb/docs/00-overview.md +++ b/elements/rh-breadcrumb/docs/00-overview.md @@ -9,10 +9,10 @@
  1. Home
  2. -
  3. Products
  4. -
  5. Red Hat OpenShift on AWS
  6. -
  7. 4
  8. -
  9. Introduction to ROSA
  10. +
  11. Products
  12. +
  13. Red Hat OpenShift on AWS
  14. +
  15. 4
  16. +
  17. Introduction to ROSA
  18. Chapter 1. Understanding ROSA
diff --git a/elements/rh-breadcrumb/docs/30-code.md b/elements/rh-breadcrumb/docs/30-code.md index ba1cb0f79f..1207d96099 100644 --- a/elements/rh-breadcrumb/docs/30-code.md +++ b/elements/rh-breadcrumb/docs/30-code.md @@ -6,10 +6,10 @@
  1. Home
  2. -
  3. Products
  4. -
  5. Red Hat OpenShift on AWS
  6. -
  7. 4
  8. -
  9. Introduction to ROSA
  10. +
  11. Products
  12. +
  13. Red Hat OpenShift on AWS
  14. +
  15. 4
  16. +
  17. Introduction to ROSA
  18. Chapter 1. Understanding ROSA
diff --git a/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts b/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts index 0fee06f0bb..79c677410a 100644 --- a/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts +++ b/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts @@ -25,10 +25,10 @@ describe('', function() {
  1. Home
  2. -
  3. Products
  4. -
  5. Red Hat OpenShift on AWS
  6. -
  7. 4
  8. -
  9. Introduction to ROSA
  10. +
  11. Products
  12. +
  13. Red Hat OpenShift on AWS
  14. +
  15. 4
  16. +
  17. Introduction to ROSA
  18. Chapter 1. Understanding ROSA
From 9889adfd8461b2d2fbbee0bf60d81857642cd8c2 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 21 May 2024 10:56:52 -0400 Subject: [PATCH 16/38] fix(breadcrumb): use logical properties --- elements/rh-breadcrumb/demo/color-context.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-breadcrumb/demo/color-context.html b/elements/rh-breadcrumb/demo/color-context.html index 14542cc88a..96ecaf70f5 100644 --- a/elements/rh-breadcrumb/demo/color-context.html +++ b/elements/rh-breadcrumb/demo/color-context.html @@ -32,6 +32,6 @@

Subtle:

From 84d0de0633bf6d9834b799eb8b4950fe1b67744d Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 21 May 2024 13:57:14 -0400 Subject: [PATCH 17/38] fix(breadcrumb): remove more old truncation CSS --- elements/rh-breadcrumb/rh-breadcrumb-lightdom.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css index 97f35d73fa..0a4f9e2781 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css +++ b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css @@ -113,9 +113,4 @@ rh-breadcrumb[variant="subtle"] > ol > li:last-child, rh-breadcrumb[variant="subtle"] > ol > li > a[aria-current="page"] { color: var(--_breadcrumb-link-current-page-subtle); } - -@container breadcrumbs-list (min-width: 992px) { - rh-breadcrumb > ol > li:last-child { - max-width: none; - } } From bdba76d20f3d77542016cf5ddc631d618f8a4af0 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 21 May 2024 13:58:50 -0400 Subject: [PATCH 18/38] fix(breadcrumb): semantically rename vars --- .../rh-breadcrumb/rh-breadcrumb-lightdom.css | 21 +++++++++---------- elements/rh-breadcrumb/rh-breadcrumb.css | 14 ++++++------- 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css index 0a4f9e2781..9e92637ac7 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css +++ b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css @@ -8,19 +8,19 @@ rh-breadcrumb { --rh-breadcrumb-link-color, var(--rh-color-interactive-blue-darker, #0066cc) ); - --_breadcrumb-link-current-page: + --_breadcrumb-link-color-current-page: var( - --rh-breadcrumb-link-current-page, + --rh-breadcrumb-link-color-current-page, var(--rh-color-text-primary-on-light, #151515) ); - --_breadcrumb-link-current-page-subtle: + --_breadcrumb-link-color-current-page-subtle: var( - --rh-breadcrumb-link-current-page-subtle, + --rh-breadcrumb-link-color-current-page-subtle, var(--rh-color-text-secondary-on-light, #4d4d4d) ); --_breadcrumb-link-color-visited: var( - --rh-breadcrumb-link-color, + --rh-breadcrumb-link-color-visited, var(--rh-color-interactive-purple-darker, #5e40be) ); --_breadcrumb-link-color-visited-hover: @@ -33,9 +33,9 @@ rh-breadcrumb { --rh-breadcrumb-link-color-focus, var(--rh-color-border-interactive-on-light, #0066cc) ); - --_breadcrumb-link-color-focus-outline-color: + --_breadcrumb-link-focus-outline-color: var( - --rh-breadcrumb-link-color-focus-outline-color, + --rh-breadcrumb-link-focus-outline-color, var(--rh-color-border-interactive-on-light, #0066cc) ); @@ -88,7 +88,7 @@ rh-breadcrumb > ol > li > a:is(:hover, :focus) { } rh-breadcrumb > ol > li > a:is(:focus, :focus-visible) { - outline: 2px solid var(--_breadcrumb-link-color-focus-outline-color); + outline: 2px solid var(--_breadcrumb-link-focus-outline-color); border-radius: var(--rh-border-radius-default, 3px); } @@ -106,11 +106,10 @@ rh-breadcrumb > ol > li > a:visited:hover { rh-breadcrumb > ol > li:last-child, rh-breadcrumb > ol > li > a[aria-current="page"] { - color: var(--_breadcrumb-link-current-page); + color: var(--_breadcrumb-link-color-current-page); } rh-breadcrumb[variant="subtle"] > ol > li:last-child, rh-breadcrumb[variant="subtle"] > ol > li > a[aria-current="page"] { - color: var(--_breadcrumb-link-current-page-subtle); -} + color: var(--_breadcrumb-link-color-current-page-subtle); } diff --git a/elements/rh-breadcrumb/rh-breadcrumb.css b/elements/rh-breadcrumb/rh-breadcrumb.css index ee6ce44881..b8ec642750 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb.css +++ b/elements/rh-breadcrumb/rh-breadcrumb.css @@ -12,19 +12,19 @@ --rh-breadcrumb-link-color, var(--rh-color-interactive-blue-lighter, #92c5f9) ); - --_breadcrumb-link-current-page: + --_breadcrumb-link-color-current-page: var( - --rh-breadcrumb-link-current-page, + --rh-breadcrumb-link-color-current-page, var(--rh-color-text-primary-on-dark, #ffffff) ); - --_breadcrumb-link-current-page-subtle: + --_breadcrumb-link-color-current-page-subtle: var( - --rh-breadcrumb-link-current-page-subtle, + --rh-breadcrumb-link-color-current-page-subtle, var(--rh-color-text-secondary-on-dark, #c7c7c7) ); --_breadcrumb-link-color-visited: var( - --rh-breadcrumb-link-color, + --rh-breadcrumb-link-color-visited, var(--rh-color-interactive-purple-lighter, #b6a6e9) ); --_breadcrumb-link-color-visited-hover: @@ -32,9 +32,9 @@ --rh-breadcrumb-link-color-visited-hover, var(--rh-color-interactive-purple-lightest, #ece6ff) ); - --_breadcrumb-link-color-focus-outline-color: + --_breadcrumb-link-focus-outline-color: var( - --rh-breadcrumb-link-color-focus-outline-color, + --rh-breadcrumb-link-focus-outline-color, var(--rh-color-border-interactive-on-dark, #92c5f9) ); } From a933071d62eccc9d7ae18ff3c4fda60b7993a4ab Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 21 May 2024 14:22:47 -0400 Subject: [PATCH 19/38] docs(breadcrumb): document @cssprops --- elements/rh-breadcrumb/rh-breadcrumb.ts | 41 +++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/elements/rh-breadcrumb/rh-breadcrumb.ts b/elements/rh-breadcrumb/rh-breadcrumb.ts index 2633dd83f6..2f43708c76 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb.ts +++ b/elements/rh-breadcrumb/rh-breadcrumb.ts @@ -17,13 +17,48 @@ import styles from './rh-breadcrumb.css'; * * @csspart container - container element for slotted breadcrumb * + * @cssprop --rh-breadcrumb-link-color + * The link color for each anchor in the list + * {@default `var(--rh-color-interactive-blue-darker, #0066cc)`} + * + * @cssprop --rh-breadcrumb-link-color-current-page + * The current page's color + * {@default `var(--rh-color-text-primary-on-light, #151515)`} + * + * @cssprop --rh-breadcrumb-link-color-current-page-subtle + * The current page's color for the `subtle` variant + * {@default `var(--rh-color-text-secondary-on-light, #4d4d4d)`} + * + * @cssprop --rh-breadcrumb-link-color-visited + * The visited color for each breadcrumb link + * {@default `var(--rh-color-interactive-purple-darker, #5e40be)`} + * + * @cssprop --rh-breadcrumb-link-color-visited-hover + * The visited color on hover for each breadcrumb link + * {@default `var(--rh-color-interactive-purple-darkest, #21134d)`} + * + * @cssprop --rh-breadcrumb-link-color-focus + * The link color on focus for each anchor in the list + * {@default `var(--rh-color-border-interactive-on-light, #0066cc)`} + * + * @cssprop --rh-breadcrumb-link-focus-outline-color + * The link focus outline color + * {@default `var(--rh-color-border-interactive-on-light, #0066cc)`} + * * @cssprop --rh-breadcrumb-li-padding-inline-end * Sets the spacing between each breadcrumb item. * {@default `var(--rh-breadcrumb-li-padding-inline-end, 42px)`} + * * @cssprop --rh-breadcrumb-caret-image - * Defines the background image separating each breadcrumb item - * {@default `var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg width='10' height='15' viewBox='0 0 10 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_232_19612)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23C7C7C7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19612'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"))`} - */ + * The default background image separating each breadcrumb item + * {@default `var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23ffffff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"))`} + * + * @cssprop --rh-breadcrumb-caret-image-subtle + * The `subtle` variant background image separating each breadcrumb item + * {@default `var(--rh-breadcrumb-caret-image-subtle, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23a3a3a3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"))`} + * +*/ + @customElement('rh-breadcrumb') export class RhBreadcrumb extends LitElement { @property({ type: Array }) items: string[] = []; From 89f21110a4aa30d785ef90658f33f13805640d39 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 22 May 2024 12:32:47 -0400 Subject: [PATCH 20/38] fix(breadcrumb): link hover/focus/active color --- elements/rh-breadcrumb/rh-breadcrumb-lightdom.css | 13 +++++++------ elements/rh-breadcrumb/rh-breadcrumb.css | 5 +++++ elements/rh-breadcrumb/rh-breadcrumb.ts | 8 ++++---- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css index 9e92637ac7..bb4ee03b7d 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css +++ b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css @@ -18,6 +18,11 @@ rh-breadcrumb { --rh-breadcrumb-link-color-current-page-subtle, var(--rh-color-text-secondary-on-light, #4d4d4d) ); + --_breadcrumb-link-color-hover: + var( + --rh-breadcrumb-link-color-hover, + var(--rh-color-interactive-blue-darkest, #003366) + ); --_breadcrumb-link-color-visited: var( --rh-breadcrumb-link-color-visited, @@ -28,11 +33,6 @@ rh-breadcrumb { --rh-breadcrumb-link-color-visited-hover, var(--rh-color-interactive-purple-darkest, #21134d) ); - --_breadcrumb-link-color-focus: - var( - --rh-breadcrumb-link-color-focus, - var(--rh-color-border-interactive-on-light, #0066cc) - ); --_breadcrumb-link-focus-outline-color: var( --rh-breadcrumb-link-focus-outline-color, @@ -83,7 +83,8 @@ rh-breadcrumb > ol > li > a { text-decoration: none; } -rh-breadcrumb > ol > li > a:is(:hover, :focus) { +rh-breadcrumb > ol > li > a:is(:hover, :focus, :active) { + color: var(--_breadcrumb-link-color-hover); text-decoration: underline; } diff --git a/elements/rh-breadcrumb/rh-breadcrumb.css b/elements/rh-breadcrumb/rh-breadcrumb.css index b8ec642750..80935e371e 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb.css +++ b/elements/rh-breadcrumb/rh-breadcrumb.css @@ -22,6 +22,11 @@ --rh-breadcrumb-link-color-current-page-subtle, var(--rh-color-text-secondary-on-dark, #c7c7c7) ); + --_breadcrumb-link-color-hover: + var( + --rh-breadcrumb-link-color-hover, + var(--rh-color-interactive-blue-lightest, #b9dafc) + ); --_breadcrumb-link-color-visited: var( --rh-breadcrumb-link-color-visited, diff --git a/elements/rh-breadcrumb/rh-breadcrumb.ts b/elements/rh-breadcrumb/rh-breadcrumb.ts index 2f43708c76..0b9876ee16 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb.ts +++ b/elements/rh-breadcrumb/rh-breadcrumb.ts @@ -29,6 +29,10 @@ import styles from './rh-breadcrumb.css'; * The current page's color for the `subtle` variant * {@default `var(--rh-color-text-secondary-on-light, #4d4d4d)`} * + * @cssprop --rh-breadcrumb-link-color-hover + * The link color on hover/focus/active for each anchor in the list + * {@default `var(--rh-color-interactive-blue-darkest, #003366)`} + * * @cssprop --rh-breadcrumb-link-color-visited * The visited color for each breadcrumb link * {@default `var(--rh-color-interactive-purple-darker, #5e40be)`} @@ -37,10 +41,6 @@ import styles from './rh-breadcrumb.css'; * The visited color on hover for each breadcrumb link * {@default `var(--rh-color-interactive-purple-darkest, #21134d)`} * - * @cssprop --rh-breadcrumb-link-color-focus - * The link color on focus for each anchor in the list - * {@default `var(--rh-color-border-interactive-on-light, #0066cc)`} - * * @cssprop --rh-breadcrumb-link-focus-outline-color * The link focus outline color * {@default `var(--rh-color-border-interactive-on-light, #0066cc)`} From 0a612462ede65a0e8cd4a27c7fc7c7606b262145 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 22 May 2024 12:33:27 -0400 Subject: [PATCH 21/38] style(breadcrumb): alphabetize css properties --- elements/rh-breadcrumb/rh-breadcrumb-lightdom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css index bb4ee03b7d..80139b04fc 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css +++ b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css @@ -89,8 +89,8 @@ rh-breadcrumb > ol > li > a:is(:hover, :focus, :active) { } rh-breadcrumb > ol > li > a:is(:focus, :focus-visible) { - outline: 2px solid var(--_breadcrumb-link-focus-outline-color); border-radius: var(--rh-border-radius-default, 3px); + outline: 2px solid var(--_breadcrumb-link-focus-outline-color); } rh-breadcrumb > ol > li:first-child > a { From 9a1c027aba6114d7e0fc11292d87859692cb58b1 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 22 May 2024 12:36:25 -0400 Subject: [PATCH 22/38] refactor(breadcrumb): rename last no link demo --- .../demo/{last-no-link.html => non-interactive-last-item.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename elements/rh-breadcrumb/demo/{last-no-link.html => non-interactive-last-item.html} (100%) diff --git a/elements/rh-breadcrumb/demo/last-no-link.html b/elements/rh-breadcrumb/demo/non-interactive-last-item.html similarity index 100% rename from elements/rh-breadcrumb/demo/last-no-link.html rename to elements/rh-breadcrumb/demo/non-interactive-last-item.html From f2389b99646f9182c0424f60b67fcb37b67159ec Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 22 May 2024 12:40:42 -0400 Subject: [PATCH 23/38] fix(breadcrumb): add subtle variant to non-interactive last item demo --- .../demo/non-interactive-last-item.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/elements/rh-breadcrumb/demo/non-interactive-last-item.html b/elements/rh-breadcrumb/demo/non-interactive-last-item.html index b0cebfa826..33fceab668 100644 --- a/elements/rh-breadcrumb/demo/non-interactive-last-item.html +++ b/elements/rh-breadcrumb/demo/non-interactive-last-item.html @@ -9,7 +9,26 @@
+

Subtle:

+ + +
    +
  1. Home
  2. +
  3. Products
  4. +
  5. Red Hat OpenShift on AWS
  6. +
  7. 4
  8. +
  9. Introduction to ROSA
  10. +
  11. Chapter 1. Understanding ROSA
  12. +
+
+ + + From be76fff9007fdca0f9349cce3a3a7c74c67dbc73 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Fri, 31 May 2024 10:36:21 -0400 Subject: [PATCH 24/38] fix(breadcrumb): remove interactivity of current page --- elements/rh-breadcrumb/rh-breadcrumb-lightdom.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css index 80139b04fc..bf36a6828c 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css +++ b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css @@ -110,6 +110,11 @@ rh-breadcrumb > ol > li > a[aria-current="page"] { color: var(--_breadcrumb-link-color-current-page); } +rh-breadcrumb > ol > li > a[aria-current="page"] { + cursor: default; + pointer-events: none; +} + rh-breadcrumb[variant="subtle"] > ol > li:last-child, rh-breadcrumb[variant="subtle"] > ol > li > a[aria-current="page"] { color: var(--_breadcrumb-link-color-current-page-subtle); From 864f75686b86bc33dde1609ca47bba3bd7e183df Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Mon, 17 Jun 2024 14:46:13 -0400 Subject: [PATCH 25/38] fix(breadcrumbs): move vars to shadow host selector --- .../rh-breadcrumb/rh-breadcrumb-lightdom.css | 40 ------------------- elements/rh-breadcrumb/rh-breadcrumb.css | 40 +++++++++++++++++++ 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css index bf36a6828c..cc4eb010ff 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css +++ b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css @@ -1,44 +1,4 @@ rh-breadcrumb { - /* stylelint-disable-next-line max-line-length */ - --_breadcrumb-caret-image-default: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23000000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); - /* stylelint-disable-next-line max-line-length */ - --_breadcrumb-caret-image-subtle: var(--rh-breadcrumb-caret-image-subtle, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23707070'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); - --_breadcrumb-link-color: - var( - --rh-breadcrumb-link-color, - var(--rh-color-interactive-blue-darker, #0066cc) - ); - --_breadcrumb-link-color-current-page: - var( - --rh-breadcrumb-link-color-current-page, - var(--rh-color-text-primary-on-light, #151515) - ); - --_breadcrumb-link-color-current-page-subtle: - var( - --rh-breadcrumb-link-color-current-page-subtle, - var(--rh-color-text-secondary-on-light, #4d4d4d) - ); - --_breadcrumb-link-color-hover: - var( - --rh-breadcrumb-link-color-hover, - var(--rh-color-interactive-blue-darkest, #003366) - ); - --_breadcrumb-link-color-visited: - var( - --rh-breadcrumb-link-color-visited, - var(--rh-color-interactive-purple-darker, #5e40be) - ); - --_breadcrumb-link-color-visited-hover: - var( - --rh-breadcrumb-link-color-visited-hover, - var(--rh-color-interactive-purple-darkest, #21134d) - ); - --_breadcrumb-link-focus-outline-color: - var( - --rh-breadcrumb-link-focus-outline-color, - var(--rh-color-border-interactive-on-light, #0066cc) - ); - display: block; } diff --git a/elements/rh-breadcrumb/rh-breadcrumb.css b/elements/rh-breadcrumb/rh-breadcrumb.css index 80935e371e..cb1122d0d6 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb.css +++ b/elements/rh-breadcrumb/rh-breadcrumb.css @@ -1,4 +1,44 @@ :host { + /* stylelint-disable-next-line max-line-length */ + --_breadcrumb-caret-image-default: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23000000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); + /* stylelint-disable-next-line max-line-length */ + --_breadcrumb-caret-image-subtle: var(--rh-breadcrumb-caret-image-subtle, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23707070'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); + --_breadcrumb-link-color: + var( + --rh-breadcrumb-link-color, + var(--rh-color-interactive-blue-darker, #0066cc) + ); + --_breadcrumb-link-color-current-page: + var( + --rh-breadcrumb-link-color-current-page, + var(--rh-color-text-primary-on-light, #151515) + ); + --_breadcrumb-link-color-current-page-subtle: + var( + --rh-breadcrumb-link-color-current-page-subtle, + var(--rh-color-text-secondary-on-light, #4d4d4d) + ); + --_breadcrumb-link-color-hover: + var( + --rh-breadcrumb-link-color-hover, + var(--rh-color-interactive-blue-darkest, #003366) + ); + --_breadcrumb-link-color-visited: + var( + --rh-breadcrumb-link-color-visited, + var(--rh-color-interactive-purple-darker, #5e40be) + ); + --_breadcrumb-link-color-visited-hover: + var( + --rh-breadcrumb-link-color-visited-hover, + var(--rh-color-interactive-purple-darkest, #21134d) + ); + --_breadcrumb-link-focus-outline-color: + var( + --rh-breadcrumb-link-focus-outline-color, + var(--rh-color-border-interactive-on-light, #0066cc) + ); + display: block; } From 2c93610d3b26536d42d57df561e6a3e7fe7d22d5 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Mon, 17 Jun 2024 15:47:03 -0400 Subject: [PATCH 26/38] chore(breadcrumb): resolve typescript warning --- elements/rh-breadcrumb/rh-breadcrumb.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/elements/rh-breadcrumb/rh-breadcrumb.ts b/elements/rh-breadcrumb/rh-breadcrumb.ts index 0b9876ee16..96738bab77 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb.ts +++ b/elements/rh-breadcrumb/rh-breadcrumb.ts @@ -12,11 +12,8 @@ import styles from './rh-breadcrumb.css'; * of links to the parent pages of the current page in hierarchical order. It * helps users find their place within a website or web application. * @summary Links displaying a hierarchical location - * * @slot - Place an ordered list (`
    `) of your breadcrumbs into the slot - * * @csspart container - container element for slotted breadcrumb - * * @cssprop --rh-breadcrumb-link-color * The link color for each anchor in the list * {@default `var(--rh-color-interactive-blue-darker, #0066cc)`} @@ -57,7 +54,7 @@ import styles from './rh-breadcrumb.css'; * The `subtle` variant background image separating each breadcrumb item * {@default `var(--rh-breadcrumb-caret-image-subtle, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23a3a3a3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"))`} * -*/ + */ @customElement('rh-breadcrumb') export class RhBreadcrumb extends LitElement { From 92b41ba507a89dfc1554cb5817e011f7034b5a1d Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Mon, 17 Jun 2024 15:51:56 -0400 Subject: [PATCH 27/38] feat(breadcrumb): add optional accessible label prop --- .../demo/custom-accessible-label.html | 15 ++++++++ elements/rh-breadcrumb/rh-breadcrumb.ts | 12 ++++++- .../rh-breadcrumb/test/rh-breadcrumb.spec.ts | 34 +++++++++++++++++++ 3 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 elements/rh-breadcrumb/demo/custom-accessible-label.html diff --git a/elements/rh-breadcrumb/demo/custom-accessible-label.html b/elements/rh-breadcrumb/demo/custom-accessible-label.html new file mode 100644 index 0000000000..4839e13e1c --- /dev/null +++ b/elements/rh-breadcrumb/demo/custom-accessible-label.html @@ -0,0 +1,15 @@ + +
      +
    1. Home
    2. +
    3. Products
    4. +
    5. Red Hat OpenShift on AWS
    6. +
    7. 4
    8. +
    9. Introduction to ROSA
    10. +
    11. Chapter 1. Understanding ROSA
    12. +
    +
    + + + diff --git a/elements/rh-breadcrumb/rh-breadcrumb.ts b/elements/rh-breadcrumb/rh-breadcrumb.ts index 96738bab77..2c96ba12ef 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb.ts +++ b/elements/rh-breadcrumb/rh-breadcrumb.ts @@ -60,6 +60,15 @@ import styles from './rh-breadcrumb.css'; export class RhBreadcrumb extends LitElement { @property({ type: Array }) items: string[] = []; + /** + * Customize the default `aria-label` on the `
-## Demo - -{% playground tagName=tagName %}{% endplayground %} -Full screen demo - ## When to use - When you want to help orient a user and and show where they are in the page hierarchy From 5f8c425289faeec7e6f5986af26fb6ac49828142 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 11 Jul 2024 13:57:17 -0400 Subject: [PATCH 37/38] docs(breadcrumb): update anatomy to use figure --- elements/rh-breadcrumb/docs/10-style.md | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/elements/rh-breadcrumb/docs/10-style.md b/elements/rh-breadcrumb/docs/10-style.md index e2f1549048..d92d7c1636 100644 --- a/elements/rh-breadcrumb/docs/10-style.md +++ b/elements/rh-breadcrumb/docs/10-style.md @@ -4,14 +4,18 @@ Breadcrumb navigation is composed of links, text, and caret icons as separators. ### Anatomy - - Anatomy of breadcrumbs with numbered annotations pointing to various parts - - -1) Parent page -2) Separator -3) Current page - {.example-notes} +
+ + Anatomy of breadcrumbs with numbered annotations pointing to various parts + +
+
    +
  1. Parent page
  2. +
  3. Seperator
  4. +
  5. Current page
  6. +
+
+
## Theme From cea1ad38d8a87443ebc633881699213a2ffc2f08 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 11 Jul 2024 14:00:29 -0400 Subject: [PATCH 38/38] docs(breadcrumbs): decrease docs CSS specificity --- docs/styles/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/styles/styles.css b/docs/styles/styles.css index b042ee24a4..d4c36625a8 100644 --- a/docs/styles/styles.css +++ b/docs/styles/styles.css @@ -189,7 +189,7 @@ margin-block-start: var(--rh-space-2xl, 32px); } - rh-alert + div.grid { + rh-alert + .grid { margin-block-start: var(--rh-space-2xl, 32px); }