mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 21:57:41 +03:00
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
This commit is contained in:
parent
d18db2a6ac
commit
13690a396f
@ -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`
|
||||
|
@ -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);
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
`;
|
||||
}
|
||||
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user