Merge pull request #666 from devtron-labs/feat/select-picker-variants

feat: add compact & border less variant for select picker

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.10.4",
+    "version": "1.10.5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -83,7 +83,7 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
                     value={selectedChartType ?? chartTypeOptions[0]}
                     options={chartTypeOptions}
                     onChange={handleChartTypeChange}
-                    variant={SelectPickerVariantType.BORDER_LESS}
+                    variant={SelectPickerVariantType.COMPACT}
                 />
             </div>
             <div className="chart-version-options flex" data-testid="chart-version-options">
@@ -93,7 +93,7 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
                     value={selectedChartVersion ?? chartVersionOptions[0]}
                     options={chartVersionOptions}
                     onChange={handleChartVersionChange}
-                    variant={SelectPickerVariantType.BORDER_LESS}
+                    variant={SelectPickerVariantType.COMPACT}
                 />
             </div>
         </div>

src/Common/ChartVersionAndTypeSelector.tsx

@@ -147,7 +147,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
                           name: 'deployment-config-diff-deployment-selector',
                           inputId: 'deployment-config-diff-deployment-selector',
                           classNamePrefix: 'deployment-config-diff-deployment-selector',
-                          variant: SelectPickerVariantType.BORDER_LESS,
+                          variant: SelectPickerVariantType.COMPACT,
                           options: pipelineDeploymentsOptions,
                           placeholder: 'Select Deployment',
                           value: getSelectPickerOptionByValue(pipelineDeploymentsOptions, compareWfrId, null),

src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx

@@ -169,7 +169,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                             {...row.data[key].props}
                             inputId={`data-table-${row.id}-${key}-cell`}
                             classNamePrefix="dynamic-data-table__cell__select-picker"
-                            variant={SelectPickerVariantType.BORDER_LESS}
+                            variant={SelectPickerVariantType.COMPACT}
                             value={getSelectPickerOptionByValue(
                                 row.data[key].props?.options,
                                 row.data[key].value,
@@ -191,7 +191,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                             isCreatable={isCreatable}
                             isClearable
                             {...props}
-                            variant={SelectPickerVariantType.BORDER_LESS}
+                            variant={SelectPickerVariantType.COMPACT}
                             classNamePrefix="dynamic-data-table__cell__select-picker-text-area"
                             inputId={`data-table-${row.id}-${key}-cell`}
                             minHeight={20}

src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

@@ -34,7 +34,7 @@ export const DropdownNode = ({ id, data, isConnectable }: NodeProps<DropdownNode
             <SelectPicker<string | number, false>
                 {...restData}
                 classNamePrefix="graph-visualizer-dropdown-node"
-                variant={SelectPickerVariantType.BORDER_LESS}
+                variant={SelectPickerVariantType.COMPACT}
                 menuPortalTarget={document.querySelector('.graph-visualizer')}
                 menuSize={ComponentSizeType.xs}
                 fullWidth

src/Shared/Components/GraphVisualizer/components/DropdownNode.tsx

@@ -360,8 +360,12 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
             e.preventDefault()
         }
 
-        if (e.key === 'Escape' && !selectRef.current.props.menuIsOpen) {
-            selectRef.current.blur()
+        if (e.key === 'Escape') {
+            e.stopPropagation()
+
+            if (!selectRef.current.props.menuIsOpen) {
+                selectRef.current.blur()
+            }
         }
 
         onKeyDown?.(e)

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

@@ -22,16 +22,19 @@ export const SELECT_PICKER_FONT_SIZE_MAP: Record<SelectPickerProps['size'], CSSP
     [ComponentSizeType.small]: '12px',
     [ComponentSizeType.medium]: '13px',
     [ComponentSizeType.large]: '13px',
+    [ComponentSizeType.xl]: '16px',
 }
 
 export const SELECT_PICKER_ICON_SIZE_MAP: Record<SelectPickerProps['size'], Pick<CSSProperties, 'width' | 'height'>> = {
     [ComponentSizeType.small]: { width: '12px', height: '12px' },
     [ComponentSizeType.medium]: { width: '16px', height: '16px' },
     [ComponentSizeType.large]: { width: '16px', height: '16px' },
+    [ComponentSizeType.xl]: { width: '16px', height: '16px' },
 }
 
 export const SELECT_PICKER_CONTROL_SIZE_MAP: Record<SelectPickerProps['size'], CSSProperties['minHeight']> = {
     [ComponentSizeType.small]: 'auto',
     [ComponentSizeType.medium]: 'auto',
     [ComponentSizeType.large]: '36px',
+    [ComponentSizeType.xl]: '36px',
 }

src/Shared/Components/SelectPicker/constants.ts

@@ -127,6 +127,7 @@ declare module 'react-select/base' {
 export enum SelectPickerVariantType {
     DEFAULT = 'default',
     BORDER_LESS = 'border-less',
+    COMPACT = 'compact',
 }
 
 export type SelectPickerProps<OptionValue = number | string, IsMulti extends boolean = false> = Pick<
@@ -200,7 +201,10 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
          *
          * @default 'ComponentSizeType.medium'
          */
-        size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.large | ComponentSizeType.small>
+        size?: Extract<
+            ComponentSizeType,
+            ComponentSizeType.medium | ComponentSizeType.large | ComponentSizeType.small | ComponentSizeType.xl
+        >
         /**
          * Content to be shown in a tippy when disabled
          */