feat: add iconLeft prop to AsyncSelect

nulogy · Dec 16, 2024 · c9aea1b · c9aea1b
1 parent 31ccccb
commit c9aea1b
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 28 deletions.
diff --git a/src/AsyncSelect/AsyncSelect.story.tsx b/src/AsyncSelect/AsyncSelect.story.tsx
@@ -22,10 +22,6 @@ export const Default = () => (
   />
 );
 
-Default.story = {
-  name: "default",
-};
-
 export const WithDefaultOptions = () => (
   <AsyncSelect
     placeholder="Enter a province"
@@ -147,6 +143,16 @@ export const Controlled = () => {
   );
 };
 
-Controlled.story = {
-  name: "controlled",
-};
+export const WithIcon = () => (
+  <AsyncSelect
+    iconLeft="search"
+    placeholder="Search for a province"
+    onChange={action("selection changed")}
+    onBlur={action("blurred")}
+    className="Select"
+    classNamePrefix="SelectTest"
+    labelText="Province"
+    onInputChange={action("typed input value changed")}
+    loadOptions={loadMatchingProvinces}
+  />
+);
diff --git a/src/AsyncSelect/AsyncSelect.tsx b/src/AsyncSelect/AsyncSelect.tsx
@@ -1,4 +1,5 @@
 import React, { forwardRef, ReactNode, MutableRefObject } from "react";
+import { IconName } from "@nulogy/icons";
 import Select from "react-select/base";
 import AsyncReactSelect from "react-select/async";
 import { AsyncProps } from "react-select/async";
@@ -36,6 +37,7 @@ type AsyncCustomProps<Option, IsMulti extends boolean, Group extends GroupBase<O
   multiselect?: AsyncProps<Option, IsMulti, Group>["isMulti"];
   maxHeight?: string;
   defaultValue?: AsyncProps<Option, IsMulti, Group>["defaultInputValue"];
+  iconLeft?: IconName | "loading";
 };
 
 export type AsyncSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<
@@ -80,6 +82,7 @@ const AsyncSelect = forwardRef(
       loadOptions,
       isClearable,
       variant,
+      iconLeft,
       ...props
     }: AsyncSelectProps<Option, IsMulti, Group>,
     ref:
@@ -106,6 +109,7 @@ const AsyncSelect = forwardRef(
             defaultInputValue={defaultValue}
             placeholder={placeholder || t("start typing")}
             styles={customStyles<Option, IsMulti, Group>({
+              hasIcon: Boolean(iconLeft),
               theme,
               error,
               maxHeight,
@@ -135,7 +139,11 @@ const AsyncSelect = forwardRef(
                   {props.children}
                 </SelectOption>
               ),
-              Control: SelectControl,
+              Control: (props) => (
+                <SelectControl iconLeft={iconLeft} {...props}>
+                  {props.children}
+                </SelectControl>
+              ),
               MultiValue: SelectMultiValue,
               ClearIndicator: SelectClearIndicator,
               DropdownIndicator: SelectDropdownIndicator,

diff --git a/src/AsyncSelect/AsyncSelectComponents.tsx b/src/AsyncSelect/AsyncSelectComponents.tsx
@@ -14,20 +14,26 @@ import type { OptionProps } from "react-windowed-select";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { StyledOption } from "../Select/SelectOption";
+import { IconName } from "@nulogy/icons";
+import { InputIcon } from "../Icon/Icon";
 
-export const SelectControl = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  props: ControlProps<Option, IsMulti, Group>
-) => {
-  // eslint-disable-next-line react/prop-types
-  const { isFocused } = props;
+export const SelectControl = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({
+  iconLeft,
+  isFocused,
+  children,
+  ...props
+}: ControlProps<Option, IsMulti, Group> & {
+  iconLeft?: IconName | "loading";
+}) => {
   return (
     <div data-testid="select-control">
       <selectComponents.Control
         className={isFocused ? "nds-select--is-focused" : null}
         isFocused={isFocused}
         {...props}
       >
-        {props.children}
+        {iconLeft && <InputIcon left="x1" icon={iconLeft} size="x3" />}
+        {children}
       </selectComponents.Control>
     </div>
   );

diff --git a/src/Icon/Icon.tsx b/src/Icon/Icon.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled, { useTheme } from "styled-components";
-import { space, SpaceProps } from "styled-system";
+import { position, PositionProps, space, SpaceProps } from "styled-system";
 import icons from "@nulogy/icons";
 import { IconName } from "@nulogy/icons";
 import LoadingIcon from "./LoadingIcon";
@@ -101,4 +101,15 @@ export function InlineIcon(props: IconProps) {
   );
 }
 
+export const InputIcon = styled(Icon)<PositionProps>(
+  ({ theme }) => ({
+    position: "absolute",
+    color: theme.colors.midGrey,
+    bottom: "50%",
+    transform: "translateY(50%)",
+    pointerEvents: "none",
+  }),
+  position
+);
+
 export default Icon;
diff --git a/src/Input/InputField.tsx b/src/Input/InputField.tsx
@@ -11,6 +11,7 @@ import type { DefaultNDSThemeType } from "../theme";
 import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import Prefix from "./Prefix";
 import Suffix from "./Suffix";
+import { InputIcon } from "../Icon/Icon";
 
 type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size" | "height" | "width">;
 
@@ -67,7 +68,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
         <Flex alignItems="flex-start">
           <Prefix prefix={prefix} prefixWidth={prefixWidth} textAlign={prefixAlignment} />
           <InputWrapper maxWidth={inputWidth}>
-            {iconLeft && <StyledInputIcon left="x1" icon={iconLeft} size={iconLeftSize} variant={variant} />}
+            {iconLeft && <InputIcon left="x1" icon={iconLeft} size={iconLeftSize} />}
             <StyledInput
               paddingLeft={iconLeft ? `calc(${theme.space[iconLeftSize]} + ${theme.space.x1_5})` : theme.space.x1}
               paddingRight={iconRight ? `calc(${theme.space[iconRightSize]} + ${theme.space.x1_5})` : theme.space.x1}
@@ -81,7 +82,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
               inputWidth={inputWidth}
               {...props}
             />
-            {iconRight && <StyledInputIcon right="x1" icon={iconRight} size={iconRightSize} variant={variant} />}
+            {iconRight && <InputIcon right="x1" icon={iconRight} size={iconRightSize} />}
           </InputWrapper>
           <Suffix suffix={suffix} suffixWidth={suffixWidth} textAlign={suffixAlignment} />
         </Flex>
@@ -143,17 +144,6 @@ const StyledInput = styled.input<StyledInputProps>(
   space
 );
 
-const StyledInputIcon = styled(Icon)<{ variant: ComponentVariant } & PositionProps>(
-  ({ theme }) => ({
-    position: "absolute",
-    color: theme.colors.midGrey,
-    bottom: "50%",
-    transform: "translateY(50%)",
-    pointerEvents: "none",
-  }),
-  position
-);
-
 const cssForState = ({
   disabled,
   error,

diff --git a/src/Select/customReactSelectStyles.tsx b/src/Select/customReactSelectStyles.tsx
@@ -96,6 +96,7 @@ const customStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Op
   error,
   maxHeight,
   windowed,
+  hasIcon,
   variant,
   hasDefaultOptions = true,
 }) => {
@@ -169,6 +170,9 @@ const customStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Op
           theme,
         }),
       },
+      ...(hasIcon && {
+        paddingLeft: `calc(${theme.space.x3} + ${theme.space.x1_5})`,
+      }),
     }),
     dropdownIndicator: (provided) => ({
       ...provided,