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 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 = `