Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ActionList item outlines for high contrast theme #1856

Merged
merged 15 commits into from
Jan 14, 2022
Merged

ActionList item outlines for high contrast theme #1856

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
045f6a7
fresh branch
langermank Dec 22, 2021
4fd2555
Stylelint auto-fixes
actions-user Dec 22, 2021
69e0153
Create few-mice-scream.md
langermank Dec 22, 2021
60cee7c
Update src/actionlist/action-list-item.scss
langermank Dec 22, 2021
792e3d9
change to box-shadow
langermank Dec 22, 2021
1ddc38e
lint
langermank Dec 22, 2021
b192b13
compromise
langermank Dec 23, 2021
33b6d9a
add reference
langermank Dec 23, 2021
487baa4
lint
langermank Dec 23, 2021
f43ff15
Merge branch 'main' of https://github.com/primer/css into actionlist-…
langermank Jan 13, 2022
832ccf0
fix merge, lint
langermank Jan 13, 2022
cc02948
adjust active state
langermank Jan 13, 2022
08115f1
lint
langermank Jan 13, 2022
ba5ee9e
Stylelint auto-fixes
actions-user Jan 13, 2022
a02806b
Update few-mice-scream.md
langermank Jan 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/few-mice-scream.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": patch
---

ActionList item outlines for high contrast theme
43 changes: 26 additions & 17 deletions src/actionlist/action-list-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,30 +34,50 @@
}

// only hover li without list as children
&:not(.ActionList-item--hasSubItem) {
&:not(.ActionList-item--hasSubItem),
// target contents of first child li if sub-item (li wraps item label + nested ul)
&.ActionList-item--hasSubItem > .ActionList-content {
&:hover {
cursor: pointer;
background-color: var(--color-action-list-item-default-hover-bg);

// stylelint-disable-next-line selector-max-specificity
&:not(.ActionList-item--navActive) {
// Support for "Windows high contrast mode"
outline: $border-style $border-width transparent;
outline-offset: -$border-width;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 0 0 2px var(--color-action-list-item-default-active-border);
}
}

&:active {
background: var(--color-action-list-item-default-active-bg);

// stylelint-disable-next-line selector-max-specificity
&:not(.ActionList-item--navActive) {
// Support for "Windows high contrast mode" https://sarahmhigley.com/writing/whcm-quick-tips/
outline: $border-style $border-width transparent;
outline-offset: -$border-width;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 0 0 2px var(--color-action-list-item-default-active-border);
}

@media screen and (prefers-reduced-motion: no-preference) {
animation: ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);
}

// stylelint-disable primer/box-shadow
@keyframes ActionList-item-active-bg {
// stylelint-disable-next-line max-nesting-depth
// stylelint-disable-next-line max-nesting-depth, selector-max-specificity
50% {
box-shadow: inset 0 0 0 rgba(#000, 0.04);
// this could work if primitive supported rgb (not valid right now)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we have to compromise on the fun interaction here for now. We could stack box-shadows to ensure we have a contrast border around the shadow that makes the item feel like its shrinking, but its not valid to use rgba() on a CSS variable that resolves as a hex. It would need to be rgb. 😞

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@langermank sorry I missed this comment!

I think we could remove the inset box-shadow while keeping the scaling interaction in that case :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vdepizzol no worries! Okie, I think I got it 👍

// box-shadow: inset 0px 2px 12px 6px rgba(var(--color-canvas-default), 0.4), inset 0px 0px 0px 2px var(--color-action-list-item-default-active-border)
transform: scale(1);
}

// stylelint-disable-next-line max-nesting-depth
// stylelint-disable-next-line max-nesting-depth, selector-max-specificity
100% {
box-shadow: inset 0 3px 9px rgba(#000, 0.04);
transform: scale(0.97);
}
}
Expand All @@ -67,25 +87,14 @@
&:hover,
&:active {
// hide dividers
// stylelint-disable-next-line selector-max-specificity
// stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
.ActionList-item-label::before,
+ .ActionList-item .ActionList-item-label::before {
visibility: hidden;
}
}
}

// target contents of li if sub-item (li wraps item label + nested ul)
// collapse styles here
&.ActionList-item--hasSubItem {
// first child
> .ActionList-content {
&:hover {
background-color: var(--color-action-list-item-default-hover-bg);
}
}
}

// active state [aria-current]

&.ActionList-item--navActive {
Expand Down