feat(button): add label slot

PiperOrigin-RevId: 515467458
material-components · Mar 10, 2023 · 24298e6 · 24298e6
1 parent b794990
commit 24298e6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/button/lib/_shared.scss b/button/lib/_shared.scss
@@ -15,6 +15,7 @@
 @use '../../sass/color';
 @use '../../sass/dom';
 @use '../../sass/resolvers';
+@use '../../sass/shape';
 @use '../../sass/typography';
 // go/keep-sorted end
 
@@ -43,12 +44,7 @@
 
     @include focus-ring.theme(
       (
-        shape: (
-          var(--_container-shape-start-start),
-          var(--_container-shape-start-end),
-          var(--_container-shape-end-end),
-          var(--_container-shape-end-start),
-        ),
+        shape: shape.corners-to-shape-token('--_container-shape'),
       )
     );
   }

diff --git a/button/lib/button.ts b/button/lib/button.ts
@@ -50,8 +50,11 @@ export abstract class Button extends LitElement implements ButtonState {
    */
   @property({type: Boolean, attribute: 'trailingicon'}) trailingIcon = false;
 
+  // TODO(b/272598771): remove label property
   /**
    * The button's visible label.
+   *
+   * @deprecated Set text as content of the button instead.
    */
   @property({type: String}) label = '';
 
@@ -160,7 +163,9 @@ export abstract class Button extends LitElement implements ButtonState {
   }
 
   protected renderLabel(): TemplateResult {
-    return html`<span class="md3-button__label">${this.label}</span>`;
+    // TODO(b/272598771): remove the ternary when label property is removed
+    return html`<span class="md3-button__label">${
+        this.label ? this.label : html`<slot></slot>`}</span>`;
   }
 
   protected renderLeadingIcon(): TemplateResult|string {