material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-11 13:46:10 +03:00
Code Issues Projects Releases Wiki Activity

fix(tabs): rename tab selected to active

Browse Source 
BREAKING CHANGE: rename `selected` to `active` for primary and secondary tabs.

PiperOrigin-RevId: 563782741
This commit is contained in:
Elizabeth Mitchell 2023-09-08 10:07:20 -07:00 committed by Copybara-Service
parent d296316a2b
commit 23b291b2dd
4 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
tabs/internal/_tab.scss
View File

@ -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);
} }

2
tabs/internal/_tabs.scss
View File

@ -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;
} }
} }

22
tabs/internal/tab.ts
View File

@ -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;
} }

9
tabs/internal/tabs.ts
View File

@ -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);