fix(table): improve styles for color context (#1409)

RedHat-UX · Jan 10, 2024 · 42c167f · 42c167f
1 parent 78815d1
commit 42c167f
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 41 deletions.
diff --git a/.changeset/rotten-oranges-count.md b/.changeset/rotten-oranges-count.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-table>`: improved color palette styles
diff --git a/elements/rh-table/rh-table-lightdom.css b/elements/rh-table/rh-table-lightdom.css
@@ -1,5 +1,4 @@
-rh-table,
-rh-table[color-palette="lightest"] {
+rh-table {
   --rh-table-row-border:
     var(--rh-border-width-sm, 1px)
     solid
@@ -22,40 +21,6 @@ rh-table[color-palette="lightest"] {
       );
 }
 
-[color-palette="light"] > rh-table,
-rh-table[color-palette="light"],
-[color-palette="lighter"] > rh-table,
-rh-table[color-palette="lighter"] {
-  --rh-table-row-background-color:
-    rgb(
-        var(
-          --_rh-color-white-rgb, /* making private as currently doesn't exist */
-          255 255 255
-        )
-        / var(--rh-opacity-50, 50%)
-      );
-}
-
-[color-palette^="dark"] > rh-table,
-rh-table[color-palette^="dark"] {
-  --rh-table-row-background-color:
-    rgb(
-        var(
-          --_rh-color-white-rgb, /* making private as currently doesn't exist */
-          255 255 255
-        )
-        / var(--rh-opacity-10, 10%)
-      );
-  --rh-table-column-background-color:
-    rgb(
-        var(
-          --rh-color-blue-70-rgb,
-          0 51 102
-        )
-        / var(--rh-opacity-30, 30%)
-      );
-}
-
 rh-table table {
   min-width: 100%;
   margin: 0 auto;

diff --git a/elements/rh-table/rh-table.css b/elements/rh-table/rh-table.css
@@ -34,6 +34,36 @@
   display: block;
 }
 
+:is(.color-palette-light, .color-palette-lighter) {
+  --rh-table-row-background-color:
+    rgb(
+        var(
+          --_rh-color-white-rgb, /* making private as currently doesn't exist */
+          255 255 255
+        )
+        / var(--rh-opacity-50, 50%)
+      );
+}
+
+.dark {
+  --rh-table-row-background-color:
+    rgb(
+        var(
+          --_rh-color-white-rgb, /* making private as currently doesn't exist */
+          255 255 255
+        )
+        / var(--rh-opacity-10, 10%)
+      );
+  --rh-table-column-background-color:
+    rgb(
+        var(
+          --rh-color-blue-70-rgb,
+          0 51 102
+        )
+        / var(--rh-opacity-30, 30%)
+      );
+}
+
 /* @todo: should I move these styles to light dom css file? */
 ::slotted([slot="summary"]) {
   display: block;

diff --git a/elements/rh-table/rh-table.ts b/elements/rh-table/rh-table.ts
@@ -7,7 +7,6 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
 import { RequestSortEvent, RhSortButton } from './rh-sort-button.js';
 
-import { colorContextProvider, type ColorPalette } from '@rhds/elements/lib/context/color/provider.js';
 import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
 import styles from './rh-table.css';
@@ -26,9 +25,6 @@ export class RhTable extends LitElement {
 
   @colorContextConsumer() private on?: ColorTheme;
 
-  @colorContextProvider()
-  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
-
   private static getNodeContentForSort(
     columnIndexToSort: number,
     node: Element,
@@ -68,17 +64,31 @@ export class RhTable extends LitElement {
     return this.querySelector('[slot="summary"]') as HTMLElement | undefined;
   }
 
+  #internalColorPalette?: string | null;
+
   #logger = new Logger(this);
 
   connectedCallback() {
     super.connectedCallback();
     this.#init();
   }
 
+  protected willUpdate(): void {
+    /**
+     * TEMPORARY: this fixes the need to access the parents color-palette in order to get the `lightest`
+     * value.  This fix will only update the component when switching between light and dark themes as
+     * thats when the consumer requests an update.  Switching between lighter -> light for example will
+     * not trigger the component to update at this time.
+     **/
+    this.#internalColorPalette = this.closest('[color-palette]')?.getAttribute('color-palette');
+  }
+
   render() {
     const { on = '' } = this;
     return html`
-      <div id="container" class="${classMap({ [on]: !!on })}" part="container">
+      <div id="container" 
+        class="${classMap({ [on]: !!on, [`color-palette-${this.#internalColorPalette}`]: !!this.#internalColorPalette })}" 
+        part="container">
         <slot @pointerleave="${this.#onPointerleave}"
               @pointerover="${this.#onPointerover}"
               @request-sort="${this.#onRequestSort}"