feat(Panel): consumed Penta tokens#6160
Conversation
| // scrollable | ||
| --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)}; | ||
| --#{$panel}--m-scrollable__main--Overflow: auto; | ||
| --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} #{rgba($pf-v5-color-black-1000, .16)}; // insets the shadow so it doesn't show on left/right sides |
There was a problem hiding this comment.
Is there a token we want to use for this hardcoded rgba?
There was a problem hiding this comment.
I'm not sure we'll even want a box-shadow there? If so, @andrew-ronaldson do you want to pick a palette color to replace it since this color will go away, and then @thatblindgeye we can put in a todo or follow up issue so we don't lose this?
There was a problem hiding this comment.
fwiw, with our box shadow tokens we're just using black (rgba(0 0 0 / 16%))
|
Preview: https://patternfly-pr-6160.surge.sh A11y report: https://patternfly-pr-6160-a11y.surge.sh |
|
Looks like there is some dark theme tokens shenanigans. |
|
@andrew-ronaldson ah that should be covered by the Drawer portion of the linked issue. This PR only covers the Panel component. There are some Toolbar examples that use a panel to contain Menu components where the text isn't working properly in Dark mode, but that should be resolved by the Menu penta work. |
There was a problem hiding this comment.
This looks good other than that variable you called out.
| // scrollable | ||
| --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)}; | ||
| --#{$panel}--m-scrollable__main--Overflow: auto; | ||
| --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} #{rgba($pf-v5-color-black-1000, .16)}; // insets the shadow so it doesn't show on left/right sides |
There was a problem hiding this comment.
I'm not sure we'll even want a box-shadow there? If so, @andrew-ronaldson do you want to pick a palette color to replace it since this color will go away, and then @thatblindgeye we can put in a todo or follow up issue so we don't lose this?
There was a problem hiding this comment.
LGTM, though I do think the raised variation should use the floating background token.
Is there a design for panel? I didn't see it in figma.
| --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100); | ||
| --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md); | ||
| --#{$panel}--m-raised--ZIndex: var(--pf-t--global--Zindex--sm); | ||
| --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--primary--default); |
There was a problem hiding this comment.
I believe the intention for this variation is to act as a panel that would float on top of other stuff, like a dropdown or whatever. Assuming that's true, we'll want to use the floating background color token.
The v5 panel was using the floating background color but only in dark theme since that's where it was added -
| // scrollable | ||
| --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)}; | ||
| --#{$panel}--m-scrollable__main--Overflow: auto; | ||
| --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} #{rgba($pf-v5-color-black-1000, .16)}; // insets the shadow so it doesn't show on left/right sides |
There was a problem hiding this comment.
fwiw, with our box shadow tokens we're just using black (rgba(0 0 0 / 16%))
|
🎉 This PR is included in version 6.0.0-alpha.45 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Work towards #5711
Right now this just updates vars to use tokens since the Drawer designs in Figma aren't totally 1:1 for what a Panel is.
Should we remove the bordered and raised styling for a panel, and follow more closely the inline, full page Drawer designs? That looks to have no border and always has a box shadow around it, but I'm not sure if we would always want the panel to have a box shadow.