acid-info
/
lsd
mirror of https://github.com/acid-info/lsd.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: update class names of CollapseHeader

This commit is contained in:
jinhojang6 2023-04-11 06:18:43 +09:00
parent e359b6a765
commit 0560d1979d
No known key found for this signature in database
GPG Key ID: 0E7AA62CB0D9E6F3
3 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,10 +2,10 @@ export const collapseHeaderClasses = {
root: `lsd-collapse-header`, root: `lsd-collapse-header`,
trigger: `lsd-collapse-header__trigger`, trigger: `lsd-collapse-header__trigger`,
triggerLabel: `lsd-collapse-header__trigger__label`, label: `lsd-collapse-header__label`,
triggerIcons: `lsd-collapse-header__trigger__icons`, icons: `lsd-collapse-header__icons`,
triggerIcon: `lsd-collapse-header__trigger__icons__icon`, icon: `lsd-collapse-header__icon`,
triggerMenuIcon: `lsd-collapse-header-trigger-icons__menu-icon`, menuIcon: `lsd-collapse-header__menu-icon`,
open: 'lsd-collapse-header--open', open: 'lsd-collapse-header--open',
disabled: 'lsd-collapse-header--disabled', disabled: 'lsd-collapse-header--disabled',

10
packages/lsd-react/src/components/CollapseHeader/CollapseHeader.styles.ts
View File

@ -9,7 +9,7 @@ export const CollapseHeaderStyles = css`
.${collapseHeaderClasses.root}:not(.${collapseHeaderClasses.disabled}) { .${collapseHeaderClasses.root}:not(.${collapseHeaderClasses.disabled}) {
.${collapseHeaderClasses.trigger} { .${collapseHeaderClasses.trigger} {
&:hover { &:hover {
.${collapseHeaderClasses.triggerLabel} { .${collapseHeaderClasses.label} {
text-decoration: underline; text-decoration: underline;
} }
} }
@ -32,7 +32,7 @@ export const CollapseHeaderStyles = css`
} }
} }
.${collapseHeaderClasses.triggerLabel} { .${collapseHeaderClasses.label} {
cursor: inherit; cursor: inherit;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -40,18 +40,18 @@ export const CollapseHeaderStyles = css`
margin: auto; margin: auto;
} }
.${collapseHeaderClasses.triggerIcons} { .${collapseHeaderClasses.icons} {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
.${collapseHeaderClasses.triggerIcon} { .${collapseHeaderClasses.icon} {
margin-right: 8px; margin-right: 8px;
} }
.${collapseHeaderClasses.triggerMenuIcon} { .${collapseHeaderClasses.menuIcon} {
} }
.${collapseHeaderClasses.disabled} { .${collapseHeaderClasses.disabled} {

8
packages/lsd-react/src/components/CollapseHeader/CollapseHeader.tsx
View File

@ -46,20 +46,20 @@ export const CollapseHeader: React.FC<CollapseHeaderProps> & {
color="primary" color="primary"
component="label" component="label"
variant={size === 'small' ? 'label2' : 'label1'} variant={size === 'small' ? 'label2' : 'label1'}
className={collapseHeaderClasses.triggerLabel} className={collapseHeaderClasses.label}
> >
{label} {label}
</Typography> </Typography>
<div className={collapseHeaderClasses.triggerIcons}> <div className={collapseHeaderClasses.icons}>
{open ? ( {open ? (
<ArrowUpIcon <ArrowUpIcon
color="primary" color="primary"
className={collapseHeaderClasses.triggerMenuIcon} className={collapseHeaderClasses.menuIcon}
/> />
) : ( ) : (
<ArrowDownIcon <ArrowDownIcon
color="primary" color="primary"
className={collapseHeaderClasses.triggerMenuIcon} className={collapseHeaderClasses.menuIcon}
/> />
)} )}
</div> </div>