chore(button): remove BEM css class name style

Why? We don't use https://getbem.com/ styles anymore now that we have shadow dom. Just cleanup to help with child changes. PiperOrigin-RevId: 579883107
material-components · Nov 6, 2023 · 501068b · 501068b
1 parent 798f5ae
commit 501068b
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 27 deletions.
diff --git a/button/internal/_outlined-button.scss b/button/internal/_outlined-button.scss
@@ -64,7 +64,7 @@
     );
   }
 
-  .button__outline {
+  .outline {
     inset: 0;
     border-style: solid;
     position: absolute;
@@ -76,35 +76,30 @@
     border-end-end-radius: var(--_container-shape-end-end);
   }
 
-  :host(:active) .button__outline {
+  :host(:active) .outline {
     border-color: var(--_pressed-outline-color);
   }
 
-  :host([disabled]) .button__outline {
+  :host([disabled]) .outline {
     border-color: var(--_disabled-outline-color);
     opacity: var(--_disabled-outline-opacity);
   }
 
   @media (forced-colors: active) {
-    :host([disabled]) .button__outline {
+    :host([disabled]) .outline {
       opacity: 1;
     }
   }
 
-  .button__outline,
-  .button__ripple {
+  .outline,
+  md-ripple {
     border-width: var(--_outline-width);
   }
 
-  .button__ripple {
+  md-ripple {
     inline-size: calc(100% - 2 * var(--_outline-width));
     block-size: calc(100% - 2 * var(--_outline-width));
     border-style: solid;
     border-color: transparent;
   }
 }
-
-@function _resolve-tokens($tokens) {
-  $tokens: shared.remove-unsupported-tokens($tokens);
-  @return $tokens;
-}
diff --git a/button/internal/_shared.scss b/button/internal/_shared.scss
@@ -37,10 +37,6 @@
     );
   }
 
-  :host([touch-target='wrapper']) {
-    margin: max(0px, (48px - var(--_container-height)) / 2) 0;
-  }
-
   md-focus-ring {
     @include focus-ring.theme(
       (
@@ -109,7 +105,7 @@
     position: absolute;
   }
 
-  :host([disabled]) .button__label {
+  :host([disabled]) .label {
     color: var(--_disabled-label-text-color);
     opacity: var(--_disabled-label-text-opacity);
   }
@@ -138,7 +134,7 @@
   }
 
   .button,
-  .button__ripple {
+  md-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);
@@ -148,17 +144,17 @@
   .button::after,
   .button::before,
   md-elevation,
-  .button__ripple {
+  md-ripple {
     z-index: -1; // Place behind content
   }
 
   // TODO(b/181413732): Verify token below are named correctly
-  .button--icon-leading {
+  .icon-leading {
     padding-inline-start: var(--_with-leading-icon-leading-space);
     padding-inline-end: var(--_with-leading-icon-trailing-space);
   }
 
-  .button--icon-trailing {
+  .icon-trailing {
     padding-inline-start: var(--_with-trailing-icon-leading-space);
     padding-inline-end: var(--_with-trailing-icon-trailing-space);
   }

diff --git a/button/internal/_touch-target.scss b/button/internal/_touch-target.scss
@@ -13,6 +13,10 @@
     transform: translateY(-50%);
   }
 
+  :host([touch-target='wrapper']) {
+    margin: max(0px, (48px - var(--_container-height)) / 2) 0;
+  }
+
   :host([touch-target='none']) .touch {
     display: none;
   }

diff --git a/button/internal/button.ts b/button/internal/button.ts
@@ -137,8 +137,8 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
 
   protected getRenderClasses() {
     return {
-      'button--icon-leading': !this.trailingIcon && this.hasIcon,
-      'button--icon-trailing': this.trailingIcon && this.hasIcon,
+      'icon-leading': !this.trailingIcon && this.hasIcon,
+      'icon-trailing': this.trailingIcon && this.hasIcon,
     };
   }
 
@@ -154,12 +154,12 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
       @slotchange="${this.handleSlotChange}"></slot>`;
 
     return html`
-      ${this.renderElevation?.()} ${this.renderOutline?.()}
+      ${this.renderElevation?.()}${this.renderOutline?.()}
       <md-focus-ring part="focus-ring"></md-focus-ring>
-      <md-ripple class="button__ripple" ?disabled="${isDisabled}"></md-ripple>
+      <md-ripple ?disabled="${isDisabled}"></md-ripple>
       <span class="touch"></span>
       ${this.trailingIcon ? nothing : icon}
-      <span class="button__label"><slot></slot></span>
+      <span class="label"><slot></slot></span>
       ${this.trailingIcon ? icon : nothing}
     `;
   }

diff --git a/button/internal/outlined-button.ts b/button/internal/outlined-button.ts
@@ -13,6 +13,6 @@ import {Button} from './button.js';
  */
 export class OutlinedButton extends Button {
   protected override renderOutline() {
-    return html`<span class="button__outline"></span>`;
+    return html`<span class="outline"></span>`;
   }
 }