From 0fd4f45241cb67ae96e994b655ec95a9f022368a Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Wed, 21 Jun 2023 14:24:22 -0700
Subject: [PATCH] feat(fab): add label only mode

PiperOrigin-RevId: 542362233
---
 fab/demo/demo.ts    |  3 ++-
 fab/demo/stories.ts | 15 +++++++++------
 fab/lib/_fab.scss   | 12 ++++++++++++
 fab/lib/shared.ts   | 20 ++++++++++++++++++--
 4 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/fab/demo/demo.ts b/fab/demo/demo.ts
index a2859d7b95..479d0f3fe2 100644
--- a/fab/demo/demo.ts
+++ b/fab/demo/demo.ts
@@ -7,8 +7,8 @@
 import './index.js';
 import './material-collection.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
 import {FabSize, Variant} from '@material/web/fab/fab.js';
+import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
 import {boolInput, Knob, selectDropdown, textInput} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
@@ -39,6 +39,7 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Fab', [
     })
   }),
   new Knob('reducedTouchTarget', {defaultValue: false, ui: boolInput()}),
+  new Knob('hasIcon', {defaultValue: true, ui: boolInput()}),
 ]);
 
 collection.addStories(...materialInitsToStoryInits(stories));
diff --git a/fab/demo/stories.ts b/fab/demo/stories.ts
index b45497314a..a434ca935a 100644
--- a/fab/demo/stories.ts
+++ b/fab/demo/stories.ts
@@ -8,8 +8,8 @@ import '@material/web/fab/fab.js';
 import '@material/web/icon/icon.js';
 import '@material/web/fab/branded-fab.js';
 
-import {MaterialStoryInit} from './material-collection.js';
 import {FabSize, Variant} from '@material/web/fab/fab.js';
+import {MaterialStoryInit} from './material-collection.js';
 import {css, html} from 'lit';
 
 /** Knob types for fab stories. */
@@ -20,6 +20,7 @@ export interface StoryKnobs {
   size: FabSize|undefined;
   variant: Variant|undefined;
   reducedTouchTarget: boolean;
+  hasIcon: boolean;
 }
 
 const styles = css`
@@ -31,7 +32,7 @@ const styles = css`
 const standard: MaterialStoryInit<StoryKnobs> = {
   name: '<md-fab>',
   styles,
-  render({icon, label, lowered, size, variant, reducedTouchTarget}) {
+  render({icon, label, lowered, size, variant, reducedTouchTarget, hasIcon}) {
     return html`
       <md-fab
           class="fab"
@@ -39,7 +40,8 @@ const standard: MaterialStoryInit<StoryKnobs> = {
           .reducedTouchTarget=${reducedTouchTarget}
           .lowered=${lowered}
           .label=${label}
-          .size=${size!}>
+          .size=${size!}
+          .hasIcon=${hasIcon}>
         <md-icon slot="icon">${icon}</md-icon>
       </md-fab>
     `;
@@ -49,14 +51,15 @@ const standard: MaterialStoryInit<StoryKnobs> = {
 const branded: MaterialStoryInit<StoryKnobs> = {
   name: '<md-branded-fab>',
   styles,
-  render({icon, label, lowered, size, variant, reducedTouchTarget}) {
+  render({label, lowered, size, reducedTouchTarget, hasIcon}) {
     return html`
       <md-branded-fab
           class="fab"
           .reducedTouchTarget=${reducedTouchTarget}
           .lowered=${lowered}
-            .label=${label}
-          .size=${size!}>
+          .label=${label}
+          .size=${size!}
+          .hasIcon=${hasIcon}>
         <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>
diff --git a/fab/lib/_fab.scss b/fab/lib/_fab.scss
index bf57b3d0b2..dc724dfe34 100644
--- a/fab/lib/_fab.scss
+++ b/fab/lib/_fab.scss
@@ -169,6 +169,18 @@
     }
   }
 
+  .fab:not(.hasIcon) {
+    padding-inline-start: 20px;
+  }
+
+  .fab:not(.hasIcon) .icon {
+    display: none;
+  }
+
+  .fab:not(.hasIcon) .label {
+    padding-inline-start: 0;
+  }
+
   .fab.small {
     width: var(--_small-container-width);
     height: var(--_small-container-height);
diff --git a/fab/lib/shared.ts b/fab/lib/shared.ts
index 9135722371..18a10e100b 100644
--- a/fab/lib/shared.ts
+++ b/fab/lib/shared.ts
@@ -51,10 +51,19 @@ 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;
+
   /**
    * Lowers the FAB's elevation and places it into the `lowered` state.
    */
-  @property({type: Boolean}) reducedTouchTarget = false;
+  @property({type: Boolean, attribute: 'reduced-touch-target'})
+  reducedTouchTarget = false;
 
   protected override render() {
     // Needed for closure conformance
@@ -81,6 +90,7 @@ export abstract class SharedFab extends LitElement {
       'small': this.size === 'small' && !isExtended,
       'large': this.size === 'large' && !isExtended,
       'extended': isExtended,
+      'hasIcon': !isExtended || this.hasIcon,
     };
   }
 
@@ -95,7 +105,13 @@ export abstract class SharedFab extends LitElement {
 
   private renderIcon() {
     return html`<span class="icon">
-        <slot name="icon"></slot>
+        <slot name="icon" @slotchange=${this.onSlotchange}></slot>
       </span>`;
   }
+
+  private onSlotchange(e: Event) {
+    const slotEl = e.target as HTMLSlotElement;
+    const slottedEls = slotEl.assignedElements({flatten: true});
+    this.hasIcon = slottedEls.length !== 0;
+  }
 }