update Divider (#417)

.changeset/orange-rivers-wave.md

@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/web-ui': patch
+---
+
+Update `Divider` component & docs

packages/web-ui/src/Divider/Divider.stories.tsx

@@ -6,6 +6,7 @@ import { Heading } from '../Heading';
 import { Text } from '../Text';
 import { Strong } from '../Strong';
 import { colors } from '@utilitywarehouse/colour-system';
+import { Box } from '../Box';
 
 const meta: Meta<typeof Divider> = {
   title: 'Web UI / Components / Divider',
@@ -83,3 +84,14 @@ export const CustomColor: Story = {
     );
   },
 };
+
+export const UsageOutsideFlexbox: Story = {
+  render: () => (
+    <Box width="100%" p={4}>
+      <Divider decorative />
+      <Box height={100}>
+        <Divider orientation="vertical" decorative />
+      </Box>
+    </Box>
+  ),
+};

packages/web-ui/src/Divider/Divider.tsx

@@ -18,6 +18,7 @@ const StyledElement = styled('hr', {
 })<{ color: string }>(({ color }) => {
   return {
     all: 'unset',
+    display: 'block', // explicitly set this so horizontal dividers show inside block elements
     alignSelf: 'stretch',
     flexShrink: 0,
     backgroundColor: color,
@@ -34,7 +35,8 @@ const StyledElement = styled('hr', {
 
 /**
  * Used to provide a visual break and semantically divide content. Supports
- * vertical and horizontal orientations.
+ * vertical and horizontal orientations. Vertical dividers will only be visible
+ * when contained inside an element with display set to `flexbox` or `grid`.
  */
 export const Divider = React.forwardRef<React.ElementRef<'hr'>, DividerProps>(
   (