fix: allow custom min width for select components (#952)

* fix minWidth --------- Co-authored-by: Maxime BAUCHET <[email protected]> Co-authored-by: severinlandolt <[email protected]>
tremorlabs · May 19, 2024 · ded171b · ded171b
1 parent e3d1907
commit ded171b
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 15 deletions.
diff --git a/src/components/input-elements/MultiSelect/MultiSelect.tsx b/src/components/input-elements/MultiSelect/MultiSelect.tsx
@@ -81,6 +81,7 @@ const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>((props,
       className={tremorTwMerge(
         // common
         "w-full min-w-[10rem] relative text-tremor-default",
+        className,
       )}
     >
       <select
@@ -125,11 +126,6 @@ const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>((props,
           }) as any
         }
         disabled={disabled}
-        className={tremorTwMerge(
-          // common
-          "w-full min-w-[10rem] relative text-tremor-default",
-          className,
-        )}
         id={id}
         multiple
         {...other}

diff --git a/src/components/input-elements/SearchSelect/SearchSelect.tsx b/src/components/input-elements/SearchSelect/SearchSelect.tsx
@@ -82,6 +82,7 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
       className={tremorTwMerge(
         // common
         "w-full min-w-[10rem] relative text-tremor-default",
+        className,
       )}
     >
       <select
@@ -125,11 +126,6 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
           }) as any
         }
         disabled={disabled}
-        className={tremorTwMerge(
-          // common
-          "w-full min-w-[10rem] relative text-tremor-default",
-          className,
-        )}
         id={id}
         {...other}
       >

diff --git a/src/components/input-elements/Select/Select.tsx b/src/components/input-elements/Select/Select.tsx
@@ -64,6 +64,7 @@ const Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {
       className={tremorTwMerge(
         // common
         "w-full min-w-[10rem] relative text-tremor-default",
+        className,
       )}
     >
       <select
@@ -107,11 +108,6 @@ const Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {
           }) as any
         }
         disabled={disabled}
-        className={tremorTwMerge(
-          // common
-          "w-full min-w-[10rem] relative text-tremor-default",
-          className,
-        )}
         id={id}
         {...other}
       >

diff --git a/src/stories/input-elements/MultiSelect.stories.tsx b/src/stories/input-elements/MultiSelect.stories.tsx
@@ -66,3 +66,10 @@ export const Form: Story = {
     required: true,
   },
 };
+
+export const WithCustomMinWidth: Story = {
+  render: SimpleMultiSelect,
+  args: {
+    className: "min-w-min w-[95px]",
+  },
+};
diff --git a/src/stories/input-elements/SearchSelect.stories.tsx b/src/stories/input-elements/SearchSelect.stories.tsx
@@ -92,3 +92,10 @@ export const ServerSideRendering: Story = {
     required: true,
   },
 };
+
+export const WithCustomMinWidth: Story = {
+  render: SimpleSearchSelect,
+  args: {
+    className: "min-w-min w-[95px]",
+  },
+};
diff --git a/src/stories/input-elements/Select.stories.tsx b/src/stories/input-elements/Select.stories.tsx
@@ -83,3 +83,10 @@ export const Form: Story = {
     required: true,
   },
 };
+
+export const WithCustomMinWidth: Story = {
+  render: SimpleSelect,
+  args: {
+    className: "min-w-min w-[95px]",
+  },
+};