feat(radio)!: add touch target configurations

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

Hide file tree

Showing 4 changed files with 51 additions and 21 deletions.
diff --git a/dialog/demo/stories.ts b/dialog/demo/stories.ts
@@ -101,9 +101,18 @@ const choose: MaterialStoryInit<StoryKnobs> = {
           This is a standard choice dialog. These dialogs give users the ability to make
           a decision and confirm it. This gives them a chance to change their minds if necessary.
         </p>
-        <label><md-radio name="pet" value="cats" checked></md-radio> Cats</label>
-        <label><md-radio name="pet" value="dogs"></md-radio> Dogs</label>
-        <label><md-radio name="pet" value="birds"></md-radio> Birds</label>
+        <label>
+          <md-radio name="pet" value="cats" touch-target="wrapper"
+              checked></md-radio> Cats
+        </label>
+        <label>
+          <md-radio name="pet" value="dogs"
+              touch-target="wrapper"></md-radio> Dogs
+        </label>
+        <label>
+          <md-radio name="pet" value="birds"
+              touch-target="wrapper"></md-radio> Birds
+        </label>
         <md-text-button slot="footer" dialog-action="cancel">Cancel</md-text-button>
         <md-text-button slot="footer" autofocus dialog-action="ok">OK</md-text-button>
       </md-dialog>`;

diff --git a/radio/demo/stories.ts b/radio/demo/stories.ts
@@ -22,18 +22,21 @@ const standard: MaterialStoryInit<StoryKnobs> = {
       <md-radio
         name="story1"
         value="radioA"
+        touch-target="wrapper"
         .checked=${checked === '0'}
         .disabled="${disabled || false}">
       </md-radio>
       <md-radio
         name="story1"
         value="radioB"
+        touch-target="wrapper"
         .checked=${checked === '1'}
         .disabled="${disabled || false}">
       </md-radio>
       <md-radio
         name="story1"
         value="radioC"
+        touch-target="wrapper"
         .checked=${checked === '2'}
         .disabled="${disabled || false}">
       </md-radio>
@@ -51,6 +54,7 @@ const labeled: MaterialStoryInit<StoryKnobs> = {
         <md-radio
           name="story2"
           value="radioA"
+          touch-target="wrapper"
           .checked=${checked === '0'}
           .disabled="${disabled || false}">
         </md-radio>
@@ -60,6 +64,7 @@ const labeled: MaterialStoryInit<StoryKnobs> = {
         <md-radio
           name="story2"
           value="radioB"
+          touch-target="wrapper"
           .checked=${checked === '1'}
           .disabled="${disabled || false}">
         </md-radio>
@@ -69,6 +74,7 @@ const labeled: MaterialStoryInit<StoryKnobs> = {
         <md-radio
           name="story2"
           value="radioC"
+          touch-target="wrapper"
           .checked=${checked === '2'}
           .disabled="${disabled || false}">
         </md-radio>

diff --git a/radio/internal/_radio.scss b/radio/internal/_radio.scss
@@ -48,20 +48,30 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     );
 
     display: inline-flex;
-    height: 48px;
+    height: var(--_icon-size);
     position: relative;
     vertical-align: top; // Fix extra space when placed inside display: block
-    width: 48px;
+    width: var(--_icon-size);
     // Remove highlight color for mobile Safari
     -webkit-tap-highlight-color: transparent;
   }
 
+  :host([touch-target='wrapper']) {
+    margin: calc((48px - var(--_icon-size)) / 2);
+  }
+
+  .container {
+    display: grid;
+    height: 100%;
+    place-content: center;
+    place-items: center;
+    width: 100%;
+  }
+
   md-focus-ring {
-    @include focus-ring.theme(
-      (
-        'outward-offset': -2px,
-      )
-    );
+    height: 44px;
+    inset: unset;
+    width: 44px;
   }
 
   .checked {
@@ -75,28 +85,32 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     );
   }
 
-  input,
-  .icon {
-    inset: 0;
-    margin: auto;
-    position: absolute;
-  }
-
+  // <input> is also the touch target
   input {
     appearance: none;
+    height: 48px;
     outline: none;
+    margin: 0;
+    position: absolute;
+    width: 48px;
+  }
+
+  :host([touch-target='none']) input {
+    width: 100%;
+    height: 100%;
   }
 
   md-ripple {
     border-radius: 50%;
     height: var(--_state-layer-size);
+    inset: unset;
     width: var(--_state-layer-size);
   }
 
   .icon {
     fill: var(--_icon-color);
-    height: var(--_icon-size);
-    width: var(--_icon-size);
+    inset: 0;
+    position: absolute;
   }
 
   .outer.circle {

diff --git a/radio/internal/radio.ts b/radio/internal/radio.ts
@@ -123,15 +123,16 @@ export class Radio extends LitElement {
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
     return html`
-      <div class=${classMap(classes)}>
+      <div class="container ${classMap(classes)}">
         <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
         <md-focus-ring part="focus-ring" for="input"></md-focus-ring>
         <svg class="icon" viewBox="0 0 20 20">
           <mask id="${this.maskId}">
             <rect width="100%" height="100%" fill="white" />
             <circle cx="10" cy="10" r="8" fill="black" />
           </mask>
-          <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#${this.maskId})" />
+          <circle class="outer circle" cx="10" cy="10" r="10"
+              mask="url(#${this.maskId})" />
           <circle class="inner circle" cx="10" cy="10" r="5" />
         </svg>
         <input