fix(pagination): adjust block padding#7065
Conversation
|
Preview: https://patternfly-pr-7065.surge.sh A11y report: https://patternfly-pr-7065-a11y.surge.sh |
| --#{$toolbar}--RowGap: var(--pf-t--global--spacer--md); | ||
| --#{$toolbar}--PaddingBlockStart: 0; | ||
| --#{$toolbar}--PaddingBlockEnd: var(--pf-t--global--spacer--md); | ||
| --#{$toolbar}--PaddingBlockEnd: var(--pf-t--global--spacer--gap--group--vertical); |
There was a problem hiding this comment.
looking through the backstop report and i'm wondering if we should leave this a md spacer. Toolbar starts looking really cramped in examples that have a divider beneath the toolbar
|
Two quick questions:
|
|
@evwilkin great feedback! On the var question, bottom pagination is a bit tricky. Here's the rundown of how it works:
|
There was a problem hiding this comment.
Nothing blocking below
| --#{$pagination}--m-bottom--PaddingBlockStart: 0; | ||
| --#{$pagination}--m-bottom--m-sticky--PaddingBlockStart: 0; | ||
| --#{$pagination}--m-bottom--md--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical); | ||
| --#{$pagination}--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical); |
There was a problem hiding this comment.
Super🦸🏼 nit, but these new vars could be bumped up a line so that all the PaddingBlockStart vars are grouped together
|
@evwilkin oops, I replied prematurely above. Nice catch, I see what you mean and yep that needs to be updated 👍 |
|
@srambach @thatblindgeye from the feedback above, I took another look at the padding vars. We basically have a static layout and a sticky layout. Sticky is less than the I took the route of creating 4 sets of padding vars:
Taking a stab at a simpler way to expose vars to users, and less vars on our end, I just created |
There was a problem hiding this comment.
Looks good - I like the variables. 🎋
fixes #7057
Visual regression report - backstop-toolbar-pagination-padding.pdf
This updates both the toolbar's bottom padding and the bottom pagination's top padding to use
var(--pf-t--global--spacer--gap--group--vertical)