From 82b4683acfbb91d18238393785fb1e2ecd1a5889 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Wed, 31 Aug 2022 17:24:00 -0300
Subject: [PATCH 1/2] improve: vertical divider

---
 .../components/Divider/Divider.stories.tsx    | 20 +++++++++++++++++--
 .../components/Divider/Divider.styles.scss    |  7 +++++++
 .../src/components/Divider/Divider.tsx        | 11 ++++++++--
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/packages/fuselage/src/components/Divider/Divider.stories.tsx b/packages/fuselage/src/components/Divider/Divider.stories.tsx
index 48e9779040..ab9b4ee349 100644
--- a/packages/fuselage/src/components/Divider/Divider.stories.tsx
+++ b/packages/fuselage/src/components/Divider/Divider.stories.tsx
@@ -1,13 +1,29 @@
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
-import { Divider } from '../..';
+import { ButtonGroup } from '..';
+import { Divider, IconButton } from '../..';
 
 export default {
   title: 'Data Display/Divider',
   component: Divider,
 } as ComponentMeta<typeof Divider>;
 
-const Template: ComponentStory<typeof Divider> = () => <Divider />;
+const Template: ComponentStory<typeof Divider> = (args) => (
+  <Divider {...args} />
+);
 
 export const Default: ComponentStory<typeof Divider> = Template.bind({});
+
+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
index f9cb85c809..9f84660388 100644
--- a/packages/fuselage/src/components/Divider/Divider.styles.scss
+++ b/packages/fuselage/src/components/Divider/Divider.styles.scss
@@ -11,4 +11,11 @@ $divider-color: theme('divider-color', colors.stroke(extra-light));
   &--danger {
     border-color: colors.stroke(danger);
   }
+
+  &--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
index 7f30d80143..d5bce07a98 100644
--- a/packages/fuselage/src/components/Divider/Divider.tsx
+++ b/packages/fuselage/src/components/Divider/Divider.tsx
@@ -5,9 +5,16 @@ import Box from '../Box';
 
 type DividerProps = ComponentProps<typeof Box> & {
   danger?: boolean;
+  vertical?: boolean;
 };
 
-const Divider = ({ danger, ...props }: DividerProps) => (
-  <Box is='hr' rcx-divider rcx-divider--danger={danger} {...props} />
+const Divider = ({ danger, vertical, ...props }: DividerProps) => (
+  <Box
+    is='hr'
+    rcx-divider
+    rcx-divider--vertical={vertical}
+    rcx-divider--danger={danger}
+    {...props}
+  />
 );
 export { Divider };

From b4929296b8e92d7940fa5813cf078c9869075328 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 1 Sep 2022 12:51:22 -0300
Subject: [PATCH 2/2] chore: import tweak

---
 packages/fuselage/src/components/Divider/Divider.stories.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/fuselage/src/components/Divider/Divider.stories.tsx b/packages/fuselage/src/components/Divider/Divider.stories.tsx
index ab9b4ee349..9f26de3068 100644
--- a/packages/fuselage/src/components/Divider/Divider.stories.tsx
+++ b/packages/fuselage/src/components/Divider/Divider.stories.tsx
@@ -1,8 +1,7 @@
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
-import { ButtonGroup } from '..';
-import { Divider, IconButton } from '../..';
+import { ButtonGroup, Divider, IconButton } from '..';
 
 export default {
   title: 'Data Display/Divider',