refactor: add variant of outlined and outlined bottom

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

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

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

@@ -16,6 +16,13 @@ export default {
       },
       defaultValue: 'large',
     },
+    variant: {
+      type: {
+        name: 'enum',
+        value: ['outlined', 'outlined-bottom'],
+      },
+      defaultValue: 'large',
+    },
   },
 } as Meta
 
@@ -27,7 +34,7 @@ Root.args = {
   disabled: false,
   withIcon: false,
   error: false,
-  bottomOutline: false,
+  variant: 'outlined',
   placeholder: 'Placeholder',
   onChange: undefined,
   options: list,

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

@@ -4,7 +4,6 @@ import { autocompleteClasses } from './Autocomplete.classes'
 export const AutocompleteStyles = css`
   .${autocompleteClasses.root} {
     width: auto;
-    border: 1px solid rgb(var(--lsd-border-primary));
     box-sizing: border-box;
     align-items: center;
   }
@@ -81,9 +80,11 @@ export const AutocompleteStyles = css`
     white-space: pre;
   }
 
-  .${autocompleteClasses.bottomOutline} {
-    border-top: none;
-    border-left: none;
-    border-right: none;
+  .${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

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

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

@@ -18,5 +18,6 @@ export const dropdownClasses = {
   small: `lsd-dropdown--small`,
   medium: `lsd-dropdown--medium`,
   large: `lsd-dropdown--large`,
-  bottomOutline: `lsd-dropdown--bottom-outline`,
+  outlined: `lsd-dropdown--outlined`,
+  outlinedBottom: `lsd-dropdown--outlined-bottom`,
 }

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

@@ -4,6 +4,15 @@ import { Dropdown, DropdownProps } from './Dropdown'
 export default {
   title: 'Dropdown',
   component: Dropdown,
+  argTypes: {
+    variant: {
+      type: {
+        name: 'enum',
+        value: ['outlined', 'outlined-bottom'],
+      },
+      defaultValue: 'large',
+    },
+  },
 } as Meta
 
 export const Root: Story<DropdownProps> = (args) => (
@@ -19,7 +28,7 @@ Root.args = {
   disabled: false,
   error: false,
   multi: false,
-  bottomOutline: false,
+  variant: 'outlined',
   onChange: undefined,
   options: new Array(16).fill(null).map((value, index) => ({
     value: `${index}`,

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

@@ -26,10 +26,10 @@ export const DropdownStyles = css`
     align-items: center;
     justify-content: space-between;
     padding: 10px 14px 10px 18px;
+    border: none;
 
     cursor: pointer;
     background: none;
-    border: 1px solid rgb(var(--lsd-border-primary));
 
     &:focus {
       outline: none;
@@ -102,11 +102,11 @@ export const DropdownStyles = css`
     }
   }
 
-  .${dropdownClasses.bottomOutline} {
-    .${dropdownClasses.trigger} {
-      border-top: none;
-      border-left: none;
-      border-right: none;
-    }
+  .${dropdownClasses.outlined} {
+    border: 1px solid rgb(var(--lsd-border-primary));
+  }
+
+  .${dropdownClasses.outlinedBottom} {
+    border-bottom: 1px solid rgb(var(--lsd-border-primary));
   }
 `

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

@@ -24,7 +24,7 @@ export type DropdownProps = Omit<
   options?: DropdownOption[]
   value?: string | string[]
   onChange?: (value: string | string[]) => void
-  bottomOutline?: boolean
+  variant?: 'outlined' | 'outlined-bottom'
 }
 
 export const Dropdown: React.FC<DropdownProps> & {
@@ -40,7 +40,7 @@ export const Dropdown: React.FC<DropdownProps> & {
   onChange,
   options = [],
   multi = false,
-  bottomOutline = false,
+  variant = 'outlined',
   ...props
 }) => {
   const ref = useRef<HTMLButtonElement>(null)
@@ -72,12 +72,16 @@ export const Dropdown: React.FC<DropdownProps> & {
         error && dropdownClasses.error,
         disabled && dropdownClasses.disabled,
         open && dropdownClasses.open,
-        bottomOutline && dropdownClasses.bottomOutline,
       )}
     >
       <button
         ref={ref}
-        className={clsx(dropdownClasses.trigger)}
+        className={clsx(
+          dropdownClasses.trigger,
+          variant === 'outlined'
+            ? dropdownClasses.outlined
+            : dropdownClasses.outlinedBottom,
+        )}
         onClick={onTrigger}
       >
         <Typography

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

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

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

@@ -20,6 +20,13 @@ export default {
       },
       defaultValue: 'FolderIcon',
     },
+    variant: {
+      type: {
+        name: 'enum',
+        value: ['outlined', 'outlined-bottom'],
+      },
+      defaultValue: 'large',
+    },
   },
 } as Meta
 
@@ -43,7 +50,7 @@ Root.args = {
   error: false,
   errorIcon: false,
   icon: 'None',
-  bottomOutline: true,
+  variant: 'outlined-bottom',
   clearButton: true,
   placeholder: 'Placeholder',
   defaultValue: 'default value',

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

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

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

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