feat(fab)!: add touch target configurations

BREAKING CHANGE: Replace `reduced-touch-target` with `touch-target="none"` PiperOrigin-RevId: 555666950
material-components · Aug 10, 2023 · 8588a3f · 8588a3f
1 parent 1f46179
commit 8588a3f
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 18 deletions.
diff --git a/docs/components/fab.md b/docs/components/fab.md
@@ -242,7 +242,7 @@ small, medium, and large](images/fab/usage-sizes.webp)
 <!-- catalog-include "figures/fab/usage-sizes.html" -->
 
 ```html
-<md-fab size="small" reduced-touch-target aria-label="Edit">
+<md-fab size="small" touch-target="none" aria-label="Edit">
   <md-icon slot="icon">edit</md-icon>
 </md-fab>
 <md-fab size="small" aria-label="Edit">

diff --git a/docs/components/figures/fab/usage-sizes.html b/docs/components/figures/fab/usage-sizes.html
@@ -3,7 +3,7 @@
     aria-label="Four surface fabs side by side with edit icons of visual size size small, small, medium, and large"
     style="padding-block: 16px; gap: 16px; display: flex"
   >
-    <md-fab size="small" reduced-touch-target aria-label="Edit">
+    <md-fab size="small" touch-target="none" aria-label="Edit">
       <md-icon slot="icon">edit</md-icon>
     </md-fab>
     <md-fab size="small" aria-label="Edit">

diff --git a/fab/demo/demo.ts b/fab/demo/demo.ts
@@ -38,7 +38,6 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Fab', [
       ]
     })
   }),
-  new Knob('reducedTouchTarget', {defaultValue: false, ui: boolInput()}),
   new Knob('hasIcon', {defaultValue: true, ui: boolInput()}),
 ]);
 

diff --git a/fab/demo/stories.ts b/fab/demo/stories.ts
@@ -19,7 +19,6 @@ export interface StoryKnobs {
   lowered: boolean;
   size: FabSize|undefined;
   variant: FabVariant|undefined;
-  reducedTouchTarget: boolean;
   hasIcon: boolean;
 }
 
@@ -32,12 +31,11 @@ const styles = css`
 const standard: MaterialStoryInit<StoryKnobs> = {
   name: '<md-fab>',
   styles,
-  render({icon, label, lowered, size, variant, reducedTouchTarget, hasIcon}) {
+  render({icon, label, lowered, size, variant, hasIcon}) {
     return html`
       <md-fab
           class="fab"
           .variant=${variant!}
-          .reducedTouchTarget=${reducedTouchTarget}
           .lowered=${lowered}
           .label=${label}
           .size=${size!}
@@ -51,11 +49,10 @@ const standard: MaterialStoryInit<StoryKnobs> = {
 const branded: MaterialStoryInit<StoryKnobs> = {
   name: '<md-branded-fab>',
   styles,
-  render({label, lowered, size, reducedTouchTarget, hasIcon}) {
+  render({label, lowered, size, hasIcon}) {
     return html`
       <md-branded-fab
           class="fab"
-          .reducedTouchTarget=${reducedTouchTarget}
           .lowered=${lowered}
           .label=${label}
           .size=${size!}

diff --git a/fab/fab_test.ts b/fab/fab_test.ts
@@ -45,7 +45,6 @@ describe('<md-fab>', () => {
       const {harness} = await setupTest();
       expect(harness.element).toBeInstanceOf(MdFab);
       expect(harness.element.lowered).toEqual(false);
-      expect(harness.element.reducedTouchTarget).toEqual(false);
       expect(harness.element.label).toEqual('');
       expect(harness.element.variant).toEqual('surface');
       expect(harness.element.size).toEqual('medium');

diff --git a/fab/internal/_fab.scss b/fab/internal/_fab.scss
@@ -102,6 +102,10 @@
     );
   }
 
+  :host([size='small'][touch-target='wrapper']) {
+    margin: max(0px, 48px - var(--_small-container-height));
+  }
+
   .fab {
     @include color(
       (

diff --git a/fab/internal/_shared.scss b/fab/internal/_shared.scss
@@ -28,6 +28,14 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     display: inline-flex;
   }
 
+  :host([size='medium'][touch-target='wrapper']) {
+    margin: max(0px, 48px - var(--_container-height));
+  }
+
+  :host([size='large'][touch-target='wrapper']) {
+    margin: max(0px, 48px - var(--_large-container-height));
+  }
+
   .fab,
   .icon,
   .icon ::slotted(*) {
@@ -151,6 +159,10 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     transform: translate(-50%, -50%);
   }
 
+  :host([touch-target='none']) .touch-target {
+    display: none;
+  }
+
   md-elevation,
   .fab {
     // TODO: replace duration with animation tokens

diff --git a/fab/internal/shared.ts b/fab/internal/shared.ts
@@ -38,7 +38,7 @@ export abstract class SharedFab extends LitElement {
    * NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not
    * have different sizes.
    */
-  @property() size: FabSize = 'medium';
+  @property({reflect: true}) size: FabSize = 'medium';
 
   /**
    * The text to display on the FAB.
@@ -59,12 +59,6 @@ export abstract class SharedFab extends LitElement {
    */
   @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;
 
-  /**
-   * Lowers the FAB's elevation and places it into the `lowered` state.
-   */
-  @property({type: Boolean, attribute: 'reduced-touch-target'})
-  reducedTouchTarget = false;
-
   protected override render() {
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
@@ -95,8 +89,7 @@ export abstract class SharedFab extends LitElement {
   }
 
   private renderTouchTarget() {
-    return this.reducedTouchTarget ? html`` :
-                                     html`<div class="touch-target"></div>`;
+    return html`<div class="touch-target"></div>`;
   }
 
   private renderLabel() {