feat(nav): add high-contrast border - #7721
Conversation
|
Preview: https://pf-pr-7721.surge.sh A11y report: https://pf-pr-7721-a11y.surge.sh |
7df4d6e to
e0002fa
Compare
| inset: 0; | ||
| pointer-events: none; | ||
| content: ""; | ||
| border: var(--#{$nav}__link--after--BorderWidth) solid var(--#{$nav}__link--after--BorderColor); |
There was a problem hiding this comment.
Any reason to have --after in them?
| border: var(--#{$nav}__link--after--BorderWidth) solid var(--#{$nav}__link--after--BorderColor); | |
| border: var(--#{$nav}__link--BorderWidth) solid var(--#{$nav}__link--BorderColor); |
| --#{$nav}--m-horizontal--m-subnav--BorderWidth: var(--pf-t--global--border--width--divider--default); | ||
| --#{$nav}--m-horizontal--m-subnav--BorderColor: var(--pf-t--global--border--color--high-contrast--default); |
There was a problem hiding this comment.
Typo in the color var, it isn't showing up currently.
Also can you use a HC border width here? Towards the end of development, we can investigate if there is a pattern for boxes like this that need a border in HC and propose a semantic token if it makes sense (like with the plain action tokens)
| --#{$nav}--m-horizontal--m-subnav--BorderWidth: var(--pf-t--global--border--width--divider--default); | |
| --#{$nav}--m-horizontal--m-subnav--BorderColor: var(--pf-t--global--border--color--high-contrast--default); | |
| --#{$nav}--m-horizontal--m-subnav--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); | |
| --#{$nav}--m-horizontal--m-subnav--BorderColor: var(--pf-t--global--border--color--high-contrast); |
lboehling
left a comment
lboehling
left a comment
There was a problem hiding this comment.
This looks good! I think the horizontal subnav pill bkg shape still needs HC border tokens added, also the vertical nav with drilldown examples look like they haven't had the HC tokens applied.
The nav with drilldown examples come along with the menu PR because those are implemented as menus rather than nav! |
4 participants
Fixes #7621
Adds a border on the ::after of the __link element, because the border width changes when selected.
Adds a border directly on the horizontal secondary nav.
Full backstop report only showed 6 failures that appear to be the noise on the mobile view.
Figma design
Used Cursor autocomplete.