From c207b0315567228e2d86e8ecfd9d073e3d8d7fcd Mon Sep 17 00:00:00 2001 From: Tejas Kumar Date: Fri, 1 Feb 2019 14:12:12 +0100 Subject: [PATCH 1/7] Allow ReactNodes in TopbarButton --- src/TopbarButton/TopbarButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TopbarButton/TopbarButton.tsx b/src/TopbarButton/TopbarButton.tsx index 9db399ac4..aa75622f4 100644 --- a/src/TopbarButton/TopbarButton.tsx +++ b/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 */ From 8c99f3645aaf40bc89b64a138d6ef23ee3904dcb Mon Sep 17 00:00:00 2001 From: Tejas Kumar Date: Fri, 1 Feb 2019 14:18:40 +0100 Subject: [PATCH 2/7] Add iconSize to buttons --- src/Button/Button.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index e7e7d7fc8..c9972a687 100644 --- a/src/Button/Button.tsx +++ b/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 = ({ to, children, icon, iconPosition, iconColor, color, onClick, ...props }) => { +const Button: React.SFC = ({ + 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 ( From c409911ca3077b21f7fc900625496b2e51f099e1 Mon Sep 17 00:00:00 2001 From: Tejas Kumar Date: Fri, 1 Feb 2019 14:26:48 +0100 Subject: [PATCH 3/7] Refresh CardSection styles --- src/CardSection/CardSection.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/CardSection/CardSection.tsx b/src/CardSection/CardSection.tsx index 16e7fdf4b..320e1a90c 100644 --- a/src/CardSection/CardSection.tsx +++ b/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.small}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.small}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: 13px; border-bottom: 1px solid ${theme.color.separators.default}; ${ withToggle @@ -172,7 +172,7 @@ const CardSection: React.SFC = ({ onClick={onToggle} > {title} - {onToggle && } + {onToggle && } {actions && } )} From a43096fe2aa0dccc18b2cafcd1f069c894c90935 Mon Sep 17 00:00:00 2001 From: Tejas Kumar Date: Fri, 1 Feb 2019 15:26:46 +0100 Subject: [PATCH 4/7] Fix CardSection spacing --- src/CardSection/CardSection.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/CardSection/CardSection.tsx b/src/CardSection/CardSection.tsx index 320e1a90c..ed23701e7 100644 --- a/src/CardSection/CardSection.tsx +++ b/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.small}px; + padding: ${noHorizontalPadding ? `${theme.space.element}px 0` : theme.space.medium}px; `}; ` @@ -100,7 +100,7 @@ const Title = styled("div")<{ withToggle: boolean; forceHoverStyles: boolean }>` justify-content: space-between; height: 36px; ${({ theme, withToggle, forceHoverStyles }) => ` - padding: 0px ${theme.space.small}px; + padding: 0px ${theme.space.medium}px; font-family: ${theme.font.family.main}; font-weight: ${theme.font.weight.medium}; color: ${theme.color.text.lighter}; @@ -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}; From 458edbaddfb3729d22f19952f6a13a2fc5d973b3 Mon Sep 17 00:00:00 2001 From: Tejas Kumar Date: Fri, 1 Feb 2019 15:27:32 +0100 Subject: [PATCH 5/7] Fix Topbar --- src/Topbar/Topbar.tsx | 2 +- src/TopbarSelect/TopbarSelect.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Topbar/Topbar.tsx b/src/Topbar/Topbar.tsx index 6e36c8bf0..38920d8a1 100644 --- a/src/Topbar/Topbar.tsx +++ b/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}; ` diff --git a/src/TopbarSelect/TopbarSelect.tsx b/src/TopbarSelect/TopbarSelect.tsx index 11cf38270..2d5518c3c 100644 --- a/src/TopbarSelect/TopbarSelect.tsx +++ b/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> { {label} {selected} - + )} From cce732bdee8a1dcd9ae48dff21cb0a0c5c701794 Mon Sep 17 00:00:00 2001 From: Tejas Kumar Date: Fri, 1 Feb 2019 15:28:23 +0100 Subject: [PATCH 6/7] Improve Tree --- src/Internals/IconButton.tsx | 17 ++----------- src/Internals/SmallNameTag.tsx | 6 ++--- src/Tree/Tree.tsx | 45 +++++++++++++++++++--------------- 3 files changed, 30 insertions(+), 38 deletions(-) diff --git a/src/Internals/IconButton.tsx b/src/Internals/IconButton.tsx index 62e75fc09..ccb447291 100644 --- a/src/Internals/IconButton.tsx +++ b/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 diff --git a/src/Internals/SmallNameTag.tsx b/src/Internals/SmallNameTag.tsx index 70a99976a..d937bb909 100644 --- a/src/Internals/SmallNameTag.tsx +++ b/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", diff --git a/src/Tree/Tree.tsx b/src/Tree/Tree.tsx index f9924d75b..a43e4f454 100644 --- a/src/Tree/Tree.tsx +++ b/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 && ( - - - - )} + {maxDepth > 1 && + childNodes.length !== 0 && ( + + + + )} {tree.tag && {tree.tag}} {tree.label} {onRemove && ( { ev.stopPropagation() onRemove() }} > - + )} @@ -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 { key={index} tree={tree} path={[index]} + isFirst={index === 0} recursiveTogglePath={this.togglePath} openPaths={this.state.openPaths} maxDepth={getMaxDepth(trees)} From a2b9d055950bbb0a2bda1a09b4875db668c62ae2 Mon Sep 17 00:00:00 2001 From: Tejas Kumar Date: Fri, 1 Feb 2019 16:38:57 +0100 Subject: [PATCH 7/7] Use small constant --- src/CardSection/CardSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CardSection/CardSection.tsx b/src/CardSection/CardSection.tsx index ed23701e7..afffddc1f 100644 --- a/src/CardSection/CardSection.tsx +++ b/src/CardSection/CardSection.tsx @@ -104,7 +104,7 @@ const Title = styled("div")<{ withToggle: boolean; forceHoverStyles: boolean }>` font-family: ${theme.font.family.main}; font-weight: ${theme.font.weight.medium}; color: ${theme.color.text.lighter}; - font-size: 13px; + font-size: ${theme.font.size.small}px; border-bottom: 1px solid ${theme.color.separators.default}; ${ withToggle