From 0a98af24417757e0a22c1ef141622352b86152f1 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Fri, 7 Apr 2023 20:57:14 +0900 Subject: [PATCH 1/3] 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} From f1d8ba85e21fef941465b73e476f3fc280ae8bee Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Tue, 11 Apr 2023 06:30:14 +0900 Subject: [PATCH 2/3] refactor: update class names of Dropdown --- .../src/components/Dropdown/Dropdown.classes.ts | 8 ++++---- .../src/components/Dropdown/Dropdown.styles.ts | 12 ++++++------ .../lsd-react/src/components/Dropdown/Dropdown.tsx | 13 +++++-------- 3 files changed, 15 insertions(+), 18 deletions(-) diff --git a/packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts b/packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts index 40ccf59..829ac4b 100644 --- a/packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts +++ b/packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts @@ -5,10 +5,10 @@ export const dropdownClasses = { 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`, + optionLabel: `lsd-dropdown__option-label`, + icons: `lsd-dropdown__icons`, + icon: `lsd-dropdown__icon`, + menuIcon: `lsd-dropdown__menu-icon`, supportingText: 'lsd-dropdown__supporting-text', diff --git a/packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts b/packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts index aaab02e..f9d0fd5 100644 --- a/packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts +++ b/packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts @@ -12,7 +12,7 @@ export const DropdownStyles = css` .${dropdownClasses.trigger} { &:hover, &:focus { - .${dropdownClasses.triggerLabel} { + .${dropdownClasses.optionLabel} { text-decoration: underline; } } @@ -44,14 +44,14 @@ export const DropdownStyles = css` } } - .${dropdownClasses.triggerLabel} { + .${dropdownClasses.optionLabel} { cursor: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .${dropdownClasses.triggerIcons} { + .${dropdownClasses.icons} { display: flex; flex-direction: row; align-items: center; @@ -59,12 +59,12 @@ export const DropdownStyles = css` gap: 8px; } - .${dropdownClasses.triggerIcon} { + .${dropdownClasses.icon} { display: flex; align-items: center; } - .${dropdownClasses.triggerMenuIcon} { + .${dropdownClasses.menuIcon} { } .${dropdownClasses.supportingText} { @@ -72,7 +72,7 @@ export const DropdownStyles = css` } .${dropdownClasses.error} { - .${dropdownClasses.triggerLabel} { + .${dropdownClasses.optionLabel} { text-decoration: line-through; } } diff --git a/packages/lsd-react/src/components/Dropdown/Dropdown.tsx b/packages/lsd-react/src/components/Dropdown/Dropdown.tsx index af7a4b2..9e22580 100644 --- a/packages/lsd-react/src/components/Dropdown/Dropdown.tsx +++ b/packages/lsd-react/src/components/Dropdown/Dropdown.tsx @@ -102,29 +102,26 @@ export const Dropdown: React.FC & { color="primary" component="label" variant={size === 'large' ? 'label1' : 'label2'} - className={dropdownClasses.triggerLabel} + className={dropdownClasses.optionLabel} > {selected.length > 0 ? selected.map((opt) => opt.name).join(', ') : triggerLabel} -
+
{error && ( - + )} {open ? ( ) : ( )}
From 336ce7b532360dd3b4f14779cac2695653cad543 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Tue, 11 Apr 2023 07:02:06 +0900 Subject: [PATCH 3/3] chore: add size artTypes to Dropdown --- .../lsd-react/src/components/Dropdown/Dropdown.stories.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/lsd-react/src/components/Dropdown/Dropdown.stories.tsx b/packages/lsd-react/src/components/Dropdown/Dropdown.stories.tsx index 225f85a..8056fa2 100644 --- a/packages/lsd-react/src/components/Dropdown/Dropdown.stories.tsx +++ b/packages/lsd-react/src/components/Dropdown/Dropdown.stories.tsx @@ -12,6 +12,12 @@ export default { }, defaultValue: 'large', }, + size: { + type: { + name: 'enum', + value: ['small', 'medium', 'large'], + }, + }, }, } as Meta