Adds wrapper nodes around slots as a polyfill styling accommodation and for compatibility with internal tooling.

PiperOrigin-RevId: 334150103

Author: material-web-copybara

packages/button/README.md

@@ -124,6 +124,7 @@ mwc-button {
 | `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.
 | `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.
 | `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.
+| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.
 
 ### Methods
 *None*

packages/button/_button.scss

@@ -70,6 +70,16 @@ limitations under the License.
     }
   }
 
+  .slot-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &.flex {
+      flex: auto;
+    }
+  }
+
   $text-padding: custom-properties.create(
     --mdc-button-horizontal-padding,
     button-variables.$horizontal-padding

packages/button/mwc-button-base.ts

@@ -42,6 +42,8 @@ export class ButtonBase extends LitElement {
 
   @property({type: String}) label = '';
 
+  @property({type: Boolean}) expandContent = false;
+
   @query('#button') buttonElement!: HTMLElement;
 
   @queryAsync('mwc-ripple') ripple!: Promise<Ripple|null>;
@@ -115,7 +117,11 @@ export class ButtonBase extends LitElement {
           </slot>
         </span>
         <span class="mdc-button__label">${this.label}</span>
-        <slot></slot>
+        <span class="slot-container ${classMap({
+      flex: this.expandContent
+    })}">
+          <slot></slot>
+        </span>
         <span class="trailing-icon">
           <slot name="trailingIcon">
             ${this.icon && this.trailingIcon ? this.renderIcon() : ''}

packages/fab/_fab.scss

@@ -90,8 +90,12 @@ $icon-size: map.get(fab-theme.$light-theme, icon-size);
       @extend %material-icons;
     }
 
+    .icon-slot-container {
+      display: inline-flex;
+    }
+
     .mdc-fab__icon,
-    ::slotted([slot='icon']) {
+    .icon-slot-container ::slotted([slot='icon']) {
       @include theme.property(
         width,
         custom-properties.create(--mdc-icon-size, $icon-size)
@@ -124,7 +128,7 @@ $icon-size: map.get(fab-theme.$light-theme, icon-size);
         $extended-label-padding
       );
 
-      ::slotted([slot='icon']) {
+      .icon-slot-container ::slotted([slot='icon']) {
         @include fab-mixins.extended-icon-padding(
           $extended-icon-padding,
           $extended-label-padding
@@ -140,7 +144,7 @@ $icon-size: map.get(fab-theme.$light-theme, icon-size);
           );
         }
 
-        ::slotted([slot='icon']) {
+        .icon-slot-container ::slotted([slot='icon']) {
           @include fab-mixins.extended-icon-padding(
             $extended-icon-padding,
             $extended-label-padding,
@@ -150,7 +154,7 @@ $icon-size: map.get(fab-theme.$light-theme, icon-size);
       }
     }
 
-    &.mdc-fab--exited ::slotted([slot='icon']) {
+    &.mdc-fab--exited .icon-slot-container ::slotted([slot='icon']) {
       transform: scale(0);
       transition: animation.exit-permanent(transform, 135ms);
     }

packages/fab/mwc-fab-base.ts

@@ -85,9 +85,11 @@ export class FabBase extends LitElement {
         ${this.renderBeforeRipple()}
         ${this.renderRipple()}
         ${this.showIconAtEnd ? this.renderLabel() : ''}
-        <slot name="icon">
-          ${this.renderIcon()}
-        </slot>
+        <span class="icon-slot-container">
+          <slot name="icon">
+            ${this.renderIcon()}
+          </slot>
+        </span>
         ${!this.showIconAtEnd ? this.renderLabel() : ''}
         ${this.renderTouchTarget()}
       </button>`;

packages/icon-button/mwc-icon-button-base.ts

@@ -81,7 +81,9 @@ export class IconButtonBase extends LitElement {
         @touchcancel="${this.handleRippleDeactivate}">
       ${this.renderRipple()}
     <i class="material-icons">${this.icon}</i>
-    <slot></slot>
+    <span class="default-slot-container">
+        <slot></slot>
+    </span>
   </button>`;
   }