feat: change SidebarItem component UI

library/exampleComponents/Icons/design.js

@@ -4,14 +4,7 @@ import PropTypes from 'prop-types';
 const Design = props => {
     const { className, style } = props;
     return (
-        <svg
-            className={className}
-            style={style}
-            width="49px"
-            height="53px"
-            viewBox="0 0 49 53"
-            version="1.1"
-        >
+        <svg className={className} style={style} width="49px" height="53px" viewBox="0 0 49 53">
             <g id="components" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                 <g id="Components-VisualPicker" transform="translate(-363.000000, -537.000000)">
                     <g id="Group-6" transform="translate(203.000000, 333.000000)">

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 {
             <Application theme={theme}>
                 <Sidebar selectedItem={selectedItem} onSelect={this.handleOnSelect}>
                     <SidebarItem
-                        icon={<StartupIcon />}
+                        icon={<Icon />}
                         name="GettingStarted"
                         label="Getting Started"
                         href="/#/GettingStarted"
                     />
                     <SidebarItem
-                        icon={<PuzzleIcon />}
+                        icon={<Icon as={PuzzleIcon} />}
                         name="Components"
                         label="Components"
                         href="/#/Components"
                     />
                     <SidebarItem
-                        icon={<ConsoleIcon />}
+                        icon={<Icon as={ConsoleIcon} />}
                         name="Customization"
                         label="Customization"
                         href="/#/Customization"
                     />
                     <SidebarItem
-                        icon={<ExperiencesIcon />}
+                        icon={<Icon as={ExperiencesIcon} />}
                         name="Experiences"
                         label="Experiences"
                         href="/#/Experiences"
                     />
                     <SidebarItem
-                        icon={<DesignIcon />}
+                        icon={<Icon as={DesignIcon} />}
                         name="Designs"
                         label="Designs"
                         href="/#/Designs"

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 {

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;
 `;
 

src/components/SidebarItem/index.js

@@ -39,6 +39,7 @@ function SidebarItem(props) {
                     href={href}
                     onClick={hanldeOnClick}
                     aria-current={getAriaCurrent()}
+                    isSelected={isSelected}
                 >
                     <ItemContent isSelected={isSelected} label={label} icon={icon} />
                 </StyledAnchorContent>
@@ -48,6 +49,7 @@ function SidebarItem(props) {
                     data-id="sidebar-item-clickable-element"
                     onClick={hanldeOnClick}
                     aria-current={getAriaCurrent()}
+                    isSelected={isSelected}
                 >
                     <ItemContent isSelected={isSelected} label={label} icon={icon} />
                 </StyledButtonContent>

src/components/SidebarItem/itemContent.js

@@ -8,7 +8,7 @@ export default function ItemContent(props) {
     const { label, icon, isSelected } = props;
     return (
         <Fragment>
-            <StyledIcon isSelected={isSelected}>{icon}</StyledIcon>
+            <StyledIcon>{icon}</StyledIcon>
             <RenderIf isTrue={!!label}>
                 <StyledLabel isSelected={isSelected}>{label}</StyledLabel>
             </RenderIf>

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: 100px;
     border-bottom-left-radius: 0.875rem;
 `;
 
@@ -32,10 +32,10 @@ class SimpleSidebar extends React.Component {
         return (
             <Sidebar selectedItem={selectedItem} onSelect={this.handleOnSelect} id="sidebar-1">
                 <SidebarItem icon={<DashboardPurpleIcon />} name="Dashboard" label="Dashboard" />
-                <SidebarItem icon={<ApplicationIcon/>} name="Aplications" label="Aplications"/>
+                <SidebarItem icon={<ApplicationIcon />} name="Aplications" label="Aplications" />
                 <SidebarItem icon={<PuzzleIcon />} name="Components" label="Components" />
                 <SidebarItem icon={<MessagesIcon />} name="Messages" label="Messages" />
-                <SidebarItem icon={<ChartsIcon/>} name="Charts" label="Charts" />
+                <SidebarItem icon={<ChartsIcon />} name="Charts" label="Charts" />
             </Sidebar>
         );
     }

src/components/SidebarItem/styled/anchorContent.js

@@ -1,13 +1,16 @@
 import styled from 'styled-components';
+import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 
-const StyledAnchorContent = styled.a`
+const StyledAnchorContent = attachThemeAttrs(styled.a)`
+    padding: 0.5rem 0;
     background-color: transparent;
     text-decoration: none;
     transition: color 0.1s linear;
     display: flex;
     align-items: center;
+    justify-content: center;
     width: 100%;
-    border-radius: 0;
+    border-radius: 12px;
     cursor: pointer;
     flex-direction: column;
     box-sizing: border-box;
@@ -16,10 +19,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;

src/components/SidebarItem/styled/buttonContent.js

@@ -1,15 +1,16 @@
 import styled from 'styled-components';
+import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 
-const StyledButtonContent = styled.button`
+const StyledButtonContent = attachThemeAttrs(styled.button)`
     border: none;
-    padding: 0;
+    border-radius: 12px;
     outline: 0;
+    padding: 0.5rem 0;
     background-color: transparent;
-    transition: color 0.1s linear;
+    width: 100%;
     display: flex;
     align-items: center;
-    width: 100%;
-    border-radius: 0;
+    justify-content: center;
     cursor: pointer;
     flex-direction: column;
     box-sizing: border-box;
@@ -24,6 +25,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;

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;

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};

src/components/SidebarItem/styled/li.js

@@ -3,10 +3,12 @@ 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 0.5rem;
+    margin: 1rem 0;
     box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
 
     :last-child {
         margin-bottom: 0;