feat: Tabs Design Margin (#437)

RocketChat · Apr 21, 2021 · c92386f · c92386f
1 parent 6ea5648
commit c92386f
Show file tree

Hide file tree

Showing 10 changed files with 3 additions and 7 deletions.
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Tabs_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Tabs_Default.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Tabs_Disabled.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Tabs_Disabled.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Tabs_Selected.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Tabs_Selected.png
diff --git a/...ges/fuselage/.loki/reference/chrome_iphone7_Misc_Tabs_Selected_and_Disabled.png b/...ges/fuselage/.loki/reference/chrome_iphone7_Misc_Tabs_Selected_and_Disabled.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Tabs_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Tabs_Default.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Tabs_Disabled.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Tabs_Disabled.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Tabs_Selected.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Tabs_Selected.png
diff --git a/...ages/fuselage/.loki/reference/chrome_laptop_Misc_Tabs_Selected_and_Disabled.png b/...ages/fuselage/.loki/reference/chrome_laptop_Misc_Tabs_Selected_and_Disabled.png
diff --git a/packages/fuselage/src/components/Tabs/index.js b/packages/fuselage/src/components/Tabs/index.js
@@ -7,13 +7,7 @@ export function Tabs({ children, ...props }) {
   return (
     <Box is='div' rcx-tabs {...props}>
       <Box is='div' rcx-tabs__scroll-box>
-        <Box
-          is='div'
-          p='x4'
-          rcx-tabs__wrapper
-          children={children}
-          role='tablist'
-        />
+        <Box is='div' rcx-tabs__wrapper children={children} role='tablist' />
       </Box>
     </Box>
   );

diff --git a/packages/fuselage/src/components/Tabs/styles.scss b/packages/fuselage/src/components/Tabs/styles.scss
@@ -64,6 +64,8 @@ $tabs-disabled-selected-border-color: theme(
   display: flex;
 
   flex-wrap: nowrap;
+
+  margin: lengths.margin(none) lengths.margin(12);
 }
 
 .rcx-tabs__item {