feat(fuselage): Vertical Divider (#840)

RocketChat · Sep 1, 2022 · d418221 · d418221
1 parent e18ea0b
commit d418221
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/packages/fuselage/src/components/Divider/Divider.stories.tsx b/packages/fuselage/src/components/Divider/Divider.stories.tsx
@@ -1,7 +1,7 @@
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
-import { Divider } from '../..';
+import { ButtonGroup, Divider, IconButton } from '..';
 
 export default {
   title: 'Data Display/Divider',
@@ -17,3 +17,16 @@ export const WithText: ComponentStory<typeof Divider> = Template.bind({});
 WithText.args = {
   children: 'Divider',
 };
+
+export const Vertical: ComponentStory<typeof Divider> = Template.bind({});
+Vertical.args = {
+  vertical: true,
+};
+
+export const AsButtonSeparator = () => (
+  <ButtonGroup medium>
+    <IconButton small icon='phone' />
+    <Divider vertical />
+    <IconButton small icon='user' />
+  </ButtonGroup>
+);
diff --git a/packages/fuselage/src/components/Divider/Divider.styles.scss b/packages/fuselage/src/components/Divider/Divider.styles.scss
@@ -33,4 +33,11 @@ $divider-color: theme('divider-color', colors.stroke(extra-light));
     margin-block: lengths.margin(8);
     padding-inline: lengths.padding(8);
   }
+
+  &--vertical {
+    width: 0;
+    height: lengths.size(20);
+    margin-block: 0;
+    margin-inline: lengths.margin(8);
+  }
 }
diff --git a/packages/fuselage/src/components/Divider/Divider.tsx b/packages/fuselage/src/components/Divider/Divider.tsx
@@ -6,14 +6,16 @@ import Box from '../Box';
 type DividerProps = ComponentProps<typeof Box> & {
   variation?: 'danger';
   children?: ReactNode;
+  vertical?: boolean;
 };
 
-const Divider = ({ variation, children, ...props }: DividerProps) => {
+const Divider = ({ variation, children, vertical, ...props }: DividerProps) => {
   if (!children) {
     return (
       <Box
         is='hr'
         rcx-divider
+        rcx-divider--vertical={vertical}
         rcx-divider--danger={variation === 'danger'}
         {...props}
       />