[Bug] TreeView animation and padding fix (#2019)

* restore deleted logic * fix stories * Create fuzzy-pants-decide.md * missing closed scenario
primer · Apr 6, 2022 · 57be2d5 · 57be2d5
1 parent 3c6d30f
commit 57be2d5
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 375 deletions.
diff --git a/.changeset/fuzzy-pants-decide.md b/.changeset/fuzzy-pants-decide.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+[Bug] TreeView animation and padding fix
diff --git a/docs/src/stories/ui-patterns/ActionList/ActionListItem.stories.jsx b/docs/src/stories/ui-patterns/ActionList/ActionListItem.stories.jsx
@@ -297,9 +297,7 @@ export const ListItemTemplate = ({
         <>
           <a
             href={href}
-            role={
-              href && !listSemantic && !treeitem ? 'menuitem' : undefined || (href && treeitem) ? 'treeitem' : undefined
-            }
+            role={href && !listSemantic && !treeitem ? 'menuitem' : undefined}
             aria-current={ariaCurrent}
             className={clsx(
               text && 'ActionList-content',

diff --git a/docs/src/stories/ui-patterns/ActionList/ActionListItemCollapsible.stories.jsx b/docs/src/stories/ui-patterns/ActionList/ActionListItemCollapsible.stories.jsx
@@ -131,6 +131,14 @@ export default {
       table: {
         category: 'HTML'
       }
+    },
+    ariaLevel: {
+      name: 'ariaLevel',
+      type: 'string',
+      description: 'number - nested subgroup',
+      table: {
+        category: 'HTML'
+      }
     }
   }
 }
@@ -149,11 +157,20 @@ export const ActionListItemCollapsibleTemplate = ({
   containsActiveSubItem,
   truncateItem,
   collapsePosition,
-  ariaControlsId
+  ariaControlsId,
+  ariaLevel
 }) => {
   const [isCollapsed, itemIsCollapsed] = useToggle()
+  const itemStyle = {
+    '--ActionList-tree-depth': `${ariaLevel}`
+  }
   return (
-    <li className={clsx('ActionList-item', containsSubItem && `ActionList-item--hasSubItem`)}>
+    <li
+      className={clsx('ActionList-item', containsSubItem && `ActionList-item--hasSubItem`)}
+      style={ariaLevel && itemStyle}
+      aria-level={ariaLevel ? `${ariaLevel}` : undefined}
+      role={ariaLevel ? 'treeitem' : undefined}
+    >
       <button
         onClick={itemIsCollapsed}
         aria-expanded={isCollapsed ? 'false' : 'true'}

diff --git a/docs/src/stories/ui-patterns/ActionList/ActionListTree.stories.jsx b/docs/src/stories/ui-patterns/ActionList/ActionListTree.stories.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {ListTemplate} from './ActionList.stories'
 import {ListItemTemplate} from './ActionListItem.stories'
-import {TreeViewListItemCollapsibleTemplate} from './TreeViewListItemCollapsible.stories'
+import {ActionListItemCollapsibleTemplate} from '../../ui-patterns/ActionList/ActionListItemCollapsible.stories.jsx'
 
 export default {
   title: 'UI Patterns/ActionList/ActionTreeView',
@@ -53,22 +53,17 @@ export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon, text
       <ListItemTemplate
         truncateItem={truncateItem}
         ariaLevel="1"
-        ariaSetSize="1"
-        ariaPosInset="1"
         treeitem
         text={text}
-        href="/"
         leadingVisual={showSubItemIcon && file}
         trailingVisual={trailingVisual}
         treeItemSingleton
       />
-      <TreeViewListItemCollapsibleTemplate
+      <ActionListItemCollapsibleTemplate
         text="level 1"
         leadingVisual={showGroupIcon && folder}
         truncateItem={truncateItem}
         ariaLevel="1"
-        ariaSetSize="2"
-        ariaPosInset="2"
         collapsePosition={0}
         containsSubItem
         containsActiveSubItem
@@ -77,32 +72,25 @@ export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon, text
           <ListItemTemplate
             truncateItem={truncateItem}
             ariaLevel="2"
-            ariaSetSize="2"
-            ariaPosInset="1"
             treeitem
             subItem
             text={text}
-            href="/"
             ariaCurrent="page"
             leadingVisual={showSubItemIcon && file}
             trailingVisual={trailingVisual}
           />
-          <TreeViewListItemCollapsibleTemplate
+          <ActionListItemCollapsibleTemplate
             text="level 2"
             leadingVisual={showGroupIcon && folder}
             truncateItem={truncateItem}
             ariaLevel="2"
-            ariaSetSize="2"
-            ariaPosInset="2"
             collapsePosition={0}
             containsSubItem
           >
             <ListTemplate listType="nested">
-              <TreeViewListItemCollapsibleTemplate
+              <ActionListItemCollapsibleTemplate
                 text="level 3"
                 ariaLevel="3"
-                ariaSetSize="2"
-                ariaPosInset="1"
                 leadingVisual={showGroupIcon && folder}
                 truncateItem={truncateItem}
                 collapsePosition={0}
@@ -112,65 +100,50 @@ export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon, text
                   <ListItemTemplate
                     truncateItem={truncateItem}
                     ariaLevel="4"
-                    ariaSetSize="4"
-                    ariaPosInset="1"
                     treeitem
                     subItem
                     text={text}
-                    href=""
                     leadingVisual={showSubItemIcon && file}
                     trailingVisual={trailingVisual}
                   />
                   <ListItemTemplate
                     truncateItem={truncateItem}
                     ariaLevel="4"
-                    ariaSetSize="4"
-                    ariaPosInset="2"
                     treeitem
                     subItem
                     text={text}
-                    href=""
                     leadingVisual={showSubItemIcon && file}
                     trailingVisual={trailingVisual}
                   />
                   <ListItemTemplate
                     truncateItem={truncateItem}
                     ariaLevel="4"
-                    ariaSetSize="4"
-                    ariaPosInset="3"
                     treeitem
                     subItem
                     text={text}
-                    href=""
                     leadingVisual={showSubItemIcon && file}
                     trailingVisual={trailingVisual}
                   />
                 </ListTemplate>
-              </TreeViewListItemCollapsibleTemplate>
+              </ActionListItemCollapsibleTemplate>
               <ListItemTemplate
                 truncateItem={truncateItem}
                 ariaLevel="3"
-                ariaSetSize="2"
-                ariaPosInset="2"
                 treeitem
                 subItem
                 text={text}
-                href=""
                 leadingVisual={showSubItemIcon && file}
                 trailingVisual={trailingVisual}
               />
             </ListTemplate>
-          </TreeViewListItemCollapsibleTemplate>
+          </ActionListItemCollapsibleTemplate>
         </ListTemplate>
-      </TreeViewListItemCollapsibleTemplate>
+      </ActionListItemCollapsibleTemplate>
       <ListItemTemplate
         truncateItem={truncateItem}
         ariaLevel="1"
-        ariaSetSize="1"
-        ariaPosInset="1"
         treeitem
         text={text}
-        href="/"
         leadingVisual={showSubItemIcon && file}
         trailingVisual={trailingVisual}
         treeItemSingleton