Tree noIndent allows for nested Tree to align with adjacent TreeItems (#1600)

- Tree `branchAlign` allows for nested Tree to align with adjacent TreeItems
- Renamed `visuallyAsBranch` to `branchFontWeight` to ensure consistency

Co-authored-by: Elliot Park <[email protected]>

Author: Luke Bowerman

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `IconButton` supports `toggle` prop (uses `key` color when toggled and `aria-pressed`)
 - Improved test coverage / added image-snapshots
 - `ScheduleOutline` Icon artwork
+- `Tree` `noIndent` prop allows `Tree` to be indented at the same depth as adjacent `TreeItem`(s)
 
 ### Changed
 

packages/components/snapshots/Tree/Field Picker-snap.png

@@ -77,7 +77,12 @@ export interface TreeProps extends AccordionProps {
    * If true, the internal AccordionDisclosure will have fontWeight = 'Normal'
    * @default false
    */
-  visuallyAsBranch?: boolean
+  branchFontWeight?: boolean
+  /**
+   * Tree will be indented at the same depth as adjacent `TreeItem`(s)
+   * @default false
+   */
+  branchAlign?: boolean
   /**
    * Prevent text wrapping on long labels and instead render truncated text
    **/
@@ -108,7 +113,8 @@ const TreeLayout: FC<TreeProps> = ({
   icon,
   label,
   className,
-  visuallyAsBranch,
+  branchAlign,
+  branchFontWeight,
   truncate,
   dividers,
   ...restProps
@@ -164,8 +170,9 @@ const TreeLayout: FC<TreeProps> = ({
         border={hasBorder}
         depth={depth}
         hovered={isHovered}
-        visuallyAsBranch={visuallyAsBranch}
         dividers={dividers}
+        branchAlign={branchAlign}
+        branchFontWeight={branchFontWeight}
       >
         {innerAccordion}
       </TreeStyle>
@@ -215,7 +222,8 @@ interface TreeStyleProps {
   border?: boolean
   depth: number
   hovered: boolean
-  visuallyAsBranch?: boolean
+  branchAlign?: boolean
+  branchFontWeight?: boolean
   dividers?: boolean
 }
 
@@ -239,9 +247,10 @@ export const TreeStyle = styled.div<TreeStyleProps>`
     & > ${AccordionDisclosureStyle} {
       background-clip: padding-box;
       background-color: ${({ hovered }) => hovered && uiTransparencyBlend(2)};
-      font-weight: ${({ visuallyAsBranch, theme: { fontWeights } }) =>
-        visuallyAsBranch ? fontWeights.normal : fontWeights.semiBold};
-      ${({ depth, theme }) => generateIndent(depth, theme)}
+      font-weight: ${({ branchFontWeight, theme: { fontWeights } }) =>
+        branchFontWeight ? fontWeights.normal : fontWeights.semiBold};
+      ${({ depth, branchAlign, theme }) =>
+        generateIndent(branchAlign ? depth - 1 : depth, theme)}
     }
   }
 

packages/components/src/Tree/Tree.tsx

@@ -116,7 +116,6 @@ const PickerItem = ({ children = 'Cost', truncate = false }) => {
           onClick={() => alert('Clicked on cost!')}
           onMetaEnter={() => alert("Cmd + Enter'ed on cost!")}
           selected={!!overlay}
-          icon="FieldNumber"
         >
           <Space between>
             <TextWrapper>{children}</TextWrapper>
@@ -165,10 +164,10 @@ export const FieldPicker = () => (
       </PickerItem>
     </TreeGroup>
     <TreeGroup label="MEASURES" color="orange">
-      <Tree visuallyAsBranch label="Hello">
+      <Tree branchAlign branchFontWeight label="Hello">
         <PickerItem />
       </Tree>
-      <TreeItem icon="FieldString">Name</TreeItem>
+      <TreeItem>Name</TreeItem>
       <PickerItem />
       <PickerItem />
       <PickerItem />

packages/components/src/Tree/stories/FieldPicker.story.tsx

@@ -31,31 +31,31 @@ import { TreeItem } from '../TreeItem'
 
 const Template: Story<TreeProps> = (args) => (
   <Tree label="thelook" icon="ExploreOutline" {...args}>
-    <Tree visuallyAsBranch label="Orders" icon="VisibilityOutline" defaultOpen>
-      <Tree visuallyAsBranch label="Orders" icon="Table" defaultOpen>
+    <Tree label="Orders" icon="VisibilityOutline" defaultOpen>
+      <Tree label="Orders" icon="Table" defaultOpen>
         <TreeItem icon="IdeDimension">ID</TreeItem>
         <TreeItem icon="IdeDimension">Status</TreeItem>
         <TreeItem icon="IdeDimensionGroup">Created</TreeItem>
       </Tree>
-      <Tree visuallyAsBranch label="Products" icon="Table" defaultOpen>
+      <Tree label="Products" icon="Table" defaultOpen>
         <TreeItem icon="IdeDimension">Brand</TreeItem>
         <TreeItem icon="IdeDimension">ID</TreeItem>
         <TreeItem icon="IdeDimension">Department</TreeItem>
         <TreeItem icon="IdeDimension">Sku</TreeItem>
       </Tree>
-      <Tree visuallyAsBranch label="Users" icon="Table" defaultOpen>
+      <Tree label="Users" icon="Table" defaultOpen>
         <TreeItem icon="IdeDimension">ID</TreeItem>
         <TreeItem icon="IdeDimension">Name</TreeItem>
         <TreeItem icon="IdeDimensionGroup">Created</TreeItem>
       </Tree>
     </Tree>
-    <Tree visuallyAsBranch label="Users" icon="VisibilityOutline" defaultOpen>
-      <Tree visuallyAsBranch label="Orders" icon="Table" defaultOpen>
+    <Tree label="Users" icon="VisibilityOutline" defaultOpen>
+      <Tree label="Orders" icon="Table" defaultOpen>
         <TreeItem icon="IdeDimension">ID</TreeItem>
         <TreeItem icon="IdeDimension">Status</TreeItem>
         <TreeItem icon="IdeDimensionGroup">Created</TreeItem>
       </Tree>
-      <Tree visuallyAsBranch label="Users" icon="Table" defaultOpen>
+      <Tree label="Users" icon="Table" defaultOpen>
         <TreeItem icon="IdeDimension">ID</TreeItem>
         <TreeItem icon="IdeDimension">Name</TreeItem>
         <TreeItem icon="IdeDimensionGroup">Created</TreeItem>

packages/components/src/Tree/stories/FileTree.story.tsx

@@ -39,13 +39,15 @@ Use `detail` to display an element in the negative space of the `Tree` label.
 </Tree>
 ```
 
-Use the `visuallyAsBranch` prop if you'd like your `Tree`'s disclosure text to have a "normal" font weight.
+Use the `branchFontWeight` prop if you'd like your `Tree`'s disclosure text to have a "normal" font weight.
 
-This is especially useful when you want a nested `Tree` to match its sibling `TreeItem`s
+Use the `branchAlign` prop to prevent your nested `Tree` from being indented so its label is vertically aligned with adjacent `TreeItem`s.
+
+These is especially useful when you want a nested `Tree` to match its sibling `TreeItem`s
 
 ```jsx
 <Tree label="Orders" icon="Table" defaultOpen>
-  <Tree visuallyAsBranch label="Created" defaultOpen>
+  <Tree branchAlign branchFontWeight label="Created" defaultOpen>
     <TreeItem>Created Date</TreeItem>
     <TreeItem>Created Month</TreeItem>
     <TreeItem>Created Year</TreeItem>