fix: update dependency @spectrum-css/table to v8 (#5336)

* chore: update dependency @spectrum-css/table to v8

* fix(table,styles): use latest CSS

* chore: update golden hash

* chore: revert hash to get clean run

* chore: new hash after clean run

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>
Co-authored-by: Casey Eickhoff <ceickhoff@adobe.com>

Author: 3 people

.changeset/stale-candies-camp.md

@@ -5,6 +5,7 @@
 '@spectrum-web-components/status-light': patch
 '@spectrum-web-components/styles': patch
 '@spectrum-web-components/switch': patch
+'@spectrum-web-components/table': patch
 '@spectrum-web-components/tabs': patch
 '@spectrum-web-components/toast': patch
 '@spectrum-web-components/tooltip': patch

.circleci/config.yml

@@ -14,7 +14,7 @@ parameters:
     # 3. Commit this change to the PR branch where the changes exist.
     current_golden_images_hash:
         type: string
-        default: 45240d1c037e4a992a9bb6269194d30d4724cce5
+        default: 3412e93be28e587e2ded76d6c19d051e401e2623
     wireit_cache_name:
         type: string
         default: wireit

packages/table/package.json

@@ -135,7 +135,7 @@
         "@spectrum-web-components/icons-ui": "1.5.0"
     },
     "devDependencies": {
-        "@spectrum-css/table": "7.0.0-s2-foundations.17"
+        "@spectrum-css/table": "8.1.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/table/src/spectrum-table-body.css

@@ -14,16 +14,13 @@ governing permissions and limitations under the License.
 :host {
     border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
     border: none;
+    display: table-row-group;
     position: relative;
 }
 
 :host([drop-target]) {
-    --spectrum-table-border-color: transparent;
+    --mod-table-border-color: transparent;
     outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness));
     outline-style: solid;
     outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color)));
 }
-
-:host {
-    display: table-row-group;
-}

packages/table/src/spectrum-table-cell.css

@@ -27,9 +27,6 @@ governing permissions and limitations under the License.
 
 :host {
     border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color)));
-}
-
-:host {
     box-sizing: border-box;
     font-size: var(--mod-table-row-font-size, var(--spectrum-table-row-font-size));
     font-weight: var(--mod-table-row-font-weight, var(--spectrum-table-row-font-weight));
@@ -44,6 +41,7 @@ governing permissions and limitations under the License.
 }
 
 :host {
+    display: table-cell;
     position: relative;
 }
 
@@ -60,10 +58,6 @@ governing permissions and limitations under the License.
     border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color)));
 }
 
-:host {
-    display: table-cell;
-}
-
 .spectrum-Table-cell--collapsible {
     padding-block: 0;
     padding-inline-start: calc(var(--spectrum-table-row-tier, 0px) * var(--spectrum-table-collapsible-tier-indent));

packages/table/src/spectrum-table-checkbox-cell.css

@@ -42,9 +42,6 @@ governing permissions and limitations under the License.
 
 :host(:not([head-cell])) {
     border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color)));
-}
-
-:host(:not([head-cell])) {
     box-sizing: border-box;
     font-size: var(--mod-table-row-font-size, var(--spectrum-table-row-font-size));
     font-weight: var(--mod-table-row-font-weight, var(--spectrum-table-row-font-weight));
@@ -60,6 +57,7 @@ governing permissions and limitations under the License.
 
 :host(:not([head-cell])),
 :host([head-cell]) {
+    display: table-cell;
     position: relative;
 }
 
@@ -94,8 +92,3 @@ governing permissions and limitations under the License.
     margin-block-start: calc(var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
     margin-block-end: var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing));
 }
-
-:host(:not([head-cell])),
-:host([head-cell]) {
-    display: table-cell;
-}

packages/table/src/spectrum-table-head-cell.css

@@ -75,6 +75,7 @@ governing permissions and limitations under the License.
 }
 
 :host {
+    display: table-cell;
     position: relative;
 }
 
@@ -92,10 +93,6 @@ governing permissions and limitations under the License.
     margin-block-end: var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing));
 }
 
-:host {
-    display: table-cell;
-}
-
 :host .spectrum-Table-scroller {
     border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
 }

packages/table/src/spectrum-table-row.css

@@ -53,6 +53,14 @@ governing permissions and limitations under the License.
     border-inline-end: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
 }
 
+:host {
+    transition: background-color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
+    cursor: pointer;
+    cursor: var(--mod-table-cursor-row-default, pointer);
+    border-block-start: none;
+    position: relative;
+}
+
 :host(:first-child) ::slotted(:first-child) {
     border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
 }
@@ -69,14 +77,6 @@ governing permissions and limitations under the License.
     border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
 }
 
-:host {
-    transition: background-color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
-    cursor: pointer;
-    cursor: var(--mod-table-cursor-row-default, pointer);
-    border-block-start: none;
-    position: relative;
-}
-
 :host(:first-child) {
     border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
     border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
@@ -125,7 +125,7 @@ governing permissions and limitations under the License.
 }
 
 :host([drop-target]) {
-    --spectrum-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent);
+    --mod-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent);
     outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness));
     outline-style: solid;
     outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color)));
@@ -259,19 +259,19 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Table-row--thumbnail {
-    --table-thumbnail-cell-block-spacing: var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing));
-    --table-thumbnail-inner-content-block-spacing: max(0px, calc((var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)) - (var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)))) / 2));
+    --spectrum-table-thumbnail-cell-block-spacing: var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing));
+    --spectrum-table-thumbnail-inner-content-block-spacing: max(0px, calc((var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)) - (var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)))) / 2));
 }
 
 .spectrum-Table-row--thumbnail ::slotted(*) {
-    padding-block: calc(var(--table-thumbnail-cell-block-spacing) + var(--table-thumbnail-inner-content-block-spacing));
+    padding-block: calc(var(--spectrum-table-thumbnail-cell-block-spacing) + var(--spectrum-table-thumbnail-inner-content-block-spacing));
 }
 
 .spectrum-Table-row--thumbnail .spectrum-Table-cell--thumbnail {
     padding-block: 0;
 }
 
 .spectrum-Table-row--thumbnail.spectrum-Table-row--collapsible {
-    --table-thumbnail-inner-minimum-block-spacing: max(0px, calc((var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) - var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size))) / 2));
-    --table-thumbnail-cell-block-spacing: max(var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)), var(--table-thumbnail-inner-minimum-block-spacing));
+    --spectrum-table-thumbnail-inner-minimum-block-spacing: max(0px, calc((var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) - var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size))) / 2));
+    --spectrum-table-thumbnail-cell-block-spacing: max(var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)), var(--spectrum-table-thumbnail-inner-minimum-block-spacing));
 }