feat(fab): add label only mode

PiperOrigin-RevId: 542362233
material-components · Jun 21, 2023 · 0fd4f45 · 0fd4f45
1 parent d5035db
commit 0fd4f45
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 9 deletions.
diff --git 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
@@ -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,15 +32,16 @@ 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"
           .variant=${variant!}
           .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
@@ -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
@@ -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;
+  }
 }