fix(tab): use Spectrum CSS relative values for overrides

adobe · Apr 23, 2020 · f2e22f8 · f2e22f8
1 parent 51a1240
commit f2e22f8
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 8 deletions.
diff --git a/packages/tab/src/tab.css b/packages/tab/src/tab.css
@@ -17,13 +17,30 @@ governing permissions and limitations under the License.
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height: auto;
+    height: var(--spectrum-tabs-vertical-item-height, auto) !important;
+
+    --sp-tab-vertial-margin-y: calc(
+        (
+                var(
+                        --spectrum-tabs-vertical-item-height,
+                        var(--spectrum-global-dimension-size-550)
+                    ) -
+                    var(
+                        --spectrum-tabs-focus-ring-height,
+                        var(--spectrum-alias-single-line-height)
+                    )
+            ) / 2
+    );
 }
 
 :host([vertical]):before {
     /* .spectrum-Tabs--vertical .spectrum-Tabs-item:before */
-    left: calc(-1 * var(--spectrum-tabs-focus-ring-size, 2px));
-    right: calc(-1 * var(--spectrum-tabs-focus-ring-size, 2px));
+    left: calc(
+        -1 * var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))
+    );
+    right: calc(
+        -1 * var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))
+    );
 
     /* Custom */
     height: auto;
@@ -33,13 +50,19 @@ governing permissions and limitations under the License.
 }
 
 :host([vertical]) ::slotted([slot='icon']) {
-    flex-shrink: 0;
+    margin-top: var(--sp-tab-vertial-margin-y);
+    height: auto;
 }
 
 :host([vertical]) #itemLabel {
-    font-size: 13px;
-    padding: 8px 0;
-    font-weight: 400;
+    font-size: var(
+        --spectrum-tabs-text-size,
+        var(--spectrum-alias-font-size-default)
+    );
+    font-weight: var(
+        --spectrum-tabs-text-font-weight,
+        var(--spectrum-alias-body-text-font-weight)
+    );
     line-height: 1;
-    margin: 0;
+    margin: var(--sp-tab-vertial-margin-y) 0;
 }
diff --git a/packages/tab/stories/tabs.stories.ts b/packages/tab/stories/tabs.stories.ts
@@ -222,6 +222,38 @@ iconsIi.story = {
     name: 'Icons II',
 };
 
+export const iconsIii = (): TemplateResult => {
+    return html`
+        <sp-icons-medium></sp-icons-medium>
+        <sp-tab-list selected="1" direction="vertical">
+            <sp-tab label="Tab 1" value="1">
+                <sp-icon
+                    slot="icon"
+                    size="s"
+                    name="ui:CheckmarkSmall"
+                ></sp-icon>
+            </sp-tab>
+            <sp-tab label="Tab 2" value="2">
+                <sp-icon slot="icon" size="s" name="ui:CrossSmall"></sp-icon>
+            </sp-tab>
+            <sp-tab label="Tab 3" value="3">
+                <sp-icon
+                    slot="icon"
+                    size="s"
+                    name="ui:ChevronDownSmall"
+                ></sp-icon>
+            </sp-tab>
+            <sp-tab label="Tab 4" value="4">
+                <sp-icon slot="icon" size="s" name="ui:HelpSmall"></sp-icon>
+            </sp-tab>
+        </sp-tab-list>
+    `;
+};
+
+iconsIii.story = {
+    name: 'Icons III',
+};
+
 export const Quiet = (): TemplateResult => {
     const directions = {
         horizontal: 'horizontal',

diff --git a/test/visual/stories.js b/test/visual/stories.js
@@ -122,6 +122,7 @@ module.exports = [
     'tabs--icons',
     'tabs--icons-only',
     'tabs--icons-ii',
+    'tabs--icons-iii',
     'tabs--quiet',
     'tabs--compact',
     'tabs--quiet-compact',