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

Author: mlaursen

packages/tree/src/__tests__/Tree.tsx

@@ -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");
+  });
 });

packages/tree/src/__tests__/__snapshots__/Tree.tsx.snap

@@ -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>
+`;

packages/tree/src/defaultTreeItemRenderer.tsx

@@ -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}