Tree dividers support (#1599)

`Tree` now supports `dividers` to produce a small visual space between each `TreeItem` displayed in the list so that adjacent items in a "selected" or active state have visual separation.

Author: Luke Bowerman

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- `Tree` now supports `dividers` to produce a small visual space between each `TreeItem` displayed in the list so that adjacent items in a "selected" or active state have visual separation.
 - `Tooltip` and `useTooltip` now include a brief delay before showing
   - `delay` prop controls the length
 - `IconButton` supports `toggle` prop (uses `key` color when toggled and `aria-pressed`)

packages/components/snapshots/Tree/Border Radius Override-snap.png

@@ -82,6 +82,12 @@ export interface TreeProps extends AccordionProps {
    * Prevent text wrapping on long labels and instead render truncated text
    **/
   truncate?: boolean
+  /**
+   * Produce a small visual space between each `TreeItem` displayed in the list so adjacent
+   * items that are in a "selected" or active state have visual separation.
+   * @default false
+   */
+  dividers?: boolean
 }
 
 const indicatorProps: AccordionIndicatorProps = {
@@ -104,6 +110,7 @@ const TreeLayout: FC<TreeProps> = ({
   className,
   visuallyAsBranch,
   truncate,
+  dividers,
   ...restProps
 }) => {
   const disclosureRef = useRef<HTMLDivElement>(null)
@@ -158,6 +165,7 @@ const TreeLayout: FC<TreeProps> = ({
         depth={depth}
         hovered={isHovered}
         visuallyAsBranch={visuallyAsBranch}
+        dividers={dividers}
       >
         {innerAccordion}
       </TreeStyle>
@@ -208,8 +216,15 @@ interface TreeStyleProps {
   depth: number
   hovered: boolean
   visuallyAsBranch?: boolean
+  dividers?: boolean
 }
 
+export const dividersCSS = css`
+  ${TreeItem} {
+    margin-top: 1px;
+  }
+`
+
 export const TreeStyle = styled.div<TreeStyleProps>`
   color: ${({ theme }) => theme.colors.text4};
   flex-shrink: 2;
@@ -230,6 +245,8 @@ export const TreeStyle = styled.div<TreeStyleProps>`
     }
   }
 
+  ${({ dividers }) => dividers && dividersCSS}
+
   ${TreeItemInner} {
     border-width: 0;
     height: 100%;

packages/components/src/Tree/Tree.tsx

@@ -30,7 +30,7 @@ import { AccordionDisclosureStyle } from '../..'
 import { TreeItem, Tree, TreeItemLabel } from '..'
 
 export const BorderRadiusOverride = () => (
-  <BorderRadiusOverrideTree label="Created" defaultOpen>
+  <BorderRadiusOverrideTree label="Created" defaultOpen dividers>
     <TreeItem>Created Date</TreeItem>
     <TreeItem>Created Month</TreeItem>
     <TreeItem>Created Year</TreeItem>