mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
fix(tabs): rename tab selected
to active
BREAKING CHANGE: rename `selected` to `active` for primary and secondary tabs. PiperOrigin-RevId: 563782741
This commit is contained in:
parent
d296316a2b
commit
23b291b2dd
@ -41,7 +41,7 @@
|
||||
);
|
||||
}
|
||||
|
||||
:host([selected]) md-focus-ring {
|
||||
:host([active]) md-focus-ring {
|
||||
margin-bottom: calc(var(--_active-indicator-height) + 1px);
|
||||
}
|
||||
|
||||
@ -139,10 +139,10 @@
|
||||
}
|
||||
|
||||
// selected styling
|
||||
:host([selected]) .indicator {
|
||||
:host([active]) .indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
:host([selected]) .button {
|
||||
:host([active]) .button {
|
||||
color: var(--_active-label-text-color);
|
||||
@include elevation.theme(
|
||||
(
|
||||
@ -160,32 +160,32 @@
|
||||
);
|
||||
}
|
||||
|
||||
:host([selected]) .button ::slotted([slot='icon']) {
|
||||
:host([active]) .button ::slotted([slot='icon']) {
|
||||
color: var(--_active-icon-color);
|
||||
}
|
||||
|
||||
// selected states
|
||||
:host([selected]) .button:hover {
|
||||
:host([active]) .button:hover {
|
||||
color: var(--_active-hover-label-text-color);
|
||||
}
|
||||
|
||||
:host([selected]) .button:hover ::slotted([slot='icon']) {
|
||||
:host([active]) .button:hover ::slotted([slot='icon']) {
|
||||
color: var(--_active-hover-icon-color);
|
||||
}
|
||||
|
||||
:host([selected]) .button:focus {
|
||||
:host([active]) .button:focus {
|
||||
color: var(--_active-focus-label-text-color);
|
||||
}
|
||||
|
||||
:host([selected]) .button:focus ::slotted([slot='icon']) {
|
||||
:host([active]) .button:focus ::slotted([slot='icon']) {
|
||||
color: var(--_active-focus-icon-color);
|
||||
}
|
||||
|
||||
:host([selected]) .button:active {
|
||||
:host([active]) .button:active {
|
||||
color: var(--_active-pressed-label-text-color);
|
||||
}
|
||||
|
||||
:host([selected]) .button:active ::slotted([slot='icon']) {
|
||||
:host([active]) .button:active ::slotted([slot='icon']) {
|
||||
color: var(--_active-pressed-icon-color);
|
||||
}
|
||||
|
||||
|
@ -38,7 +38,7 @@
|
||||
|
||||
// draw selected on top so its indicator can be transitioned from the
|
||||
// previously selected tab, on top of it
|
||||
::slotted([selected]) {
|
||||
::slotted([active]) {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
@ -36,9 +36,21 @@ export class Tab extends LitElement {
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether or not the tab is `selected`.
|
||||
* Whether or not the tab is selected.
|
||||
**/
|
||||
@property({type: Boolean, reflect: true}) selected = false;
|
||||
@property({type: Boolean, reflect: true}) active = false;
|
||||
|
||||
/**
|
||||
* TODO(b/293476210): remove after migrating
|
||||
* @deprecated use `active`
|
||||
*/
|
||||
@property({type: Boolean})
|
||||
get selected() {
|
||||
return this.active;
|
||||
}
|
||||
set selected(active: boolean) {
|
||||
this.active = active;
|
||||
}
|
||||
|
||||
/**
|
||||
* In SSR, set this to true when an icon is present.
|
||||
@ -93,8 +105,8 @@ export class Tab extends LitElement {
|
||||
}
|
||||
|
||||
protected override updated(changed: PropertyValues) {
|
||||
if (changed.has('selected')) {
|
||||
this.internals.ariaSelected = String(this.selected);
|
||||
if (changed.has('active')) {
|
||||
this.internals.ariaSelected = String(this.active);
|
||||
this.animateSelected();
|
||||
}
|
||||
}
|
||||
@ -130,7 +142,7 @@ export class Tab extends LitElement {
|
||||
|
||||
private getKeyframes() {
|
||||
const reduceMotion = shouldReduceMotion();
|
||||
if (!this.selected) {
|
||||
if (!this.active) {
|
||||
return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;
|
||||
}
|
||||
|
||||
|
@ -210,13 +210,14 @@ export class Tabs extends LitElement {
|
||||
// sync state with items.
|
||||
if (itemsChanged) {
|
||||
this.items.forEach((item, i) => {
|
||||
item.selected = this.selected === i;
|
||||
item.active = this.selected === i;
|
||||
});
|
||||
}
|
||||
if (itemsChanged || changed.has('selected')) {
|
||||
if (this.previousSelectedItem !== this.selectedItem) {
|
||||
this.previousSelectedItem?.removeAttribute('selected');
|
||||
this.selectedItem?.setAttribute('selected', '');
|
||||
if (this.previousSelectedItem && this.selectedItem &&
|
||||
this.previousSelectedItem !== this.selectedItem) {
|
||||
this.previousSelectedItem.active = false;
|
||||
this.selectedItem.active = true;
|
||||
}
|
||||
if (this.selectedItem !== this.focusedItem) {
|
||||
this.updateFocusableItem(this.selectedItem);
|
||||
|
Loading…
Reference in New Issue
Block a user