feat: add support for variable menu sizes

Author: eshankvaish

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -28,6 +28,7 @@ const SelectPicker = ({
     size = ComponentSizeType.medium,
     disabledTippyContent,
     showSelectedOptionsCount = false,
+    menuSize,
     ...props
 }: SelectPickerProps) => {
     const { inputId, required, isDisabled } = props
@@ -37,8 +38,9 @@ const SelectPicker = ({
             getCommonSelectStyle({
                 error,
                 size,
+                menuSize,
             }),
-        [error, size],
+        [error, size, menuSize],
     )
 
     const renderControl = useCallback(

src/Shared/Components/SelectPicker/type.ts

@@ -28,6 +28,7 @@ export interface SelectPickerProps
             | 'isDisabled'
             | 'isLoading'
             | 'required'
+            | 'menuIsOpen'
         >,
         Required<Pick<SelectProps, 'classNamePrefix' | 'inputId' | 'name'>> {
     icon?: ReactElement
@@ -58,4 +59,12 @@ export interface SelectPickerProps
      * @default 'false'
      */
     showSelectedOptionsCount?: boolean
+    /**
+     * Width of the menu list
+     *
+     * Note: the overflow needs to be handled explicitly for non-small variants
+     *
+     * @default 'ComponentSizeType.small'
+     */
+    menuSize?: ComponentSizeType
 }

src/Shared/Components/SelectPicker/utils.ts

@@ -1,7 +1,23 @@
 import { ComponentSizeType } from '@Shared/constants'
 import { SelectPickerProps } from './type'
 
-export const getCommonSelectStyle = ({ error, size }: Pick<SelectPickerProps, 'error' | 'size'>) => ({
+const getMenuWidthFromSize = (menuSize: SelectPickerProps['menuSize']) => {
+    switch (menuSize) {
+        case ComponentSizeType.medium:
+            return '125%'
+        case ComponentSizeType.large:
+            return '150%'
+        case ComponentSizeType.small:
+        default:
+            return '100%'
+    }
+}
+
+export const getCommonSelectStyle = ({
+    error,
+    size,
+    menuSize,
+}: Pick<SelectPickerProps, 'error' | 'size' | 'menuSize'>) => ({
     container: (base, state) => ({
         ...base,
         ...(state.isDisabled && {
@@ -16,6 +32,7 @@ export const getCommonSelectStyle = ({ error, size }: Pick<SelectPickerProps, 'e
         backgroundColor: 'var(--N0)',
         border: '1px solid var(--N200)',
         boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.20)',
+        width: getMenuWidthFromSize(menuSize),
     }),
     menuList: (base) => ({
         ...base,

src/Shared/constants.tsx

@@ -411,6 +411,9 @@ export enum K8sResourcePayloadAppType {
     EXTERNAL_ARGO_APP = 2,
 }
 
+/**
+ * Size variants for components
+ */
 export enum ComponentSizeType {
     small = 'small',
     medium = 'medium',