chore: spread className and style on internal Field (#2880)

resolves #2772 --------- Co-authored-by: Michael Marszalek <[email protected]>
digdir · Dec 11, 2024 · c9c77f7 · c9c77f7
1 parent 68a8c3d
commit c9c77f7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/.changeset/healthy-monkeys-repair.md b/.changeset/healthy-monkeys-repair.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Radio, Checkbox: Spread `className` and `style` on outermost element
diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx
@@ -36,11 +36,20 @@ export type CheckboxProps = MergeRight<
  */
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   function Checkbox(
-    { 'data-size': size, children, label, description, validation, ...rest },
+    {
+      'data-size': size,
+      className,
+      style,
+      children,
+      label,
+      description,
+      validation,
+      ...rest
+    },
     ref,
   ) {
     return (
-      <Field data-size={size}>
+      <Field data-size={size} className={className} style={style}>
         <Input type='checkbox' ref={ref} {...rest} />
         {!!label && <Label weight='regular'>{label}</Label>}
         {!!description && <div data-field='description'>{description}</div>}

diff --git a/packages/react/src/components/Radio/Radio.tsx b/packages/react/src/components/Radio/Radio.tsx
@@ -35,11 +35,20 @@ export type RadioProps = MergeRight<
  * <Radio label="I agree" value="agree" />
  */
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
-  { 'data-size': size, children, label, description, validation, ...rest },
+  {
+    'data-size': size,
+    className,
+    style,
+    children,
+    label,
+    description,
+    validation,
+    ...rest
+  },
   ref,
 ) {
   return (
-    <Field data-size={size}>
+    <Field data-size={size} className={className} style={style}>
       <Input type='radio' ref={ref} {...rest} />
       {!!label && <Label weight='regular'>{label}</Label>}
       {!!description && <div data-field='description'>{description}</div>}