feat: implement bottom outline property

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

@@ -14,4 +14,5 @@ export const autocompleteClasses = {
   large: `lsd-autocomplete--large`,
   medium: `lsd-autocomplete--medium`,
   withIcon: `lsd-autocomplete--with-icon`,
+  bottomOutline: `lsd-autocomplete--bottom-outline`,
 }

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

@@ -27,6 +27,7 @@ Root.args = {
   disabled: false,
   withIcon: false,
   error: false,
+  bottomOutline: false,
   placeholder: 'Placeholder',
   onChange: undefined,
   options: list,

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

@@ -80,4 +80,10 @@ export const AutocompleteStyles = css`
     opacity: 0.5;
     white-space: pre;
   }
+
+  .${autocompleteClasses.bottomOutline} {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+  }
 `

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

@@ -21,6 +21,7 @@ export type AutocompleteProps = Omit<
     defaultValue?: string
     options?: string[]
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+    bottomOutline?: boolean
   }
 
 export const Autocomplete: React.FC<AutocompleteProps> & {
@@ -37,6 +38,7 @@ export const Autocomplete: React.FC<AutocompleteProps> & {
   onChange,
   options = [],
   inputProps = {},
+  bottomOutline = false,
   ...props
 }) => {
   const ref = useRef<HTMLInputElement>(null)
@@ -86,6 +88,7 @@ export const Autocomplete: React.FC<AutocompleteProps> & {
         autocompleteClasses[size],
         disabled && autocompleteClasses.disabled,
         withIcon && autocompleteClasses.withIcon,
+        bottomOutline && autocompleteClasses.bottomOutline,
       )}
       {...props}
     >

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

@@ -14,7 +14,9 @@ export const dropdownClasses = {
   open: 'lsd-dropdown--open',
   error: 'lsd-dropdown--error',
   disabled: 'lsd-dropdown--disabled',
+
   small: `lsd-dropdown--small`,
   medium: `lsd-dropdown--medium`,
   large: `lsd-dropdown--large`,
+  bottomOutline: `lsd-dropdown--bottom-outline`,
 }

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

@@ -19,6 +19,7 @@ Root.args = {
   disabled: false,
   error: false,
   multi: false,
+  bottomOutline: false,
   onChange: undefined,
   options: new Array(16).fill(null).map((value, index) => ({
     value: `${index}`,

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

@@ -101,4 +101,12 @@ export const DropdownStyles = css`
       padding: 6px 12px;
     }
   }
+
+  .${dropdownClasses.bottomOutline} {
+    .${dropdownClasses.trigger} {
+      border-top: none;
+      border-left: none;
+      border-right: none;
+    }
+  }
 `

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

@@ -24,6 +24,7 @@ export type DropdownProps = Omit<
   options?: DropdownOption[]
   value?: string | string[]
   onChange?: (value: string | string[]) => void
+  bottomOutline?: boolean
 }
 
 export const Dropdown: React.FC<DropdownProps> & {
@@ -39,6 +40,7 @@ export const Dropdown: React.FC<DropdownProps> & {
   onChange,
   options = [],
   multi = false,
+  bottomOutline = false,
   ...props
 }) => {
   const ref = useRef<HTMLButtonElement>(null)
@@ -70,6 +72,7 @@ export const Dropdown: React.FC<DropdownProps> & {
         error && dropdownClasses.error,
         disabled && dropdownClasses.disabled,
         open && dropdownClasses.open,
+        bottomOutline && dropdownClasses.bottomOutline,
       )}
     >
       <button

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

@@ -13,4 +13,5 @@ export const textFieldClasses = {
 
   large: `lsd-text-field--large`,
   medium: `lsd-text-field--medium`,
+  bottomOutline: `lsd-text-field--bottom-outline`,
 }

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

@@ -43,6 +43,7 @@ Root.args = {
   error: false,
   errorIcon: false,
   icon: 'None',
+  bottomOutline: true,
   clearButton: true,
   placeholder: 'Placeholder',
   defaultValue: 'default value',

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

@@ -4,7 +4,7 @@ import { textFieldClasses } from './TextField.classes'
 export const TextFieldStyles = css`
   .${textFieldClasses.root} {
     width: auto;
-    border-bottom: 1px solid rgb(var(--lsd-border-primary));
+    border: 1px solid rgb(var(--lsd-border-primary));
     box-sizing: border-box;
   }
 
@@ -57,6 +57,12 @@ export const TextFieldStyles = css`
     padding: 6px 12px;
   }
 
+  .${textFieldClasses.bottomOutline} {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+  }
+
   .${textFieldClasses.clearButton} {
     padding: 0;
     width: auto;

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

@@ -22,6 +22,7 @@ export type TextFieldProps = Omit<
     defaultValue?: string
     placeholder?: string
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+    bottomOutline?: boolean
   }
 
 export const TextField: React.FC<TextFieldProps> & {
@@ -40,6 +41,7 @@ export const TextField: React.FC<TextFieldProps> & {
   disabled,
   onChange,
   inputProps = {},
+  bottomOutline = true,
   ...props
 }) => {
   const ref = useRef<HTMLInputElement>(null)
@@ -57,6 +59,7 @@ export const TextField: React.FC<TextFieldProps> & {
         textFieldClasses[size],
         disabled && textFieldClasses.disabled,
         error && textFieldClasses.error,
+        bottomOutline && textFieldClasses.bottomOutline,
       )}
     >
       <div className={textFieldClasses.inputContainer}>