From 150b2e527da4c99b1f156df162a7cb6fc58a0380 Mon Sep 17 00:00:00 2001 From: guille Date: Sun, 17 May 2020 11:03:39 -0400 Subject: [PATCH 1/3] feat: change SidebarItem component UI fix: #1543 --- src/components/Sidebar/readme.md | 2 +- src/components/SidebarItem/index.js | 41 ++++++++++--------- src/components/SidebarItem/itemContent.js | 2 +- src/components/SidebarItem/readme.md | 6 +-- .../SidebarItem/styled/anchorContent.js | 4 ++ .../SidebarItem/styled/buttonContent.js | 10 +++-- .../SidebarItem/styled/container.js | 36 ++++++++++++++++ src/components/SidebarItem/styled/icon.js | 22 ++-------- src/components/SidebarItem/styled/label.js | 4 +- src/components/SidebarItem/styled/li.js | 3 ++ 10 files changed, 81 insertions(+), 49 deletions(-) create mode 100644 src/components/SidebarItem/styled/container.js diff --git a/src/components/Sidebar/readme.md b/src/components/Sidebar/readme.md index e1724a982..5b9acab9e 100644 --- a/src/components/Sidebar/readme.md +++ b/src/components/Sidebar/readme.md @@ -9,7 +9,7 @@ const SideBarContainer = styled.div.attrs(props => { return props.theme.rainbow.palette; })` background: ${props => props.background.main}; - width: 88px; + width: 120px; border-bottom-left-radius: 0.875rem; `; diff --git a/src/components/SidebarItem/index.js b/src/components/SidebarItem/index.js index c04d599c6..4921a904e 100644 --- a/src/components/SidebarItem/index.js +++ b/src/components/SidebarItem/index.js @@ -6,6 +6,7 @@ import RenderIf from '../RenderIf'; import StyledLi from './styled/li'; import StyledAnchorContent from './styled/anchorContent'; import StyledButtonContent from './styled/buttonContent'; +import StyledContainer from './styled/container'; import ItemContent from './itemContent'; /** * @category Layout @@ -33,25 +34,27 @@ function SidebarItem(props) { className={className} style={style} > - - - - - - - - - - + + + + + + + + + + + + ); } diff --git a/src/components/SidebarItem/itemContent.js b/src/components/SidebarItem/itemContent.js index 6a89fd97e..9e03244f8 100644 --- a/src/components/SidebarItem/itemContent.js +++ b/src/components/SidebarItem/itemContent.js @@ -8,7 +8,7 @@ export default function ItemContent(props) { const { label, icon, isSelected } = props; return ( - {icon} + {icon} {label} diff --git a/src/components/SidebarItem/readme.md b/src/components/SidebarItem/readme.md index 37b54d329..20a28b4a1 100644 --- a/src/components/SidebarItem/readme.md +++ b/src/components/SidebarItem/readme.md @@ -9,7 +9,7 @@ const SideBarContainer = styled.div.attrs(props => { return props.theme.rainbow.palette; })` background: ${props => props.background.main}; - width: 88px; + width: 120px; border-bottom-left-radius: 0.875rem; `; @@ -32,10 +32,10 @@ class SimpleSidebar extends React.Component { return ( } name="Dashboard" label="Dashboard" /> - } name="Aplications" label="Aplications"/> + } name="Aplications" label="Aplications" /> } name="Components" label="Components" /> } name="Messages" label="Messages" /> - } name="Charts" label="Charts" /> + } name="Charts" label="Charts" /> ); } diff --git a/src/components/SidebarItem/styled/anchorContent.js b/src/components/SidebarItem/styled/anchorContent.js index a09075ff7..0a037cfb3 100644 --- a/src/components/SidebarItem/styled/anchorContent.js +++ b/src/components/SidebarItem/styled/anchorContent.js @@ -1,11 +1,15 @@ import styled from 'styled-components'; const StyledAnchorContent = styled.a` + padding-left: 1rem; + padding-right: 1rem; background-color: transparent; text-decoration: none; transition: color 0.1s linear; display: flex; align-items: center; + justify-content: center; + height: 100%; width: 100%; border-radius: 0; cursor: pointer; diff --git a/src/components/SidebarItem/styled/buttonContent.js b/src/components/SidebarItem/styled/buttonContent.js index a1dab798d..f12e6a3f5 100644 --- a/src/components/SidebarItem/styled/buttonContent.js +++ b/src/components/SidebarItem/styled/buttonContent.js @@ -2,14 +2,16 @@ import styled from 'styled-components'; const StyledButtonContent = styled.button` border: none; - padding: 0; + border-radius: 0; outline: 0; + padding-left: 1rem; + padding-right: 1rem; background-color: transparent; - transition: color 0.1s linear; + width: 100%; + height: 100%; display: flex; align-items: center; - width: 100%; - border-radius: 0; + justify-content: center; cursor: pointer; flex-direction: column; box-sizing: border-box; diff --git a/src/components/SidebarItem/styled/container.js b/src/components/SidebarItem/styled/container.js new file mode 100644 index 000000000..10462817c --- /dev/null +++ b/src/components/SidebarItem/styled/container.js @@ -0,0 +1,36 @@ +import styled from 'styled-components'; +import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs'; + +const StyledContainer = attachThemeAttrs(styled.div)` + border: 0; + background-color: transparent; + transition: color 0.1s linear; + height: 6rem; + border-radius: 12px; + cursor: pointer; + box-sizing: border-box; + margin: 0; + overflow: visible; + text-transform: none; + + ::-moz-focus-inner { + border: 0; + padding: 0; + } + + :hover, + :active, + :focus { + background-color: ${props => props.palette.action.hover}; + outline: 0; + } + + ${props => + props.isSelected && + ` + background-color: ${props.palette.action.active}; + outline: 0; + `}; +`; + +export default StyledContainer; diff --git a/src/components/SidebarItem/styled/icon.js b/src/components/SidebarItem/styled/icon.js index df226cc69..4a989e721 100644 --- a/src/components/SidebarItem/styled/icon.js +++ b/src/components/SidebarItem/styled/icon.js @@ -1,27 +1,11 @@ import styled from 'styled-components'; -import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs'; -const StyledIcon = attachThemeAttrs(styled.div)` - height: 32px; - width: 32px; +const StyledIcon = styled.div` + height: 42px; + width: 42px; display: flex; justify-content: center; align-items: center; - border-radius: 100%; - - :hover, - :active, - :focus { - background-color: ${props => props.palette.action.hover}; - outline: 0; - } - - ${props => - props.isSelected && - ` - background-color: ${props.palette.action.active}; - outline: 0; - `}; `; export default StyledIcon; diff --git a/src/components/SidebarItem/styled/label.js b/src/components/SidebarItem/styled/label.js index 4327d4c92..1a93814df 100644 --- a/src/components/SidebarItem/styled/label.js +++ b/src/components/SidebarItem/styled/label.js @@ -1,10 +1,10 @@ import styled from 'styled-components'; import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs'; -import { FONT_SIZE_TEXT_X_SMALL } from '../../../styles/fontSizes'; +import { FONT_SIZE_TEXT_SMALL } from '../../../styles/fontSizes'; const StyledLabel = attachThemeAttrs(styled.span)` font-family: 'Lato Regular', Arial, sans-serif; - font-size: ${FONT_SIZE_TEXT_X_SMALL}; + font-size: ${FONT_SIZE_TEXT_SMALL}; letter-spacing: -0.2px; text-align: center; color: ${props => props.palette.text.header}; diff --git a/src/components/SidebarItem/styled/li.js b/src/components/SidebarItem/styled/li.js index 4963615ab..380dae58e 100644 --- a/src/components/SidebarItem/styled/li.js +++ b/src/components/SidebarItem/styled/li.js @@ -7,6 +7,9 @@ const StyledLi = attachThemeAttrs(styled.li)` padding-bottom: 0.75rem; padding-top: 0.75rem; box-sizing: border-box; + display: flex; + align-items: center; + flex-direction: column; :last-child { margin-bottom: 0; From 49d4accf32dd80dbcf9ee91b32da09c3187c1792 Mon Sep 17 00:00:00 2001 From: guille Date: Sun, 17 May 2020 17:51:56 -0400 Subject: [PATCH 2/3] fix: modify styles according to the requested changes --- src/components/SidebarItem/index.js | 43 +++++++++---------- .../SidebarItem/styled/anchorContent.js | 17 ++++++-- .../SidebarItem/styled/buttonContent.js | 21 +++++++-- .../SidebarItem/styled/container.js | 36 ---------------- src/components/SidebarItem/styled/li.js | 4 +- 5 files changed, 53 insertions(+), 68 deletions(-) delete mode 100644 src/components/SidebarItem/styled/container.js diff --git a/src/components/SidebarItem/index.js b/src/components/SidebarItem/index.js index 4921a904e..b4e3f51d4 100644 --- a/src/components/SidebarItem/index.js +++ b/src/components/SidebarItem/index.js @@ -6,7 +6,6 @@ import RenderIf from '../RenderIf'; import StyledLi from './styled/li'; import StyledAnchorContent from './styled/anchorContent'; import StyledButtonContent from './styled/buttonContent'; -import StyledContainer from './styled/container'; import ItemContent from './itemContent'; /** * @category Layout @@ -34,27 +33,27 @@ function SidebarItem(props) { className={className} style={style} > - - - - - - - - - - - - + + + + + + + + + + ); } diff --git a/src/components/SidebarItem/styled/anchorContent.js b/src/components/SidebarItem/styled/anchorContent.js index 0a037cfb3..0ff600bd0 100644 --- a/src/components/SidebarItem/styled/anchorContent.js +++ b/src/components/SidebarItem/styled/anchorContent.js @@ -1,6 +1,7 @@ import styled from 'styled-components'; +import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs'; -const StyledAnchorContent = styled.a` +const StyledAnchorContent = attachThemeAttrs(styled.a)` padding-left: 1rem; padding-right: 1rem; background-color: transparent; @@ -9,9 +10,9 @@ const StyledAnchorContent = styled.a` display: flex; align-items: center; justify-content: center; - height: 100%; + height: 6rem; width: 100%; - border-radius: 0; + border-radius: 12px; cursor: pointer; flex-direction: column; box-sizing: border-box; @@ -20,10 +21,18 @@ const StyledAnchorContent = styled.a` :hover, :active, :focus { + background-color: ${props => props.palette.action.hover}; text-decoration: none; - outline: 0; color: transparent; + outline: 0; } + + ${props => + props.isSelected && + ` + background-color: ${props.palette.action.active}; + outline: 0; + `}; `; export default StyledAnchorContent; diff --git a/src/components/SidebarItem/styled/buttonContent.js b/src/components/SidebarItem/styled/buttonContent.js index f12e6a3f5..cf3e9d7eb 100644 --- a/src/components/SidebarItem/styled/buttonContent.js +++ b/src/components/SidebarItem/styled/buttonContent.js @@ -1,14 +1,15 @@ import styled from 'styled-components'; +import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs'; -const StyledButtonContent = styled.button` +const StyledButtonContent = attachThemeAttrs(styled.button)` border: none; - border-radius: 0; + border-radius: 12px; outline: 0; padding-left: 1rem; padding-right: 1rem; background-color: transparent; width: 100%; - height: 100%; + height: 6rem; display: flex; align-items: center; justify-content: center; @@ -26,6 +27,20 @@ const StyledButtonContent = styled.button` border: 0; padding: 0; } + + :hover, + :active, + :focus { + background-color: ${props => props.palette.action.hover}; + outline: 0; + } + + ${props => + props.isSelected && + ` + background-color: ${props.palette.action.active}; + outline: 0; + `}; `; export default StyledButtonContent; diff --git a/src/components/SidebarItem/styled/container.js b/src/components/SidebarItem/styled/container.js deleted file mode 100644 index 10462817c..000000000 --- a/src/components/SidebarItem/styled/container.js +++ /dev/null @@ -1,36 +0,0 @@ -import styled from 'styled-components'; -import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs'; - -const StyledContainer = attachThemeAttrs(styled.div)` - border: 0; - background-color: transparent; - transition: color 0.1s linear; - height: 6rem; - border-radius: 12px; - cursor: pointer; - box-sizing: border-box; - margin: 0; - overflow: visible; - text-transform: none; - - ::-moz-focus-inner { - border: 0; - padding: 0; - } - - :hover, - :active, - :focus { - background-color: ${props => props.palette.action.hover}; - outline: 0; - } - - ${props => - props.isSelected && - ` - background-color: ${props.palette.action.active}; - outline: 0; - `}; -`; - -export default StyledContainer; diff --git a/src/components/SidebarItem/styled/li.js b/src/components/SidebarItem/styled/li.js index 380dae58e..2e208547a 100644 --- a/src/components/SidebarItem/styled/li.js +++ b/src/components/SidebarItem/styled/li.js @@ -3,9 +3,7 @@ import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs'; const StyledLi = attachThemeAttrs(styled.li)` position: relative; - margin-bottom: 1.375rem; - padding-bottom: 0.75rem; - padding-top: 0.75rem; + padding: 0.75rem 1rem; box-sizing: border-box; display: flex; align-items: center; From 98c4068a891a95711fede243429b307d25bca5c3 Mon Sep 17 00:00:00 2001 From: TahimiLeonBravo Date: Mon, 18 May 2020 01:30:48 -0500 Subject: [PATCH 3/3] fix: library bar UI --- library/exampleComponents/Icons/design.js | 9 +-------- .../styleguideComponents/ComponentsList/index.js | 16 +++++++++++----- .../styleguideComponents/StyleGuide/styles.css | 8 ++++---- src/components/SidebarItem/readme.md | 2 +- .../SidebarItem/styled/anchorContent.js | 6 ++---- .../SidebarItem/styled/buttonContent.js | 6 ++---- src/components/SidebarItem/styled/li.js | 3 ++- 7 files changed, 23 insertions(+), 27 deletions(-) diff --git a/library/exampleComponents/Icons/design.js b/library/exampleComponents/Icons/design.js index a739a8f90..5eaaf719e 100644 --- a/library/exampleComponents/Icons/design.js +++ b/library/exampleComponents/Icons/design.js @@ -4,14 +4,7 @@ import PropTypes from 'prop-types'; const Design = props => { const { className, style } = props; return ( - + diff --git a/library/styleguideComponents/ComponentsList/index.js b/library/styleguideComponents/ComponentsList/index.js index 0e04ff5f6..b6753a158 100644 --- a/library/styleguideComponents/ComponentsList/index.js +++ b/library/styleguideComponents/ComponentsList/index.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import styled from 'styled-components'; import Sidebar from '../../../src/components/Sidebar'; import SidebarItem from '../../../src/components/SidebarItem'; import Application from '../../../src/components/Application'; @@ -12,6 +13,11 @@ import isNotComponentPage from './../utils'; const name = window.location.href.split('#/')[1]; const pageName = name && name.split('/')[0]; +const Icon = styled(StartupIcon)` + width: 26px; + height: 26px; +`; + function resolveCurrentUrl() { if (isNotComponentPage(pageName)) { return pageName; @@ -49,31 +55,31 @@ export default class ComponentsList extends Component { } + icon={} name="GettingStarted" label="Getting Started" href="/#/GettingStarted" /> } + icon={} name="Components" label="Components" href="/#/Components" /> } + icon={} name="Customization" label="Customization" href="/#/Customization" /> } + icon={} name="Experiences" label="Experiences" href="/#/Experiences" /> } + icon={} name="Designs" label="Designs" href="/#/Designs" diff --git a/library/styleguideComponents/StyleGuide/styles.css b/library/styleguideComponents/StyleGuide/styles.css index 698d8cc95..f203bc822 100644 --- a/library/styleguideComponents/StyleGuide/styles.css +++ b/library/styleguideComponents/StyleGuide/styles.css @@ -28,7 +28,7 @@ } .react-rainbow-styleguide-sidebar { - width: 87px; + width: 104px; height: calc(100vh - 68px); position: fixed; z-index: 3000; @@ -49,7 +49,7 @@ transition: all 0.05s ease; position: absolute; bottom: 24px; - left: 26px; + left: 34px; } .react-rainbow-styleguide_twitter-link:hover, @@ -66,9 +66,9 @@ .react-rainbow-main-content { background-color: white; min-height: calc(100vh - 68px); - width: calc(100vw - 87px); + width: calc(100vw - 104px); margin-top: 68px; - margin-left: 87px; + margin-left: 104px; } .rsg--root-3 { diff --git a/src/components/SidebarItem/readme.md b/src/components/SidebarItem/readme.md index 20a28b4a1..e1d1d65e8 100644 --- a/src/components/SidebarItem/readme.md +++ b/src/components/SidebarItem/readme.md @@ -9,7 +9,7 @@ const SideBarContainer = styled.div.attrs(props => { return props.theme.rainbow.palette; })` background: ${props => props.background.main}; - width: 120px; + width: 100px; border-bottom-left-radius: 0.875rem; `; diff --git a/src/components/SidebarItem/styled/anchorContent.js b/src/components/SidebarItem/styled/anchorContent.js index 0ff600bd0..71c41614d 100644 --- a/src/components/SidebarItem/styled/anchorContent.js +++ b/src/components/SidebarItem/styled/anchorContent.js @@ -2,15 +2,13 @@ import styled from 'styled-components'; import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs'; const StyledAnchorContent = attachThemeAttrs(styled.a)` - padding-left: 1rem; - padding-right: 1rem; + padding: 0.5rem 0; background-color: transparent; text-decoration: none; transition: color 0.1s linear; display: flex; align-items: center; justify-content: center; - height: 6rem; width: 100%; border-radius: 12px; cursor: pointer; @@ -30,7 +28,7 @@ const StyledAnchorContent = attachThemeAttrs(styled.a)` ${props => props.isSelected && ` - background-color: ${props.palette.action.active}; + background-color: ${props.palette.action.active}; outline: 0; `}; `; diff --git a/src/components/SidebarItem/styled/buttonContent.js b/src/components/SidebarItem/styled/buttonContent.js index cf3e9d7eb..41d09da34 100644 --- a/src/components/SidebarItem/styled/buttonContent.js +++ b/src/components/SidebarItem/styled/buttonContent.js @@ -5,11 +5,9 @@ const StyledButtonContent = attachThemeAttrs(styled.button)` border: none; border-radius: 12px; outline: 0; - padding-left: 1rem; - padding-right: 1rem; + padding: 0.5rem 0; background-color: transparent; width: 100%; - height: 6rem; display: flex; align-items: center; justify-content: center; @@ -38,7 +36,7 @@ const StyledButtonContent = attachThemeAttrs(styled.button)` ${props => props.isSelected && ` - background-color: ${props.palette.action.active}; + background-color: ${props.palette.action.active}; outline: 0; `}; `; diff --git a/src/components/SidebarItem/styled/li.js b/src/components/SidebarItem/styled/li.js index 2e208547a..3b0033039 100644 --- a/src/components/SidebarItem/styled/li.js +++ b/src/components/SidebarItem/styled/li.js @@ -3,7 +3,8 @@ import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs'; const StyledLi = attachThemeAttrs(styled.li)` position: relative; - padding: 0.75rem 1rem; + padding: 0 0.5rem; + margin: 1rem 0; box-sizing: border-box; display: flex; align-items: center;