**Feature:** Tree component redesign

src/Button/Button.tsx

@@ -22,6 +22,8 @@ export interface ButtonProps extends DefaultProps {
   icon?: IconName
   /** Icon position */
   iconPosition?: "start" | "end"
+  /** Icon size */
+  iconSize?: number
   /** Icon color */
   iconColor?: string
   /** Loading flag - if enabled, the text hides and a spinner appears in the center */
@@ -116,9 +118,19 @@ const ButtonSpinner = styled(Spinner)<{ containerColor?: ButtonProps["color"] }>
   color: makeColors(theme, containerColor || "").foreground,
 }))
 
-const Button: React.SFC<ButtonProps> = ({ to, children, icon, iconPosition, iconColor, color, onClick, ...props }) => {
+const Button: React.SFC<ButtonProps> = ({
+  to,
+  children,
+  icon,
+  iconPosition,
+  iconSize = 18,
+  iconColor,
+  color,
+  onClick,
+  ...props
+}) => {
   const ContainerComponent = to ? ContainerLink : Container
-  const iconProps = { name: icon!, size: 18, color: iconColor }
+  const iconProps = { name: icon!, size: iconSize, color: iconColor }
 
   return (
     <OperationalContext>

src/CardSection/CardSection.tsx

@@ -89,7 +89,7 @@ const Overlay = styled("div")<{ overlayType: OverlayType }>`
 const Content = styled("div")<{ noHorizontalPadding?: boolean }>`
   display: block;
   ${({ theme, noHorizontalPadding }) => `
-    padding: ${noHorizontalPadding ? `${theme.space.element}px 0` : theme.space.element}px;
+    padding: ${noHorizontalPadding ? `${theme.space.element}px 0` : theme.space.medium}px;
   `};
 `
 
@@ -100,11 +100,11 @@ const Title = styled("div")<{ withToggle: boolean; forceHoverStyles: boolean }>`
   justify-content: space-between;
   height: 36px;
   ${({ theme, withToggle, forceHoverStyles }) => `
-    padding: 0px ${theme.space.element}px;
+    padding: 0px ${theme.space.medium}px;
     font-family: ${theme.font.family.main};
-    font-weight: ${theme.font.weight.bold};
+    font-weight: ${theme.font.weight.medium};
     color: ${theme.color.text.lighter};
-    font-size: ${theme.font.size.body};
+    font-size: ${theme.font.size.small}px;
     border-bottom: 1px solid ${theme.color.separators.default};
     ${
       withToggle
@@ -116,7 +116,7 @@ const Title = styled("div")<{ withToggle: boolean; forceHoverStyles: boolean }>`
       color: ${forceHoverStyles ? theme.color.separators.dark : theme.color.separators.default};
     }
     :hover {
-      background-color: ${theme.color.background.lightest};
+      background-color: rgba(0, 0, 0, 0.05);
     }
     :hover svg {
       color: ${theme.color.separators.dark};
@@ -172,7 +172,7 @@ const CardSection: React.SFC<CardSectionProps> = ({
         onClick={onToggle}
       >
         {title}
-        {onToggle && <Icon name={collapsed ? "ChevronDown" : "ChevronUp"} />}
+        {onToggle && <Icon size={14} name={collapsed ? "ChevronDown" : "ChevronUp"} />}
         {actions && <StyledActionMenu items={actions} onClick={onActionClick} />}
       </Title>
     )}

src/Internals/IconButton.tsx

@@ -1,24 +1,11 @@
 import styled from "../utils/styled"
 
-const IconButton = styled("div")<{ hidden_?: boolean; hoverEffect?: boolean }>(({ theme, hidden_, hoverEffect }) => ({
+const IconButton = styled("div")(({ theme }) => ({
   cursor: "pointer",
-  width: 20,
-  height: 20,
-  padding: 4,
   borderRadius: theme.borderRadius,
   "& svg": {
-    cursor: "pointer",
-    width: 12,
-    height: 12,
+    pointerEvents: "none",
   },
-  ...(hidden_ ? { visibility: "hidden" } : {}),
-  ...(hoverEffect
-    ? {
-        ":hover": {
-          backgroundColor: theme.color.background.light,
-        },
-      }
-    : {}),
 }))
 
 export default IconButton

src/Internals/SmallNameTag.tsx

@@ -36,10 +36,10 @@ const Container = styled("div")<{
   return {
     backgroundColor,
     color: textColor,
-    fontSize: theme.font.size.fineprint,
+    fontSize: 11,
     fontWeight: theme.font.weight.bold,
-    width: 18,
-    height: 18,
+    width: 14,
+    height: 14,
     flexShrink: 0,
     borderRadius: theme.borderRadius,
     display: "inline-flex",

src/Topbar/Topbar.tsx

@@ -17,7 +17,7 @@ const TopbarContainer = styled("div")`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 ${props => props.theme.space.element}px;
+  padding: 0;
   box-shadow: ${props => props.theme.shadows.card};
 `
 

src/TopbarButton/TopbarButton.tsx

@@ -6,7 +6,7 @@ export interface TopbarButtonProps {
   /** The name of the button icon */
   icon?: IconName
   /** Button contents, typically as a string */
-  children: string
+  children: React.ReactNode
   /** Disabled flag, deactivating click events and fading out the button */
   disabled?: boolean
   /** Click handler */

src/TopbarSelect/TopbarSelect.tsx

@@ -24,6 +24,7 @@ export interface State {
 }
 
 const TopbarSelectContainer = styled("div")<{ isActive: boolean }>`
+  line-height: 1;
   height: ${props => props.theme.topbarHeight}px;
   display: flex;
   align-items: center;
@@ -60,7 +61,7 @@ const TopbarSelectValueSpan = styled("span")<{ active?: boolean }>`
 const TopbarSelectLabel = styled("p")`
   margin: 0px ${props => props.theme.space.base}px 0px 0px;
   font-size: ${props => props.theme.font.size.fineprint}px;
-  color: ${props => props.theme.color.text.lighter};
+  color: ${props => props.theme.color.text.lightest};
   font-weight: ${props => props.theme.font.weight.medium};
 `
 
@@ -124,7 +125,7 @@ class TopbarSelect extends React.Component<TopbarSelectProps, Readonly<State>> {
             <TopbarSelectLabel>{label}</TopbarSelectLabel>
             <TopbarSelectValue>
               <TopbarSelectValueSpan active={Boolean(selected)}>{selected}</TopbarSelectValueSpan>
-              <Icon name={isActive ? "ChevronUp" : "ChevronDown"} size={12} />
+              <Icon color="color.text.lightest" name={isActive ? "CaretUp" : "CaretDown"} size={12} />
             </TopbarSelectValue>
           </TopbarSelectContainer>
         )}

src/Tree/Tree.tsx

@@ -28,11 +28,13 @@ const Container = styled("div")`
 `
 
 const TreeContainer = styled("div")`
-  margin: 2px 0;
+  & + & {
+    margin-top: ${({ theme }) => theme.space.base}px;
+  }
 `
 
 const TreeChildren = styled("div")`
-  margin-left: 14px;
+  margin-left: ${({ theme }) => theme.space.content}px;
 `
 
 const TreeItem = styled("div")<{
@@ -42,26 +44,24 @@ const TreeItem = styled("div")<{
   isDisabled: boolean
   isRemovable: boolean
   isReorderDropTarget: boolean
+  isFirst: boolean
 }>`
   display: flex;
-  min-height: 24px;
   align-items: center;
-  margin-bottom: 2px;
+  cursor: pointer;
   :last-child {
     margin-bottom: 0px;
   }
-  ${({ theme, hasChildren, hasTag, isTopLevel, isDisabled, isReorderDropTarget }) => `
-    padding: ${theme.space.base / 2}px;
-    border-top: 2px solid;
-    border-color: ${isReorderDropTarget ? theme.color.primary : "transparent"};
-    font-size: ${hasTag ? theme.font.size.fineprint : theme.font.size.small}px;
-    font-weight: ${hasTag || isTopLevel ? theme.font.weight.bold : theme.font.weight.regular};
-    font-family: ${hasTag ? theme.font.family.code : theme.font.family.main};
+  ${({ theme, hasChildren, hasTag, isFirst, isTopLevel, isDisabled, isReorderDropTarget }) => `
+    box-shadow: ${isReorderDropTarget ? `0 -2px 0 2px ${theme.color.primary}` : "none"};
+    font-size: ${theme.font.size.fineprint}px;
+    font-weight: ${isTopLevel && !hasTag ? theme.font.weight.bold : theme.font.weight.medium};
     color: ${theme.color.text.dark};
+    margin-top: ${!isFirst && isTopLevel && hasChildren ? 8 : 0}px; 
+    margin-bottom: ${hasChildren ? 4 : 0}px;
     opacity: ${isDisabled ? "0.4" : "1.0"};
-    cursor: pointer;
     :hover {
-      background-color: ${theme.color.background.lighter};
+      background-color: rgba(0, 0, 0, 0.05);
     }
     & svg {
       color: ${theme.color.text.lightest};
@@ -159,6 +159,7 @@ const TreeRecursive: React.SFC<
   {
     tree: ITree
     path: number[]
+    isFirst: boolean
     recursiveTogglePath: (path: number[]) => void
     openPaths: number[][]
     maxDepth: number
@@ -169,6 +170,7 @@ const TreeRecursive: React.SFC<
   recursiveTogglePath,
   openPaths,
   maxDepth,
+  isFirst,
   onReorder,
   reorderSource,
   reorderTarget,
@@ -188,6 +190,7 @@ const TreeRecursive: React.SFC<
         isDisabled={Boolean(tree.disabled)}
         isRemovable={Boolean(onRemove)}
         isReorderDropTarget={false}
+        isFirst={isFirst}
         {...reorderDndProps({
           onReorder,
           reorderSource,
@@ -202,22 +205,22 @@ const TreeRecursive: React.SFC<
           recursiveTogglePath(path)
         }}
       >
-        {maxDepth > 1 && (
-          <IconButton hidden_={childNodes.length === 0}>
-            <Icon name={isOpen ? "ChevronDown" : "Add"} />
-          </IconButton>
-        )}
+        {maxDepth > 1 &&
+          childNodes.length !== 0 && (
+            <IconButton>
+              <Icon size={12} name={isOpen ? "ChevronDown" : "Add"} />
+            </IconButton>
+          )}
         {tree.tag && <SmallNameTag color={tagColor}>{tree.tag}</SmallNameTag>}
         <TreeLabel>{tree.label}</TreeLabel>
         {onRemove && (
           <IconButton
-            hoverEffect
             onClick={ev => {
               ev.stopPropagation()
               onRemove()
             }}
           >
-            <Icon name="No" />
+            <Icon size={12} name="No" />
           </IconButton>
         )}
       </TreeItem>
@@ -238,6 +241,7 @@ const TreeRecursive: React.SFC<
                 reorderTarget={reorderTarget}
                 setReorderSource={setReorderSource}
                 setReorderTarget={setReorderTarget}
+                isFirst={index === 0}
               />
             ))}
             {onReorder && (
@@ -304,6 +308,7 @@ class Tree extends React.Component<TreeProps, State> {
             key={index}
             tree={tree}
             path={[index]}
+            isFirst={index === 0}
             recursiveTogglePath={this.togglePath}
             openPaths={this.state.openPaths}
             maxDepth={getMaxDepth(trees)}