From 50bf83d4e98185ee322705879c62a58dde46e62c Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Fri, 11 Feb 2022 10:42:46 -0800
Subject: [PATCH 1/2] add class for singleton nesting

---
 .../ActionList/ActionListItem.stories.jsx     | 16 +++++++++---
 .../ActionList/ActionListTree.stories.jsx     | 25 +++++++++++++++++++
 .../TreeViewListItemCollapsible.stories.jsx   | 16 ++++++++++--
 src/actionlist/action-list-tree.scss          |  7 ++++++
 4 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/docs/src/stories/ui-patterns/ActionList/ActionListItem.stories.jsx b/docs/src/stories/ui-patterns/ActionList/ActionListItem.stories.jsx
index cb213b5e44..edf4fd7550 100644
--- a/docs/src/stories/ui-patterns/ActionList/ActionListItem.stories.jsx
+++ b/docs/src/stories/ui-patterns/ActionList/ActionListItem.stories.jsx
@@ -167,6 +167,13 @@ export default {
         category: 'HTML'
       }
     },
+    treeItemSingleton: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
     ariaDisabled: {
       defaultValue: false,
       control: {type: 'boolean'},
@@ -243,7 +250,8 @@ export const ListItemTemplate = ({
   treeitem,
   ariaSetSize,
   ariaPosInset,
-  menuItem
+  menuItem,
+  treeItemSingleton
 }) => {
   const [isChecked, itemIsChecked] = useToggle()
   const itemStyle = {
@@ -256,7 +264,8 @@ export const ListItemTemplate = ({
         ariaCurrent && 'ActionList-item--navActive',
         subItem && `ActionList-item--subItem`,
         hasSubItem && `ActionList-item--hasSubItem`,
-        variant && `${variant}`
+        variant && `${variant}`,
+        treeitem && treeItemSingleton && `ActionList-item--singleton`
       )}
       aria-level={ariaLevel ? `${ariaLevel}` : undefined}
       aria-setsize={ariaSetSize ? `${ariaSetSize}` : undefined}
@@ -466,5 +475,6 @@ Playground.decorators = [
   )
 ]
 Playground.args = {
-  truncateItem: false
+  truncateItem: false,
+  treeItemSingleton: false
 }
diff --git a/docs/src/stories/ui-patterns/ActionList/ActionListTree.stories.jsx b/docs/src/stories/ui-patterns/ActionList/ActionListTree.stories.jsx
index fc1890a09b..61780d63ed 100644
--- a/docs/src/stories/ui-patterns/ActionList/ActionListTree.stories.jsx
+++ b/docs/src/stories/ui-patterns/ActionList/ActionListTree.stories.jsx
@@ -50,6 +50,18 @@ const trailingVisual = `<svg aria-hidden="true" role="img" class="color-fg-atten
 export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon, text, truncateItem}) => (
   <ListTemplate ariaLabel="Some description" role="tree" variant="ActionList--tree">
     <>
+      <ListItemTemplate
+        truncateItem={truncateItem}
+        ariaLevel="1"
+        ariaSetSize="1"
+        ariaPosInset="1"
+        treeitem
+        text={text}
+        href="/"
+        leadingVisual={showSubItemIcon && file}
+        trailingVisual={trailingVisual}
+        treeItemSingleton
+      />
       <TreeViewListItemCollapsibleTemplate
         text="level 1"
         leadingVisual={showGroupIcon && folder}
@@ -59,6 +71,7 @@ export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon, text
         ariaPosInset="2"
         collapsePosition={0}
         containsSubItem
+        containsActiveSubItem
       >
         <ListTemplate listType="nested">
           <ListItemTemplate
@@ -150,6 +163,18 @@ export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon, text
           </TreeViewListItemCollapsibleTemplate>
         </ListTemplate>
       </TreeViewListItemCollapsibleTemplate>
+      <ListItemTemplate
+        truncateItem={truncateItem}
+        ariaLevel="1"
+        ariaSetSize="1"
+        ariaPosInset="1"
+        treeitem
+        text={text}
+        href="/"
+        leadingVisual={showSubItemIcon && file}
+        trailingVisual={trailingVisual}
+        treeItemSingleton
+      />
     </>
   </ListTemplate>
 )
diff --git a/docs/src/stories/ui-patterns/ActionList/TreeViewListItemCollapsible.stories.jsx b/docs/src/stories/ui-patterns/ActionList/TreeViewListItemCollapsible.stories.jsx
index 3442cd6f92..4c6d04b30c 100644
--- a/docs/src/stories/ui-patterns/ActionList/TreeViewListItemCollapsible.stories.jsx
+++ b/docs/src/stories/ui-patterns/ActionList/TreeViewListItemCollapsible.stories.jsx
@@ -157,6 +157,13 @@ export default {
       table: {
         category: 'HTML'
       }
+    },
+    containsActiveSubItem: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
     }
   }
 }
@@ -177,7 +184,8 @@ export const TreeViewListItemCollapsibleTemplate = ({
   ariaSetSize,
   ariaPosInset,
   ariaLevel,
-  ariaDisabled
+  ariaDisabled,
+  containsActiveSubItem
 }) => {
   const [isCollapsed, itemIsCollapsed] = useToggle()
   const itemStyle = {
@@ -185,7 +193,11 @@ export const TreeViewListItemCollapsibleTemplate = ({
   }
   return (
     <li
-      className={clsx('ActionList-item', containsSubItem && `ActionList-item--hasSubItem`)}
+      className={clsx(
+        'ActionList-item',
+        containsSubItem && `ActionList-item--hasSubItem`,
+        containsActiveSubItem && `ActionList-item--hasActiveSubItem`
+      )}
       onClick={itemIsCollapsed}
       id={id}
       aria-disabled={ariaDisabled ? 'true' : undefined}
diff --git a/src/actionlist/action-list-tree.scss b/src/actionlist/action-list-tree.scss
index e80ce4f9f5..19224e9d04 100644
--- a/src/actionlist/action-list-tree.scss
+++ b/src/actionlist/action-list-tree.scss
@@ -33,6 +33,13 @@
   }
 
   .ActionList-item {
+    // class for single tree items not within a group
+    &.ActionList-item--singleton {
+      .ActionList-content {
+        padding-left: $spacer-5;
+      }
+    }
+
     // start: copy from ActionList proper- backwards compatible for treeview with different markup structure
     &[aria-expanded] {
       .ActionList--subGroup {

From 90ade8f055bea19815503fb2150b70b510f1cb18 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Fri, 11 Feb 2022 10:49:31 -0800
Subject: [PATCH 2/2] Create cold-ducks-deny.md

---
 .changeset/cold-ducks-deny.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cold-ducks-deny.md

diff --git a/.changeset/cold-ducks-deny.md b/.changeset/cold-ducks-deny.md
new file mode 100644
index 0000000000..095c6267b9
--- /dev/null
+++ b/.changeset/cold-ducks-deny.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+TreeView single item nesting