From 0a98af24417757e0a22c1ef141622352b86152f1 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Fri, 7 Apr 2023 20:57:14 +0900 Subject: [PATCH] feat: add label element to Dropdown component and adjust styles --- .../components/Dropdown/Dropdown.classes.ts | 15 +-- .../components/Dropdown/Dropdown.stories.tsx | 4 +- .../components/Dropdown/Dropdown.styles.ts | 71 +++++++++++--- .../src/components/Dropdown/Dropdown.tsx | 94 +++++++++++-------- 4 files changed, 125 insertions(+), 59 deletions(-) diff --git a/packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts b/packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts index 5320e5c..40ccf59 100644 --- a/packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts +++ b/packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts @@ -1,15 +1,18 @@ export const dropdownClasses = { root: `lsd-dropdown`, - trigger: `lsd-dropdown-trigger`, - triggerLabel: `lsd-dropdown-trigger__label`, - triggerIcons: `lsd-dropdown-trigger-icons`, - triggerIcon: `lsd-dropdown-trigger-icons__icon`, - triggerMenuIcon: `lsd-dropdown-trigger-icons__menu-icon`, + label: 'lsd-dropdown__label', + buttonContainer: `lsd-dropdown__button-container`, + + trigger: `lsd-dropdown__trigger`, + triggerLabel: `lsd-dropdown__trigger-label`, + triggerIcons: `lsd-dropdown__trigger-icons`, + triggerIcon: `lsd-dropdown__trigger-icons__icon`, + triggerMenuIcon: `lsd-dropdown__trigger-icons__menu-icon`, supportingText: 'lsd-dropdown__supporting-text', - listBox: 'lsd-dropdown-list-box', + listBox: 'lsd-dropdown__list-box', open: 'lsd-dropdown--open', error: 'lsd-dropdown--error', diff --git a/packages/lsd-react/src/components/Dropdown/Dropdown.stories.tsx b/packages/lsd-react/src/components/Dropdown/Dropdown.stories.tsx index f4d9cd9..225f85a 100644 --- a/packages/lsd-react/src/components/Dropdown/Dropdown.stories.tsx +++ b/packages/lsd-react/src/components/Dropdown/Dropdown.stories.tsx @@ -22,8 +22,9 @@ export const Root: Story = (args) => ( ) Root.args = { + id: 'cryptocurrency', size: 'large', - label: 'Choose an option', + triggerLabel: 'Choose an option', supportingText: '', disabled: false, error: false, @@ -34,4 +35,5 @@ Root.args = { value: `${index}`, name: `Option ${index + 1}`, })), + label: 'Cryptocurrency', } diff --git a/packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts b/packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts index 8643492..aaab02e 100644 --- a/packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts +++ b/packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts @@ -19,13 +19,21 @@ export const DropdownStyles = css` } } + .${dropdownClasses.label} { + display: block; + } + + .${dropdownClasses.buttonContainer} { + display: flex; + justify-content: space-between; + } + .${dropdownClasses.trigger} { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; - padding: 10px 14px 10px 18px; border: none; cursor: pointer; @@ -48,11 +56,12 @@ export const DropdownStyles = css` flex-direction: row; align-items: center; justify-content: flex-end; - min-width: 60px; + gap: 8px; } .${dropdownClasses.triggerIcon} { - margin-right: 8px; + display: flex; + align-items: center; } .${dropdownClasses.triggerMenuIcon} { @@ -69,10 +78,8 @@ export const DropdownStyles = css` } .${dropdownClasses.disabled} { - .${dropdownClasses.trigger} { - opacity: 0.34; - cursor: initial; - } + opacity: 0.34; + cursor: initial; } .${dropdownClasses.listBox} { @@ -90,23 +97,63 @@ export const DropdownStyles = css` } } - .${dropdownClasses.small} { + .${dropdownClasses.large} { + width: 208px; + + .${dropdownClasses.label} { + margin: 0 0 6px 18px; + } + + .${dropdownClasses.buttonContainer} { + height: 40px; + } + .${dropdownClasses.trigger} { - padding: 6px 10px; + padding: 9px 17px; } } .${dropdownClasses.medium} { + width: 188px; + + .${dropdownClasses.label} { + margin: 0 0 6px 14px; + } + + .${dropdownClasses.buttonContainer} { + height: 32px; + } + .${dropdownClasses.trigger} { - padding: 6px 12px; + padding: 5px 13px; + } + } + + .${dropdownClasses.small} { + width: 164px; + + .${dropdownClasses.label} { + margin: 0 0 6px 12px; + } + + .${dropdownClasses.buttonContainer} { + height: 28px; + } + + .${dropdownClasses.trigger} { + padding: 5px 11px; } } .${dropdownClasses.outlined} { - border: 1px solid rgb(var(--lsd-border-primary)); + .${dropdownClasses.buttonContainer} { + border: 1px solid rgb(var(--lsd-border-primary)); + } } .${dropdownClasses.outlinedBottom} { - border-bottom: 1px solid rgb(var(--lsd-border-primary)); + .${dropdownClasses.buttonContainer} { + border-bottom: 1px solid rgb(var(--lsd-border-primary)); + } } ` diff --git a/packages/lsd-react/src/components/Dropdown/Dropdown.tsx b/packages/lsd-react/src/components/Dropdown/Dropdown.tsx index 178f5bf..af7a4b2 100644 --- a/packages/lsd-react/src/components/Dropdown/Dropdown.tsx +++ b/packages/lsd-react/src/components/Dropdown/Dropdown.tsx @@ -14,11 +14,12 @@ export type DropdownProps = Omit< React.HTMLAttributes, 'label' | 'disabled' | 'value' | 'onChange' > & { - label: string + label?: React.ReactNode error?: boolean disabled?: boolean supportingText?: string size?: 'small' | 'medium' | 'large' + triggerLabel: string multi?: boolean options?: DropdownOption[] @@ -35,6 +36,7 @@ export const Dropdown: React.FC & { error = false, disabled = false, supportingText, + triggerLabel, value = [], onChange, @@ -43,7 +45,7 @@ export const Dropdown: React.FC & { variant = 'outlined', ...props }) => { - const ref = useRef(null) + const containerRef = useRef(null) const [open, setOpen] = useState(false) const { select, isSelected, selected } = useSelect(options, value, { @@ -62,8 +64,11 @@ export const Dropdown: React.FC & { if (disabled && open) setOpen(false) }, [open, disabled]) + const buttonId = props?.id ?? (props.id || 'dropdown') + '-input' + return (
& { error && dropdownClasses.error, disabled && dropdownClasses.disabled, open && dropdownClasses.open, + variant === 'outlined' + ? dropdownClasses.outlined + : dropdownClasses.outlinedBottom, )} > - + )} +
+ +
{supportingText && ( & { setOpen(false)} className={dropdownClasses.listBox}