feat(checkbox)!: add touch target configurations

BREAKING CHANGE: Checkbox's size is now smaller by default. Add margin or `touch-target="wrapper"` to increase it to the previous size. PiperOrigin-RevId: 555547024
material-components · Aug 10, 2023 · f574b00 · f574b00
1 parent 7c461ca
commit f574b00
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 21 deletions.
diff --git a/catalog/stories/components/knob-ui-components.ts b/catalog/stories/components/knob-ui-components.ts
@@ -33,7 +33,7 @@ export function boolInput(): KnobUi<boolean> {
         <div>
           <label>
             <md-checkbox
-              reducedTouchTarget
+              touch-target="none"
               .checked=${!!knob.latestValue}
               @change="${valueChanged}"
             >

diff --git a/checkbox/demo/stories.ts b/checkbox/demo/stories.ts
@@ -25,6 +25,7 @@ const checkbox: MaterialStoryInit<StoryKnobs> = {
         ?checked=${checked}
         ?disabled=${disabled}
         ?indeterminate=${indeterminate}
+        touch-target="wrapper"
       ></md-checkbox>
     `;
   },
@@ -52,6 +53,7 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
           <md-checkbox
             ?disabled=${disabled}
             aria-label="Cats"
+            touch-target="wrapper"
           ></md-checkbox>
           <span aria-hidden="true">Cats</span>
         </label>
@@ -60,6 +62,7 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
             checked
             ?disabled=${disabled}
             aria-label="dogs"
+            touch-target="wrapper"
           ></md-checkbox>
           <span aria-hidden="true">Dogs</span>
         </label>
@@ -68,6 +71,7 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
             indeterminate
             ?disabled=${disabled}
             aria-label="Birds"
+            touch-target="wrapper"
           ></md-checkbox>
           <span aria-hidden="true">Birds</span>
         </label>

diff --git a/checkbox/internal/_checkbox.scss b/checkbox/internal/_checkbox.scss
@@ -9,7 +9,6 @@
 @use 'sass:math';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../focus/focus-ring';
 @use '../../ripple/ripple';
 @use '../../tokens';
 // go/keep-sorted end
@@ -78,54 +77,59 @@ $_checkmark-bottom-left: 7px, -14px;
     border-end-end-radius: var(--_container-shape-end-end);
     border-end-start-radius: var(--_container-shape-end-start);
     display: inline-flex;
-    height: 48px;
+    height: var(--_container-size);
     position: relative;
     vertical-align: top; // Fix extra space when placed inside display: block
-    width: 48px;
+    width: var(--_container-size);
     -webkit-tap-highlight-color: transparent;
   }
 
+  :host([touch-target='wrapper']) {
+    margin: calc((48px - var(--_container-size)) / 2);
+  }
+
   md-focus-ring {
-    @include focus-ring.theme(
-      (
-        'outward-offset': -2px,
-      )
-    );
+    height: 44px;
+    inset: unset;
+    width: 44px;
   }
 
+  // <input> is also the touch target
   input {
     appearance: none;
-    inset: 0;
+    height: 48px;
     margin: 0;
+    opacity: 0;
     outline: none;
     position: absolute;
-    opacity: 0;
-    block-size: 100%;
-    inline-size: 100%;
+    width: 48px;
+  }
+
+  :host([touch-target='none']) input {
+    height: 100%;
+    width: 100%;
   }
 
   .container {
     border-radius: inherit;
+    display: grid;
     height: 100%;
+    place-content: center;
+    place-items: center;
     position: relative;
     width: 100%;
   }
 
-  // Center elements within the container.
   .outline,
   .background,
-  md-ripple,
   .icon {
     inset: 0;
-    margin: auto;
     position: absolute;
   }
 
   .outline,
   .background {
     border-radius: inherit;
-    height: var(--_container-size);
-    width: var(--_container-size);
   }
 
   .outline {
@@ -172,6 +176,7 @@ $_checkmark-bottom-left: 7px, -14px;
   md-ripple {
     border-radius: var(--_state-layer-shape);
     height: var(--_state-layer-size);
+    inset: unset;
     width: var(--_state-layer-size);
 
     @include ripple.theme(

diff --git a/docs/components/switch.md b/docs/components/switch.md
@@ -81,7 +81,7 @@ Switches are similar to checkboxes, and can be unselected or selected.
 <!-- catalog-only-end -->
 
 ```html
-<md-switch></md-checkbox>
+<md-switch></md-switch>
 <md-switch selected></md-switch>
 ```
 
@@ -110,10 +110,10 @@ can choose to display both icons or only selected icons.
 <!-- catalog-only-end -->
 
 ```html
-<md-switch icons></md-checkbox>
+<md-switch icons></md-switch>
 <md-switch icons selected></md-switch>
 
-<md-switch icons show-only-selected-icon></md-checkbox>
+<md-switch icons show-only-selected-icon></md-switch>
 <md-switch icons show-only-selected-icon selected></md-switch>
 ```