feat(table-header): Add style when within a selected Table Row (#8449)

**Related Issue:** #8448 ## Summary Adds style for Table Header when placed inside a `selected` Table Row. Adds Chromatic test. | Before | After | | ------------- | ------------- | |<img width="970" alt="Screenshot 2023-12-18 at 7 40 45 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/a39b6d81-515f-4567-953c-6d861ea01780"> | <img width="970" alt="Screenshot 2023-12-18 at 7 40 32 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/8de770eb-0811-4d9c-803f-27b9346ad12d"> |
Esri · Dec 19, 2023 · 13cfe75 · 13cfe75
1 parent c0e51c3
commit 13cfe75
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 1 deletion.
diff --git a/packages/calcite-components/src/components/table-header/resources.ts b/packages/calcite-components/src/components/table-header/resources.ts
@@ -8,4 +8,5 @@ export const CSS = {
   multipleSelectionCell: "cell--multiple-selection",
   assistiveText: "assistive-text",
   active: "active",
+  selectedCell: "selected-cell",
 };
diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss
@@ -52,6 +52,10 @@ th.footer-row {
   @apply cursor-pointer align-middle text-color-3;
 }
 
+.selected-cell:not(.number-cell):not(.footer-cell) {
+  --calcite-internal-table-header-background: var(--calcite-color-foreground-current);
+}
+
 .number-cell,
 .selection-cell {
   @apply text-color-2;

diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx
@@ -50,6 +50,9 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
   /** @internal */
   @Prop() numberCell = false;
 
+  /** @internal */
+  @Prop() parentRowIsSelected: boolean;
+
   /** @internal */
   @Prop() parentRowPosition: number;
 
@@ -209,6 +212,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
             [CSS.footerRow]: this.parentRowType === "foot",
             [CSS.numberCell]: this.numberCell,
             [CSS.selectionCell]: this.selectionCell,
+            [CSS.selectedCell]: this.parentRowIsSelected,
             [CSS.multipleSelectionCell]: this.selectionMode === "multiple",
           }}
           colSpan={this.colSpan}

diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx
@@ -281,12 +281,12 @@ export class TableRow implements InteractiveComponent, LocalizedComponent {
       cells?.forEach((cell: HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement, index) => {
         cell.positionInRow = index + 1;
         cell.parentRowType = this.rowType;
+        cell.parentRowIsSelected = this.selected;
         cell.scale = this.scale;
 
         if (cell.nodeName === "CALCITE-TABLE-CELL") {
           (cell as HTMLCalciteTableCellElement).readCellContentsToAT = this.readCellContentsToAT;
           (cell as HTMLCalciteTableCellElement).disabled = this.disabled;
-          (cell as HTMLCalciteTableCellElement).parentRowIsSelected = this.selected;
         }
       });
     }

diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts
@@ -750,6 +750,71 @@ export const selectionModeMultipleAndSelectedOnLoadWithMultipleFooterAndHeader_T
     </calcite-table-row>
   </calcite-table>`;
 
+export const tableHeaderInRows_TestOnly = (): string => html` <calcite-table
+  selection-mode="multiple"
+  caption="selection-mode single table"
+  striped
+>
+  <calcite-action slot="selection-actions" icon="layer"></calcite-action>
+  <calcite-action slot="selection-actions" icon="send"></calcite-action>
+  <calcite-action slot="selection-actions" icon="copy"></calcite-action>
+  <calcite-action slot="selection-actions" icon="plus"></calcite-action>
+  <calcite-table-row slot="table-header">
+    <calcite-table-header heading="Heading"></calcite-table-header>
+    <calcite-table-header heading="Heading"></calcite-table-header>
+    <calcite-table-header heading="Heading"></calcite-table-header>
+    <calcite-table-header heading="Heading"></calcite-table-header>
+  </calcite-table-row>
+  <calcite-table-row>
+    <calcite-table-header heading="Row heading"></calcite-table-header>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+  </calcite-table-row>
+  <calcite-table-row>
+    <calcite-table-header heading="Row heading"></calcite-table-header>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+  </calcite-table-row>
+  <calcite-table-row selected>
+    <calcite-table-header heading="Row heading"></calcite-table-header>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+  </calcite-table-row>
+  <calcite-table-row selected>
+    <calcite-table-header heading="Row heading"></calcite-table-header>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+  </calcite-table-row>
+  <calcite-table-row>
+    <calcite-table-header heading="Row heading"></calcite-table-header>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+  </calcite-table-row>
+  <calcite-table-row selected>
+    <calcite-table-header heading="Row heading"></calcite-table-header>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+  </calcite-table-row>
+  <calcite-table-row>
+    <calcite-table-header heading="Row heading"></calcite-table-header>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+  </calcite-table-row>
+  <calcite-table-row>
+    <calcite-table-header heading="Row heading"></calcite-table-header>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+    <calcite-table-cell>cell</calcite-table-cell>
+  </calcite-table-row>
+</calcite-table>`;
+
 export const LongWrappingTextContent_TestOnly = (): string => html` <calcite-table
   numbered
   caption="Long cell wrapping table"

diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html
@@ -3466,6 +3466,52 @@ <h3>Headers in rows and table-head</h3>
         </calcite-table-row>
       </calcite-table>
 
+      <h3>Headers in rows and table-head with selection-mode</h3>
+      <calcite-table selection-mode="multiple" caption="Headers in rows and table-head table">
+        <calcite-table-row slot="table-header">
+          <calcite-table-header heading="Heading"></calcite-table-header>
+          <calcite-table-header heading="Heading"></calcite-table-header>
+          <calcite-table-header heading="Heading"></calcite-table-header>
+          <calcite-table-header heading="Heading"></calcite-table-header>
+        </calcite-table-row>
+
+        <calcite-table-row>
+          <calcite-table-header heading="Heading"></calcite-table-header>
+          <calcite-table-cell>cell</calcite-table-cell>
+          <calcite-table-cell>cell</calcite-table-cell>
+          <calcite-table-cell>cell</calcite-table-cell>
+        </calcite-table-row>
+        <calcite-table-row>
+          <calcite-table-header heading="Heading"></calcite-table-header>
+          <calcite-table-cell>cell</calcite-table-cell>
+          <calcite-table-cell>cell</calcite-table-cell>
+          <calcite-table-cell>cell</calcite-table-cell>
+        </calcite-table-row>
+        <calcite-table-row>
+          <calcite-table-header heading="Heading" description="description in row"></calcite-table-header>
+          <calcite-table-cell>cell</calcite-table-cell>
+          <calcite-table-cell>cell</calcite-table-cell>
+          <calcite-table-cell>cell</calcite-table-cell>
+        </calcite-table-row>
+        <calcite-table-row>
+          <calcite-table-header heading="Heading"></calcite-table-header>
+          <calcite-table-cell>cell</calcite-table-cell>
+          <calcite-table-cell>cell</calcite-table-cell>
+          <calcite-table-cell>cell</calcite-table-cell>
+        </calcite-table-row>
+        <calcite-table-row slot="table-footer">
+          <calcite-table-header heading="Footer heading" description="footer description"></calcite-table-header>
+          <calcite-table-cell>foot</calcite-table-cell>
+          <calcite-table-cell>foot</calcite-table-cell>
+          <calcite-table-cell>foot</calcite-table-cell>
+        </calcite-table-row>
+        <calcite-table-row slot="table-footer">
+          <calcite-table-header heading="Footer heading" description="footer description"></calcite-table-header>
+          <calcite-table-cell>foot</calcite-table-cell>
+          <calcite-table-cell>foot</calcite-table-cell>
+          <calcite-table-cell>foot</calcite-table-cell>
+        </calcite-table-row>
+      </calcite-table>
       <h3>selection-mode single</h3>
       <calcite-table selection-mode="single" caption="selection-mode single table">
         <calcite-action slot="selection-actions" icon="layer"></calcite-action>