fix(tabs): remove divider tokens in favor of md-divider

BREAKING CHANGE: Remove `--md-*tab-divider` tokens and use `md-tabs::part(divider)` and `--md-divider-*` tokens PiperOrigin-RevId: 560127620
material-components · Aug 25, 2023 · 13690a3 · 13690a3
1 parent d18db2a
commit 13690a3
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 29 deletions.
diff --git a/docs/components/tabs.md b/docs/components/tabs.md
@@ -137,7 +137,6 @@ Token                                     | Default value
 ----------------------------------------- | -----------------------------------
 `--md-primary-tab-container-color`        | `--md-sys-color-surface`
 `--md-secondary-tab-container-color`      | `--md-sys-color-surface`
-`--md-primary-tab-divider-color`          | `--md-sys-color-outline-variant`
 `--md-primary-tab-label-text-type`        | `500 0.875rem/1.25rem Roboto`
 `--md-primary-tab-active-indicator-color` | `--md-sys-color-primary`
 `--md-primary-tab-icon-color`             | `--md-sys-color-on-surface-variant`

diff --git a/tabs/demo/stories.ts b/tabs/demo/stories.ts
@@ -162,10 +162,13 @@ const custom: MaterialStoryInit<StoryKnobs> = {
         --md-primary-tab-active-hover-label-text-color: var(--active-color);
         --md-primary-tab-active-pressed-icon-color: var(--active-color);
         --md-primary-tab-active-pressed-label-text-color: var(--active-color);
-        /* divider */
-        --md-primary-tab-divider-color: var(--active-color);
-        --md-primary-tab-divider-thickness: 4px;
-      }`,
+      }
+
+      .custom::part(divider) {
+        --md-divider-color: var(--active-color);
+        --md-divider-thickness: 4px;
+      }
+    `,
   ],
   render(knobs) {
     const tabContent = getTabContentGenerator(knobs);

diff --git a/tabs/internal/_tab.scss b/tabs/internal/_tab.scss
@@ -101,14 +101,13 @@
   }
 
   .button {
+    appearance: none;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    box-sizing: border-box;
     border: none;
     outline: none;
     user-select: none;
-    -webkit-appearance: none;
     vertical-align: middle;
     background: none;
     text-decoration: none;
@@ -118,7 +117,6 @@
     margin: 0;
     z-index: 0; // Ensure this is a stacking context so the indicator displays
     font: var(--_label-text-type);
-    border-bottom: var(--_divider-thickness) solid var(--_divider-color);
     color: var(--_label-text-color);
 
     &::-moz-focus-inner {

diff --git a/tabs/internal/_tabs.scss b/tabs/internal/_tabs.scss
@@ -9,8 +9,7 @@
   :host {
     box-sizing: border-box;
     display: flex;
-    justify-content: space-between;
-    align-items: end;
+    flex-direction: column;
     overflow: auto;
     scroll-behavior: smooth;
     scrollbar-width: none;
@@ -25,6 +24,14 @@
     display: none;
   }
 
+  .tabs {
+    align-items: end;
+    display: flex;
+    height: 100%;
+    justify-content: space-between;
+    width: 100%;
+  }
+
   ::slotted(*) {
     flex: 1;
   }

diff --git a/tabs/internal/tabs.ts b/tabs/internal/tabs.ts
@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../../divider/divider.js';
+
 import {html, isServer, LitElement, PropertyValues} from 'lit';
 import {property, queryAssignedElements, state} from 'lit/decorators.js';
 
@@ -238,8 +240,11 @@ export class Tabs extends LitElement {
 
   protected override render() {
     return html`
-      <slot @slotchange=${this.handleSlotChange} @click=${
-        this.handleItemClick}></slot>
+      <div class="tabs">
+        <slot @slotchange=${this.handleSlotChange} @click=${
+          this.handleItemClick}></slot>
+      </div>
+      <md-divider part="divider"></md-divider>
     `;
   }
 

diff --git a/tokens/_md-comp-tab.scss b/tokens/_md-comp-tab.scss
@@ -7,7 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use './md-comp-divider';
 @use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
@@ -47,8 +46,6 @@ $supported-tokens: (
   'primary-tab-container-elevation',
   'primary-tab-container-height',
   'primary-tab-container-shape',
-  'primary-tab-divider-color',
-  'primary-tab-divider-thickness',
   'primary-tab-focus-icon-color',
   'primary-tab-focus-label-text-color',
   'primary-tab-hover-icon-color',
@@ -82,8 +79,6 @@ $supported-tokens: (
   'secondary-tab-container-elevation',
   'secondary-tab-container-height',
   'secondary-tab-container-shape',
-  'secondary-tab-divider-color',
-  'secondary-tab-divider-thickness',
   'secondary-tab-focus-icon-color',
   'secondary-tab-focus-label-text-color',
   'secondary-tab-hover-icon-color',
@@ -132,12 +127,10 @@ $unsupported-tokens: (
   // prepare token values by normalizing and combinding primary/secondary
   // generated tokens *before* fixing up names and limiting to supported tokens.
   // 1. for primary
-  //   a. add divider/text tokens
-  //   b. prefix with `primary-tab`
+  //   a. prefix with `primary-tab`
   // 2. for secondary
-  //   a. add divider/text tokens
-  //   b. add missing secondary tokens to match primary
-  //   c. prefix with `secondary-tab`
+  //   a. add missing secondary tokens to match primary
+  //   b. prefix with `secondary-tab`
 
   $primary-tokens: md-comp-primary-navigation-tab.values(
     $deps,
@@ -237,14 +230,8 @@ $unsupported-tokens: (
   @return $tokens;
 }
 
-// add tokens for divider / label-text
+// add tokens for label-text
 @function _add-missing-tokens($tokens, $deps) {
-  $divider-tokens: md-comp-divider.values();
-  @each $key, $value in $divider-tokens {
-    $key: 'divider-#{$key}';
-    $tokens: map.set($tokens, $key, $value);
-  }
-
   // TODO(b/271876162): remove when tokens compiler emits typescale tokens
   $tokens: map.merge(
     $tokens,