mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +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);
|
margin-bottom: calc(var(--_active-indicator-height) + 1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -139,10 +139,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// selected styling
|
// selected styling
|
||||||
:host([selected]) .indicator {
|
:host([active]) .indicator {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
:host([selected]) .button {
|
:host([active]) .button {
|
||||||
color: var(--_active-label-text-color);
|
color: var(--_active-label-text-color);
|
||||||
@include elevation.theme(
|
@include elevation.theme(
|
||||||
(
|
(
|
||||||
@ -160,32 +160,32 @@
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([selected]) .button ::slotted([slot='icon']) {
|
:host([active]) .button ::slotted([slot='icon']) {
|
||||||
color: var(--_active-icon-color);
|
color: var(--_active-icon-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// selected states
|
// selected states
|
||||||
:host([selected]) .button:hover {
|
:host([active]) .button:hover {
|
||||||
color: var(--_active-hover-label-text-color);
|
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);
|
color: var(--_active-hover-icon-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([selected]) .button:focus {
|
:host([active]) .button:focus {
|
||||||
color: var(--_active-focus-label-text-color);
|
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);
|
color: var(--_active-focus-icon-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([selected]) .button:active {
|
:host([active]) .button:active {
|
||||||
color: var(--_active-pressed-label-text-color);
|
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);
|
color: var(--_active-pressed-icon-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -38,7 +38,7 @@
|
|||||||
|
|
||||||
// draw selected on top so its indicator can be transitioned from the
|
// draw selected on top so its indicator can be transitioned from the
|
||||||
// previously selected tab, on top of it
|
// previously selected tab, on top of it
|
||||||
::slotted([selected]) {
|
::slotted([active]) {
|
||||||
z-index: 1;
|
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.
|
* 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) {
|
protected override updated(changed: PropertyValues) {
|
||||||
if (changed.has('selected')) {
|
if (changed.has('active')) {
|
||||||
this.internals.ariaSelected = String(this.selected);
|
this.internals.ariaSelected = String(this.active);
|
||||||
this.animateSelected();
|
this.animateSelected();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -130,7 +142,7 @@ export class Tab extends LitElement {
|
|||||||
|
|
||||||
private getKeyframes() {
|
private getKeyframes() {
|
||||||
const reduceMotion = shouldReduceMotion();
|
const reduceMotion = shouldReduceMotion();
|
||||||
if (!this.selected) {
|
if (!this.active) {
|
||||||
return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;
|
return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -210,13 +210,14 @@ export class Tabs extends LitElement {
|
|||||||
// sync state with items.
|
// sync state with items.
|
||||||
if (itemsChanged) {
|
if (itemsChanged) {
|
||||||
this.items.forEach((item, i) => {
|
this.items.forEach((item, i) => {
|
||||||
item.selected = this.selected === i;
|
item.active = this.selected === i;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (itemsChanged || changed.has('selected')) {
|
if (itemsChanged || changed.has('selected')) {
|
||||||
if (this.previousSelectedItem !== this.selectedItem) {
|
if (this.previousSelectedItem && this.selectedItem &&
|
||||||
this.previousSelectedItem?.removeAttribute('selected');
|
this.previousSelectedItem !== this.selectedItem) {
|
||||||
this.selectedItem?.setAttribute('selected', '');
|
this.previousSelectedItem.active = false;
|
||||||
|
this.selectedItem.active = true;
|
||||||
}
|
}
|
||||||
if (this.selectedItem !== this.focusedItem) {
|
if (this.selectedItem !== this.focusedItem) {
|
||||||
this.updateFocusableItem(this.selectedItem);
|
this.updateFocusableItem(this.selectedItem);
|
||||||
|
Loading…
Reference in New Issue
Block a user