acid-info/lsd
1
0
Fork 0
mirror of https://github.com/acid-info/lsd.git synced 2025-02-05 13:44:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update class names of Dropdown

Browse Source
This commit is contained in:
jinhojang6 2023-04-11 06:30:14 +09:00
parent 0a98af2441
commit f1d8ba85e2
No known key found for this signature in database
GPG Key ID: 0E7AA62CB0D9E6F3
3 changed files with 15 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts
View File

@ -5,10 +5,10 @@ export const dropdownClasses = {
buttonContainer: `lsd-dropdown__button-container`, buttonContainer: `lsd-dropdown__button-container`,
trigger: `lsd-dropdown__trigger`, trigger: `lsd-dropdown__trigger`,
triggerLabel: `lsd-dropdown__trigger-label`, optionLabel: `lsd-dropdown__option-label`,
triggerIcons: `lsd-dropdown__trigger-icons`, icons: `lsd-dropdown__icons`,
triggerIcon: `lsd-dropdown__trigger-icons__icon`, icon: `lsd-dropdown__icon`,
triggerMenuIcon: `lsd-dropdown__trigger-icons__menu-icon`, menuIcon: `lsd-dropdown__menu-icon`,
supportingText: 'lsd-dropdown__supporting-text', supportingText: 'lsd-dropdown__supporting-text',

12
packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts
View File

@ -12,7 +12,7 @@ export const DropdownStyles = css`
.${dropdownClasses.trigger} { .${dropdownClasses.trigger} {
&:hover, &:hover,
&:focus { &:focus {
.${dropdownClasses.triggerLabel} { .${dropdownClasses.optionLabel} {
text-decoration: underline; text-decoration: underline;
} }
} }
@ -44,14 +44,14 @@ export const DropdownStyles = css`
} }
} }
.${dropdownClasses.triggerLabel} { .${dropdownClasses.optionLabel} {
cursor: inherit; cursor: inherit;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.${dropdownClasses.triggerIcons} { .${dropdownClasses.icons} {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -59,12 +59,12 @@ export const DropdownStyles = css`
gap: 8px; gap: 8px;
} }
.${dropdownClasses.triggerIcon} { .${dropdownClasses.icon} {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.${dropdownClasses.triggerMenuIcon} { .${dropdownClasses.menuIcon} {
} }
.${dropdownClasses.supportingText} { .${dropdownClasses.supportingText} {
@ -72,7 +72,7 @@ export const DropdownStyles = css`
} }
.${dropdownClasses.error} { .${dropdownClasses.error} {
.${dropdownClasses.triggerLabel} { .${dropdownClasses.optionLabel} {
text-decoration: line-through; text-decoration: line-through;
} }
} }

13
packages/lsd-react/src/components/Dropdown/Dropdown.tsx
View File

@ -102,29 +102,26 @@ export const Dropdown: React.FC<DropdownProps> & {
color="primary" color="primary"
component="label" component="label"
variant={size === 'large' ? 'label1' : 'label2'} variant={size === 'large' ? 'label1' : 'label2'}
className={dropdownClasses.triggerLabel} className={dropdownClasses.optionLabel}
> >
{selected.length > 0 {selected.length > 0
? selected.map((opt) => opt.name).join(', ') ? selected.map((opt) => opt.name).join(', ')
: triggerLabel} : triggerLabel}
</Typography> </Typography>
<div className={dropdownClasses.triggerIcons}> <div className={dropdownClasses.icons}>
{error && ( {error && (
<ErrorIcon <ErrorIcon color="primary" className={dropdownClasses.icon} />
color="primary"
className={dropdownClasses.triggerIcon}
/>
)} )}
{open ? ( {open ? (
<ArrowUpIcon <ArrowUpIcon
color="primary" color="primary"
className={dropdownClasses.triggerMenuIcon} className={dropdownClasses.menuIcon}
/> />
) : ( ) : (
<ArrowDownIcon <ArrowDownIcon
color="primary" color="primary"
className={dropdownClasses.triggerMenuIcon} className={dropdownClasses.menuIcon}
/> />
)} )}
</div> </div>