feat: add basic small variant for SelectPicker

Author: AbhishekA1509

src/Shared/Components/SelectPicker/common.tsx

@@ -46,7 +46,7 @@ export const SelectPickerDropdownIndicator = <OptionValue,>(
 
     return (
         <components.DropdownIndicator {...props}>
-            <ICCaretDown className={`icon-dim-16 ${isDisabled ? 'scn-3' : 'scn-6'} dc__no-shrink`} />
+            <ICCaretDown className={isDisabled ? 'scn-3' : 'scn-6'} />
         </components.DropdownIndicator>
     )
 }
@@ -55,7 +55,7 @@ export const SelectPickerClearIndicator = <OptionValue,>(
     props: ClearIndicatorProps<SelectPickerOptionType<OptionValue>>,
 ) => (
     <components.ClearIndicator {...props}>
-        <ICClose className="icon-dim-16 icon-use-fill-n6 dc__no-shrink" />
+        <ICClose className="icon-use-fill-n6" />
     </components.ClearIndicator>
 )
 
@@ -100,6 +100,7 @@ export const SelectPickerValueContainer = <OptionValue, IsMulti extends boolean>
             <div className="flex left">
                 <components.ValueContainer {...props} />
             </div>
+            {/* Size will not work here need to go in details later when prioritized */}
             {showSelectedOptionsCount && selectedOptionsLength > 0 && (
                 <div className="bcb-50 dc__border eb-2 dc__border-radius-4-imp pl-5 pr-5 cb-5 fs-12 fw-6 lh-18 dc__truncate dc__no-shrink">
                     {selectedOptionsLength}

src/Shared/Components/SelectPicker/type.ts

@@ -136,11 +136,11 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
          */
         customSelectedOptionsCount?: number
         /**
-         * Height of the dropdown
+         * Size of select
          *
          * @default 'ComponentSizeType.medium'
          */
-        size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.large>
+        size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.large | ComponentSizeType.small>
         /**
          * Content to be shown in a tippy when disabled
          */

src/Shared/Components/SelectPicker/utils.ts

@@ -17,6 +17,7 @@
 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'
 
 const getMenuWidthFromSize = <OptionValue, IsMulti extends boolean>(
@@ -77,6 +78,24 @@ 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,
@@ -117,7 +136,8 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
     }),
     control: (base, state) => ({
         ...base,
-        minHeight: size === ComponentSizeType.medium ? 'auto' : '36px',
+        minHeight:
+            getComponentSizeMagnitude(size) <= getComponentSizeMagnitude(ComponentSizeType.medium) ? 'auto' : '36px',
         minWidth: '56px',
         boxShadow: 'none',
         backgroundColor: 'var(--N50)',
@@ -165,6 +185,10 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
     }),
     dropdownIndicator: (base, state) => ({
         ...base,
+        ...getIconSize(size),
+        display: 'flex',
+        alignItems: 'center',
+        flexShrink: '0',
         color: 'var(--N600)',
         padding: '0',
         transition: 'all .2s ease',
@@ -173,6 +197,10 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
     clearIndicator: (base) => ({
         ...base,
         padding: 0,
+        ...getIconSize(size),
+        display: 'flex',
+        alignItems: 'center',
+        flexShrink: '0',
 
         '&:hover': {
             backgroundColor: 'transparent',
@@ -274,7 +302,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
         margin: 0,
         padding: 0,
         color: 'var(--N900)',
-        size: '13px',
+        size: getFontSize(size),
         fontWeight: 400,
         lineHeight: '20px',
         overflow: 'hidden',
@@ -284,7 +312,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
     placeholder: (base) => ({
         ...base,
         color: 'var(--N500)',
-        fontSize: '13px',
+        fontSize: getFontSize(size),
         lineHeight: '20px',
         fontWeight: 400,
         margin: 0,
@@ -301,7 +329,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
         ...base,
         margin: 0,
         color: 'var(--N900)',
-        fontSize: '13px',
+        fontSize: getFontSize(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 { DEPLOYMENT_STATUS, TIMELINE_STATUS } from './constants'
+import { ComponentSizeType, DEPLOYMENT_STATUS, TIMELINE_STATUS } from './constants'
 import {
     AggregatedNodes,
     DeploymentStatusDetailsBreakdownDataType,
@@ -821,3 +821,20 @@ 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
+    }
+}