Skip to content
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

Merged
merged 6 commits into from May 14, 2020
Merged

fix(table-grid): move borders to ::after #3113

merged 6 commits into from May 14, 2020

Conversation

mattnolting
Copy link
Contributor

@mattnolting mattnolting commented May 14, 2020

This PR moves ::before borders to ::after borders to prevent the following hidden label ([data-label]::before)

Screen Shot 2020-05-14 at 11 03 46 AM

Screen Shot 2020-05-14 at 11 08 30 AM

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

@patternfly-build
Copy link

patternfly-build commented May 14, 2020

Copy link
Contributor

@mcoker mcoker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bitmoji

@@ -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);
Copy link
Member

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;
Copy link
Member

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

@christiemolloy
Copy link
Member

This arrow should be pointing upwards

Screen Shot 2020-05-14 at 3 51 29 PM

@christiemolloy
Copy link
Member

on FF im seeing a weird black box when I click on any of the buttons inside the table, I couldnt capture it in a screenshot because it disappears quick. can you see it. doesn't look like its coming from hover/focus/active

Screen Shot 2020-05-14 at 3 52 58 PM

@christiemolloy christiemolloy merged commit b519fc8 into patternfly:master May 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants