fix: add left margin to Tree component (#2246)

* fix: fix margin of Tree component * fix: use padding instead of margin
nexxtway · Jun 7, 2021 · 2632a9b · 2632a9b
1 parent 9a1804c
commit 2632a9b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/components/Tree/child.js b/src/components/Tree/child.js
@@ -116,7 +116,12 @@ export default function Child(props) {
                 </Label>
             </NodeContainer>
             <RenderIf isTrue={hasChildren && isExpanded}>
-                <ChildrenContainerUl icon={icon} isChecked={isChecked} role="group">
+                <ChildrenContainerUl
+                    icon={icon}
+                    isChecked={isChecked}
+                    ariaLevelValue={ariaLevelValue}
+                    role="group"
+                >
                     <TreeChildren
                         data={children}
                         onNodeCheck={onNodeCheck}

diff --git a/src/components/Tree/styled/childrenContainer.js b/src/components/Tree/styled/childrenContainer.js
@@ -2,9 +2,11 @@ import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 
 const ChildrenContainerUl = attachThemeAttrs(styled.ul)`
-    margin-left: 10px;
+    margin-left: 26px;
     border-left: 1px solid ${props => props.palette.border.divider};
     padding-left: 10px;
+
+    ${props => props.ariaLevelValue > 1 && `margin-left: 10px;`}
 `;
 
 export default ChildrenContainerUl;
diff --git a/src/components/Tree/styled/nodeContainer.js b/src/components/Tree/styled/nodeContainer.js
@@ -1,15 +1,18 @@
 import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 
+const PADDING_LEFT = 16;
+
 function getMarginLeft(props) {
-    return `-${(props.ariaLevelValue - 1) * 20 + props.ariaLevelValue - 1}px`;
+    const marginLeft = props.ariaLevelValue === 1 ? 0 : PADDING_LEFT;
+    return `-${(props.ariaLevelValue - 1) * 20 + props.ariaLevelValue - 1 + marginLeft}px`;
 }
 
 function getPaddingLeft(props) {
     if (props.hasChildren) {
-        return `${(props.ariaLevelValue - 1) * 20 + props.ariaLevelValue - 1}px}`;
+        return `${(props.ariaLevelValue - 1) * 20 + props.ariaLevelValue - 1 + PADDING_LEFT}px}`;
     }
-    return `${(props.ariaLevelValue - 1) * 20 + props.ariaLevelValue - 1 + 28}px}`;
+    return `${(props.ariaLevelValue - 1) * 20 + props.ariaLevelValue - 1 + 28 + PADDING_LEFT}px}`;
 }
 
 const NodeContainer = attachThemeAttrs(styled.div)`