fix(table-cell): Fix background css variable (#8439)

**Related Issue:** #8380 ## Summary Fixes a typo that caused this variable not to work, and removes an unused border variable from the initial Table PR that snuck through.
Esri · Dec 16, 2023 · 9e5c59b · 9e5c59b
1 parent e199c08
commit 9e5c59b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss
@@ -4,12 +4,10 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-table-cell-background: Specifies the background color of the component.
- * @prop --calcite-table-cell-border-color: Specifies the border color of the component.
  */
 
 :host {
-  --calcite-internal-table-cell-background-internal: var(--calcite-table-cell-background, transparent);
-  --calcite-internal-table-cell-border-color-internal: var(--calcite-table-cell-border-color, transparent);
+  --calcite-internal-table-cell-background: var(--calcite-table-cell-background, transparent);
   @apply contents;
 }
 
@@ -58,8 +56,7 @@ td {
 }
 
 .selected-cell:not(.number-cell):not(.footer-cell) {
-  --calcite-table-cell-background: var(--calcite-color-foreground-current);
-  background: var(--calcite-color-foreground-current);
+  --calcite-internal-table-cell-background: var(--calcite-color-foreground-current);
 }
 
 .selection-cell.selected-cell {

diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts
@@ -956,6 +956,34 @@ export const localized_TestOnly = (): string => html`<calcite-table
   </calcite-table-row>
 </calcite-table>`;
 
+export const tableCellCssBackgroundVariable_TestOnly = (): string =>
+  html`<calcite-table zebra caption="Simple-zebra table" dir="rtl" selection-mode="multiple">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell style="--calcite-table-cell-background: rgba(20, 200, 50, 0.15)">cell</calcite-table-cell>
+      <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-cell style="--calcite-table-cell-background: rgba(200, 50, 20, 0.15)">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell style="--calcite-table-cell-background: rgba(20, 200, 50, 0.15)">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell style="--calcite-table-cell-background: rgba(200, 50, 20, 0.15)">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
+
 export const darkModeRTL_TestOnly = (): string =>
   html`<calcite-table zebra caption="Simple-zebra table" dir="rtl">
     <calcite-table-row slot="table-header">