Skip to content

Commit

Permalink
Merge branch 'main' into segmented-control-wrapping
Browse files Browse the repository at this point in the history
  • Loading branch information
langermank authored Jul 28, 2022
2 parents c0ee53e + add769c commit 115675b
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/mighty-toes-nail.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": patch
---

Autocomplete item selected state
5 changes: 5 additions & 0 deletions .changeset/tricky-mangos-nail.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": patch
---

Add `aria-selected` to ActionList-item for Autocomplete
27 changes: 25 additions & 2 deletions src/actionlist/action-list-item.scss
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors

@mixin activeIndicatorLine {
@mixin activeIndicatorLine($padding-left: -$actionList-item-padding-horizontal) {
position: absolute;
top: calc(50% - 12px);
left: -$actionList-item-padding-horizontal;
left: $padding-left;
width: $spacer-1;
height: $spacer-4;
content: '';
Expand Down Expand Up @@ -113,6 +113,29 @@
}
}

// Autocomplete [aria-selected] items

&[aria-selected='true'] {
font-weight: $font-weight-normal;
background: var(--color-action-list-item-default-selected-bg);

@media (hover: hover) {
&:hover {
background-color: var(--color-action-list-item-default-hover-bg);
}
}

&::before,
+ .ActionList-item::before {
visibility: hidden;
}

// blue accent line
&::after {
@include activeIndicatorLine(-$spacer-1);
}
}

// active state [aria-current]

&.ActionList-item--navActive {
Expand Down

0 comments on commit 115675b

Please sign in to comment.