RHBT-1 : Added style override for Pf6 Table component #20

AdityaPatil22 · 2025-04-17T07:28:44Z

No description provided.

Created style override for pf-6 table component

changeset-bot · 2025-04-17T07:28:48Z

⚠️ No Changeset found

Latest commit: 7968781

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

nicolethoen

A quick overview of the scss - the use of hardcoded hex values is going to mean that this theme will not work in dark theme.

Adding the class .pf-v6-theme-dark class to the html element will flip the theme and in the demo app, you can see the side effect of using the hex values to set colors. If you can use semantic v6 tokens as hex values instead, that'll make it dark theme compatible out of the box.

otherwise, you'll need to define hex color values for these v6 semantic tokens/css variables when the dark theme class is present.

Added variables to hex values

ArathyKumar · 2025-05-08T06:33:58Z

Hey @nicolethoen

Thank you for reviewing the PR.

@AdityaPatil22 has replaced the hardcoded hex values with CSS variables and updated the corresponding values in the dark theme as well.
Could you please take another look when you have a moment?

You can preview the changes here: https://deploy-preview-6--demo-rhds-theme-for-pf6.netlify.app/
Here is the PR for the demo project: RedHat-UX/demo-red-hat-theme-for-patternfly6#6

nicolethoen

I am happy to discuss either of my questions more. Ultimately it's up to you - The more the questions are resolved, the more future proof you are, as PF continues rolling out updates or as the rest of your ecosystem might update to use PF or PF6.

nicolethoen · 2025-05-14T13:46:15Z

dist/redhat-brand-theme.css

-.pf-v6-c-modal-box {
-  --pf-v6-c-modal-box--BorderRadius: var(--rh-border-radius-sharp, 0px);
+:root {
+  --rh-color-light-gray: #fafafa;


The color palette shipping with PF6 is the complete brand color palette. So I’m wondering if - even if they don’t 100% match the old colors, if it’s worth making sure all colors selected with this red hat brand theme are from PF6's shipped color palette? What do you think?

nicolethoen · 2025-05-14T13:46:57Z

dist/redhat-brand-theme.css

+
+.pf-v6-c-table {
+  /* Header styles */
+  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-v5-c-table__thead--cell--FontWeight, 700);


continuing to reference --pf-v5- css variables means you’ll need to continue shipping all of the PF5 css in addition to the PF6 CSS to get this theme to work.

Is that unavoidable & will you always have the PF5 CSS in your environment? If the rest of the environment continues forward with modernization and migrations, you’ll have to rewrite all this CSS if you ever want to stop shipping PF5 styles.

Replaced pf tokens with rh tokens

markcaron

Few tokens swaps...

markcaron · 2025-06-06T10:33:28Z

src/scss/table-override.scss

+  }
+
+  .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
+    padding-inline: 0px;


Don't need px on zero.

Added the changes

markcaron · 2025-06-06T10:34:19Z

src/scss/table-override.scss

+
+/* Selectors for compound expandable table variants */
+.pf-v6-c-table__compound-expansion-toggle.pf-m-expanded {
+  border-left-width: var(--rh-length-4xs, 1px);


Use border tokens for borders for all these, like:

--rh-border-width-sm

Added the changes

markcaron · 2025-06-06T10:35:54Z

src/scss/table-override.scss

+.pf-v6-c-table {
+  /* Header styles */
+  --pf-v6-c-table__thead--cell--FontWeight: var(--rh-font-weight-heading-bold, 700);
+  --pf-v6-c-table__thead--cell--FontSize: var(--rh-font-size-code-sm, 14px);


I believe this should either be the heading font-size token or the regular text font-size token, but not the code font-size token.

Added the changes

markcaron · 2025-06-06T10:36:19Z

src/scss/table-override.scss

+  /* Body styles */
+  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--rh-space-xl, 24px);
+  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--rh-space-xl, 24px);
+  --pf-v6-c-table__tbody--cell--FontSize: var(--rh-font-size-code-md, 16px);


Regular text font-size token.

Added the changes

markcaron · 2025-06-06T10:37:47Z

src/scss/table-override.scss

+.pf-v6-c-table__compound-expansion-toggle:hover {
+  // border-left: var(--rh-length-4xs, 1px) solid var(--rh-color-gray-300, #d2d2d2);
+  // border-right: var(--rh-length-4xs, 1px) solid var(--rh-color-gray-300, #d2d2d2);
+  border-left-width: var(--rh-length-4xs, 1px);


Border tokens.

Added the changes

markcaron · 2025-06-06T10:38:04Z

src/scss/table-override.scss

+.pf-v6-c-table.pf-m-sticky-header>.pf-v6-c-table__thead,
+.pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header {
+  // border-bottom: var(--rh-border-width-sm, 1px) solid var(--rh-color-canvas-white, #ffffff);
+  border-bottom-width: var(--rh-length-4xs, 1px);


Border token

Added the changes

markcaron · 2025-06-06T10:39:16Z

src/scss/table-override.scss

+
+/* Selectors for clickable table variants */
+.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-clickable:is(:hover, :focus) {
+  box-shadow: 0 -0.1875rem 0.25rem -0.125rem rgba(3, 3, 3, 0.08), 0 0.1875rem 0.25rem -0.125rem rgba(3, 3, 3, 0.08);


We have a box-shadow token, which may apply here.

--rh-box-shadow-sm

Added the changes

Replaced rh tokens for some stylings

AdityaPatil22 · 2025-06-09T11:14:11Z

Hi @markcaron,
I have completed the requested changes.
Could you please re-review the PR
Thank you!

markcaron

I'm not sure why it's happening, but there are some visual discrepanices between the demo deploy preview (DP) and the examples on PF6 tables:

Striped Expandable

DP is missing some padding on the left of the expandable content and it's not 100% width. This leads me to believe some of the padding overrides are off.

PF Demo (I added pf-m-striped so we can see the expandable rows better)

Nested sticky header

Seems to be an errant \ between the cells:

Compound Expandable

This might just be the HTML in the DP not matching the PF demos, but the "tabs" aren't functional, and don't open/close when clicked twice, so it's hard to tell if things match exactly. I realize this is beyond the CSS changes in this PR.

markcaron · 2025-06-20T13:02:06Z

src/scss/button-override.scss

    --pf-v6-c-button--BorderRadius: var(--rh-border-radius-default, 3px);
    //--pf-v6-c-button--m-control--BorderRadius: var(--rh-border-radius-sharp, 0px);
-}
+}


Maybe this will be handled in a separate PR, but since we're in this button-override.scss file...

The tertiary button should have border-color: var(--rh-color-border-strong, #151515); for Red Hat brand theming.

Since we're using it in the demo deploy preview, I just noticed it.

Hi @markcaron,

We investigated and did some research for the Striped Expandable table variant and found that the missing padding and the 100% width issue originates from the PF-6 original implementation.

We have also removed the errant backslashes "" between the cells.

Additionally, we reviewed the Compound Expandable table variant and tested it in both the local environment and the demo project. The tabs are functioning as expected and are consistent with the original PF-6 table specifications. If possible, could you please provide us with additional steps that we can follow to reproduce the issue that you are facing.

Screen.Recording.2025-07-02.at.5.21.14.PM.mov

As part of the pf-button component updates, we have added border-color: var(--rh-color-border-strong, #151515); to the tertiary button styling.

Aditya Patil and others added 10 commits March 24, 2025 13:24

Created style override for pf-6 table component

7bf107d

Fixed double border issue for nested column variants

9b2449d

Added variables for specific styles

fa5ea0d

Added overriding styles for clickable table variant

b14457a

chore: style fix

956285d

chore: table style fix

619dd7f

Fixed sytlings for expandable and editable table variant

841896d

Removed extra blank spaces

34737f1

added pf variable for border

b11f480

Merge pull request #17 from RedHat-UX/pf-table

1c4b240

Created style override for pf-6 table component

nicolethoen reviewed Apr 25, 2025

View reviewed changes

AdityaPatil22 self-assigned this Apr 28, 2025

Aditya Patil and others added 2 commits May 6, 2025 13:40

Added variables to hex values

ed87966

Merge pull request #23 from RedHat-UX/pf-table

bab473f

Added variables to hex values

nicolethoen reviewed May 14, 2025

View reviewed changes

Aditya Patil and others added 5 commits June 4, 2025 12:30

Replaced pf variables with rh variables

dc42eee

Reomved all color related stylings

553e2b3

chore: code cleanup

b01d355

chore: build updated

f2551ea

Merge pull request #25 from RedHat-UX/pf-table

f62133a

Replaced pf tokens with rh tokens

markcaron requested changes Jun 6, 2025

View reviewed changes

Aditya Patil and others added 2 commits June 9, 2025 16:19

Reverted and refactored changes

683f0dd

Merge pull request #26 from RedHat-UX/pf-table

7968781

Replaced rh tokens for some stylings

markcaron requested changes Jun 20, 2025

View reviewed changes

RHBT-1 : Added style override for Pf6 Table component #20

Are you sure you want to change the base?

RHBT-1 : Added style override for Pf6 Table component #20

Uh oh!

Conversation

AdityaPatil22 commented Apr 17, 2025

Uh oh!

changeset-bot bot commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

nicolethoen left a comment

Choose a reason for hiding this comment

Uh oh!

ArathyKumar commented May 8, 2025

Uh oh!

nicolethoen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

markcaron left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AdityaPatil22 commented Jun 9, 2025

Uh oh!

markcaron left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

changeset-bot bot commented Apr 17, 2025 •

edited

Loading

markcaron left a comment •

edited

Loading