From 74def31046b1d7a063d4d5b90aedb330a7d3b153 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Wed, 5 Apr 2023 01:41:39 +0900
Subject: [PATCH] feat: implement bottom outline property

---
 .../src/components/Autocomplete/Autocomplete.classes.ts   | 1 +
 .../src/components/Autocomplete/Autocomplete.stories.tsx  | 1 +
 .../src/components/Autocomplete/Autocomplete.styles.ts    | 6 ++++++
 .../src/components/Autocomplete/Autocomplete.tsx          | 3 +++
 .../lsd-react/src/components/Dropdown/Dropdown.classes.ts | 2 ++
 .../src/components/Dropdown/Dropdown.stories.tsx          | 1 +
 .../lsd-react/src/components/Dropdown/Dropdown.styles.ts  | 8 ++++++++
 packages/lsd-react/src/components/Dropdown/Dropdown.tsx   | 3 +++
 .../src/components/TextField/TextField.classes.ts         | 1 +
 .../src/components/TextField/TextField.stories.tsx        | 1 +
 .../src/components/TextField/TextField.styles.ts          | 8 +++++++-
 packages/lsd-react/src/components/TextField/TextField.tsx | 3 +++
 12 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/lsd-react/src/components/Autocomplete/Autocomplete.classes.ts b/packages/lsd-react/src/components/Autocomplete/Autocomplete.classes.ts
index a335f8e..046ca36 100644
--- a/packages/lsd-react/src/components/Autocomplete/Autocomplete.classes.ts
+++ b/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`,
 }
diff --git a/packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx
index 1d13e30..4577aaf 100644
--- a/packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx
+++ b/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,
diff --git a/packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts b/packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts
index dcfb46e..fa7eacb 100644
--- a/packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts
+++ b/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;
+  }
 `
diff --git a/packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx b/packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx
index b84c829..42166e6 100644
--- a/packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx
+++ b/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}
     >
diff --git a/packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts b/packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts
index 45bed11..417a49b 100644
--- a/packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts
+++ b/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`,
 }
diff --git a/packages/lsd-react/src/components/Dropdown/Dropdown.stories.tsx b/packages/lsd-react/src/components/Dropdown/Dropdown.stories.tsx
index 5f9cbf2..24921ba 100644
--- a/packages/lsd-react/src/components/Dropdown/Dropdown.stories.tsx
+++ b/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}`,
diff --git a/packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts b/packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts
index 1a144d2..c91c352 100644
--- a/packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts
+++ b/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;
+    }
+  }
 `
diff --git a/packages/lsd-react/src/components/Dropdown/Dropdown.tsx b/packages/lsd-react/src/components/Dropdown/Dropdown.tsx
index a1f9614..062e6d7 100644
--- a/packages/lsd-react/src/components/Dropdown/Dropdown.tsx
+++ b/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
diff --git a/packages/lsd-react/src/components/TextField/TextField.classes.ts b/packages/lsd-react/src/components/TextField/TextField.classes.ts
index a48d681..98cd466 100644
--- a/packages/lsd-react/src/components/TextField/TextField.classes.ts
+++ b/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`,
 }
diff --git a/packages/lsd-react/src/components/TextField/TextField.stories.tsx b/packages/lsd-react/src/components/TextField/TextField.stories.tsx
index 1baea5d..0e0962c 100644
--- a/packages/lsd-react/src/components/TextField/TextField.stories.tsx
+++ b/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',
diff --git a/packages/lsd-react/src/components/TextField/TextField.styles.ts b/packages/lsd-react/src/components/TextField/TextField.styles.ts
index 9f36978..fbaccd8 100644
--- a/packages/lsd-react/src/components/TextField/TextField.styles.ts
+++ b/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;
diff --git a/packages/lsd-react/src/components/TextField/TextField.tsx b/packages/lsd-react/src/components/TextField/TextField.tsx
index 659839b..703a3e9 100644
--- a/packages/lsd-react/src/components/TextField/TextField.tsx
+++ b/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}>