feat: Update SelectPicker constants for font size, icon size, and control size

Author: AbhishekA1509

src/Shared/Components/SelectPicker/constants.ts

@@ -0,0 +1,20 @@
+import { ComponentSizeType } from '@Shared/constants'
+import { SelectPickerProps } from './type'
+
+export const SELECT_PICKER_FONT_SIZE_MAP: Record<SelectPickerProps['size'], string> = {
+    [ComponentSizeType.small]: '12px',
+    [ComponentSizeType.medium]: '13px',
+    [ComponentSizeType.large]: '13px',
+}
+
+export const SELECT_PICKER_ICON_SIZE_MAP: Record<SelectPickerProps['size'], { width: string; height: string }> = {
+    [ComponentSizeType.small]: { width: '12px', height: '12px' },
+    [ComponentSizeType.medium]: { width: '16px', height: '16px' },
+    [ComponentSizeType.large]: { width: '16px', height: '16px' },
+}
+
+export const SELECT_PICKER_CONTROL_SIZE_MAP: Record<SelectPickerProps['size'], string> = {
+    [ComponentSizeType.small]: 'auto',
+    [ComponentSizeType.medium]: 'auto',
+    [ComponentSizeType.large]: '36px',
+}

src/Shared/Components/SelectPicker/utils.ts

@@ -17,8 +17,8 @@
 import { CHECKBOX_VALUE } from '@Common/Types'
 import { ComponentSizeType } from '@Shared/constants'
 import { GroupBase, MultiValue, OptionsOrGroups, StylesConfig } from 'react-select'
-import { getComponentSizeMagnitude } from '@Shared/Helpers'
 import { SelectPickerOptionType, SelectPickerProps, SelectPickerVariantType } from './type'
+import { SELECT_PICKER_CONTROL_SIZE_MAP, SELECT_PICKER_FONT_SIZE_MAP, SELECT_PICKER_ICON_SIZE_MAP } from './constants'
 
 const getMenuWidthFromSize = <OptionValue, IsMulti extends boolean>(
     menuSize: SelectPickerProps<OptionValue, IsMulti>['menuSize'],
@@ -78,24 +78,6 @@ const getOptionBgColor = <OptionValue>(
     return 'var(--N0)'
 }
 
-const getFontSize = (size: ComponentSizeType): string => {
-    switch (size) {
-        case ComponentSizeType.small:
-            return '12px'
-        default:
-            return '13px'
-    }
-}
-
-const getIconSize = (size: ComponentSizeType): { width: string; height: string } => {
-    switch (size) {
-        case ComponentSizeType.small:
-            return { width: '12px', height: '12px' }
-        default:
-            return { width: '16px', height: '16px' }
-    }
-}
-
 export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
     error,
     size,
@@ -136,8 +118,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
     }),
     control: (base, state) => ({
         ...base,
-        minHeight:
-            getComponentSizeMagnitude(size) <= getComponentSizeMagnitude(ComponentSizeType.medium) ? 'auto' : '36px',
+        minHeight: SELECT_PICKER_CONTROL_SIZE_MAP[size],
         minWidth: '56px',
         boxShadow: 'none',
         backgroundColor: 'var(--N50)',
@@ -185,7 +166,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
     }),
     dropdownIndicator: (base, state) => ({
         ...base,
-        ...getIconSize(size),
+        ...SELECT_PICKER_ICON_SIZE_MAP[size],
         display: 'flex',
         alignItems: 'center',
         flexShrink: '0',
@@ -196,8 +177,8 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
     }),
     clearIndicator: (base) => ({
         ...base,
+        ...SELECT_PICKER_ICON_SIZE_MAP[size],
         padding: 0,
-        ...getIconSize(size),
         display: 'flex',
         alignItems: 'center',
         flexShrink: '0',
@@ -302,7 +283,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
         margin: 0,
         padding: 0,
         color: 'var(--N900)',
-        size: getFontSize(size),
+        size: '13px',
         fontWeight: 400,
         lineHeight: '20px',
         overflow: 'hidden',
@@ -312,7 +293,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
     placeholder: (base) => ({
         ...base,
         color: 'var(--N500)',
-        fontSize: getFontSize(size),
+        fontSize: SELECT_PICKER_FONT_SIZE_MAP[size],
         lineHeight: '20px',
         fontWeight: 400,
         margin: 0,
@@ -329,7 +310,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
         ...base,
         margin: 0,
         color: 'var(--N900)',
-        fontSize: getFontSize(size),
+        fontSize: SELECT_PICKER_FONT_SIZE_MAP[size],
         fontWeight: 400,
         lineHeight: '20px',
         ...(getVariantOverrides(variant)?.singleValue(base, state) || {}),

src/Shared/Helpers.tsx

@@ -42,7 +42,7 @@ import {
 import { ReactComponent as ICPullRequest } from '../Assets/Icon/ic-pull-request.svg'
 import { ReactComponent as ICTag } from '../Assets/Icon/ic-tag.svg'
 import { ReactComponent as ICWebhook } from '../Assets/Icon/ic-webhook.svg'
-import { ComponentSizeType, DEPLOYMENT_STATUS, TIMELINE_STATUS } from './constants'
+import { DEPLOYMENT_STATUS, TIMELINE_STATUS } from './constants'
 import {
     AggregatedNodes,
     DeploymentStatusDetailsBreakdownDataType,
@@ -821,20 +821,3 @@ export const getDefaultValueFromType = (value: unknown) => {
             return null
     }
 }
-
-export const getComponentSizeMagnitude = (size: ComponentSizeType): number => {
-    switch (size) {
-        case ComponentSizeType.xs:
-            return 1
-        case ComponentSizeType.small:
-            return 2
-        case ComponentSizeType.medium:
-            return 3
-        case ComponentSizeType.large:
-            return 4
-        case ComponentSizeType.xl:
-            return 5
-        default:
-            return 0
-    }
-}