✨Added variant and helper-text to Autocomplete

packages/eds-core-react/src/components/Autocomplete/Autocomplete.docs.mdx

@@ -153,3 +153,7 @@ Make sure to use `useMemo` if you are mutating the options in the render functio
 
 <Canvas of={ComponentStories.SelectAll} />
 
+### Variants
+
+<Canvas of={ComponentStories.Variants} />
+

packages/eds-core-react/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -6,9 +6,18 @@ import { Checkbox } from '../Checkbox'
 import { StoryFn, Meta } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { useForm, Controller } from 'react-hook-form'
-import { Typography, EdsProvider, Button, Chip, Card, Avatar } from '../..'
+import {
+  Typography,
+  EdsProvider,
+  Button,
+  Chip,
+  Card,
+  Avatar,
+  Icon,
+} from '../..'
 import { Stack } from '../../../.storybook/components'
 import page from './Autocomplete.docs.mdx'
+import { error_filled, thumbs_up, warning_filled } from '@equinor/eds-icons'
 
 const meta: Meta<typeof Autocomplete> = {
   title: 'Inputs/Autocomplete',
@@ -37,6 +46,14 @@ const meta: Meta<typeof Autocomplete> = {
   ],
 }
 
+const icons = {
+  thumbs_up,
+  warning_filled,
+  error_filled,
+}
+
+Icon.add(icons)
+
 export default meta
 
 type MyOptionType = {
@@ -922,3 +939,33 @@ SelectAll.args = {
   options: stocks,
   optionLabel,
 }
+
+export const Variants: StoryFn<AutocompleteProps<string>> = (args) => {
+  return (
+    <>
+      <Autocomplete
+        {...args}
+        helperText="This field cannot be empty"
+        helperIcon={<Icon name="error_filled" title="Error" size={16} />}
+        variant="error"
+      />
+      <Autocomplete
+        {...args}
+        helperText="Should be something else"
+        helperIcon={<Icon name="warning_filled" title="Warning" size={16} />}
+        variant="warning"
+      />
+      <Autocomplete
+        {...args}
+        helperText="This field is correctly filled"
+        helperIcon={<Icon name="thumbs_up" title="Success" size={16} />}
+        variant="success"
+      />
+    </>
+  )
+}
+Variants.bind({})
+Variants.args = {
+  label: 'Select a stock',
+  options: stocks.map((item) => item.label),
+}

packages/eds-core-react/src/components/Autocomplete/Autocomplete.tokens.ts

@@ -21,7 +21,15 @@ const {
   elevation: { temporary_nav: boxShadow },
 } = tokens
 
-export const selectTokens: ComponentToken = {
+export type AutocompleteToken = ComponentToken & {
+  variants: {
+    error: ComponentToken
+    warning: ComponentToken
+    success: ComponentToken
+  }
+}
+
+export const selectTokens: AutocompleteToken = {
   background: colors.ui.background__default.rgba,
   boxShadow,
   spacings: {
@@ -51,6 +59,23 @@ export const selectTokens: ComponentToken = {
       },
     },
   },
+  variants: {
+    error: {
+      typography: {
+        color: colors.interactive.danger__text.rgba,
+      },
+    },
+    warning: {
+      typography: {
+        color: colors.interactive.warning__text.rgba,
+      },
+    },
+    success: {
+      typography: {
+        color: colors.interactive.success__text.rgba,
+      },
+    },
+  },
   entities: {
     button: {
       height: '24px',
@@ -116,4 +141,4 @@ export const multiSelect = mergeDeepRight(selectTokens, {
       },
     },
   },
-}) as ComponentToken
+}) as AutocompleteToken

packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx

@@ -19,6 +19,7 @@ import {
   UseMultipleSelectionProps,
 } from 'downshift'
 import { pickBy, mergeWith } from 'ramda'
+import { HelperText as _HelperText } from '../InputWrapper/HelperText' /* TODO: Use InputWrapper instead of HelperText once the new token system is in place */
 import { useVirtualizer } from '@tanstack/react-virtual'
 import styled, { ThemeProvider, css } from 'styled-components'
 import { Button } from '../Button'
@@ -30,6 +31,7 @@ import { Input } from '../Input'
 import { Progress } from '../Progress'
 import { arrow_drop_down, arrow_drop_up, close } from '@equinor/eds-icons'
 import {
+  AutocompleteToken,
   multiSelect as multiSelectTokens,
   selectTokens as selectTokens,
 } from './Autocomplete.tokens'
@@ -51,6 +53,7 @@ import {
   FloatingPortal,
   MiddlewareState,
 } from '@floating-ui/react'
+import { Variants } from '../types'
 
 const Container = styled.div`
   position: relative;
@@ -68,6 +71,11 @@ const StyledList = styled(List)(
   `,
 )
 
+const HelperText = styled(_HelperText)`
+  margin-top: 8px;
+  margin-left: 8px;
+`
+
 const StyledButton = styled(Button)(
   ({
     theme: {
@@ -184,6 +192,12 @@ export type AutocompleteProps<T> = {
    * @default []
    */
   initialSelectedOptions?: T[]
+  /** Text that will be displayed under the text field */
+  helperText?: string
+  /** Icon that will be displayed before the helper text */
+  helperIcon?: ReactNode
+  /** Variants */
+  variant?: Variants
   /** Meta text, for instance unit */
   meta?: string
   /** Disabled state
@@ -276,6 +290,9 @@ function AutocompleteInner<T>(
     multiline = false,
     dropdownHeight = 300,
     optionComponent,
+    helperText,
+    helperIcon,
+    variant,
     ...other
   } = props
 
@@ -305,6 +322,8 @@ function AutocompleteInner<T>(
     { density },
     multiple ? multiSelectTokens : selectTokens,
   )
+  const tokens = token() as AutocompleteToken
+
   let placeholderText = placeholder
 
   let multipleSelectionProps: UseMultipleSelectionProps<T> = {
@@ -721,10 +740,10 @@ function AutocompleteInner<T>(
           meta={meta}
           disabled={disabled}
         />
-
         <Container ref={refs.setReference}>
           <Input
             {...inputProps}
+            variant={variant}
             placeholder={placeholderText}
             readOnly={readOnly}
             rightAdornmentsWidth={hideClearButton ? 24 + 8 : 24 * 2 + 8}
@@ -762,6 +781,15 @@ function AutocompleteInner<T>(
             {...consolidatedEvents}
           />
         </Container>
+        {helperText && (
+          <HelperText
+            color={
+              variant ? tokens.variants[variant].typography.color : undefined
+            }
+            text={helperText}
+            icon={helperIcon}
+          />
+        )}
         {disablePortal || inDialog ? (
           optionsList
         ) : (