fix: Fix FieldSet float issue (#1268)

Co-authored-by: Vincent Smedinga <[email protected]>
Amsterdam · Jun 21, 2024 · 5593916 · 5593916
1 parent 9671baf
commit 5593916
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/packages/css/src/components/field-set/field-set.scss b/packages/css/src/components/field-set/field-set.scss
@@ -28,6 +28,10 @@
   float: inline-start; // [1]
   inline-size: 100%; // [1]
   padding-inline: 0;
+
+  + * {
+    clear: both; // Reset the applied float for the legend’s first sibling
+  }
 }
 
 // [1] This combination allows the fieldset border to go around the legend, instead of through it.

diff --git a/storybook/src/components/FieldSet/FieldSet.stories.tsx b/storybook/src/components/FieldSet/FieldSet.stories.tsx
@@ -38,7 +38,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   render: (args) => (
     <FieldSet invalid={args.invalid} legend={args.legend}>
-      <Column gap="extra-small" style={{ width: '100%' }}>
+      <Column gap="extra-small">
         <Label htmlFor="input1">Voornaam</Label>
         <TextInput id="input1" invalid={args.invalid} aria-required="true" />
         <Label htmlFor="input2">Achternaam</Label>
@@ -161,7 +161,7 @@ export const CheckboxGroup: Story = {
   },
   render: (args) => (
     <FieldSet legend={args.legend} invalid={args.invalid}>
-      <Column gap="extra-small" style={{ width: '100%' }}>
+      <Column gap="extra-small">
         <Checkbox name="about" value="horeca" invalid={args.invalid} aria-required="true">
           Horecabedrijf
         </Checkbox>
@@ -187,7 +187,7 @@ export const CheckboxGroup: Story = {
 //   render: (args) => (
 //     <FieldSet legend={args.legend} invalid={args.invalid}>
 //       {args.invalid && <ErrorMessage className="ams-mb--sm">Geef aan waar uw melding over gaat.</ErrorMessage>}
-//       <Column gap="extra-small" style={{ width: '100%' }}>
+//       <Column gap="extra-small">
 //         <Checkbox name="about" value="horeca" invalid={args.invalid} aria-required="true">
 //           Horecabedrijf
 //         </Checkbox>