Merge pull request #473 from mashmatrix/support-slds-2-tree-tree-node

Update `Tree` and `TreeNode` for SLDS2

Author: stomita

src/scripts/Tree.tsx

@@ -1,4 +1,10 @@
-import React, { HTMLAttributes, createContext, FC, useMemo } from 'react';
+import React, {
+  useId,
+  HTMLAttributes,
+  createContext,
+  FC,
+  useMemo,
+} from 'react';
 import classnames from 'classnames';
 import { TreeNodeProps } from './TreeNode';
 
@@ -37,7 +43,7 @@ export const Tree: FC<TreeProps> = (props) => {
     onNodeToggle,
     ...rprops
   } = props;
-  const treeClassNames = classnames(className, 'slds-tree-container');
+  const treeClassNames = classnames(className, 'slds-tree_container');
   const ctx = useMemo(
     () => ({
       toggleOnNodeClick,
@@ -47,10 +53,19 @@ export const Tree: FC<TreeProps> = (props) => {
     }),
     [toggleOnNodeClick, onNodeClick, onNodeLabelClick, onNodeToggle]
   );
+  const id = useId();
   return (
-    <div className={treeClassNames} role='application' {...rprops}>
-      {label ? <h4 className='slds-text-heading_label'>{label}</h4> : null}
-      <ul className='slds-tree' role='tree'>
+    <div className={treeClassNames} {...rprops}>
+      {label ? (
+        <h4 className='slds-tree__group-header' id={id}>
+          {label}
+        </h4>
+      ) : null}
+      <ul
+        aria-labelledby={label ? id : undefined}
+        className='slds-tree'
+        role='tree'
+      >
         <TreeContext.Provider value={ctx}>{children}</TreeContext.Provider>
       </ul>
     </div>

src/scripts/TreeNode.tsx

@@ -28,6 +28,7 @@ export type TreeNodeProps = {
   leaf?: boolean;
   loading?: boolean;
   level?: number;
+  disabled?: boolean;
   children?: ReactNode;
   onClick?: (e: React.MouseEvent) => void;
   onLabelClick?: (e: React.MouseEvent) => void;
@@ -83,7 +84,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
       )}
       {!leaf ? (
         <Button
-          className='slds-m-right_small'
+          className='slds-m-right_x-small'
           aria-controls=''
           type='icon-bare'
           icon={icon}
@@ -93,14 +94,15 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
           style={loading ? { opacity: 0, pointerEvents: 'none' } : undefined}
         />
       ) : null}
-      <a
-        className='slds-truncate'
-        tabIndex={-1}
-        role='presentation'
-        onClick={onLabelClick}
-      >
-        {ItemRender ? <ItemRender {...props} /> : label}
-      </a>
+      <span className='slds-has-flexi-truncate'>
+        <a
+          className='slds-tree__item-label slds-truncate'
+          onClick={onLabelClick}
+          title={typeof label === 'string' ? label : undefined}
+        >
+          {ItemRender ? <ItemRender {...props} /> : label}
+        </a>
+      </span>
       {leaf ? children : null}
     </div>
   );
@@ -114,6 +116,8 @@ export const TreeNode: FC<TreeNodeProps> = (props) => {
     defaultOpened,
     opened: opened_,
     leaf,
+    selected,
+    disabled,
     children,
     onClick: onClick_,
     onToggle: onToggle_,
@@ -153,15 +157,31 @@ export const TreeNode: FC<TreeNodeProps> = (props) => {
     'slds-show': opened,
     'slds-hide': !opened,
   });
+  const labelText =
+    typeof rprops.label === 'string' ? rprops.label : 'Tree Branch';
+  const ariaLabel = !leaf ? labelText : undefined;
   return (
     <li
       role='treeitem'
       aria-level={level}
-      {...(leaf ? {} : { 'aria-expanded': opened })}
+      aria-expanded={!leaf ? opened : undefined}
+      aria-label={ariaLabel}
+      aria-selected={selected || undefined}
+      aria-disabled={disabled || undefined}
     >
       <TreeNodeItem
         {...rprops}
-        {...{ leaf, opened, level, children, onClick, onLabelClick, onToggle }}
+        {...{
+          leaf,
+          opened,
+          level,
+          selected,
+          disabled,
+          children,
+          onClick,
+          onLabelClick,
+          onToggle,
+        }}
       />
       {!leaf ? (
         <ul className={grpClassNames} role='group'>