fix: Sidebar - Missing subcomponents (#292)

RocketChat · Oct 5, 2020 · 9ccb237 · 9ccb237
1 parent 9fa3bf0
commit 9ccb237
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 5 deletions.
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Default.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Item_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Item_Default.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Default.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Item_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Item_Default.png
diff --git a/packages/fuselage/src/components/Sidebar/Item.js b/packages/fuselage/src/components/Sidebar/Item.js
@@ -24,7 +24,7 @@ const Subtitle = ({ className, ...props }) => <div className={`rc-box rcx-box--f
 
 const Wrapper = ({ className, ...props }) => <div className={`rc-box rcx-box--full rcx-sidebar-item__wrapper ${ className }`} {...props}/>;
 
-const Icon = (props) => <FuselageIcon w='x12' mi='x4' size='x16' {...props} />;
+const Icon = ({ children, ...props }) => <div className='rc-box rcx-box--full rcx-sidebar-item__icon' {...props}>{ children || <FuselageIcon size='x16' {...props} />}</div>;
 
 const Avatar = (props) => <Container><div className='rc-box rcx-box--full rcx-sidebar-item__avatar' {...props}/></Container>;
 

diff --git a/packages/fuselage/src/components/Sidebar/styles.scss b/packages/fuselage/src/components/Sidebar/styles.scss
@@ -92,7 +92,7 @@ $sidebar-item-color-selected: theme('sidebar-item-color-selected', colors.foregr
     &__avatar {
       flex: 0 0 auto;
 
-      margin-block: lengths.padding(4);
+      margin-inline: lengths.margin(4);
       @include typography.use-with-truncated-text();
     }
 
@@ -101,6 +101,15 @@ $sidebar-item-color-selected: theme('sidebar-item-color-selected', colors.foregr
       flex: 0 0 auto;
     }
 
+    &__icon {
+      @include typography.use-with-truncated-text();
+      display: flex;
+      justify-content: center;
+
+      width: lengths.size(12);
+      margin-inline: lengths.margin(4);
+    }
+
     &__content {
       @include typography.use-with-truncated-text();
       flex-wrap: wrap;
@@ -114,17 +123,16 @@ $sidebar-item-color-selected: theme('sidebar-item-color-selected', colors.foregr
       display: block;
       flex: 1 1 1%;
 
-      margin-inline: lengths.padding(4);
+      margin-inline: lengths.margin(4);
     }
 
     &__subtitle {
       @include typography.use-font-scale(c1);
-      margin-inline: lengths.padding(8);
     }
 
     &__time {
       @include typography.use-font-scale(micro);
-      margin-inline: lengths.padding(8);
+      margin-inline: lengths.margin(8);
     }
 
     &__wrapper {