fix(tab): allow icon only, expand visual regression suite

adobe · Apr 9, 2020 · a167550 · a167550
1 parent 254815b
commit a167550
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 4 deletions.
diff --git a/packages/tab/src/tab.ts b/packages/tab/src/tab.ts
@@ -54,9 +54,13 @@ export class Tab extends FocusVisiblePolyfillMixin(LitElement) {
                       <slot name="icon"></slot>
                   `
                 : html``}
-            <label id="itemLabel">
-                ${this.label}
-            </label>
+            ${this.label
+                ? html`
+                      <label id="itemLabel">
+                          ${this.label}
+                      </label>
+                  `
+                : html``}
         `;
     }
 

diff --git a/packages/tab/stories/tabs.stories.ts b/packages/tab/stories/tabs.stories.ts
@@ -24,10 +24,10 @@ export default {
 export const Default = (): TemplateResult => {
     return html`
         <sp-tab-list selected="1">
-            <sp-tab label="Tab 1" value="1"></sp-tab>
             <sp-tab label="Tab 2" value="2"></sp-tab>
             <sp-tab label="Tab 3" value="3"></sp-tab>
             <sp-tab label="Tab 4" value="4"></sp-tab>
+            <sp-tab label="Really Long Name" value="1" selected></sp-tab>
         </sp-tab-list>
     `;
 };
@@ -140,6 +140,56 @@ export const Icons = (): TemplateResult => {
     `;
 };
 
+export const IconsOnly = (): TemplateResult => {
+    const directions = {
+        horizontal: 'horizontal',
+        vertical: 'vertical',
+    };
+    const type = radios('List Type', directions, directions.horizontal);
+    const tabType = radios('Tab Type', directions, directions.horizontal);
+    return html`
+        <sp-icons-medium></sp-icons-medium>
+        <sp-tab-list selected="1" direction="${type}">
+            <sp-tab
+                aria-label="Tab 1"
+                value="1"
+                ?vertical=${tabType === directions.vertical}
+            >
+                <sp-icon
+                    slot="icon"
+                    size="s"
+                    name="ui:CheckmarkSmall"
+                ></sp-icon>
+            </sp-tab>
+            <sp-tab
+                aria-label="Tab 2"
+                value="2"
+                ?vertical=${tabType === directions.vertical}
+            >
+                <sp-icon slot="icon" size="s" name="ui:CrossSmall"></sp-icon>
+            </sp-tab>
+            <sp-tab
+                aria-label="Tab 3"
+                value="3"
+                ?vertical=${tabType === directions.vertical}
+            >
+                <sp-icon
+                    slot="icon"
+                    size="s"
+                    name="ui:ChevronDownSmall"
+                ></sp-icon>
+            </sp-tab>
+            <sp-tab
+                aria-label="Tab 4"
+                value="4"
+                ?vertical=${tabType === directions.vertical}
+            >
+                <sp-icon slot="icon" size="s" name="ui:HelpSmall"></sp-icon>
+            </sp-tab>
+        </sp-tab-list>
+    `;
+};
+
 export const iconsIi = (): TemplateResult => {
     return html`
         <sp-icons-medium></sp-icons-medium>

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