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

* fix minWidth

---------

Co-authored-by: Maxime BAUCHET <[email protected]>
Co-authored-by: severinlandolt <[email protected]>

Author: 3 people

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}

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}
       >

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}
       >

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]",
+  },
+};

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]",
+  },
+};

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]",
+  },
+};