patternfly / patternfly

This repo contains core (HTML/CSS) implementation for PatternFly. Issues related to CSS/HTML and layout should be filed here.
https://patternfly.org
MIT License
695 stars 95 forks source link

Performance candidate: simplify complex selector chains in `table` #6724

Open mattnolting opened 3 months ago

mattnolting commented 3 months ago

Complex chained selectors have a significant impact upon performance. When table was first implemented, th/tds didn't have an associated selector which resulted in targeting th/td instead of table__th/table__td. Now that we have selector access, targeting specific selectors, rather than elements, would provide significant performance benefits.

Visual regression testing should accompany this issue

mcoker commented 3 months ago

closing for now until this is planned

mattnolting commented 1 month ago

Update 7/30/24

We discussed w/design updating :first/:last-child specific padding to pf-m-inset which is not present by default. The addition would look something like:

@lboehling @andrew-ronaldson @kaylachumley can you advise which spacer sizes should be supported? Doesn't seem likely that xs, xl, 2xl would need support.

.pf-c-table .pf-m-inset-{size} {
  .#{$table}__td:first-child {
    padding-inline-start: var(--{size});
  }

  .#{$table}__td:first-child {
    padding-inline-end: var(--{size});
  }
}