**Fix:** Remove hasIconOffset, add <Example/> instead of <Example>

Remove hasIconOffset property to fix the extra padding for trees with no children, removes misalignment
Use <Example/> instead of <Example> to fix the warning in the code example

Fixes contiamo#1321

src/Tree/ChildTree.tsx

@@ -8,7 +8,6 @@ type Props = TreeProps["trees"][-1] & {
   searchWords?: string[]
   freeze?: boolean
   level: number
-  hasIconOffset: boolean
   onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void
   onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void
 }
@@ -40,7 +39,6 @@ const ChildTree: React.SFC<Props> = ({
   ignoreSearchWords,
   level,
   actions,
-  hasIconOffset,
   onMouseEnter,
   onMouseLeave,
   strong,
@@ -104,7 +102,6 @@ const ChildTree: React.SFC<Props> = ({
         disabled={disabled}
         actions={actions}
         cursor={cursor}
-        hasIconOffset={hasIconOffset && !hasChildren}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         strong={strong}
@@ -116,7 +113,6 @@ const ChildTree: React.SFC<Props> = ({
       {hasChildren && isOpen && (
         <Tree
           _level={level + 1}
-          _hasIconOffset={Boolean(icon) || Boolean(tag)}
           paddingLeft={paddingLeft}
           paddingRight={paddingRight}
           trees={childNodes}

src/Tree/README.md

@@ -134,13 +134,7 @@ import { Tree } from "@operational/components"
 
 ```jsx
 import * as React from "react"
-import {
-  Tree,
-  DatabaseIcon,
-  WorkbenchIcon,
-  PhysicalTableIcon,
-  ColumnsIcon
-} from "@operational/components"
+import { Tree, DatabaseIcon, WorkbenchIcon, PhysicalTableIcon, ColumnsIcon } from "@operational/components"
 
 const Example = () => {
   const [resourceKind, setResourceKind] = React.useState("datasource")
@@ -187,9 +181,10 @@ const Example = () => {
           ],
         },
       ]}
-    />);
-  }
-;<Example>
+    />
+  )
+}
+;<Example />
 ```
 
 ### With higlighted search

src/Tree/Tree.tsx

@@ -53,7 +53,6 @@ export interface TreeProps {
   placeholder?: React.ComponentType<DroppableStateSnapshot>
   freeze?: boolean
   _level?: number
-  _hasIconOffset?: boolean
 }
 
 const Container = styled.div`
@@ -63,7 +62,6 @@ const Container = styled.div`
 
 const Tree: React.SFC<TreeProps> = ({
   _level = 0,
-  _hasIconOffset = false,
   paddingLeft,
   paddingRight,
   trees,
@@ -86,7 +84,6 @@ const Tree: React.SFC<TreeProps> = ({
             paddingLeft={paddingLeft}
             paddingRight={paddingRight}
             level={_level}
-            hasIconOffset={_hasIconOffset}
             key={index}
             {...treeData}
             searchWords={searchWords}
@@ -114,7 +111,6 @@ const Tree: React.SFC<TreeProps> = ({
                       <ChildTree
                         paddingLeft={paddingLeft}
                         paddingRight={paddingRight}
-                        hasIconOffset={_hasIconOffset}
                         level={_level}
                         forwardRef={draggableProvided.innerRef}
                         searchWords={searchWords}

src/Tree/TreeItem.tsx

@@ -26,7 +26,6 @@ interface TreeItemProps {
   onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void
   onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void
   actions?: React.ReactNode
-  hasIconOffset?: boolean
   strong?: boolean
   fontSize?: number
   fontColor?: string
@@ -42,7 +41,6 @@ const Header = styled.div<{
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
   cursor?: string
   level: number
-  hasIconOffset: boolean
 }>`
   label: TreeItem;
   width: 100%;
@@ -52,8 +50,7 @@ const Header = styled.div<{
   cursor: ${({ onClick, cursor }) => cursor || (onClick ? "pointer" : "inherit")};
   background: ${({ theme, highlight }) => (highlight ? getHighlightColor(theme) : "none")};
   padding: ${({ theme }) => `${theme.space.base / 2}px`};
-  padding-left: ${({ theme, paddingLeft, level, hasIconOffset }) =>
-    paddingLeft + theme.space.element * level + (hasIconOffset ? theme.space.element : 0)}px;
+  padding-left: ${({ theme, paddingLeft, level }) => paddingLeft + theme.space.element * level}px;
   padding-right: ${({ paddingRight }) => paddingRight}px;
   color: ${({ theme }) => theme.color.text.dark};
   color: ${({ theme }) => theme.color.text.dark};
@@ -148,7 +145,6 @@ const TreeItem: React.SFC<TreeItemProps> = ({
   level,
   cursor,
   actions,
-  hasIconOffset,
   searchWords = defaultSearch,
   ignoreSearchWords,
   onMouseEnter,
@@ -191,7 +187,6 @@ const TreeItem: React.SFC<TreeItemProps> = ({
       paddingLeft={paddingLeft}
       paddingRight={paddingRight}
       level={level}
-      hasIconOffset={Boolean(hasIconOffset)}
       onClick={onNodeClick}
       onContextMenu={onNodeContextMenu}
       onKeyDown={handleKeyDown}