fix(SelectInputV2): dropdown to be at least 320px (#4373)

scaleway · Oct 24, 2024 · 291882b · 291882b
1 parent 6b53102
commit 291882b
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 1 deletion.
diff --git a/.changeset/nice-pigs-hang.md b/.changeset/nice-pigs-hang.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<SelectInputV2 />` dropdown to be at least 320px of width
diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -308,6 +308,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   -ms-transform: translate3d(0px, 4px, 0);
   transform: translate3d(0px, 4px, 0);
   width: 100%;
+  min-width: 320px;
   background-color: #ffffff;
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;

diff --git a/packages/ui/src/components/SelectInputV2/Dropdown.tsx b/packages/ui/src/components/SelectInputV2/Dropdown.tsx
@@ -59,6 +59,7 @@ const NON_SEARCHABLE_KEYS = [
 
 const StyledPopup = styled(Popup)`
   width: 100%;
+  min-width: 320px;
   background-color: ${({ theme }) => theme.colors.other.elevation.background.raised};
   color: ${({ theme }) => theme.colors.neutral.text};
   box-shadow: ${({ theme }) => `${theme.shadows.raised[0]}, ${theme.shadows.raised[1]}`};

diff --git a/packages/ui/src/components/SelectInputV2/__stories__/Playground.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/Playground.stories.tsx
@@ -6,7 +6,7 @@ export const Playground = Template.bind({})
 Playground.args = { ...Template.args, options: dataUnGrouped, helper: 'helper' }
 Playground.decorators = [
   StoryComponent => (
-    <div style={{ height: '80px' }}>
+    <div style={{ height: '80px', width: '200px' }}>
       <StoryComponent />
     </div>
   ),

diff --git a/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -882,6 +882,7 @@ exports[`UnitInput > renders click 1`] = `
   -ms-transform: translate3d(0px, 4px, 0);
   transform: translate3d(0px, 4px, 0);
   width: 100%;
+  min-width: 320px;
   background-color: #ffffff;
   color: #3f4250;
   box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;