primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-26 02:38:32 +03:00
Code Issues Projects Releases Wiki Activity

Patch: ActionList divider conflict with inline description (#1892)

Browse Source 
* stash change

* fix divider for inline description

* fix hover state

* Create clever-jars-suffer.md

* Stylelint auto-fixes

* Update clever-jars-suffer.md

* Update src/actionlist/action-list.scss

Co-authored-by: Vinicius Depizzol <vdepizzol@github.com>

Co-authored-by: Actions Auto Build <actions@github.com>
Co-authored-by: Vinicius Depizzol <vdepizzol@github.com>
This commit is contained in:
Katie Langerman 2022-01-20 08:49:27 -08:00 committed by GitHub
parent 74d0438bd4
commit 55bd498b73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/clever-jars-suffer.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Patch: Fix ActionList--divided for label with inline description scenarios

5
docs/src/stories/components/ActionList/ActionListItem.stories.jsx
View File

@ -412,8 +412,8 @@ export const ListItemTemplate = ({
<span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
<span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
{text}
<span className="ActionList-item-description">{description}</span>
</span>
<span className="ActionList-item-description">{description}</span>
</span>
)}
{!description && text && (
@ -528,9 +528,8 @@ export const ListItemTemplate = ({
<span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
<span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
{text}
<span className="ActionList-item-description">{description}</span>
</span>
<span className="ActionList-item-description">{description}</span>
</span>
)}
{!description && text && (

6
src/actionlist/action-list-item.scss
View File

@ -92,6 +92,11 @@
+ .ActionList-item .ActionList-item-label::before {
visibility: hidden;
}
.ActionList-item-descriptionWrap--inline::before,
+ .ActionList-item .ActionList-item-descriptionWrap--inline::before {
visibility: hidden;
}
}
}
// stylelint-disable-next-line no-duplicate-selectors
@ -488,6 +493,7 @@
// inline
.ActionList-item-descriptionWrap--inline {
position: relative;
flex-direction: row;
align-items: baseline;

24
src/actionlist/action-list.scss
View File

@ -21,6 +21,24 @@
background: var(--color-action-list-item-inline-divider);
}
// if descriptionWrap--inline exists, move pseudo divider to wrapper
.ActionList-item-descriptionWrap--inline {
&::before {
position: absolute;
top: -$actionList-item-padding-vertical;
display: block;
width: 100%;
height: $border-width;
content: '';
background: var(--color-action-list-item-inline-divider);
}
// unset the default label pseudo
.ActionList-item-label::before {
content: unset;
}
}
// hide divider if item is active
.ActionList-item--navActive {
// stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
@ -36,3 +54,9 @@
.ActionList-sectionDivider + .ActionList-item .ActionList-item-label::before {
visibility: hidden;
}
// hide if item is first of type with label::before, or is the first item after a sectionDivider
.ActionList-item:first-of-type .ActionList-item-descriptionWrap--inline::before,
.ActionList-sectionDivider + .ActionList-item .ActionList-item-descriptionWrap--inline::before {
visibility: hidden;
}