fix(tabs)!: secondary tabs always have inline icons

PiperOrigin-RevId: 561157766
material-components · Aug 29, 2023 · 6b2955b · 6b2955b
1 parent 2f9cc20
commit 6b2955b
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 31 deletions.
diff --git a/tabs/demo/stories.ts b/tabs/demo/stories.ts
@@ -82,23 +82,22 @@ const secondary: MaterialStoryInit<StoryKnobs> = {
   styles,
   render(knobs) {
     const tabContent = getTabContentGenerator(knobs);
-    const inlineIcon = knobs.inlineIcon;
 
     return html`
       <md-tabs
           .selected=${knobs.selected}
           .selectOnFocus=${knobs.selectOnFocus}
       >
-        <md-secondary-tab .inlineIcon=${inlineIcon}>
+        <md-secondary-tab>
           ${tabContent('flight', 'Travel')}
         </md-secondary-tab>
-        <md-secondary-tab .inlineIcon=${inlineIcon}>
+        <md-secondary-tab>
           ${tabContent('hotel', 'Hotel')}
         </md-secondary-tab>
-        <md-secondary-tab .inlineIcon=${inlineIcon}>
+        <md-secondary-tab>
           ${tabContent('hiking', 'Activities')}
         </md-secondary-tab>
-        <md-secondary-tab .inlineIcon=${inlineIcon}>
+        <md-secondary-tab>
           ${tabContent('restaurant', 'Food')}
         </md-secondary-tab>
       </md-tabs>`;

diff --git a/tabs/internal/_primary-tab.scss b/tabs/internal/_primary-tab.scss
@@ -58,4 +58,13 @@
       var(--_container-shape)
     );
   }
+
+  .content.stacked {
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .content.stacked.has-icon.has-label {
+    height: var(--_with-icon-and-label-text-container-height);
+  }
 }
diff --git a/tabs/internal/_secondary-tab.scss b/tabs/internal/_secondary-tab.scss
@@ -57,8 +57,5 @@
       --md-secondary-tab-container-shape-end-start,
       var(--_container-shape)
     );
-
-    // TODO(b/293503309): remove once secondary tabs only use inline icons
-    --_with-icon-and-label-text-container-height: 64px;
   }
 }
diff --git a/tabs/internal/_tab.scss b/tabs/internal/_tab.scss
@@ -89,19 +89,10 @@
     position: relative;
     box-sizing: border-box;
     display: inline-flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
     height: var(--_container-height);
-    gap: 2px;
-  }
-
-  .content.has-icon.has-label:not(.inline-icon) {
-    height: var(--_with-icon-and-label-text-container-height);
-  }
-
-  .content.inline-icon {
-    flex-direction: row;
     gap: 8px;
   }
 

diff --git a/tabs/internal/primary-tab.ts b/tabs/internal/primary-tab.ts
@@ -4,9 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {property} from 'lit/decorators.js';
+
 import {Tab} from './tab.js';
 
 /**
  * A primary tab component.
  */
-export class PrimaryTab extends Tab {}
+export class PrimaryTab extends Tab {
+  /**
+   * Whether or not the icon renders inline with label or stacked vertically.
+   */
+  @property({type: Boolean, attribute: 'inline-icon'}) inlineIcon = false;
+
+  protected override getContentClasses() {
+    return {
+      ...super.getContentClasses(),
+      'stacked': !this.inlineIcon,
+    };
+  }
+}
diff --git a/tabs/internal/tab.ts b/tabs/internal/tab.ts
@@ -51,11 +51,6 @@ export class Tab extends LitElement {
    */
   @property({type: Boolean}) focusable = false;
 
-  /**
-   * Whether or not the icon renders inline with label or stacked vertically.
-   */
-  @property({type: Boolean, attribute: 'inline-icon'}) inlineIcon = false;
-
   /**
    * In SSR, set this to true when an icon is present.
    */
@@ -93,12 +88,6 @@ export class Tab extends LitElement {
   }
 
   protected override render() {
-    const contentClasses = {
-      'inline-icon': this.inlineIcon,
-      'has-icon': this.hasIcon,
-      'has-label': !this.iconOnly,
-    };
-
     const indicator = html`<div class="indicator"></div>`;
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
@@ -113,7 +102,7 @@ export class Tab extends LitElement {
         <md-focus-ring part="focus-ring" inward></md-focus-ring>
         <md-elevation></md-elevation>
         <md-ripple></md-ripple>
-        <div class="content ${classMap(contentClasses)}">
+        <div class="content ${classMap(this.getContentClasses())}">
           <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
           <slot @slotchange=${this.handleSlotChange}></slot>
           ${this.fullWidthIndicator ? nothing : indicator}
@@ -122,6 +111,13 @@ export class Tab extends LitElement {
       </button>`;
   }
 
+  protected getContentClasses() {
+    return {
+      'has-icon': this.hasIcon,
+      'has-label': !this.iconOnly,
+    };
+  }
+
   protected override updated(changed: PropertyValues) {
     if (changed.has('selected')) {
       this.animateSelected();