fix(elevation): expose md-elevation ::part in all components

PiperOrigin-RevId: 612946796
material-components · Mar 5, 2024 · b74e3dd · b74e3dd
1 parent 1c2197b
commit b74e3dd
Show file tree

Hide file tree

Showing 10 changed files with 12 additions and 10 deletions.
diff --git a/button/internal/elevated-button.ts b/button/internal/elevated-button.ts
@@ -15,6 +15,6 @@ import {Button} from './button.js';
  */
 export class ElevatedButton extends Button {
   protected override renderElevationOrOutline() {
-    return html`<md-elevation></md-elevation>`;
+    return html`<md-elevation part="elevation"></md-elevation>`;
   }
 }
diff --git a/button/internal/filled-button.ts b/button/internal/filled-button.ts
@@ -15,6 +15,6 @@ import {Button} from './button.js';
  */
 export class FilledButton extends Button {
   protected override renderElevationOrOutline() {
-    return html`<md-elevation></md-elevation>`;
+    return html`<md-elevation part="elevation"></md-elevation>`;
   }
 }
diff --git a/button/internal/filled-tonal-button.ts b/button/internal/filled-tonal-button.ts
@@ -15,6 +15,6 @@ import {Button} from './button.js';
  */
 export class FilledTonalButton extends Button {
   protected override renderElevationOrOutline() {
-    return html`<md-elevation></md-elevation>`;
+    return html`<md-elevation part="elevation"></md-elevation>`;
   }
 }
diff --git a/chips/internal/assist-chip.ts b/chips/internal/assist-chip.ts
@@ -69,7 +69,7 @@ export class AssistChip extends Chip {
 
   protected override renderOutline() {
     if (this.elevated) {
-      return html`<md-elevation></md-elevation>`;
+      return html`<md-elevation part="elevation"></md-elevation>`;
     }
 
     return super.renderOutline();

diff --git a/chips/internal/filter-chip.ts b/chips/internal/filter-chip.ts
@@ -97,7 +97,7 @@ export class FilterChip extends MultiActionChip {
 
   protected override renderOutline() {
     if (this.elevated) {
-      return html`<md-elevation></md-elevation>`;
+      return html`<md-elevation part="elevation"></md-elevation>`;
     }
 
     return super.renderOutline();

diff --git a/fab/internal/shared.ts b/fab/internal/shared.ts
@@ -57,7 +57,7 @@ export abstract class SharedFab extends LitElement {
       <button
         class="fab ${classMap(this.getRenderClasses())}"
         aria-label=${ariaLabel || nothing}>
-        <md-elevation></md-elevation>
+        <md-elevation part="elevation"></md-elevation>
         <md-focus-ring part="focus-ring"></md-focus-ring>
         <md-ripple class="ripple"></md-ripple>
         ${this.renderTouchTarget()} ${this.renderIcon()} ${this.renderLabel()}

diff --git a/labs/navigationbar/internal/navigation-bar.ts b/labs/navigationbar/internal/navigation-bar.ts
@@ -48,7 +48,7 @@ export class NavigationBar extends LitElement implements NavigationBarState {
       @keydown="${this.handleKeydown}"
       @navigation-tab-interaction="${this.handleNavigationTabInteraction}"
       @navigation-tab-rendered=${this.handleNavigationTabConnected}
-      ><md-elevation></md-elevation
+      ><md-elevation part="elevation"></md-elevation
       ><div class="md3-navigation-bar__tabs-slot-container"><slot></slot></div
     ></div>`;
   }

diff --git a/labs/navigationdrawer/internal/navigation-drawer.ts b/labs/navigationdrawer/internal/navigation-drawer.ts
@@ -40,7 +40,7 @@ export class NavigationDrawer extends LitElement {
         aria-modal="${ariaModal || nothing}"
         class="md3-navigation-drawer ${this.getRenderClasses()}"
         role="dialog">
-        <md-elevation></md-elevation>
+        <md-elevation part="elevation"></md-elevation>
         <div class="md3-navigation-drawer__slot-content">
           <slot></slot>
         </div>

diff --git a/slider/internal/slider.ts b/slider/internal/slider.ts
@@ -440,7 +440,9 @@ export class Slider extends sliderBaseClass {
         for=${name}
         class=${name}
         ?disabled=${this.disabled}></md-ripple>
-      <div class="handleNub"><md-elevation></md-elevation></div>
+      <div class="handleNub">
+        <md-elevation part="elevation"></md-elevation>
+      </div>
       ${when(this.labeled, () => this.renderLabel(label))}
     </div>`;
   }

diff --git a/tabs/internal/tab.ts b/tabs/internal/tab.ts
@@ -99,7 +99,7 @@ export class Tab extends tabBaseClass {
       role="presentation"
       @click=${this.handleContentClick}>
       <md-focus-ring part="focus-ring" inward .control=${this}></md-focus-ring>
-      <md-elevation></md-elevation>
+      <md-elevation part="elevation"></md-elevation>
       <md-ripple .control=${this}></md-ripple>
       <div
         class="content ${classMap(this.getContentClasses())}"