Actionlist tree-view CSS

.changeset/healthy-monkeys-complain.md

@@ -0,0 +1,6 @@
+---
+"@primer/css": patch
+---
+
+- Adds ActionList tree-view specific CSS
+- Minor bug fixes for ActionList default

docs/.storybook/preview-head.html

@@ -9,7 +9,7 @@
 
   .theme-wrap {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     height: 100vh;
   }
 

docs/src/stories/components/ActionList/ActionList.stories.jsx

@@ -29,6 +29,18 @@ export default {
         category: 'HTML'
       }
     },
+    variant: {
+      options: [0, 1], // iterator
+      mapping: [null, 'ActionList--tree'], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['default', 'tree-view']
+      },
+      description: 'Specifies variants for different types of lists',
+      table: {
+        category: 'CSS'
+      }
+    },
     ariaLabel: {
       name: 'ariaLabel',
       type: 'string',
@@ -96,14 +108,16 @@ export const ListTemplate = ({
   ariaLabelledBy,
   subGroup,
   listboxMultiSelect,
-  listPadding
+  listPadding,
+  variant
 }) => (
   <ul
     className={clsx(
       'ActionList',
       showDividers && 'ActionList--divided',
       subGroup && 'ActionList--subGroup',
-      listPadding && `${listPadding}`
+      listPadding && `${listPadding}`,
+      variant && `${variant}`
     )}
     role={role}
     aria-label={ariaLabel && ariaLabel}
@@ -120,9 +134,10 @@ Playground.args = {
   subGroup: false,
   showDividers: false,
   listboxMultiSelect: false,
-  listPadding: '',
+  listPadding: 0,
   ariaLabelledBy: '',
   groupId: '',
+  variant: 0,
   children: (
     <>
       <ListItemTemplate text="Action list item" />

docs/src/stories/components/ActionList/ActionListItem.stories.jsx

@@ -51,6 +51,13 @@ export default {
         category: 'CSS'
       }
     },
+    truncateItem: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
     containsActiveSubItem: {
       defaultValue: false,
       control: {type: 'boolean'},
@@ -188,12 +195,57 @@ export default {
         category: 'Interactive'
       }
     },
+    treeitem: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'HTML'
+      }
+    },
     ariaDisabled: {
       defaultValue: false,
       control: {type: 'boolean'},
       table: {
         category: 'Interactive'
       }
+    },
+    ariaLevel: {
+      name: 'ariaLevel',
+      type: 'string',
+      description: 'number - nested subgroup',
+      table: {
+        category: 'HTML'
+      }
+    },
+    ariaSetSize: {
+      name: 'ariaSetSize',
+      type: 'string',
+      description:
+        'Defines the number of treeitem elements in the set of treeitem elements that are in the same branch and at the same level within the hierarchy',
+      table: {
+        category: 'HTML'
+      }
+    },
+    ariaPosInset: {
+      name: 'ariaPosInset',
+      type: 'string',
+      description:
+        'Defines the position of the element within the set of other treeitem elements that are in the same branch and at the same level within the hierarchy.',
+      table: {
+        category: 'HTML'
+      }
+    },
+    fontSize: {
+      options: [0, 1], // iterator
+      mapping: ['', 'ActionList-content--fontSmall'], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['default', 'small']
+      },
+      description: 'Used to adjust font-size for subgroup items',
+      table: {
+        category: 'CSS'
+      }
     }
   }
 }
@@ -223,10 +275,19 @@ export const ListItemTemplate = ({
   listSemantic,
   ariaDisabled,
   containsActiveSubItem,
-  collapsibleLeading
+  collapsibleLeading,
+  truncateItem,
+  ariaLevel,
+  fontSize,
+  treeitem,
+  ariaSetSize,
+  ariaPosInset
 }) => {
   const [isCollapsed, itemIsCollapsed] = useToggle()
   const [isChecked, itemIsChecked] = useToggle()
+  const itemStyle = {
+    '--ActionList-tree-depth': `${ariaLevel}`
+  }
   return (
     <li
       className={clsx(
@@ -237,6 +298,10 @@ export const ListItemTemplate = ({
         containsActiveSubItem && `ActionList-item--hasActiveSubItem`,
         variant && `${variant}`
       )}
+      aria-level={ariaLevel ? `${ariaLevel}` : undefined}
+      aria-setsize={ariaSetSize ? `${ariaSetSize}` : undefined}
+      aria-posinset={ariaPosInset ? `${ariaPosInset}` : undefined}
+      style={itemStyle}
       onClick={collapsible || collapsibleLeading ? itemIsCollapsed : itemIsChecked}
       role={
         singleSelect
@@ -249,6 +314,8 @@ export const ListItemTemplate = ({
           ? undefined
           : href
           ? 'none'
+          : treeitem
+          ? 'treeitem'
           : undefined
       }
       id={id}
@@ -262,11 +329,14 @@ export const ListItemTemplate = ({
         <>
           <a
             href={href}
-            role={href && !listSemantic ? 'menuitem' : undefined}
+            role={
+              href && !listSemantic && !treeitem ? 'menuitem' : undefined || (href && treeitem) ? 'treeitem' : undefined
+            }
             aria-current={ariaCurrent}
             className={clsx(
               text && 'ActionList-content',
               size && `${size}`,
+              fontSize && `${fontSize}`,
               (leadingVisual || trailingVisual) && description && 'ActionList-content--blockDescription',
               leadingVisual && leadingVisualSize && `${leadingVisualSize}`
             )}
@@ -337,11 +407,17 @@ export const ListItemTemplate = ({
             )}
             {description && (
               <span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
-                <span className="ActionList-item-label">{text}</span>
+                <span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
+                  {text}
+                </span>
                 <span className="ActionList-item-description">{description}</span>
               </span>
             )}
-            {!description && text && <span className="ActionList-item-label">{text}</span>}
+            {!description && text && (
+              <span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
+                {text}
+              </span>
+            )}
             {trailingVisual && (
               <span
                 className="ActionList-item-visual ActionList-item-visual--trailing"
@@ -378,6 +454,7 @@ export const ListItemTemplate = ({
               className={clsx(
                 text && 'ActionList-content',
                 size && `${size}`,
+                fontSize && `${fontSize}`,
                 (leadingVisual || trailingVisual) && description && 'ActionList-content--blockDescription',
                 leadingVisual && leadingVisualSize && `${leadingVisualSize}`
               )}
@@ -446,11 +523,17 @@ export const ListItemTemplate = ({
               )}
               {description && (
                 <span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
-                  <span className="ActionList-item-label">{text}</span>
+                  <span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
+                    {text}
+                  </span>
                   <span className="ActionList-item-description">{description}</span>
                 </span>
               )}
-              {!description && text && <span className="ActionList-item-label">{text}</span>}
+              {!description && text && (
+                <span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
+                  {text}
+                </span>
+              )}
 
               {trailingVisual && (
                 <span
@@ -496,5 +579,6 @@ Playground.decorators = [
   )
 ]
 Playground.args = {
-  id: null
+  id: null,
+  truncateItem: false
 }

docs/src/stories/components/ActionList/ActionListItemFeatures.stories.jsx

@@ -548,3 +548,42 @@ DividerTextFilled.args = {
   id: 'some-id',
   variant: 'ActionList-sectionDivider--filled'
 }
+
+export const TruncateText = ListItemTemplate.bind({})
+TruncateText.storyName = 'Truncate text'
+TruncateText.args = {
+  ...ListItemTemplate.args,
+  truncateItem: true,
+  text: 'Item with trailing visual',
+  trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+            <path
+              fill-rule="evenodd"
+              d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
+            ></path>
+          </svg>`,
+  leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+            <path
+              fill-rule="evenodd"
+              d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
+            ></path>
+          </svg>`
+}
+
+export const WrapText = ListItemTemplate.bind({})
+WrapText.storyName = 'Wrap text'
+WrapText.args = {
+  ...ListItemTemplate.args,
+  text: 'This is a very long string of text that will wrap to another line on smaller screens',
+  trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+            <path
+              fill-rule="evenodd"
+              d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
+            ></path>
+          </svg>`,
+  leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+            <path
+              fill-rule="evenodd"
+              d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
+            ></path>
+          </svg>`
+}