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;
+ }
 }