fix(Radio+Checkbox): use input component (#2607)

- Part of #2311
- Fieldset at compound components moved to task #2666 
- Fixes #2459

Author: eirikbacker

.changeset/shiny-dryers-count.md

@@ -0,0 +1,8 @@
+---
+"@digdir/designsystemet-css": major
+"@digdir/designsystemet-react": major
+---
+
+Radio + Checkbox:
+- Use `label` prop instead of `children` as label text
+- Remove `Radio.Group` and `Checkbox.Group` and use `Fieldset` instead

apps/theme/components/Previews/Components/Components.tsx

@@ -35,7 +35,6 @@ import { useState } from 'react';
 import classes from './Components.module.css';
 
 export const Components = () => {
-  const [radioValue, setRadioValue] = useState('vanilje');
   const [currentPage, setCurrentPage] = useState(1);
   const pagination = usePagination({
     currentPage,
@@ -47,21 +46,15 @@ export const Components = () => {
   return (
     <div className={classes.components}>
       <div className={cl(classes.card, classes.checkbox)}>
-        <Checkbox.Group error='' legend='Handleliste' size='sm'>
-          <Checkbox value='epost'>En kilo poteter</Checkbox>
-          <Checkbox value='telefon'>To liter Farris</Checkbox>
-          <Checkbox value='sms' defaultChecked>
-            Blomkål
-          </Checkbox>
-          <Checkbox value='sms' defaultChecked>
-            Pizza
-          </Checkbox>
-          <Checkbox value='sms' defaultChecked>
-            Tre liter lettmelk
-          </Checkbox>
-          <Checkbox value='sms'>2kg smågodt</Checkbox>
-          <Checkbox value='sms'>10 poser med Smash</Checkbox>
-        </Checkbox.Group>
+        <Fieldset legend='Handleliste' size='sm'>
+          <Checkbox label='En kilo poteter' value='epost' />
+          <Checkbox label='To liter Farris' value='telefon' />
+          <Checkbox label='Blomkål' value='sms' defaultChecked />
+          <Checkbox label='Pizza' value='sms' defaultChecked />
+          <Checkbox label='Tre liter lettmelk' value='sms' defaultChecked />
+          <Checkbox label='2kg smågodt' value='sms' />
+          <Checkbox label='10 poser med Smash' value='sms' />
+        </Fieldset>
       </div>
       <div className={cl(classes.card, classes.user)}>
         <Heading className={cl(classes.cardTitle, classes.userTitle)} size='xs'>
@@ -205,19 +198,16 @@ export const Components = () => {
         </div>
       </div>
       <div className={cl(classes.card, classes.radio)}>
-        <Radio.Group
-          error=''
+        <Fieldset
           legend='Hvilken iskremsmak er best?'
           description='Velg din favorittsmak'
           size='sm'
-          value={radioValue}
-          onChange={(e: string) => setRadioValue(e)}
         >
-          <Radio value='vanilje'>Vanilje</Radio>
-          <Radio value='jordbær'>Jordbær</Radio>
-          <Radio value='sjokolade'>Sjokolade</Radio>
-          <Radio value='spiser-ikke-is'>Jeg spiser ikke iskrem</Radio>
-        </Radio.Group>
+          <Radio label='Vanile' value='vanilje' />
+          <Radio label='Jordbær' value='jordbær' defaultChecked />
+          <Radio label='Sjokolade' value='sjokolade' />
+          <Radio label='Jeg spiser ikke iskrem' value='spiser-ikke-is' />
+        </Fieldset>
       </div>
       <div className={cl(classes.card, classes.tag)}>
         <Heading size='xs' className={classes.tagHeading}>

packages/css/checkbox.css

@@ -1,7 +1,71 @@
 .ds-field {
-  display: contents;
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-2);
 
-  & > * + * {
-    margin-top: var(--ds-spacing-2);
+  @composes ds-body-text--md from './base/base.css';
+
+  &[data-size='sm'] {
+    @composes ds-body-text--sm from './base/base.css';
+  }
+
+  &[data-size='lg'] {
+    @composes ds-body-text--lg from './base/base.css';
+  }
+
+  & [data-field='description'] {
+    color: var(--ds-color-neutral-text-subtle); /* TODO: Change to opacity or color-mix(currentColor, trasparent) to ensure contrast when parent element color changes? */
+  }
+
+  /**
+   * States
+   */
+  &:has([aria-disabled='true'], :disabled) > * {
+    cursor: not-allowed;
+    opacity: var(--ds-disabled-opacity);
+  }
+
+  &:has([aria-readonly='true'], [readonly]) label {
+    --dsc-label--readonly: ; /* Activate lock icon for label when readonly */
+  }
+
+  /**
+   * Toggle inputs
+   */
+  &:has(input:is([type='radio'], [type='checkbox'])) {
+    border-radius: var(--ds-border-radius-md);
+    display: grid;
+    grid-template-columns: auto 1fr;
+    row-gap: 0;
+    width: fit-content; /* Rather do display: grid + width: fit-content than display: inline-grid to encourage stacked radios */
+
+    & > * {
+      grid-column: 2; /* Only allow input in column 1 */
+    }
+
+    & label {
+      --dsc-label--readonly: initial; /* Never show lock icon on toggle inputs */
+      font-weight: var(--ds-font-weight-regular);
+    }
+
+    & input {
+      grid-column: 1; /* Always place input in column 1 */
+      grid-row: 1; /* Always place input in row 1 */
+      outline: none;
+      box-shadow: none;
+    }
+
+    &:not(:has([readonly], [aria-disabled='true'], :disabled)) label {
+      cursor: pointer;
+    }
+
+    &:has(input:focus-visible) {
+      @composes ds-focus--visible from './base/base.css';
+    }
+
+    &:has(input:only-child) {
+      gap: 0; /* No gap only <input> with aria-label/aria-labelledby */
+    }
   }
 }