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`,
trigger: `lsd-collapse-header__trigger`,
triggerLabel: `lsd-collapse-header__trigger__label`,
triggerIcons: `lsd-collapse-header__trigger__icons`,
triggerIcon: `lsd-collapse-header__trigger__icons__icon`,
triggerMenuIcon: `lsd-collapse-header-trigger-icons__menu-icon`,
label: `lsd-collapse-header__label`,
icons: `lsd-collapse-header__icons`,
icon: `lsd-collapse-header__icon`,
menuIcon: `lsd-collapse-header__menu-icon`,
open: 'lsd-collapse-header--open',
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.trigger} {
&:hover {
.${collapseHeaderClasses.triggerLabel} {
.${collapseHeaderClasses.label} {
text-decoration: underline;
}
}
@ -32,7 +32,7 @@ export const CollapseHeaderStyles = css`
}
}
.${collapseHeaderClasses.triggerLabel} {
.${collapseHeaderClasses.label} {
cursor: inherit;
white-space: nowrap;
overflow: hidden;
@ -40,18 +40,18 @@ export const CollapseHeaderStyles = css`
margin: auto;
}
.${collapseHeaderClasses.triggerIcons} {
.${collapseHeaderClasses.icons} {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
.${collapseHeaderClasses.triggerIcon} {
.${collapseHeaderClasses.icon} {
margin-right: 8px;
}
.${collapseHeaderClasses.triggerMenuIcon} {
.${collapseHeaderClasses.menuIcon} {
}
.${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"
component="label"
variant={size === 'small' ? 'label2' : 'label1'}
className={collapseHeaderClasses.triggerLabel}
className={collapseHeaderClasses.label}
>
{label}
</Typography>
<div className={collapseHeaderClasses.triggerIcons}>
<div className={collapseHeaderClasses.icons}>
{open ? (
<ArrowUpIcon
color="primary"
className={collapseHeaderClasses.triggerMenuIcon}
className={collapseHeaderClasses.menuIcon}
/>
) : (
<ArrowDownIcon
color="primary"
className={collapseHeaderClasses.triggerMenuIcon}
className={collapseHeaderClasses.menuIcon}
/>
)}
</div>