Skip to content
Permalink
Browse files
feat(tree): updated defaultTreeItemRenderer for class names
The `defaultTreeItemRenderer` will now correctly pass the `className`
and `liClassName` attributes as props to the `TreeItem` by default. This
helps with overriding the default styles of when using the `Layout`'s
navigation tree.

Note: You'll still need to use the `getItemProps` prop if you want to
specify custom styles while the tree item is `active` (`selected` state)

Closes #920
  • Loading branch information
mlaursen committed Aug 19, 2020
1 parent b3dbfc5 commit 3c61f3cd77764e32de6e093bc61813a6b9e45c6f
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 0 deletions.
@@ -67,4 +67,23 @@ describe("Tree", () => {
const tree = getByRole("tree");
expect(tree.firstElementChild).not.toBeNull();
});

it("should pass the tree item's className and liClassName attributes by default", () => {
const data = {
"item-1": {
parentId: null,
itemId: "item-1",
name: "Item 1",
className: "item-1-class-name",
liClassName: "item-1-li-class-name",
},
};

const { container, getByRole } = render(<Tree {...PROPS} data={data} />);
expect(container).toMatchSnapshot();

const item = getByRole("treeitem");
expect(item.className).toContain("item-1-li-class-name");
expect(item.children[0].className).toContain("item-1-class-name");
});
});
@@ -169,3 +169,38 @@ exports[`Tree should be able to use a rootId that is not null 1`] = `
</ul>
</div>
`;

exports[`Tree should pass the tree item's className and liClassName attributes by default 1`] = `
<div>
<ul
aria-activedescendant=""
class="rmd-list rmd-tree"
id="tree"
role="tree"
tabindex="0"
>
<li
aria-level="1"
aria-posinset="1"
aria-setsize="1"
class="rmd-tree-item item-1-li-class-name"
id="tree-item-1"
role="treeitem"
tabindex="-1"
>
<span
class="rmd-tree-item__content rmd-tree-item__content--clickable item-1-class-name"
>
<span
class="rmd-list-item__text"
>
Item 1
</span>
<span
class="rmd-ripple-container"
/>
</span>
</li>
</ul>
</div>
`;
@@ -74,6 +74,8 @@ export default function defaultTreeItemRenderer(
let isLink: boolean | undefined;
let readOnly: boolean | undefined;
let disabled: boolean | undefined;
let className: string | undefined;
let liClassName: string | undefined;
if (typeof treeItem.isLink === "boolean") {
({ isLink } = treeItem);
}
@@ -86,6 +88,14 @@ export default function defaultTreeItemRenderer(
({ disabled } = treeItem);
}

if (typeof treeItem.className === "string") {
({ className } = treeItem);
}

if (typeof treeItem.liClassName === "string") {
({ liClassName } = treeItem);
}

const overrides = getItemProps({
...treeItem,
focused,
@@ -125,6 +135,8 @@ export default function defaultTreeItemRenderer(
rightAddonPosition={rightAddonPosition}
expanderLeft={expanderLeft}
expanderIcon={expanderIcon}
className={className}
liClassName={liClassName}
{...overrides}
>
{children}

0 comments on commit 3c61f3c

Please sign in to comment.