mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 21:56:56 +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-primary-tab-container-color` | `--md-sys-color-surface`
|
||||||
`--md-secondary-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-label-text-type` | `500 0.875rem/1.25rem Roboto`
|
||||||
`--md-primary-tab-active-indicator-color` | `--md-sys-color-primary`
|
`--md-primary-tab-active-indicator-color` | `--md-sys-color-primary`
|
||||||
`--md-primary-tab-icon-color` | `--md-sys-color-on-surface-variant`
|
`--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-hover-label-text-color: var(--active-color);
|
||||||
--md-primary-tab-active-pressed-icon-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);
|
--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) {
|
render(knobs) {
|
||||||
const tabContent = getTabContentGenerator(knobs);
|
const tabContent = getTabContentGenerator(knobs);
|
||||||
|
@ -101,14 +101,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
|
appearance: none;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-sizing: border-box;
|
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-appearance: none;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
background: none;
|
background: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -118,7 +117,6 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
z-index: 0; // Ensure this is a stacking context so the indicator displays
|
z-index: 0; // Ensure this is a stacking context so the indicator displays
|
||||||
font: var(--_label-text-type);
|
font: var(--_label-text-type);
|
||||||
border-bottom: var(--_divider-thickness) solid var(--_divider-color);
|
|
||||||
color: var(--_label-text-color);
|
color: var(--_label-text-color);
|
||||||
|
|
||||||
&::-moz-focus-inner {
|
&::-moz-focus-inner {
|
||||||
|
@ -9,8 +9,7 @@
|
|||||||
:host {
|
:host {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
align-items: end;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
@ -25,6 +24,14 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
align-items: end;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
::slotted(*) {
|
::slotted(*) {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
@ -4,6 +4,8 @@
|
|||||||
* SPDX-License-Identifier: Apache-2.0
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import '../../divider/divider.js';
|
||||||
|
|
||||||
import {html, isServer, LitElement, PropertyValues} from 'lit';
|
import {html, isServer, LitElement, PropertyValues} from 'lit';
|
||||||
import {property, queryAssignedElements, state} from 'lit/decorators.js';
|
import {property, queryAssignedElements, state} from 'lit/decorators.js';
|
||||||
|
|
||||||
@ -238,8 +240,11 @@ export class Tabs extends LitElement {
|
|||||||
|
|
||||||
protected override render() {
|
protected override render() {
|
||||||
return html`
|
return html`
|
||||||
<slot @slotchange=${this.handleSlotChange} @click=${
|
<div class="tabs">
|
||||||
this.handleItemClick}></slot>
|
<slot @slotchange=${this.handleSlotChange} @click=${
|
||||||
|
this.handleItemClick}></slot>
|
||||||
|
</div>
|
||||||
|
<md-divider part="divider"></md-divider>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -7,7 +7,6 @@
|
|||||||
@use 'sass:map';
|
@use 'sass:map';
|
||||||
// go/keep-sorted end
|
// go/keep-sorted end
|
||||||
// go/keep-sorted start
|
// go/keep-sorted start
|
||||||
@use './md-comp-divider';
|
|
||||||
@use './md-sys-color';
|
@use './md-sys-color';
|
||||||
@use './md-sys-elevation';
|
@use './md-sys-elevation';
|
||||||
@use './md-sys-shape';
|
@use './md-sys-shape';
|
||||||
@ -47,8 +46,6 @@ $supported-tokens: (
|
|||||||
'primary-tab-container-elevation',
|
'primary-tab-container-elevation',
|
||||||
'primary-tab-container-height',
|
'primary-tab-container-height',
|
||||||
'primary-tab-container-shape',
|
'primary-tab-container-shape',
|
||||||
'primary-tab-divider-color',
|
|
||||||
'primary-tab-divider-thickness',
|
|
||||||
'primary-tab-focus-icon-color',
|
'primary-tab-focus-icon-color',
|
||||||
'primary-tab-focus-label-text-color',
|
'primary-tab-focus-label-text-color',
|
||||||
'primary-tab-hover-icon-color',
|
'primary-tab-hover-icon-color',
|
||||||
@ -82,8 +79,6 @@ $supported-tokens: (
|
|||||||
'secondary-tab-container-elevation',
|
'secondary-tab-container-elevation',
|
||||||
'secondary-tab-container-height',
|
'secondary-tab-container-height',
|
||||||
'secondary-tab-container-shape',
|
'secondary-tab-container-shape',
|
||||||
'secondary-tab-divider-color',
|
|
||||||
'secondary-tab-divider-thickness',
|
|
||||||
'secondary-tab-focus-icon-color',
|
'secondary-tab-focus-icon-color',
|
||||||
'secondary-tab-focus-label-text-color',
|
'secondary-tab-focus-label-text-color',
|
||||||
'secondary-tab-hover-icon-color',
|
'secondary-tab-hover-icon-color',
|
||||||
@ -132,12 +127,10 @@ $unsupported-tokens: (
|
|||||||
// prepare token values by normalizing and combinding primary/secondary
|
// prepare token values by normalizing and combinding primary/secondary
|
||||||
// generated tokens *before* fixing up names and limiting to supported tokens.
|
// generated tokens *before* fixing up names and limiting to supported tokens.
|
||||||
// 1. for primary
|
// 1. for primary
|
||||||
// a. add divider/text tokens
|
// a. prefix with `primary-tab`
|
||||||
// b. prefix with `primary-tab`
|
|
||||||
// 2. for secondary
|
// 2. for secondary
|
||||||
// a. add divider/text tokens
|
// a. add missing secondary tokens to match primary
|
||||||
// b. add missing secondary tokens to match primary
|
// b. prefix with `secondary-tab`
|
||||||
// c. prefix with `secondary-tab`
|
|
||||||
|
|
||||||
$primary-tokens: md-comp-primary-navigation-tab.values(
|
$primary-tokens: md-comp-primary-navigation-tab.values(
|
||||||
$deps,
|
$deps,
|
||||||
@ -237,14 +230,8 @@ $unsupported-tokens: (
|
|||||||
@return $tokens;
|
@return $tokens;
|
||||||
}
|
}
|
||||||
|
|
||||||
// add tokens for divider / label-text
|
// add tokens for label-text
|
||||||
@function _add-missing-tokens($tokens, $deps) {
|
@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
|
// TODO(b/271876162): remove when tokens compiler emits typescale tokens
|
||||||
$tokens: map.merge(
|
$tokens: map.merge(
|
||||||
$tokens,
|
$tokens,
|
||||||
|
Loading…
Reference in New Issue
Block a user