feat: add label element to Autocomplete component and adjust styles

packages/lsd-react/src/components/Autocomplete/Autocomplete.classes.ts

@@ -1,18 +1,21 @@
 export const autocompleteClasses = {
   root: `lsd-autocomplete`,
 
+  label: 'lsd-autocomplete__label',
+  inputContainer: `lsd-autocomplete__input-container`,
   input: `lsd-autocomplete__input`,
   icon: `lsd-autocomplete__icon`,
 
-  listBox: `lsd-autocomplete-list-box`,
-  dropdownItem: `lsd-autocomplete-dropdown-item`,
-  dropdownItemPlaceholder: `lsd-autocomplete-dropdown-item__placeholder`,
+  listBox: `lsd-autocomplete__list-box`,
+  dropdownItem: `lsd-autocomplete__dropdown-item`,
+  dropdownItemPlaceholder: `lsd-autocomplete__dropdown-item-placeholder`,
 
   disabled: `lsd-autocomplete--disabled`,
   error: 'lsd-autocomplete--error',
 
   large: `lsd-autocomplete--large`,
   medium: `lsd-autocomplete--medium`,
+  small: `lsd-autocomplete--small`,
   withIcon: `lsd-autocomplete--with-icon`,
   outlined: `lsd-autocomplete--outlined`,
   outlinedBottom: `lsd-autocomplete--outlined-bottom`,

packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -12,7 +12,7 @@ export default {
     size: {
       type: {
         name: 'enum',
-        value: ['medium', 'large'],
+        value: ['small', 'medium', 'large'],
       },
       defaultValue: 'large',
     },
@@ -30,6 +30,7 @@ export const Root: Story<AutocompleteProps> = (args) => (
   <Autocomplete {...args}>Autocomplete</Autocomplete>
 )
 Root.args = {
+  id: 'cryptocurrency',
   size: 'large',
   disabled: false,
   withIcon: false,
@@ -38,4 +39,5 @@ Root.args = {
   placeholder: 'Placeholder',
   onChange: undefined,
   options: list,
+  label: 'Cryptocurrency',
 }

packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts

@@ -3,12 +3,14 @@ import { autocompleteClasses } from './Autocomplete.classes'
 
 export const AutocompleteStyles = css`
   .${autocompleteClasses.root} {
-    width: auto;
     box-sizing: border-box;
-    align-items: center;
   }
 
-  .${autocompleteClasses.root} > div {
+  .${autocompleteClasses.label} {
+    display: block;
+  }
+
+  .${autocompleteClasses.inputContainer} {
     display: flex;
     justify-content: space-between;
   }
@@ -35,29 +37,86 @@ export const AutocompleteStyles = css`
     opacity: 0.3;
   }
 
+  .${autocompleteClasses.icon} {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
   .${autocompleteClasses.error} {
     text-decoration: line-through;
   }
 
   .${autocompleteClasses.large} {
     width: 208px;
+
+    .${autocompleteClasses.label} {
+      margin: 0 0 6px 18px;
+    }
+
+    .${autocompleteClasses.inputContainer} {
       height: 40px;
-    padding: 10px 14px;
+    }
+
+    .${autocompleteClasses.input} {
+      padding: 9px 17px;
+    }
+
+    .${autocompleteClasses.icon} {
+      padding: 12px 13px;
+    }
   }
 
   .${autocompleteClasses.medium} {
     width: 188px;
+
+    .${autocompleteClasses.label} {
+      margin: 0 0 6px 14px;
+    }
+
+    .${autocompleteClasses.inputContainer} {
       height: 32px;
-    padding: 6px 12px;
+    }
+
+    .${autocompleteClasses.input} {
+      padding: 5px 13px;
+    }
+
+    .${autocompleteClasses.icon} {
+      padding: 8px 11px;
+    }
+  }
+
+  .${autocompleteClasses.small} {
+    width: 164px;
+
+    .${autocompleteClasses.label} {
+      margin: 0 0 6px 12px;
+    }
+
+    .${autocompleteClasses.inputContainer} {
+      height: 28px;
+    }
+
+    .${autocompleteClasses.input} {
+      padding: 5px 11px;
+    }
+
+    .${autocompleteClasses.icon} {
+      padding: 6px 9px;
+    }
   }
 
   .${autocompleteClasses.withIcon} {
   }
 
-  .${autocompleteClasses.icon} {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
+  .${autocompleteClasses.outlined} .${autocompleteClasses.inputContainer} {
+    border: 1px solid rgb(var(--lsd-border-primary));
+  }
+
+  .${autocompleteClasses.outlinedBottom}
+    .${autocompleteClasses.inputContainer} {
+    border-bottom: 1px solid rgb(var(--lsd-border-primary));
   }
 
   .${autocompleteClasses.listBox} {
@@ -79,12 +138,4 @@ export const AutocompleteStyles = css`
     opacity: 0.5;
     white-space: pre;
   }
-
-  .${autocompleteClasses.outlined} {
-    border: 1px solid rgb(var(--lsd-border-primary));
-  }
-
-  .${autocompleteClasses.outlinedBottom} {
-    border-bottom: 1px solid rgb(var(--lsd-border-primary));
-  }
 `

packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx

@@ -5,6 +5,7 @@ import { DropdownItem } from '../DropdownItem'
 import { CloseIcon, SearchIcon } from '../Icons'
 import { ListBox } from '../ListBox'
 import { Portal } from '../PortalProvider/Portal'
+import { Typography } from '../Typography'
 import { autocompleteClasses } from './Autocomplete.classes'
 
 export type AutocompleteProps = Omit<
@@ -12,7 +13,8 @@ export type AutocompleteProps = Omit<
   'onChange' | 'value'
 > &
   Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
-    size?: 'large' | 'medium'
+    label?: React.ReactNode
+    size?: 'large' | 'medium' | 'small'
     withIcon?: boolean
     error?: boolean
     disabled?: boolean
@@ -27,6 +29,7 @@ export type AutocompleteProps = Omit<
 export const Autocomplete: React.FC<AutocompleteProps> & {
   classes: typeof autocompleteClasses
 } = ({
+  label,
   size = 'large',
   withIcon = false,
   error = false,
@@ -79,6 +82,8 @@ export const Autocomplete: React.FC<AutocompleteProps> & {
 
   const isOpen = !disabled && open && suggestions.length > 0 && input.filled
 
+  const inputId = inputProps?.id ?? (props.id || 'autocomplete') + '-input'
+
   return (
     <div
       ref={containerRef}
@@ -94,15 +99,26 @@ export const Autocomplete: React.FC<AutocompleteProps> & {
       )}
       {...props}
     >
-      <div>
+      {label && (
+        <Typography
+          htmlFor={inputId}
+          className={autocompleteClasses.label}
+          variant="label2"
+          component="label"
+        >
+          {label}
+        </Typography>
+      )}
+      <div className={autocompleteClasses.inputContainer}>
         <input
-          {...inputProps}
+          id={inputId}
           ref={ref}
           value={input.value}
           placeholder={placeholder}
           onChange={input.onChange}
           disabled={disabled}
           onFocus={() => setOpen(true)}
+          {...inputProps}
           className={clsx(
             inputProps.className,
             autocompleteClasses.input,