TreeView single item nesting (#1937)

* add class for singleton nesting * Create cold-ducks-deny.md
primer · Feb 11, 2022 · 67f0800 · 67f0800
1 parent c53ecdf
commit 67f0800
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 5 deletions.
diff --git a/.changeset/cold-ducks-deny.md b/.changeset/cold-ducks-deny.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+TreeView single item nesting
diff --git 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
@@ -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
@@ -157,6 +157,13 @@ export default {
       table: {
         category: 'HTML'
       }
+    },
+    containsActiveSubItem: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
     }
   }
 }
@@ -177,15 +184,20 @@ export const TreeViewListItemCollapsibleTemplate = ({
   ariaSetSize,
   ariaPosInset,
   ariaLevel,
-  ariaDisabled
+  ariaDisabled,
+  containsActiveSubItem
 }) => {
   const [isCollapsed, itemIsCollapsed] = useToggle()
   const itemStyle = {
     '--ActionList-tree-depth': `${ariaLevel}`
   }
   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
@@ -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 {