fix(radio): checked styles not displaying

Fixes #4347 PiperOrigin-RevId: 537354516
material-components · Jun 2, 2023 · 8fb5cd8 · 8fb5cd8
1 parent ae70f1e
commit 8fb5cd8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 27 deletions.
diff --git a/radio/lib/_radio.scss b/radio/lib/_radio.scss
@@ -62,7 +62,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     -webkit-tap-highlight-color: transparent;
   }
 
-  :host([checked]) {
+  .checked {
     @include ripple.theme(
       (
         hover-color: var(--_selected-hover-state-layer-color),
@@ -108,11 +108,11 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     transition: opacity 50ms linear;
   }
 
-  :host([checked]) .icon {
+  .checked .icon {
     fill: var(--_selected-icon-color);
   }
 
-  :host([checked]) .inner.circle {
+  .checked .inner.circle {
     animation: inner-circle-grow 300ms
       map.get($_md-sys-motion, easing-emphasized-decelerate);
     opacity: 1;
@@ -150,19 +150,19 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     opacity: var(--_disabled-unselected-icon-opacity);
   }
 
-  :host([checked]:hover) .icon {
+  :host(:hover) .checked .icon {
     fill: var(--_selected-hover-icon-color);
   }
 
-  :host([checked]:focus-within) .icon {
+  :host(:focus-within) .checked .icon {
     fill: var(--_selected-focus-icon-color);
   }
 
-  :host([checked]:active) .icon {
+  :host(:active) .checked .icon {
     fill: var(--_selected-pressed-icon-color);
   }
 
-  :host([checked][disabled]) .icon {
+  :host([disabled]) .checked .icon {
     fill: var(--_disabled-selected-icon-color);
     opacity: var(--_disabled-selected-icon-opacity);
   }

diff --git a/radio/lib/radio.ts b/radio/lib/radio.ts
@@ -9,6 +9,7 @@ import '../../ripple/ripple.js';
 
 import {html, isServer, LitElement, nothing} from 'lit';
 import {property, query} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
@@ -115,29 +116,32 @@ export class Radio extends LitElement {
   }
 
   protected override render() {
+    const classes = {checked: this.checked};
     // Needed for closure conformance
     const {ariaLabel} = this as ARIAMixinStrict;
     return html`
-      <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
-      <md-focus-ring for="input"></md-focus-ring>
-      <svg class="icon" viewBox="0 0 20 20">
-        <mask id="cutout">
-          <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(#cutout)" />
-        <circle class="inner circle" cx="10" cy="10" r="5" />
-      </svg>
-      <input
-        id="input"
-        type="radio"
-        name=${this.name}
-        aria-label=${ariaLabel || nothing}
-        .checked=${this.checked}
-        .value=${this.value}
-        ?disabled=${this.disabled}
-        @change=${this.handleChange}
-      >
+      <div class=${classMap(classes)}>
+        <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring for="input"></md-focus-ring>
+        <svg class="icon" viewBox="0 0 20 20">
+          <mask id="cutout">
+            <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(#cutout)" />
+          <circle class="inner circle" cx="10" cy="10" r="5" />
+        </svg>
+        <input
+          id="input"
+          type="radio"
+          name=${this.name}
+          aria-label=${ariaLabel || nothing}
+          .checked=${this.checked}
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        >
+      </div>
     `;
   }