feat(tree-view): add icon and checkbox with proper spacing

cengage · Jun 23, 2022 · ad03a07 · ad03a07
1 parent 520a735
commit ad03a07
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx b/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx
@@ -7,6 +7,7 @@ import { InverseContext, useIsInverse } from '../../inverse';
 import { Transition } from '../Transition';
 
 import { ExpandLessIcon, ExpandMoreIcon, IconProps } from 'react-magma-icons';
+import { Checkbox } from '../Checkbox';
 
 /**
 * @children required
@@ -56,12 +57,6 @@ const IconWrapper = styled.span<{ noIconButton?: boolean; isInverse?: boolean }>
       ? props.theme.colors.neutral100
       : props.theme.colors.neutral500};
   margin-right: ${props => props.theme.spaceScale.spacing03};
-  margin-left: ${props =>
-    props.noIconButton
-    ? addPxStyleStrings([
-      props.theme.spaceScale.spacing05,
-      props.theme.iconSizes.medium])
-    : props.theme.spaceScale.spacing05};
 
   svg {
     height: ${props => props.theme.iconSizes.medium}px;
@@ -79,6 +74,17 @@ const StyledButton = styled.button<{ theme?: ThemeInterface; isInverse?: boolean
   vertical-align: middle;
 `;
 
+const StyledCheckbox = styled.div<{theme?: ThemeInterface; isInverse?: boolean;}>`
+  border: none;
+  color: inherit;
+  background: inherit;
+  padding: 0;
+  margin-right: ${props => props.theme.spaceScale.spacing05};
+  vertical-align: middle;
+  display: inline-flex;
+  width: ${props => props.theme.iconSizes.medium}px;
+`
+
 export const TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(
   (props, ref) => {
     const {children, testId, isInverse: isInverseProp, icon, ...rest} = props;
@@ -89,6 +95,8 @@ export const TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(
 
     const hasOwnTreeItems = React.Children.toArray(children).filter((child: React.ReactElement<any>) => child.type === TreeItem).length > 0;
 
+    const [selected, updateSelected] = React.useState(false);
+
     return (<InverseContext.Provider value={{ isInverse, }}>
       <StyledTreeItem
         theme={theme} 
@@ -105,6 +113,11 @@ export const TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(
             }
           </StyledButton>
         }
+
+        <StyledCheckbox isInverse={isInverse} theme={theme}>
+          <Checkbox labelText="" onChange={() => updateSelected(!selected)}></Checkbox>
+        </StyledCheckbox>
+
         {icon &&
           <IconWrapper isInverse={isInverse} theme={theme} noIconButton={hasOwnTreeItems}>
           {icon}

diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx
@@ -18,37 +18,36 @@ export default {
 export const Default = (args) => {
   return (
     <TreeView {...args}>
-      <TreeItem {...args}>Home
-        <TreeItem {...args}>Bath
-          <TreeItem {...args}>Bathroom Storage
+      <TreeItem icon={<FolderIcon/>} {...args}>Home
+        <TreeItem icon={<FolderIcon/>} {...args}>Bath
+          <TreeItem icon={<FolderIcon/>} {...args}>Bathroom Storage
             <TreeItem {...args}>Item 1</TreeItem>
             <TreeItem {...args}>Item 2</TreeItem>
           </TreeItem>
           <TreeItem {...args}>Shower Curtains & Accessories
           </TreeItem>
-          <TreeItem {...args}>Bath Towels
+          <TreeItem icon={<FolderIcon/>} {...args}>Bath Towels
             <TreeItem {...args}>Item 1</TreeItem>
             <TreeItem {...args}>Item 2</TreeItem>
           </TreeItem>
         </TreeItem>
-        <TreeItem {...args}>Bedding
+        <TreeItem icon={<FolderIcon/>} {...args}>Bedding
             <TreeItem {...args}>Item 1</TreeItem>
             <TreeItem {...args}>Item 2</TreeItem>
         </TreeItem>
         <TreeItem {...args}>Arts & Crafts
         </TreeItem>
-        <TreeItem {...args}>Storage & Organization
+        <TreeItem icon={<FolderIcon/>} {...args}>Storage & Organization
           <TreeItem {...args}>Item 1</TreeItem>
           <TreeItem {...args}>Item 2</TreeItem>
         </TreeItem>
       </TreeItem>
-      <TreeItem {...args}>Furniture
+      <TreeItem icon={<FolderIcon/>} {...args}>Furniture
         <TreeItem {...args}>Item 1</TreeItem>
         <TreeItem {...args}>Item 2</TreeItem>
       </TreeItem>
-      <TreeItem {...args}>Kitchen & Dining
-      </TreeItem>
-      <TreeItem {...args}>Patio & Garden
+      <TreeItem {...args}>Kitchen & Dining</TreeItem>
+      <TreeItem icon={<FolderIcon/>} {...args}>Patio & Garden
         <TreeItem {...args}>Item 1</TreeItem>
         <TreeItem {...args}>Item 2</TreeItem>
       </TreeItem>