From 3ddcf541c61a7de98a224e16756b39139c7c626f Mon Sep 17 00:00:00 2001
From: Stoyan Delev <stoyan.delev@news.co.uk>
Date: Thu, 15 Jun 2023 09:10:29 +0300
Subject: [PATCH] feat(902): select panel with min and max size

---
 src/select/__tests__/select.stories.tsx | 16 ++++++++++++++++
 src/select/styled.tsx                   |  4 ++++
 src/select/types.ts                     |  2 ++
 3 files changed, 22 insertions(+)

diff --git a/src/select/__tests__/select.stories.tsx b/src/select/__tests__/select.stories.tsx
index 9f4a3763f4..17121a6009 100644
--- a/src/select/__tests__/select.stories.tsx
+++ b/src/select/__tests__/select.stories.tsx
@@ -941,6 +941,22 @@ export const StoryOverrides = () => {
         </Select>
         <AssistiveText id="id-ov-6-at">Assistive Text</AssistiveText>
       </StorybookCase>
+
+      <StorybookCase title="Min and Max width overrides">
+        <Label htmlFor="id-ov-7">Label</Label>
+        <Select
+          id="id-ov-7"
+          aria-describedby="id-ov-7-at"
+          overrides={{button: {width: '200px'}, panel: {minWidth: '300px'}}}
+        >
+          {items.map(item => (
+            <SelectOption key={item} value={item}>
+              {item}
+            </SelectOption>
+          ))}
+        </Select>
+        <AssistiveText id="id-ov-7-at">Assistive Text</AssistiveText>
+      </StorybookCase>
     </StorybookPage>
   );
 };
diff --git a/src/select/styled.tsx b/src/select/styled.tsx
index bffdba70df..edbf297688 100644
--- a/src/select/styled.tsx
+++ b/src/select/styled.tsx
@@ -126,6 +126,10 @@ export const StyledSelectPanel = styled.div<{
 
   ${({$size}) =>
     getResponsiveSize('maxHeight', `select.${$size}.panel`, '', 'maxHeight')};
+  ${({$size}) =>
+    getResponsiveSize('minWidth', `select.${$size}.panel`, '', 'minWidth')};
+  ${({$size}) =>
+    getResponsiveSize('maxWidth', `select.${$size}.panel`, '', 'maxWidth')};
 `;
 
 export const StyledModalPanel = styled.div`
diff --git a/src/select/types.ts b/src/select/types.ts
index 4677c03c3f..0a403caa11 100644
--- a/src/select/types.ts
+++ b/src/select/types.ts
@@ -32,6 +32,8 @@ export interface SelectButtonOverrides extends EnhancerOverrides {
 
 export interface SelectPanelOverrides extends LogicalProps {
   maxHeight?: MQ<string>;
+  minWidth?: MQ<string>;
+  maxWidth?: MQ<string>;
   stylePreset?: MQ<string>;
   /**
    * @deprecated This property is deprecated and will be removed in the next major release. Use `marginBlock` instead.