move tree .is-active style to nested selector

canonical · Sep 3, 2024 · 3a53cdf · 3a53cdf
1 parent 9d242f8
commit 3a53cdf
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git a/scss/_patterns_list-tree.scss b/scss/_patterns_list-tree.scss
@@ -24,6 +24,10 @@
       color: $colors--theme--link-default;
       text-decoration: underline;
     }
+
+    &.is-active {
+      color: $colors--theme--link-default;
+    }
   }
 
   .p-list-tree {
@@ -55,11 +59,6 @@
     position: relative;
   }
 
-  .p-list-tree__toggle.is-active,
-  .p-list-tree__link.is-active {
-    color: $colors--theme--link-default;
-  }
-
   .p-list-tree__toggle[aria-expanded='false'] {
     &::before {
       @extend %list-tree-icon;

diff --git a/templates/docs/examples/patterns/list-tree/_script.js b/templates/docs/examples/patterns/list-tree/_script.js
@@ -57,9 +57,9 @@ function setupListTreeLink(listTreeLink) {
 
     // Remove active state from any other active nodes in this tree
     const linksToDeactivate = parentTree.querySelectorAll('.is-active');
-    linksToDeactivate.forEach(linkToDeactivate => {
+    linksToDeactivate.forEach((linkToDeactivate) => {
       linkToDeactivate.classList.remove('is-active');
-    })
+    });
 
     activeTarget.classList.add('is-active');
   });
@@ -75,7 +75,5 @@ for (var i = 0, l = listTreeToggles.length; i < l; i++) {
 var listTreeItems = document.querySelectorAll('li.p-list-tree__item:not(.p-list-tree__item--group)');
 var listTreeLinks = [...listTreeItems, ...listTreeToggles];
 for (var i = 0; i < listTreeLinks.length; i++) {
-  setupListTreeLink(
-    listTreeLinks[i]
-  );
+  setupListTreeLink(listTreeLinks[i]);
 }