fix(Tree): Detail padding is properly controllable (#2401)

Also: fixed className not being passed down to nested TreeStyle bug

Author: Elliot Park

packages/components/src/List/ListItem.tsx

@@ -225,7 +225,9 @@ const ListItemInternal = forwardRef(
       </Wrapper>
     )
 
-    const { accessory, content, hoverDisclosure } = getDetailOptions(detail)
+    const { accessory, content, hoverDisclosure, padding } = getDetailOptions(
+      detail
+    )
 
     const wrapperRef = useRef<HTMLLIElement | HTMLDivElement>(null)
     const actualRef = useForkedRef(wrapperRef, ref)
@@ -243,7 +245,10 @@ const ListItemInternal = forwardRef(
 
     const renderedDetail = detail && (
       <HoverDisclosure visible={!hoverDisclosure}>
-        <ListItemDetail pr={accessory ? itemDimensions.px : '0'}>
+        <ListItemDetail
+          pl={padding ? 'xsmall' : '0'}
+          pr={accessory && padding ? itemDimensions.px : '0'}
+        >
           {content}
         </ListItemDetail>
       </HoverDisclosure>

packages/components/src/List/types.ts

@@ -168,6 +168,12 @@ interface DetailOptions {
    * @default false
    */
   hoverDisclosure?: boolean
+  /**
+   * Padding is added to the left and and right of the detail container by default. You can
+   * optionally disable that behavior if you want to have fine-grained control.
+   * @default true
+   */
+  padding?: boolean
 }
 
 export type Detail = ReactNode | { content: ReactNode; options: DetailOptions }

packages/components/src/List/utils/getDetailOptions.ts

@@ -28,15 +28,17 @@ import { Detail } from '../types'
 
 // Simplifies the type check when dealing with ListItem and related components
 export const getDetailOptions = (detail: Detail) => {
-  let accessory, hoverDisclosure, content
+  let accessory, padding, hoverDisclosure, content
 
   if (typeof detail === 'object' && detail && 'options' in detail) {
     accessory = detail.options.accessory
     content = detail.content
+    padding =
+      detail.options.padding === undefined || detail.options.padding === true
     hoverDisclosure = detail.options.hoverDisclosure
   } else {
     content = detail
   }
 
-  return { accessory, content, hoverDisclosure }
+  return { accessory, content, hoverDisclosure, padding }
 }

packages/components/src/Tree/Tree.tsx

@@ -193,6 +193,7 @@ const TreeLayout: FC<TreeProps> = ({
       <TreeStyle
         border={hasBorder}
         branchFontWeight={branchFontWeight}
+        className={className}
         color={color}
         current={current}
         depth={depth}

packages/components/src/Tree/stories/FieldItem.tsx

@@ -104,6 +104,7 @@ export const FieldItem: FC<FieldItemProps> = ({
         options: {
           accessory: true,
           hoverDisclosure: !isFieldMenuOpen,
+          padding: false,
         },
       }}
       onKeyDown={(event) => {

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

@@ -54,7 +54,7 @@ const fields = (
     </TreeBranch>
     <BorderRadiusOverrideTree
       branchFontWeight
-      label={<Box px="xxsmall">Created</Box>}
+      label={<Box pl="xxsmall">Created</Box>}
     >
       <FieldItem>Created Date</FieldItem>
       <FieldItem>Created Month</FieldItem>
@@ -91,21 +91,21 @@ export const FieldPicker = () => (
       density={-3}
       defaultOpen={true}
       detail={3}
-      label={<Box px="xxsmall">Orders</Box>}
+      label={<Box pl="xxsmall">Orders</Box>}
       labelBackgroundOnly
     >
       {fields}
     </BorderRadiusOverrideTree>
     <BorderRadiusOverrideTree
       density={-3}
-      label={<Box px="xxsmall">Order Items</Box>}
+      label={<Box pl="xxsmall">Order Items</Box>}
       labelBackgroundOnly
     >
       {fields}
     </BorderRadiusOverrideTree>
     <BorderRadiusOverrideTree
       density={-3}
-      label={<Box px="xxsmall">Users</Box>}
+      label={<Box pl="xxsmall">Users</Box>}
       labelBackgroundOnly
     >
       {fields}