fix(button): remove md3-* class prefixes

PiperOrigin-RevId: 549499066
material-components · Jul 20, 2023 · 2dabbdc · 2dabbdc
1 parent a2b4f61
commit 2dabbdc
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 83 deletions.
diff --git a/button/harness.ts b/button/harness.ts
@@ -14,6 +14,6 @@ import {Button} from './lib/button.js';
 export class ButtonHarness extends Harness<Button> {
   protected override async getInteractiveElement() {
     await this.element.updateComplete;
-    return this.element.renderRoot.querySelector('.md3-button') as HTMLElement;
+    return this.element.renderRoot.querySelector('.button') as HTMLElement;
   }
 }
diff --git a/button/lib/_elevation.scss b/button/lib/_elevation.scss
@@ -3,9 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 // go/keep-sorted start
 @use 'sass:map';
 // go/keep-sorted end
@@ -23,7 +20,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
   }
 
-  .md3-button {
+  .button {
     @include elevation.theme(
       (
         'level': var(--_container-elevation),

diff --git a/button/lib/_icon.scss b/button/lib/_icon.scss
@@ -3,15 +3,12 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @mixin styles() {
   // The icon CSS class overrides styles defined in the .material-icons CSS
   // class, which is loaded separately so the order of CSS definitions is not
   // guaranteed. Therefore, increase specifity to ensure overrides apply.
   ::slotted([slot='icon']) {
-    .md3-button & {
+    .button & {
       display: inline-flex;
       position: relative;
       writing-mode: horizontal-tb;
@@ -22,19 +19,19 @@
       block-size: var(--_icon-size);
     }
 
-    .md3-button:hover & {
+    .button:hover & {
       color: var(--_hover-icon-color);
     }
 
-    .md3-button:focus & {
+    .button:focus & {
       color: var(--_focus-icon-color);
     }
 
-    .md3-button:active & {
+    .button:active & {
       color: var(--_pressed-icon-color);
     }
 
-    .md3-button:disabled & {
+    .button:disabled & {
       color: var(--_disabled-icon-color);
       opacity: var(--_disabled-icon-opacity);
     }

diff --git a/button/lib/_outlined-button.scss b/button/lib/_outlined-button.scss
@@ -11,9 +11,6 @@
 @use '../../tokens';
 // go/keep-sorted end
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @mixin theme($tokens) {
   $supported-tokens: list.join(
     tokens.$md-comp-outlined-button-supported-tokens,
@@ -67,7 +64,7 @@
     );
   }
 
-  .md3-button__outline {
+  .button__outline {
     inset: 0;
     border-style: solid;
     position: absolute;
@@ -78,22 +75,22 @@
     border-end-start-radius: var(--_container-shape-end-start);
     border-end-end-radius: var(--_container-shape-end-end);
 
-    .md3-button:active & {
+    .button:active & {
       border-color: var(--_pressed-outline-color);
     }
 
-    .md3-button:disabled & {
+    .button:disabled & {
       border-color: var(--_disabled-outline-color);
       opacity: var(--_disabled-outline-opacity);
     }
   }
 
-  .md3-button__outline,
-  .md3-button__ripple {
+  .button__outline,
+  .button__ripple {
     border-width: var(--_outline-width);
   }
 
-  .md3-button__ripple {
+  .button__ripple {
     inline-size: calc(100% - 2 * var(--_outline-width));
     block-size: calc(100% - 2 * var(--_outline-width));
     border-style: solid;

diff --git a/button/lib/_shared.scss b/button/lib/_shared.scss
@@ -3,9 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 // go/keep-sorted start
 @use 'sass:map';
 // go/keep-sorted end
@@ -50,7 +47,7 @@
     pointer-events: none;
   }
 
-  .md3-button {
+  .button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -102,7 +99,7 @@
       outline: none;
     }
 
-    &:disabled .md3-button__label {
+    &:disabled .button__label {
       color: var(--_disabled-label-text-color);
       opacity: var(--_disabled-label-text-opacity);
     }
@@ -125,33 +122,33 @@
     }
   }
 
-  .md3-button,
-  .md3-button__ripple {
+  .button,
+  .button__ripple {
     border-start-start-radius: var(--_container-shape-start-start);
     border-start-end-radius: var(--_container-shape-start-end);
     border-end-start-radius: var(--_container-shape-end-start);
     border-end-end-radius: var(--_container-shape-end-end);
   }
 
-  .md3-button::after,
-  .md3-button::before,
+  .button::after,
+  .button::before,
   md-elevation,
-  .md3-button__ripple {
+  .button__ripple {
     z-index: -1; // Place behind content
   }
 
   // TODO(b/181413732): Verify token below are named correctly
-  .md3-button--icon-leading {
+  .button--icon-leading {
     padding-inline-start: var(--_with-icon-spacing-leading);
     padding-inline-end: var(--_with-icon-spacing-trailing);
   }
 
-  .md3-button--icon-trailing {
+  .button--icon-trailing {
     padding-inline-start: var(--_with-trailing-icon-spacing-leading);
     padding-inline-end: var(--_with-trailing-icon-spacing-trailing);
   }
 
-  .md3-link-button-wrapper {
+  .link-button-wrapper {
     inline-size: 100%;
   }
 }
diff --git a/button/lib/_touch-target.scss b/button/lib/_touch-target.scss
@@ -3,11 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @mixin styles() {
-  .md3-button__touch {
+  .button__touch {
     position: absolute;
     top: 50%;
     height: 48px;

diff --git a/button/lib/button.ts b/button/lib/button.ts
@@ -69,7 +69,7 @@ export abstract class Button extends LitElement {
    */
   @property() type: ''|'submit'|'reset' = '';
 
-  @query('.md3-button') private readonly buttonElement!: HTMLElement|null;
+  @query('.button') private readonly buttonElement!: HTMLElement|null;
 
   @queryAssignedElements({slot: 'icon', flatten: true})
   private readonly assignedIcons!: HTMLElement[];
@@ -104,7 +104,7 @@ export abstract class Button extends LitElement {
     const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;
     return staticHtml`
       <${button}
-        class="md3-button ${classMap(this.getRenderClasses())}"
+        class="button ${classMap(this.getRenderClasses())}"
         ?disabled=${isDisabled}
         aria-label="${ariaLabel || nothing}"
         aria-haspopup="${ariaHasPopup || nothing}"
@@ -126,8 +126,8 @@ export abstract class Button extends LitElement {
 
   protected getRenderClasses() {
     return {
-      'md3-button--icon-leading': !this.trailingIcon && this.hasIcon,
-      'md3-button--icon-trailing': this.trailingIcon && this.hasIcon,
+      'button--icon-leading': !this.trailingIcon && this.hasIcon,
+      'button--icon-trailing': this.trailingIcon && this.hasIcon,
     };
   }
 
@@ -141,7 +141,7 @@ export abstract class Button extends LitElement {
 
   private renderTouchTarget() {
     return html`
-      <span class="md3-button__touch"></span>
+      <span class="button__touch"></span>
     `;
   }
 
@@ -154,7 +154,7 @@ export abstract class Button extends LitElement {
   };
 
   private renderRipple() {
-    return html`<md-ripple class="md3-button__ripple" ?disabled="${
+    return html`<md-ripple class="button__ripple" ?disabled="${
         this.disabled}"></md-ripple>`;
   }
 
@@ -163,7 +163,7 @@ export abstract class Button extends LitElement {
   }
 
   private renderLabel() {
-    return html`<span class="md3-button__label"><slot></slot></span>`;
+    return html`<span class="button__label"><slot></slot></span>`;
   }
 
   private renderLeadingIcon() {

diff --git a/button/lib/elevated-button.ts b/button/lib/elevated-button.ts
@@ -14,13 +14,6 @@ import {Button} from './button.js';
  * An elevated button component.
  */
 export class ElevatedButton extends Button {
-  protected override getRenderClasses() {
-    return {
-      ...super.getRenderClasses(),
-      'md3-button--elevated': true,
-    };
-  }
-
   protected override renderElevation() {
     return html`<md-elevation></md-elevation>`;
   }

diff --git a/button/lib/filled-button.ts b/button/lib/filled-button.ts
@@ -14,13 +14,6 @@ import {Button} from './button.js';
  * A filled button component.
  */
 export class FilledButton extends Button {
-  protected override getRenderClasses() {
-    return {
-      ...super.getRenderClasses(),
-      'md3-button--filled': true,
-    };
-  }
-
   protected override renderElevation() {
     return html`<md-elevation></md-elevation>`;
   }

diff --git a/button/lib/outlined-button.ts b/button/lib/outlined-button.ts
@@ -12,14 +12,7 @@ import {Button} from './button.js';
  * An outlined button component.
  */
 export class OutlinedButton extends Button {
-  protected override getRenderClasses() {
-    return {
-      ...super.getRenderClasses(),
-      'md3-button--outlined': true,
-    };
-  }
-
   protected override renderOutline() {
-    return html`<span class="md3-button__outline"></span>`;
+    return html`<span class="button__outline"></span>`;
   }
 }
diff --git a/button/lib/text-button.ts b/button/lib/text-button.ts
@@ -9,11 +9,4 @@ import {Button} from './button.js';
 /**
  * A text button component.
  */
-export class TextButton extends Button {
-  protected override getRenderClasses() {
-    return {
-      ...super.getRenderClasses(),
-      'md3-button--text': true,
-    };
-  }
-}
+export class TextButton extends Button {}
diff --git a/button/lib/tonal-button.ts b/button/lib/tonal-button.ts
@@ -14,13 +14,6 @@ import {Button} from './button.js';
  * A tonal button component.
  */
 export class TonalButton extends Button {
-  protected override getRenderClasses() {
-    return {
-      ...super.getRenderClasses(),
-      'md3-button--tonal': true,
-    };
-  }
-
   protected override renderElevation() {
     return html`<md-elevation></md-elevation>`;
   }