fix: ensure that input field components are full width by default

uzh-bf · Jul 19, 2024 · e960012 · e960012
1 parent 8c9d0c7
commit e960012
Show file tree

Hide file tree

Showing 11 changed files with 20 additions and 14 deletions.
diff --git a/src/forms/NewFormikNumberField.stories.tsx b/src/forms/NewFormikNumberField.stories.tsx
@@ -25,7 +25,7 @@ export const Default = () => (
                 name="name"
                 label="Label"
                 tooltip="Tooltip for this input"
-                className={{ root: 'mb-1' }}
+                className={{ root: 'mb-1 w-80' }}
                 placeholder="Placeholder"
               />
               <Button type="submit">Submit</Button>

diff --git a/src/forms/NewFormikNumberField.tsx b/src/forms/NewFormikNumberField.tsx
@@ -87,7 +87,7 @@ export function FormikNumberField({
 
   if (name) {
     return (
-      <div className={twMerge('w-80', className?.root)}>
+      <div className={twMerge('w-full', className?.root)}>
         <NumberField
           id={id}
           value={field.value}
@@ -117,7 +117,7 @@ export function FormikNumberField({
   }
 
   return (
-    <div className={twMerge('w-80', className?.root)}>
+    <div className={twMerge('w-full', className?.root)}>
       <NumberField
         id={id}
         value={value!}

diff --git a/src/forms/NewFormikTextField.stories.tsx b/src/forms/NewFormikTextField.stories.tsx
@@ -26,7 +26,7 @@ export const Default = () => (
                 name="name"
                 label="Label"
                 tooltip="Tooltip for this input"
-                className={{ root: 'mb-1' }}
+                className={{ root: 'mb-1 w-80' }}
                 placeholder="Placeholder"
               />
               <Button type="submit">Submit</Button>

diff --git a/src/forms/NewFormikTextField.tsx b/src/forms/NewFormikTextField.tsx
@@ -91,7 +91,7 @@ export function FormikTextField({
 
   if (name) {
     return (
-      <div className={twMerge('w-80', className?.root)}>
+      <div className={twMerge('w-full', className?.root)}>
         <TextField
           id={id}
           data={data}
@@ -115,7 +115,7 @@ export function FormikTextField({
     )
   } else {
     return (
-      <div className={twMerge('w-80', className?.root)}>
+      <div className={twMerge('w-full', className?.root)}>
         <TextField
           id={id}
           data={data}

diff --git a/src/forms/NewFormikTextareaField.stories.tsx b/src/forms/NewFormikTextareaField.stories.tsx
@@ -25,7 +25,7 @@ export const Default = () => (
                 name="name"
                 label="Label"
                 tooltip="Tooltip for this input"
-                className={{ root: 'mb-1' }}
+                className={{ root: 'mb-1 w-96' }}
                 placeholder="Placeholder"
               />
               <Button type="submit">Submit</Button>

diff --git a/src/forms/NumberField.stories.tsx b/src/forms/NumberField.stories.tsx
@@ -10,7 +10,11 @@ export function Default() {
         precision (negative and positive) and its value is maintained as a
         string.
       </div>
-      <NumberField value={value} onChange={(newValue) => setValue(newValue)} />
+      <NumberField
+        value={value}
+        onChange={(newValue) => setValue(newValue)}
+        className={{ field: 'w-80' }}
+      />
       <div>Value: {value}</div>
     </div>
   )

diff --git a/src/forms/NumberField.tsx b/src/forms/NumberField.tsx
@@ -116,7 +116,7 @@ export function NumberField({
         />
       )}
 
-      <div className="flex flex-row items-center gap-2">
+      <div className="flex w-full flex-row items-center gap-2">
         <input
           id={id}
           data-cy={data?.cy}

diff --git a/src/forms/TextField.stories.tsx b/src/forms/TextField.stories.tsx
@@ -11,7 +11,9 @@ export const Default = () => {
       <TextField
         label="Label"
         tooltip="Tooltip for this input"
-        className={{ field: 'mb-1' }}
+        className={{
+          field: 'mb-1 w-80',
+        }}
         placeholder="Placeholder"
         value={value}
         onChange={setValue}

diff --git a/src/forms/TextField.tsx b/src/forms/TextField.tsx
@@ -124,8 +124,8 @@ export function TextField({
         />
       )}
 
-      <div className="flex flex-row items-center gap-2">
-        <div className="relative">
+      <div className="flex w-full flex-row items-center gap-2">
+        <div className="relative w-full">
           {name && field ? (
             <input
               {...field}

diff --git a/src/forms/TextareaField.stories.tsx b/src/forms/TextareaField.stories.tsx
@@ -14,6 +14,7 @@ export const Default = () => {
         placeholder="Placeholder"
         value={value}
         onChange={setValue}
+        className={{ root: 'w-[30rem]' }}
       />
     </div>
   )

diff --git a/src/forms/TextareaField.tsx b/src/forms/TextareaField.tsx
@@ -74,7 +74,6 @@ export interface TextareaFieldOnChangeProps extends TextareaFieldProps {
  * @param className - The optional className object allows you to override the default styling.
  * @returns Text field component with optional label, tooltip, error message and icon.
  */
-
 export function TextareaField({
   id,
   data,
@@ -98,7 +97,7 @@ export function TextareaField({
   ...props
 }: TextareaFieldNameProps | TextareaFieldOnChangeProps) {
   return (
-    <div className={twMerge('flex flex-col', className?.root)}>
+    <div className={twMerge('flex w-full flex-col', className?.root)}>
       <div
         className={twMerge(
           'flex w-full flex-row',
-Original file line number
+Diff line change
@@ Expand Up / @@ -116,7 +116,7 @@ export function NumberField({ @@
             />
           )}
-          <div className="flex flex-row items-center gap-2">
+          <div className="flex w-full flex-row items-center gap-2">
             <input
               id={id}
               data-cy={data?.cy}
@@ Expand Down @@