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): remove public indicator property

Browse Source 
PiperOrigin-RevId: 563781246
This commit is contained in:
Elizabeth Mitchell 2023-09-08 10:02:12 -07:00 committed by Copybara-Service
parent 82e9e92a19
commit d296316a2b
2 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
tabs/harness.ts
View File

@ -20,7 +20,8 @@ export class TabHarness extends Harness<Tab> {
private async completeIndicatorAnimation() { private async completeIndicatorAnimation() {
await this.element.updateComplete; await this.element.updateComplete;
const animations = this.element.indicator.getAnimations(); const indicator = this.element.renderRoot.querySelector('.indicator')!;
const animations = indicator.getAnimations();
for (const animation of animations) { for (const animation of animations) {
animation.finish(); animation.finish();
} }
@ -28,7 +29,8 @@ export class TabHarness extends Harness<Tab> {
async isIndicatorShowing() { async isIndicatorShowing() {
await this.completeIndicatorAnimation(); await this.completeIndicatorAnimation();
const opacity = getComputedStyle(this.element.indicator)['opacity']; const indicator = this.element.renderRoot.querySelector('.indicator')!;
const opacity = getComputedStyle(indicator)['opacity'];
return opacity === '1'; return opacity === '1';
} }
} }

22
tabs/internal/tab.ts
View File

@ -21,6 +21,12 @@ interface Tabs extends HTMLElement {
previousSelectedItem?: Tab; previousSelectedItem?: Tab;
} }
/**
* Symbol for tabs to use to animate their indicators based off another tab's
* indicator.
*/
const INDICATOR = Symbol('indicator');
/** /**
* Tab component. * Tab component.
*/ */
@ -44,9 +50,7 @@ export class Tab extends LitElement {
*/ */
@property({type: Boolean, attribute: 'icon-only'}) iconOnly = false; @property({type: Boolean, attribute: 'icon-only'}) iconOnly = false;
// note, this is public so it can participate in selection animation. @query('.indicator') readonly[INDICATOR]!: HTMLElement|null;
/** @private */
@query('.indicator') readonly indicator!: HTMLElement;
@state() protected fullWidthIndicator = false; @state() protected fullWidthIndicator = false;
@queryAssignedNodes({flatten: true}) @queryAssignedNodes({flatten: true})
private readonly assignedDefaultNodes!: Node[]; private readonly assignedDefaultNodes!: Node[];
@ -110,12 +114,16 @@ export class Tab extends LitElement {
} }
private animateSelected() { private animateSelected() {
this.indicator.getAnimations().forEach(a => { if (!this[INDICATOR]) {
return;
}
this[INDICATOR].getAnimations().forEach(a => {
a.cancel(); a.cancel();
}); });
const frames = this.getKeyframes(); const frames = this.getKeyframes();
if (frames !== null) { if (frames !== null) {
this.indicator.animate( this[INDICATOR].animate(
frames, {duration: 250, easing: EASING.EMPHASIZED}); frames, {duration: 250, easing: EASING.EMPHASIZED});
} }
} }
@ -130,11 +138,11 @@ export class Tab extends LitElement {
const tabs = this.closest<Tabs>('md-tabs'); const tabs = this.closest<Tabs>('md-tabs');
const from: Keyframe = {}; const from: Keyframe = {};
const fromRect = const fromRect =
(tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ?? (tabs?.previousSelectedItem?.[INDICATOR]?.getBoundingClientRect() ??
({} as DOMRect)); ({} as DOMRect));
const fromPos = fromRect.left; const fromPos = fromRect.left;
const fromExtent = fromRect.width; const fromExtent = fromRect.width;
const toRect = this.indicator.getBoundingClientRect(); const toRect = this[INDICATOR]!.getBoundingClientRect();
const toPos = toRect.left; const toPos = toRect.left;
const toExtent = toRect.width; const toExtent = toRect.width;
const scale = fromExtent / toExtent; const scale = fromExtent / toExtent;