fix(FormControls): specify width 100 instead of relying on flex auto (#…

…870)
palmetto · Feb 13, 2024 · a78ba2e · a78ba2e
1 parent 3675de8
commit a78ba2e
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 1 deletion.
diff --git a/src/components/FormControl/FormControl.tsx b/src/components/FormControl/FormControl.tsx
@@ -50,6 +50,7 @@ export const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>((
     helpText,
     isDisabled,
     requiredIndicator,
+    width = '100%',
     ...restProps
   },
   ref,
@@ -64,7 +65,7 @@ export const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>((
   };
 
   return (
-    <Box flex="auto" ref={ref} {...restProps}>
+    <Box width={width} ref={ref} {...restProps}>
       {label && !hideLabel && <FormLabel {...labelProps}>{label}</FormLabel>}
       {children}
       {error && error !== true && <InputValidationMessage>{error}</InputValidationMessage>}

diff --git a/src/stories/FormControls.stories.mdx b/src/stories/FormControls.stories.mdx
@@ -685,3 +685,58 @@ Inline form sizes with labels and error states.
     }}
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story name="Adjacent Inputs">
+    {() => {
+      const [value, setValue] = useState('');
+      const [value1, setValue1] = useState('');
+      const [value2, setValue2] = useState('');
+      const [value3, setValue3] = useState('');
+      const options = [
+        {
+          value: 'chocolate',
+          label: 'Chocolate',
+        },
+        {
+          value: 'strawberry',
+          label: 'Strawberry',
+        },
+        {
+          value: 'vanilla',
+          label: 'Vanilla',
+        },
+      ];
+      return (
+        <Box direction="row" gap="lg">
+          <TextInput
+            id="textInput"
+            value={value}
+            label="Text Input"
+            onChange={event => setValue(event.target.value)}
+          />
+          <SelectInput
+            id="selectInput"
+            label="Select Input"
+            onChange={event => setValue1(event.target.value)}
+            options={options}
+            value={value1}
+          />
+          <SelectInputNative
+            id="selectInputNative"
+            label="Select InputNative"
+            onChange={event => setValue2(event.target.value)}
+            options={options}
+            value={value2}
+          />
+          <TextInput
+            id="textInput2"
+            value={value3}
+            label="Text Input"
+            onChange={event => setValue3(event.target.value)}
+          />
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>