fix(components): icon-radio rendering

libs/components/src/icon-radio/icon-radio-toggle.ts

@@ -1,9 +1,7 @@
-import { css, html, unsafeCSS } from 'lit';
+import { css, html, TemplateResult, unsafeCSS } from 'lit';
 import { RadioBase } from '@material/mwc-radio/mwc-radio-base';
 import { styles as radioStyle } from '@material/mwc-radio/mwc-radio.css';
 import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { styleMap } from 'lit/directives/style-map.js';
 import styles from './icon-radio.scss?inline';
 
 declare global {
@@ -15,36 +13,30 @@ declare global {
 @customElement('cv-radio-icon')
 export class CovalentIconRadioToggle extends RadioBase {
   static override styles = [
+    radioStyle,
     css`
       ${unsafeCSS(styles)}
     `,
-    radioStyle,
   ];
 
-  @property() width: number | string = '200';
-  @property() height: number | string = '160';
   @property({ type: Boolean }) iconOnly = false;
-  override render() {
-    const classes = {
-      checked: this.checked,
-    };
-    const styles = {
-      '--width': this.width == 'fill' ? '100%' : `${this.width}px`,
-      '--height': `${this.height}px`,
-    };
-    return html`
-        <div class="${classMap(classes)} container" style="${styleMap(styles)}" @click="${() => {
-      this.checked = true;
-    }}">
-            <input type="radio" class="mdc-radio__native-control"></input>
-            <div class="mdc-radio__background">
-                <div class="mdc-radio__outer-circle"></div>
-                <div class="mdc-radio__inner-circle"></div>
-            </div>
-            <slot name="icon"></slot>
-            ${this.iconOnly ? '' : html`<div><slot name="text"></slot></div>`}
-        </div>
-    `;
+
+  // Override the renderRipple method to minimally introduce the icon & text slots without overwritting the render method
+  protected override renderRipple(): TemplateResult | string {
+    const iconSlot = html`<slot name="icon"></slot>`;
+    const textSlot = this.iconOnly
+      ? ''
+      : html`<div><slot name="text"></slot></div>`;
+    const ripple = this.shouldRenderRipple
+      ? html`<mwc-ripple
+          accent
+          .internalUseStateLayerCustomProperties="${this
+            .useStateLayerCustomProperties}"
+          .disabled="${this.disabled}"
+        ></mwc-ripple>`
+      : '';
+
+    return html`${iconSlot}${textSlot}${ripple}`;
   }
 }
 

libs/components/src/icon-radio/icon-radio.scss

@@ -1,5 +1,3 @@
-@use '@material/ripple';
-
 :host {
   .mdc-radio__background {
     position: absolute;
@@ -12,39 +10,32 @@
   width: 100%;
 }
 
-.container {
+.mdc-radio {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   text-align: center;
   row-gap: 8px;
-  width: var(--width);
-  height: var(--height);
+  width: var(--cv-icon-radio-width, 200px);
+  height: var(--cv-icon-radio-height, 160px);
   border: solid 2px var(--mdc-theme-border);
   border-radius: 8px;
   color: var(--mdc-theme-text-primary-on-background);
-  @include ripple.surface;
-  @include ripple.radius-unbounded;
-  @include ripple.states;
-}
-
-.container::after,
-.container::before {
-  border-radius: 8px;
 }
 
-.container:hover {
-  cursor: pointer;
+.mdc-radio--touch .mdc-radio__native-control {
+  width: 100%;
+  height: 100%;
 }
 
-.checked {
+:host([checked]) .mdc-radio {
   border: solid 2px var(--mdc-theme-primary);
   background-color: var(--mdc-theme-surface-primary-highlight);
-}
 
-.checked:hover {
-  background-color: var(--mdc-theme-surface-primary-highlight-hover);
+  &:hover {
+    background-color: var(--mdc-theme-surface-primary-highlight-hover);
+  }
 }
 
 [name='icon']::slotted(*) {
@@ -68,14 +59,3 @@
   font-weight: var(--mdc-typography-body2-font-weight);
   line-height: var(--mdc-typography-body2-line-height);
 }
-
-.mdc-radio__outer-circle {
-  border-color: var(--mdc-theme-text-icon-on-background);
-}
-
-.mdc-radio__native-control:enabled:checked
-  + .mdc-radio__background
-  .mdc-radio__outer-circle,
-.mdc-radio__inner-circle {
-  border-color: var(--mdc-theme-secondary, #018786);
-}

libs/components/src/icon-radio/icon-radio.stories.js

@@ -3,15 +3,6 @@ import './icon-radio-toggle';
 export default {
   title: 'Components/Icon Radio',
   argTypes: {
-    width: {
-      control: 'text',
-      defaultValue: '200',
-      description: 'Can take either a number or fill',
-    },
-    height: {
-      control: 'text',
-      defaultValue: '160',
-    },
     iconOnly: {
       control: 'boolean',
       defaultValue: false,
@@ -25,23 +16,17 @@ export default {
   },
 };
 
-export const Template = ({ width, height, iconOnly }) => {
+export const Template = ({ iconOnly }) => {
   return `
-    <div style="width:600px; display:flex; border:solid 1px var(--mdc-theme-border); padding: 16px 0px; justify-content: center; gap:16px;">
-      <cv-radio-icon width=${width} height=${height} ${
-    iconOnly ? 'iconOnly' : ''
-  }>
+      <cv-radio-icon ${iconOnly ? 'iconOnly' : ''}>
         <cv-icon slot="icon">work</cv-icon>
         <div slot="text">Balanced</div>
         <div slot="text">Every week</div>
       </cv-radio-icon>
-      <cv-radio-icon width=${width} height=${height} ${
-    iconOnly ? 'iconOnly' : ''
-  }>
+      <cv-radio-icon ${iconOnly ? 'iconOnly' : ''}>
         <cv-icon slot="icon">work</cv-icon>
         <div slot="text">Balanced</div>
         <div slot="text">Every week</div>
       </cv-radio-icon>
-    </div>
   `;
 };