Skip to content

Commit

Permalink
fix(menu): make overriding default styles less likely
Browse files Browse the repository at this point in the history
fixes #4160

A workaround to lessen the likelihood of someone's styles clashing with the default light dom styles of md-menu and md-select. It's difficult to tell whether a slotted element will animate and fire animation events, so tihs is a bit of a workaround for now.

PiperOrigin-RevId: 558910594
  • Loading branch information
e111077 authored and Copybara-Service committed Aug 21, 2023
1 parent ab3aa41 commit 626b4ef
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 7 deletions.
2 changes: 1 addition & 1 deletion menu/internal/_menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
overflow: hidden;
}

&.animating ::slotted(.hidden) {
&.animating ::slotted(.md-menu-hidden) {
opacity: 0;
}

Expand Down
12 changes: 6 additions & 6 deletions menu/internal/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -481,9 +481,9 @@ export abstract class Menu extends LitElement {

// Make them all initially hidden and then clean up at the end of each
// animation.
child.classList.toggle('hidden', true);
child.classList.toggle('md-menu-hidden', true);
animation.addEventListener('finish', () => {
child.classList.toggle('hidden', false);
child.classList.toggle('md-menu-hidden', false);
});

childrenAnimations.push([child, animation]);
Expand All @@ -494,7 +494,7 @@ export abstract class Menu extends LitElement {
upPositionCorrectionAnimation.cancel();
surfaceOpacityAnimation.cancel();
childrenAnimations.forEach(([child, animation]) => {
child.classList.toggle('hidden', false);
child.classList.toggle('md-menu-hidden', false);
animation.cancel();
});
});
Expand Down Expand Up @@ -596,7 +596,7 @@ export abstract class Menu extends LitElement {
// Make sure the items stay hidden at the end of each child animation.
// We clean this up at the end of the overall animation.
animation.addEventListener('finish', () => {
child.classList.toggle('hidden', true);
child.classList.toggle('md-menu-hidden', true);
});
childrenAnimations.push([child, animation]);
}
Expand All @@ -607,15 +607,15 @@ export abstract class Menu extends LitElement {
surfaceOpacityAnimation.cancel();
childrenAnimations.forEach(([child, animation]) => {
animation.cancel();
child.classList.toggle('hidden', false);
child.classList.toggle('md-menu-hidden', false);
});
reject();
});

surfaceHeightAnimation.addEventListener('finish', () => {
surfaceEl.classList.toggle('animating', false);
childrenAnimations.forEach(([child]) => {
child.classList.toggle('hidden', false);
child.classList.toggle('md-menu-hidden', false);
});
this.openCloseAnimationSignal.finish();
this.dispatchEvent(new Event('closed'));
Expand Down

0 comments on commit 626b4ef

Please sign in to comment.