fixed vertical align

nl-design-system · Oct 21, 2024 · e7e8f91 · e7e8f91
1 parent cffc6c9
commit e7e8f91
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/packages/components-css/form-field-radio-option/index.scss b/packages/components-css/form-field-radio-option/index.scss
@@ -11,3 +11,7 @@
 .utrecht-form-field--radio .utrecht-form-field__label {
   --utrecht-form-label-font-weight: var(--rhc-form-field-radio-option-font-weight, inherit);
 }
+
+.rhc-radio {
+  vertical-align: middle;
+}
diff --git a/packages/components-react/src/FormFieldRadioOption.tsx b/packages/components-react/src/FormFieldRadioOption.tsx
@@ -52,9 +52,12 @@ export const FormFieldRadioOption = forwardRef(
                 [statusId]: status,
               }) || undefined
             }
-            className={clsx({
-              'utrecht-radio-button--html-radio-button-rtl': dir === 'rtl',
-            })}
+            className={clsx(
+              {
+                'utrecht-radio-button--html-radio-button-rtl': dir === 'rtl',
+              },
+              'rhc-radio',
+            )}
             {...restProps}
           ></Radio>
         </div>

diff --git a/packages/storybook/src/community/radio-group.stories.tsx b/packages/storybook/src/community/radio-group.stories.tsx
@@ -5,7 +5,10 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 const RadioGroupStory = () => (
   <div className="rhc-radio-group">
-    <FormFieldRadioOption label="Radio option" name="radio-option" />
+    <FormFieldRadioOption
+      label="Radio option Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id tempus ex. Vestibulum auctor sagittis sagittis."
+      name="radio-option"
+    />
     <FormFieldRadioOption label="Radio option" name="radio-option" />
     <FormFieldRadioOption label="Radio option" name="radio-option" />
     <FormFieldRadioOption label="Radio option" name="radio-option" />