feat: add support for size

Author: eshankvaish

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

@@ -2,6 +2,7 @@ import ReactSelect, { ControlProps, MenuProps } from 'react-select'
 import { useCallback, useMemo } from 'react'
 import { ReactComponent as ErrorIcon } from '@Icons/ic-warning.svg'
 import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled-override.svg'
+import { ComponentSizeType } from '@Shared/constants'
 import { getCommonSelectStyle } from './utils'
 import {
     SelectPickerClearIndicator,
@@ -22,16 +23,18 @@ const SelectPicker = ({
     placeholder = 'Select a option',
     label,
     showSelectedOptionIcon = true,
+    size = ComponentSizeType.medium,
     ...props
 }: SelectPickerProps) => {
     const { inputId, required } = props
 
     const selectStyles = useMemo(
         () =>
             getCommonSelectStyle({
-                hasError: !!error,
+                error,
+                size,
             }),
-        [error],
+        [error, size],
     )
 
     const renderControl = useCallback(

src/Shared/Components/SelectPicker/type.ts

@@ -1,4 +1,5 @@
 import { OptionType } from '@Common/Types'
+import { ComponentSizeType } from '@Shared/constants'
 import { ReactElement, ReactNode } from 'react'
 import { Props as ReactSelectProps } from 'react-select'
 
@@ -41,4 +42,10 @@ export interface SelectPickerProps
      * @default 'true'
      */
     showSelectedOptionIcon?: boolean
+    /**
+     * Height of the dropdown
+     *
+     * @default 'ComponentSizeType.medium'
+     */
+    size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.large>
 }

src/Shared/Components/SelectPicker/utils.ts

@@ -1,4 +1,7 @@
-export const getCommonSelectStyle = ({ hasError }: { hasError: boolean }) => ({
+import { ComponentSizeType } from '@Shared/constants'
+import { SelectPickerProps } from './type'
+
+export const getCommonSelectStyle = ({ error, size }: Pick<SelectPickerProps, 'error' | 'size'>) => ({
     container: (base, state) => ({
         ...base,
         ...(state.isDisabled && {
@@ -22,11 +25,10 @@ export const getCommonSelectStyle = ({ hasError }: { hasError: boolean }) => ({
     }),
     control: (base, state) => ({
         ...base,
-        // Add support for configurable: 36px, 28px
-        minHeight: 'auto',
+        minHeight: size === ComponentSizeType.medium ? 'auto' : '36px',
         boxShadow: 'none',
         backgroundColor: 'var(--N50)',
-        border: `1px solid ${hasError ? 'var(--R500)' : 'var(--N200)'}`,
+        border: `1px solid ${error ? 'var(--R500)' : 'var(--N200)'}`,
         cursor: state.isDisabled ? 'not-allowed' : 'pointer',
         padding: '5px 8px',
         gap: '8px',

src/Shared/constants.tsx

@@ -410,3 +410,9 @@ export enum K8sResourcePayloadAppType {
     HELM_APP = 1,
     EXTERNAL_ARGO_APP = 2,
 }
+
+export enum ComponentSizeType {
+    small = 'small',
+    medium = 'medium',
+    large = 'large',
+}