feat(fab): do not require has-icon

PiperOrigin-RevId: 557976838

docs/components/fab.md

@@ -142,7 +142,7 @@ additional context if needed. By supplying the `label` attribute, the extended
 FAB will make sure that the icon is not announced.
 
 ```html
-<md-fab label="Edit" aria-label="Edit Comment" has-icon>
+<md-fab label="Edit" aria-label="Edit Comment">
   <md-icon slot="icon">edit</md-icon>
 </md-fab>
 ```
@@ -169,11 +169,6 @@ FABs should display a clear and understandable icon.
 FABs may be extended with a label for additional emphasis. Extended FABs can
 omit their icon.
 
-*SSR note:* extended FABs with icons should add the `has-icon` attribute to
-avoid a flash of unstyled content. Otherwise, the client will automatically
-detect if an icon is slotted into the element, but that event is not fired upon
-hydration of a SSRd declarative shadow DOM template.
-
 <!-- no-catalog-start -->
 
 ![An extended FAB with an edit icon and the visible text edit](images/fab/usage-extended.webp)
@@ -182,7 +177,7 @@ hydration of a SSRd declarative shadow DOM template.
 <!-- catalog-include "figures/fab/usage-extended.html" -->
 
 ```html
-<md-fab label="Edit" has-icon>
+<md-fab label="Edit">
   <md-icon slot="icon">edit</md-icon>
 </md-fab>
 ```
@@ -421,7 +416,7 @@ Token                      | Default value
     background-color: #f4fbfa;
   }
 </style>
-<md-fab label="Edit" has-icon>
+<md-fab label="Edit">
   <md-icon slot="icon">edit</md-icon>
 </md-fab>
 ```

docs/components/figures/fab/extended-fabs.html

@@ -7,7 +7,7 @@
     <div class="wrapper">
       <div>
         <div class="fab-wrapper">
-          <md-fab label="navigate" variant="primary" has-icon>
+          <md-fab label="navigate" variant="primary">
             <md-icon slot="icon" aria-hidden="true">navigation</md-icon>
           </md-fab>
         </div>

docs/components/figures/fab/theming-extended.html

@@ -10,7 +10,7 @@
         --md-fab-container-shape: 0px;
       }
     </style>
-    <md-fab label="Edit" has-icon>
+    <md-fab label="Edit">
       <md-icon slot="icon">edit</md-icon>
     </md-fab>
   </figure>

docs/components/figures/fab/usage-extended.html

@@ -2,7 +2,7 @@
   <figure
       aria-label="An extended FAB with an edit icon and the visible text edit"
       style="padding-block: 16px;">
-    <md-fab label="Edit" has-icon>
+    <md-fab label="Edit">
       <md-icon slot="icon">edit</md-icon>
     </md-fab>
   </figure>

fab/demo/demo.ts

@@ -38,7 +38,6 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Fab', [
       ]
     })
   }),
-  new Knob('hasIcon', {defaultValue: true, ui: boolInput()}),
 ]);
 
 collection.addStories(...materialInitsToStoryInits(stories));

fab/demo/stories.ts

@@ -19,7 +19,6 @@ export interface StoryKnobs {
   lowered: boolean;
   size: FabSize|undefined;
   variant: FabVariant|undefined;
-  hasIcon: boolean;
 }
 
 const styles = css`
@@ -31,15 +30,14 @@ const styles = css`
 const standard: MaterialStoryInit<StoryKnobs> = {
   name: '<md-fab>',
   styles,
-  render({icon, label, lowered, size, variant, hasIcon}) {
+  render({icon, label, lowered, size, variant}) {
     return html`
       <md-fab
           class="fab"
           .variant=${variant!}
           .lowered=${lowered}
           .label=${label}
-          .size=${size!}
-          .hasIcon=${hasIcon}>
+          .size=${size!}>
         <md-icon slot="icon">${icon}</md-icon>
       </md-fab>
     `;
@@ -49,14 +47,13 @@ const standard: MaterialStoryInit<StoryKnobs> = {
 const branded: MaterialStoryInit<StoryKnobs> = {
   name: '<md-branded-fab>',
   styles,
-  render({label, lowered, size, hasIcon}) {
+  render({label, lowered, size}) {
     return html`
       <md-branded-fab
           class="fab"
           .lowered=${lowered}
           .label=${label}
-          .size=${size!}
-          .hasIcon=${hasIcon}>
+          .size=${size!}>
         <svg slot="icon" width="36" height="36" viewBox="0 0 36 36">
           <path fill="#34A853" d="M16 16v14h4V20z"></path>
           <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>

fab/internal/_fab.scss

@@ -173,16 +173,19 @@
     }
   }
 
-  .fab:not(.hasIcon) {
-    padding-inline-start: 20px;
-  }
-
-  .fab:not(.hasIcon) .icon {
-    display: none;
-  }
-
-  .fab:not(.hasIcon) .label {
-    padding-inline-start: 0;
+  /*
+   * The default content is needed because we do a bit of trickery. If there is
+   * no slotted icon we need to have `padding-inline: 20px` but if there is, we
+   * need   padding-inline: 16px 20px.
+   * 
+   * So what this approach does is make the margin / padding-inline of the outer
+   * button `padding-inline: 16px 20px`, so if there is something slotted, it
+   * renders correctly. This default content span then fills the extra `4px`
+   * inline spacing if nothing is slotted which effectively makes the button's
+   * inlne spacing `20px/20px`.
+   */
+  .fab.extended slot span {
+    padding-inline-start: 4px;
   }
 
   .fab.small {

fab/internal/_shared.scss

@@ -133,13 +133,16 @@ $_md-sys-motion: tokens.md-sys-motion-values();
   }
 
   .label {
-    padding-inline-start: 12px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font: var(--_label-text-type);
   }
 
+  .fab.extended .icon ::slotted(*) {
+    margin-inline-end: 12px;
+  }
+
   .ripple {
     overflow: hidden;
   }

fab/internal/shared.ts

@@ -51,14 +51,6 @@ export abstract class SharedFab extends LitElement {
    */
   @property({type: Boolean}) lowered = false;
 
-  /**
-   * NOTE: For SSR use only as it will be overriden by icon slotchange event.
-   *
-   * Whether to display the icon or not in extended FAB. Does nothing on branded
-   * and non-extended FABs.
-   */
-  @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;
-
   protected override render() {
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
@@ -84,7 +76,6 @@ export abstract class SharedFab extends LitElement {
       'small': this.size === 'small' && !isExtended,
       'large': this.size === 'large' && !isExtended,
       'extended': isExtended,
-      'hasIcon': !isExtended || this.hasIcon,
     };
   }
 
@@ -102,15 +93,9 @@ export abstract class SharedFab extends LitElement {
         <slot
             name="icon"
             aria-hidden=${
-        ariaLabel || this.label ? 'true' : nothing as unknown as 'false'}
-            @slotchange=${this.onSlotchange}>
+        ariaLabel || this.label ? 'true' : nothing as unknown as 'false'}>
+          <span></span>
         </slot>
       </span>`;
   }
-
-  private onSlotchange(event: Event) {
-    const slotEl = event.target as HTMLSlotElement;
-    const slottedEls = slotEl.assignedElements({flatten: true});
-    this.hasIcon = slottedEls.length !== 0;
-  }
 }