feat: update card and tabs to latest spectrum-css

adobe · Oct 14, 2022 · 55b8d67 · 55b8d67
1 parent b6d6d4a
commit 55b8d67
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 99 deletions.
diff --git a/packages/card/package.json b/packages/card/package.json
@@ -67,7 +67,7 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/card": "^5.0.0"
+        "@spectrum-css/card": "^5.0.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/card/src/spectrum-card.css b/packages/card/src/spectrum-card.css
@@ -364,8 +364,8 @@ governing permissions and limitations under the License.
 }
 .content {
     display: flex; /* .spectrum-Card-content */
-    height: var(--spectrum-card-body-content-min-height);
     margin-top: var(--spectrum-card-body-content-margin-top);
+    min-height: var(--spectrum-card-body-content-min-height);
 }
 :host([dir='ltr']) .title {
     padding-right: var(

diff --git a/packages/tabs/package.json b/packages/tabs/package.json
@@ -82,7 +82,7 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/tabs": "^3.2.19"
+        "@spectrum-css/tabs": "^3.2.20"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/tabs/src/spectrum-tabs.css b/packages/tabs/src/spectrum-tabs.css
@@ -144,18 +144,10 @@ governing permissions and limitations under the License.
         --spectrum-tabs-s-textonly-divider-border-radius,
         var(--spectrum-global-dimension-static-size-10)
     );
-    --spectrum-tabs-vertical-quiet-textonly-divider-background-color: var(
-        --spectrum-tabs-s-vertical-quiet-textonly-divider-background-color,
-        var(--spectrum-alias-tabs-divider-background-color-quiet)
-    );
     --spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected: var(
         --spectrum-tabs-s-vertical-textonly-tabitem-selection-indicator-background-color-selected,
         var(--spectrum-alias-tabitem-text-color-selected-default)
     );
-    --spectrum-tabs-vertical-textonly-divider-background-color: var(
-        --spectrum-tabs-s-vertical-textonly-divider-background-color,
-        var(--spectrum-alias-tabs-divider-background-color-default)
-    );
     --spectrum-tabs-vertical-textonly-tabitem-height: var(
         --spectrum-tabs-s-vertical-textonly-tabitem-height,
         var(--spectrum-global-dimension-size-450)
@@ -314,18 +306,10 @@ governing permissions and limitations under the License.
         --spectrum-tabs-m-textonly-divider-border-radius,
         var(--spectrum-global-dimension-static-size-10)
     );
-    --spectrum-tabs-vertical-quiet-textonly-divider-background-color: var(
-        --spectrum-tabs-m-vertical-quiet-textonly-divider-background-color,
-        var(--spectrum-alias-tabs-divider-background-color-quiet)
-    );
     --spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected: var(
         --spectrum-tabs-m-vertical-textonly-tabitem-selection-indicator-background-color-selected,
         var(--spectrum-alias-tabitem-text-color-selected-default)
     );
-    --spectrum-tabs-vertical-textonly-divider-background-color: var(
-        --spectrum-tabs-m-vertical-textonly-divider-background-color,
-        var(--spectrum-alias-tabs-divider-background-color-default)
-    );
     --spectrum-tabs-vertical-textonly-tabitem-height: var(
         --spectrum-tabs-m-vertical-textonly-tabitem-height,
         var(--spectrum-global-dimension-size-550)
@@ -484,18 +468,10 @@ governing permissions and limitations under the License.
         --spectrum-tabs-l-textonly-divider-border-radius,
         var(--spectrum-global-dimension-static-size-10)
     );
-    --spectrum-tabs-vertical-quiet-textonly-divider-background-color: var(
-        --spectrum-tabs-l-vertical-quiet-textonly-divider-background-color,
-        var(--spectrum-alias-tabs-divider-background-color-quiet)
-    );
     --spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected: var(
         --spectrum-tabs-l-vertical-textonly-tabitem-selection-indicator-background-color-selected,
         var(--spectrum-alias-tabitem-text-color-selected-default)
     );
-    --spectrum-tabs-vertical-textonly-divider-background-color: var(
-        --spectrum-tabs-l-vertical-textonly-divider-background-color,
-        var(--spectrum-alias-tabs-divider-background-color-default)
-    );
     --spectrum-tabs-vertical-textonly-tabitem-height: var(
         --spectrum-tabs-l-vertical-textonly-tabitem-height,
         var(--spectrum-global-dimension-size-650)
@@ -654,18 +630,10 @@ governing permissions and limitations under the License.
         --spectrum-tabs-xl-textonly-divider-border-radius,
         var(--spectrum-global-dimension-static-size-10)
     );
-    --spectrum-tabs-vertical-quiet-textonly-divider-background-color: var(
-        --spectrum-tabs-xl-vertical-quiet-textonly-divider-background-color,
-        var(--spectrum-alias-tabs-divider-background-color-quiet)
-    );
     --spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected: var(
         --spectrum-tabs-xl-vertical-textonly-tabitem-selection-indicator-background-color-selected,
         var(--spectrum-alias-tabitem-text-color-selected-default)
     );
-    --spectrum-tabs-vertical-textonly-divider-background-color: var(
-        --spectrum-tabs-xl-vertical-textonly-divider-background-color,
-        var(--spectrum-alias-tabs-divider-background-color-default)
-    );
     --spectrum-tabs-vertical-textonly-tabitem-height: var(
         --spectrum-tabs-xl-vertical-textonly-tabitem-height,
         var(--spectrum-global-dimension-size-750)
@@ -751,7 +719,6 @@ governing permissions and limitations under the License.
 }
 :host([direction^='horizontal']) #list {
     align-items: center; /* .spectrum-Tabs--horizontal */
-    border-bottom: var(--spectrum-tabs-quiet-textonly-divider-size) solid;
 }
 :host([direction^='horizontal']) ::slotted(:not([slot])) {
     vertical-align: top; /* .spectrum-Tabs--horizontal .spectrum-Tabs-item */
@@ -770,7 +737,6 @@ governing permissions and limitations under the License.
 }
 :host([direction^='horizontal']) #selection-indicator {
     bottom: 0;
-    bottom: calc(var(--spectrum-tabs-quiet-textonly-divider-size) * -1);
     height: var(--spectrum-tabs-quiet-textonly-divider-size);
     position: absolute; /* .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator */
 }
@@ -782,12 +748,6 @@ governing permissions and limitations under the License.
 :host([quiet]) #list {
     display: inline-flex; /* .spectrum-Tabs--quiet */
 }
-:host([dir='ltr'][direction^='vertical']) #list {
-    border-left: var(--spectrum-tabs-quiet-textonly-divider-size) solid; /* [dir=ltr] .spectrum-Tabs--vertical */
-}
-:host([dir='rtl'][direction^='vertical']) #list {
-    border-right: var(--spectrum-tabs-quiet-textonly-divider-size) solid; /* [dir=rtl] .spectrum-Tabs--vertical */
-}
 :host([direction^='vertical']) #list {
     display: inline-flex; /* .spectrum-Tabs--vertical */
     flex-direction: column;
@@ -857,34 +817,37 @@ governing permissions and limitations under the License.
 :host([dir='rtl'][direction^='vertical']) #selection-indicator {
     right: 0; /* [dir=rtl] .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */
 }
-:host([dir='ltr'][direction^='vertical']) #selection-indicator {
-    left: calc(
-        var(--spectrum-tabs-quiet-textonly-divider-size) * -1
-    ); /* [dir=ltr] .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */
-}
-:host([dir='rtl'][direction^='vertical']) #selection-indicator {
-    right: calc(
-        var(--spectrum-tabs-quiet-textonly-divider-size) * -1
-    ); /* [dir=rtl] .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */
-}
 :host([direction^='vertical']) #selection-indicator {
     position: absolute; /* .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */
     width: var(--spectrum-tabs-quiet-textonly-divider-size);
 }
+:host {
+    --spectrum-tabs-list-background-direction: top; /* .spectrum-Tabs */
+}
 #list {
-    border-bottom-color: var(
-        --spectrum-tabs-textonly-divider-background-color
+    background: linear-gradient(
+        to var(--spectrum-tabs-list-background-direction),
+        var(--spectrum-tabs-textonly-divider-background-color) 0
+            var(--spectrum-tabs-quiet-textonly-divider-size),
+        transparent var(--spectrum-tabs-quiet-textonly-divider-size)
     ); /* .spectrum-Tabs */
 }
-:host([dir='ltr'][direction^='vertical']) #list {
-    border-left-color: var(
-        --spectrum-tabs-vertical-textonly-divider-background-color
-    ); /* [dir=ltr] .spectrum-Tabs--vertical */
+:host([direction^='vertical']) {
+    --spectrum-tabs-list-background-direction: right; /* .spectrum-Tabs--vertical */
+}
+:host([direction^='vertical'][compact]) #list,
+:host([quiet]) #list,
+:host([quiet][compact]) #list {
+    --spectrum-tabs-textonly-divider-background-color: var(
+        --spectrum-tabs-quiet-textonly-divider-background-color
+    ); /* .spectrum-Tabs--quiet,
+   * .spectrum-Tabs--quiet.spectrum-Tabs--compact,
+   * .spectrum-Tabs--vertical.spectrum-Tabs--compact */
 }
-:host([dir='rtl'][direction^='vertical']) #list {
-    border-right-color: var(
-        --spectrum-tabs-vertical-textonly-divider-background-color
-    ); /* [dir=rtl] .spectrum-Tabs--vertical */
+:host([direction^='vertical'][emphasized]) {
+    --spectrum-tabs-textonly-divider-background-color: var(
+        --spectrum-tabs-emphasized-textonly-divider-background-color
+    ); /* .spectrum-Tabs--vertical.spectrum-Tabs--emphasized */
 }
 #selection-indicator {
     background-color: var(
@@ -921,39 +884,13 @@ governing permissions and limitations under the License.
         --spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected
     ); /* .spectrum-Tabs--quiet.spectrum-Tabs--emphasized .spectrum-Tabs-selectionIndicator */
 }
-:host([dir='ltr'][direction^='vertical'][compact]) #list,
-:host([dir='ltr'][direction^='vertical'][quiet]) #list {
-    border-left-color: var(
-        --spectrum-tabs-vertical-quiet-textonly-divider-background-color
-    ); /* [dir=ltr] .spectrum-Tabs--vertical.spectrum-Tabs--quiet,
-   * [dir=ltr] 
-  .spectrum-Tabs--vertical.spectrum-Tabs--compact */
-}
-:host([dir='rtl'][direction^='vertical'][compact]) #list,
-:host([dir='rtl'][direction^='vertical'][quiet]) #list {
-    border-right-color: var(
-        --spectrum-tabs-vertical-quiet-textonly-divider-background-color
-    ); /* [dir=rtl] .spectrum-Tabs--vertical.spectrum-Tabs--quiet,
-   * [dir=rtl] 
-  .spectrum-Tabs--vertical.spectrum-Tabs--compact */
-}
 :host([direction^='vertical'][compact]) #list #selection-indicator,
 :host([direction^='vertical'][quiet]) #list #selection-indicator {
     background-color: var(
         --spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected
     ); /* .spectrum-Tabs--vertical.spectrum-Tabs--quiet .spectrum-Tabs-selectionIndicator,
    * .spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-selectionIndicator */
 }
-:host([dir='ltr'][direction^='vertical'][emphasized]) #list {
-    border-left-color: var(
-        --spectrum-tabs-emphasized-textonly-divider-background-color
-    ); /* [dir=ltr] .spectrum-Tabs--vertical.spectrum-Tabs--emphasized */
-}
-:host([dir='rtl'][direction^='vertical'][emphasized]) #list {
-    border-right-color: var(
-        --spectrum-tabs-emphasized-textonly-divider-background-color
-    ); /* [dir=rtl] .spectrum-Tabs--vertical.spectrum-Tabs--emphasized */
-}
 :host([direction^='vertical'][emphasized]) #list #selection-indicator {
     background-color: var(
         --spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected
@@ -979,8 +916,6 @@ governing permissions and limitations under the License.
         --spectrum-tabs-textonly-tabitem-text-color-selected-key-focus: ButtonText;
         --spectrum-tabs-textonly-tabitem-text-color-selected: HighlightText;
         --spectrum-tabs-textonly-tabitem-text-color: ButtonText;
-        --spectrum-tabs-vertical-quiet-textonly-divider-background-color: transparent;
-        --spectrum-tabs-vertical-textonly-divider-background-color: transparent;
         --spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected: Highlight;
         forced-color-adjust: none;
     }

diff --git a/yarn.lock b/yarn.lock
@@ -3957,10 +3957,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-5.0.13.tgz#3414927df053ef7c8fbe0331b68d4353a9b63759"
   integrity sha512-DPPPwngaecxTFVjvGSrg+5yHrZnV1BvbAp0hPZCV5OvVo3S1FJgPpf6+cjoiVcYCrc/6njGjOMpaHVpHUDOHXA==
 
-"@spectrum-css/card@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-5.0.0.tgz#6fe493b15be625ad48e9c6b002d5db971857f859"
-  integrity sha512-H2EzRskZmFd6zeTb+mUKl15haWAfmhqH6KWdwKBmfpBAUglbloQbEFjd/bqXmLiau+ylBWD9bRlbKWoYYyFhmw==
+"@spectrum-css/card@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-5.0.1.tgz#24c7c24c0f76196ba030f097cd1afdd21731db20"
+  integrity sha512-I7CNJg/BkC8FrvSo7slRIIx1nNkyKXYHxMuqW5Nv/1FeJNFlA72+0jEWoFZdCY0ybjeINpfkqxhaszDnWU6+3w==
 
 "@spectrum-css/checkbox@^3.1.3":
   version "3.1.3"
@@ -4164,10 +4164,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-4.0.19.tgz#3ef7076b632a1d3bfeaa38ccad32faf1dc540e52"
   integrity sha512-7bsUrpHcn1ulx3ZJt5WX7QUQv45qlW1n8TX83z3VeNciXgryrgpVM5BXw3fUxoFXVILmlqQ43dfw7L5GJNMoZg==
 
-"@spectrum-css/tabs@^3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.2.19.tgz#2eae3a2c4760466882db08281365d502c3f22ebf"
-  integrity sha512-SNGFf/karBr/GNz5GNWnbppFz6uEOGecv6D8WA1ZLeWkjg4gG5e4M9XmPcB32v350e1PTRG7KwWDce48qWAKCQ==
+"@spectrum-css/tabs@^3.2.20":
+  version "3.2.20"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.2.20.tgz#f8c139402619e2b9cda14da31d21f3bd9b0f14a3"
+  integrity sha512-wfKFLJpjvx22mXZht+FTK5dYw7t/kkwK/dNwM+Fa8nxn7N97WH392iy+wEgqXPU4HJmgUWxaZANITOaAw4sa0A==
 
 "@spectrum-css/tag@^3.3.14":
   version "3.3.14"