Conversation
|
Preview: https://patternfly-pr-6251.surge.sh A11y report: https://patternfly-pr-6251-a11y.surge.sh |
There was a problem hiding this comment.
This is a followup/docs thing I noticed, but some examples need to be updated to either include the toggle icon for the second step or make that second step not have substeps:
| --#{$wizard}__nav-link--before--TranslateX: calc(-100% - var(--#{$pf-global}--spacer--sm)); | ||
| --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--#{$pf-global}--active-color--100); | ||
| --#{$wizard}__nav-link--m-current--before--Color: var(--#{$pf-global}--Color--light-100); | ||
| --#{$wizard}__nav-link--before--Top: var(--#{$pf-global}--spacer--form-element); |
There was a problem hiding this comment.
Does this need a todo to replace with a token form element spacer?
| // Close | ||
| --#{$wizard}__close--Top: calc(var(--#{$pf-global}--spacer--lg) - var(--#{$pf-global}--spacer--form-element)); | ||
| --#{$wizard}__close--Top: calc(var(--pf-t--global--spacer--lg) - var(--#{$pf-global}--spacer--form-element)); | ||
| --#{$wizard}__close--Right: 0; |
There was a problem hiding this comment.
Would we want to update this from 0? Right now at < xl viewports the button is right up against the edge of the wizard header, which it may just be the context of the example as it would look fine in the context of an actual page most likely.
|
|
e20569d to
1dd48a1
Compare
1d4085c to
5be043f
Compare
There was a problem hiding this comment.
- in page wizards - only the content should scroll, header and footer should be sticky (though they don't need to be position sticky necessarily)
- step number background disappears on hover/focus in dark mode
- disabled step text color changes slightly on hover in dark mode
| --#{$wizard}__nav-link--before--TranslateX: calc(-100% - var(--#{$pf-global}--spacer--sm)); | ||
| --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--#{$pf-global}--active-color--100); | ||
| --#{$wizard}__nav-link--m-current--before--Color: var(--#{$pf-global}--Color--light-100); | ||
| --#{$wizard}__nav-link--before--Top: var(--#{$pf-global}--spacer--form-element); // TODO form element spacer |
There was a problem hiding this comment.
Figure out a way to get this to align with an existing token
| --#{$wizard}__footer--child--MarginBottom: var(--pf-t--global--spacer--sm); | ||
| --#{$wizard}__footer-cancel--MarginLeft: calc(var(--pf-t--global--spacer--2xl) - var(--#{$wizard}__footer--child--MarginRight)); | ||
|
|
||
| @media screen and (min-width: $pf-v5-global--breakpoint--xl) { |
There was a problem hiding this comment.
Take out any sort of inset changes that are switching between md and lg spacers at the xl breakpoint, and just use the lg/24px inset across viewports.
| &.pf-m-disabled { | ||
| --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--m-disabled--Color); | ||
|
|
||
| pointer-events: none; |
There was a problem hiding this comment.
Need to keep this for when the item is a.pf-m-disabled
| --#{$wizard}__toggle--m-expanded--BorderBottomColor: var(--#{$pf-global}--BorderColor--100); | ||
| --#{$wizard}--m-in-page__toggle--xl--PaddingLeft: calc(var(--#{$pf-global}--spacer--xl) + var(--#{$wizard}__nav-link--before--Width) + var(--#{$pf-global}--spacer--sm)); | ||
| --#{$wizard}__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default); | ||
| --#{$wizard}__toggle--ZIndex: var(--pf-t--global--Zindex--xs); |
There was a problem hiding this comment.
Toggle has a box shadow that isn't showing because it's behind the wizard nav - increasing the z-index on the toggle gets it to show. It's worth noting that v5 has this same z-index setup and the box shadow on the toggle does show, so I'm wondering if something else has changed the stacking order of toggle + nav on mobile?
There was a problem hiding this comment.
Confirmed this is pre-existing - it happens when the drawer is in the main section. It's probably best fixed by assigning a z-index to the main section that's lower than the toggle, which should keep the toggle on top of all children in the main section, regardless their z-index. However, the main section has no z-index on purpose so its children (like menus) that have z-indexes can pop out on top of the footer. I'm not sure how to get around that.
Another option could be to use a border instead of a shadow on the toggle, similar to the update I think we made for the wizard footer. There is already a border in place of the shadow on the toggle when the nav is expanded. wdyt @lboehling? It would look like this:
This is the current shadow:
With a border instead:
And the pre-existing border when the nav is expanded:
|
🎉 This PR is included in version 6.0.0-alpha.82 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Fixes #5742
Uses the link button for styling the wizard nav links, although there are a few overrides.
There is now a line above the footer in all cases; no shadow when sticky. (per design)
There's a TODO to calculate an offset but I think that can wait for another day...