feat: add helper text and update disabled state

Author: eshankvaish

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

@@ -1,47 +1,57 @@
 import ReactSelect, { ControlProps, MenuProps, Props as ReactSelectProps } from 'react-select'
 import { ReactElement, ReactNode, 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 { getCommonSelectStyle } from './utils'
 import {
     SelectPickerControl,
     SelectPickerDropdownIndicator,
+    SelectPickerLoadingIndicator,
     SelectPickerMenu,
     SelectPickerOption,
-    SelectPickerLoadingIndicator,
 } from './common'
 import { SelectPickerOptionType } from './type'
 
+type SelectProps = ReactSelectProps<SelectPickerOptionType>
+
 export interface SelectPickerProps
     extends Pick<
-        ReactSelectProps<SelectPickerOptionType>,
-        | 'options'
-        | 'value'
-        | 'isMulti'
-        | 'onChange'
-        | 'isSearchable'
-        | 'isClearable'
-        | 'isLoading'
-        | 'placeholder'
-        | 'hideSelectedOptions'
-        | 'controlShouldRenderValue'
-        | 'backspaceRemovesValue'
-        | 'closeMenuOnSelect'
-        | 'isDisabled'
-        | 'isLoading'
-        | 'inputId'
-    > {
+            SelectProps,
+            | 'options'
+            | 'value'
+            | 'isMulti'
+            | 'onChange'
+            | 'isSearchable'
+            | 'isClearable'
+            | 'isLoading'
+            | 'placeholder'
+            | 'hideSelectedOptions'
+            | 'controlShouldRenderValue'
+            | 'backspaceRemovesValue'
+            | 'closeMenuOnSelect'
+            | 'isDisabled'
+            | 'isLoading'
+            | 'required'
+        >,
+        Required<Pick<SelectProps, 'classNamePrefix' | 'inputId'>> {
     icon?: ReactElement
     error?: ReactNode
     renderMenuListFooter?: () => ReactNode
+    helperText?: ReactNode
+    label?: ReactNode
 }
 
 const SelectPicker = ({
     error,
     icon,
     renderMenuListFooter,
+    helperText,
     placeholder = 'Select a option',
+    label,
     ...props
 }: SelectPickerProps) => {
+    const { inputId, required } = props
+
     const selectStyles = useMemo(
         () =>
             getCommonSelectStyle({
@@ -61,26 +71,53 @@ const SelectPicker = ({
     )
 
     return (
-        <div>
-            <ReactSelect<SelectPickerOptionType, boolean>
-                {...props}
-                placeholder={placeholder}
-                components={{
-                    IndicatorSeparator: null,
-                    LoadingIndicator: SelectPickerLoadingIndicator,
-                    DropdownIndicator: SelectPickerDropdownIndicator,
-                    Control: renderControl,
-                    Option: SelectPickerOption,
-                    Menu: renderMenu,
-                }}
-                styles={selectStyles}
-            />
+        <div className="flex column left top dc__gap-4">
+            {/* TODO Eshank: Common out for fields */}
+            <div className="flex column left top dc__gap-6 w-100">
+                {label && (
+                    <label
+                        className="fs-13 lh-20 cn-7 fw-4 dc__block mb-0"
+                        htmlFor={inputId}
+                        data-testid={`label-${inputId}`}
+                    >
+                        {typeof label === 'string' ? (
+                            <span className={`flex left ${required ? 'dc__required-field' : ''}`}>
+                                <span className="dc__truncate">{label}</span>
+                            </span>
+                        ) : (
+                            label
+                        )}
+                    </label>
+                )}
+                <ReactSelect<SelectPickerOptionType, boolean>
+                    {...props}
+                    placeholder={placeholder}
+                    components={{
+                        IndicatorSeparator: null,
+                        LoadingIndicator: SelectPickerLoadingIndicator,
+                        DropdownIndicator: SelectPickerDropdownIndicator,
+                        Control: renderControl,
+                        Option: SelectPickerOption,
+                        Menu: renderMenu,
+                        // TODO Eshank: need to export variants of ValueContainer: Icon, No Icon etc
+                    }}
+                    styles={selectStyles}
+                    className="w-100"
+                />
+            </div>
             {error && (
                 <div className="flex left dc__gap-4 cr-5 fs-11 lh-16 fw-4">
                     <div className="dc__no-shrink dc__align-self-start p-2">
                         <ErrorIcon className="icon-dim-12 form__icon--error" />
                     </div>
-                    <span>{error}</span>
+                    <span className="dc__ellipsis-right__2nd-line">{error}</span>
+                </div>
+            )}
+            {/* TODO Eshank: Common out for input fields */}
+            {helperText && (
+                <div className="flex left dc__gap-4 fs-11 lh-16 cn-7">
+                    <ICInfoFilledOverride className="icon-dim-16 dc__no-shrink dc__align-self-start" />
+                    <span className="dc__ellipsis-right__2nd-line">{helperText}</span>
                 </div>
             )}
         </div>

src/Shared/Components/SelectPicker/utils.ts

@@ -24,11 +24,12 @@ export const getCommonSelectStyle = ({ hasError }: { hasError: boolean }) => ({
         // Add support for configurable: 36px, 28px
         minHeight: 'auto',
         boxShadow: 'none',
-        backgroundColor: state.isDisabled ? 'var(--N100)' : 'var(--N50)',
+        backgroundColor: 'var(--N50)',
         border: `1px solid ${hasError ? 'var(--R500)' : 'var(--N200)'}`,
         cursor: state.isDisabled ? 'not-allowed' : 'pointer',
         padding: '5px 8px',
         gap: '8px',
+        opacity: state.isDisabled ? 0.5 : 1,
 
         '&:hover': {
             borderColor: state.isDisabled ? 'var(--N200)' : 'var(--N300)',
@@ -100,9 +101,9 @@ export const getCommonSelectStyle = ({ hasError }: { hasError: boolean }) => ({
         fontWeight: 400,
         lineHeight: '20px',
     }),
-    placeholder: (base, state) => ({
+    placeholder: (base) => ({
         ...base,
-        color: state.isDisabled ? 'var(--N600)' : 'var(--N500)',
+        color: 'var(--N500)',
         fontSize: '13px',
         lineHeight: '20px',
         fontWeight: 400,