New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(table-grid): move borders to ::after #3113
Conversation
Preview: https://patternfly-pr-3113.surge.sh A11y report: https://patternfly-pr-3113-coverage.surge.sh |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -43,14 +43,14 @@ | |||
// Body | |||
--pf-c-table-tbody--responsive--MarginTop: var(--pf-global--spacer--xs); | |||
--pf-c-table-tbody--m-expanded--before--Top: var(--pf-global--spacer--sm); | |||
--pf-c-table-tbody--responsive--BorderWidth: var(--pf-global--spacer--sm); | |||
--pf-c-table--tbody--after--BorderWidth: var(--pf-global--BorderWidth--lg); | |||
--pf-c-table-tbody--responsive--border-width--base: var(--pf-global--spacer--sm); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This var is --pf-c-table-tbody....
but the ones below are --pf-c-table--tbody...
|
||
& tbody { | ||
--pf-c-table--tbody--after--BorderLeftWidth: 0; | ||
} | ||
} | ||
|
||
> tr > :first-child:not(.pf-c-table__check)::before { | ||
> tr > :first-child:not(.pf-c-table__check)::after { | ||
--pf-c-table__expandable-row--before--BorderLeftWidth: 0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i think this should be --pf-c-table__expandable-row--after--BorderLeftWidth
because this var was removed
This PR moves
::before
borders to::after
borders to prevent the following hidden label ([data-label]::before
)Breaking changes
This PR updates
.pf-c-table
borders to use::after
pseudos to draw borders, rather than::before
pseudos.The following variables have been removed. Any reference to them should be removed as they are no longer used in patternfly:
--pf-c-table__expandable-row--before--BorderRightWidth
The following variables have been renamed. Any reference to the old variable should be updated to use the new variable:
--pf-c-table-tbody--responsive—BorderWidth
has changed to--pf-c-table--tbody--responsive--border-width--base
--pf-c-table--tbody--after—BorderWidth
has changed to--pf-c-table--tbody--after--border-width—base
--pf-c-table-tr--responsive—BorderWidth
has changed to--pf-c-table-tr--responsive--border-width—base
--pf-c-table-tr--responsive--last-child—BorderWidth
has changed to--pf-c-table-tr--responsive--last-child—BorderBottomWidth
--pf-c-table-tbody--responsive—BorderWidth
has changed to--pf-c-table-tbody--responsive--border-width--base
--pf-c-table-tr--responsive—BorderWidth
has changed to--pf-c-table-tr--responsive--border-width--base
--pf-c-table--BorderWidth
has changed to--pf-c-table--border-width--base
--pf-c-table__expandable-row--before--Top
has changed to--pf-c-table__expandable-row--after--Top
--pf-c-table__expandable-row--before--Bottom
has changed to--pf-c-table__expandable-row--after--Bottom
--pf-c-table__expandable-row--before--BorderWidth
has changed to--pf-c-table__expandable-row--after--border-width--base
--pf-c-table__expandable-row--before--BorderLeftWidth
has changed to--pf-c-table__expandable-row--after--BorderLeftWidth
--pf-c-table__expandable-row--before--BorderColor
has changed to--pf-c-table__expandable-row--after--BorderColor
--pf-c-table__compound-expansion-toggle__button--before--BorderWidth
has changed to--pf-c-table__compound-expansion-toggle__button--before--border-width--base
--pf-c-table__compound-expansion-toggle__button--after--BorderWidth
has changed to--pf-c-table__compound-expansion-toggle__button--after--border-width--base
--pf-c-table-cell-th--responsive--PaddingTop
has changed to--pf-c-table--cell--first-child--responsive--PaddingTop