diff --git a/docs/components/tabs.md b/docs/components/tabs.md index 1d1331dd8..826e5c23b 100644 --- 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 index 774a48eff..0ba2289f2 100644 --- a/tabs/demo/stories.ts +++ b/tabs/demo/stories.ts @@ -162,10 +162,13 @@ const custom: MaterialStoryInit = { --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 index 9ebced90d..cc2373435 100644 --- 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 index 00fcc895c..3e17992a0 100644 --- 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 index 3e6575c31..9845d7ee9 100644 --- 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` - +
+ +
+ `; } diff --git a/tokens/_md-comp-tab.scss b/tokens/_md-comp-tab.scss index 546b643df..4f695b487 100644 --- 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,