primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-19 20:57:37 +03:00
Code Issues Projects Releases Wiki Activity

TreeView: remove bold active items + markup changes (#1996)

Browse Source 
* remove overrides + fix bold label

* Create curvy-ways-taste.md

* thank you stylelint

* lint

* lint
This commit is contained in:
Katie Langerman 2022-04-05 13:47:38 -07:00 committed by GitHub
parent ef3be81ad3
commit a4293bf921
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/curvy-ways-taste.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
TreeView: remove bold active items + markup changes

92
src/actionlist/action-list-tree.scss
View File

@ -1,4 +1,4 @@
// stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-max-specificity, no-duplicate-selectors, selector-max-type
// stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-max-specificity, selector-max-type, primer/spacing
// tree-view variant
// renders ActionList with default styling for tree-view
// collapse/expand icons presents as leadingActions, rotate 90deg
@ -40,87 +40,15 @@
}
}
// start: copy from ActionList proper- backwards compatible for treeview with different markup structure
&[aria-expanded] {
.ActionList--subGroup {
@media screen and (prefers-reduced-motion: no-preference) {
transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
}
.ActionList-content {
padding-left: $spacer-4;
}
}
// has 16px leading visual
.ActionList-content--visual16 + .ActionList--subGroup {
.ActionList-content {
padding-left: $spacer-5;
}
}
// has 20px leading visual
.ActionList-content--visual20 + .ActionList--subGroup {
.ActionList-content {
padding-left: $spacer-2 * 4.5; // 36px
}
}
// has 24px leading visual
.ActionList-content--visual24 + .ActionList--subGroup {
.ActionList-content {
padding-left: $spacer-6;
// normal font-weight for any active item
&.ActionList-item--navActive {
&:not(.ActionList-item--subItem) {
.ActionList-item-label {
font-weight: $font-weight-normal;
}
}
}
&[aria-expanded='true'] {
.ActionList-item-collapseIcon {
transition: transform 120ms linear;
transform: scaleY(-1);
}
.ActionList--subGroup {
height: auto;
overflow: visible;
visibility: visible;
opacity: 1;
transform: translateY(0);
}
}
&[aria-expanded='false'] {
.ActionList-item-collapseIcon {
transition: transform 120ms linear;
transform: scaleY(1);
}
.ActionList--subGroup {
height: 0;
overflow: hidden;
visibility: hidden;
opacity: 0;
transform: translateY(-$spacer-3);
}
// show active indicator on parent collapse if child is active
// this class changed in ActionList proper
&.ActionList-item--hasActiveSubItem {
background: var(--color-action-list-item-default-selected-bg);
&::before,
+ .ActionList-item::before {
visibility: hidden;
}
// blue accent line
&::after {
@include activeIndicatorLine;
}
}
}
// end copy
// nesting (infinite levels)
// target items inside expanded subgroup
&[aria-expanded] {
@ -129,7 +57,6 @@
// --ActionList-tree-depth is defined as an inline style referencing the aria-level of each item ie: aria-level="2"
.ActionList-content {
// stylelint-disable-next-line primer/spacing
padding-left: calc(#{$spacer-2} * var(--ActionList-tree-depth));
}
}
@ -141,6 +68,13 @@
transition: transform 120ms linear;
transform: rotate(0deg);
}
// normal weight for parent folder containing active child
.ActionList-content--hasActiveSubItem {
>.ActionList-item-label {
font-weight: $font-weight-normal;
}
}
}
&[aria-expanded='false'] {