Add table striped rows

[Ron-Lavi]

In addition to the discussion about hovering: #923
are there any plans of adding table-striped where each second row has a greyed background?
something similar to https://community.theforeman.org/t/apply-table-pf4-classname-and-use-pf4-pagination/25640/5?u=laviro

just for an example I used here the CSS styles:

tr:nth-child(even) {
  background-color: color;
}

[mcarrano]

@LaViro Yes, we will add this as an optional feature for our Table component. See my comment on #923. The design still needs to be considers (e.g. background color or other styling). We are currently scheduling into Q1 2022.

[sunilmalagi]

Hi @mcarrano @mceledonia ,
Here are the variations for stripped rows, I have reused to the existing table pages from PF and tried with couple of subtle color variations, there are existing screens at the beginning and followed by variations option 1, 2, 3 & 1A, 2A ,3A... let me know for any feedback if you have:

https://marvelapp.com/prototype/2ccbf976

Thank you

[mcarrano]

These looks great @sunilmalagi . I'm leaning towards the lightest gray variation as I think the others call too much attention to this. But I'll defer to @mceledonia on that. I see that you also considered expanded rows, but what happens if a highlighted row is expanded? Does the background color extend to the expansion or does the expanded panel remain white? Would be good to see what that looks like.

[sunilmalagi]

Thank you @mcarrano , I have included the screens with bg color applied for expanded rows.. please see the last 3 screens, and the expanded area remains white because it appears heavy if the entire area filled with any shades.

[mcarrano]

I agree. @mceledonia what are your thoughts?

[sunilmalagi]

Hi @mcarrano, here is the marvel link, https://marvelapp.com/prototype/2ccbf976. Out of 3 different color variants, the team decided to go with "PF Black 100" for striped rows. You can see 2 slides for the reference how the rows appear when you choose to go with "PF Black 100" for the alternative rows / expanded rows.

[mcarrano]

Excellent. Thanks @sunilmalagi !

[mcarrano]

@MariSvirik Please see the above Marvel link that contains a design proposal for optional striped rows in tables. Our current thinking is to utilize our lightest gray (Black-100) to keep this minimal. Let me know if you think this will meet your needs for Satellite.

[mcarrano]

@doruskova @mmenestr This should be added to the Sketch kit and design docs as a new feature for tables. Might be good to have some guidance on when to use this for tables.

[doruskova]

@mcarrano Issue for Sketch was created patternfly/patternfly-design-kit#487

[mmenestr]

Design doc issue here: patternfly/patternfly-org#2783