GrafanaUI: Added spacing token to Divider Component (#72725)

* GrafanaUI: Added spacing token to Divider Component

* Made changes suggested

packages/grafana-ui/src/components/Divider/Divider.mdx

@@ -52,6 +52,24 @@ import { Divider } from '@grafana/ui';
 
 ```
 
+### Modifiers
+
+Pass a spacing token into the `spacing` prop to adjust the margin.
+
+```tsx
+import { Divider } from '@grafana/ui';
+
+    <header>
+        <h1>My title here</h1>
+        <Divider direction="vertical" spacing={0.5}/>
+        <img src="logo.png" alt="logo" />
+    </header>
+    <main>
+        <p>Main content goes here</p>
+    </main>
+
+```
+
 ### Dos
 
     - Import and add the Divider component inside the code where you would normally add an hr or a div.

packages/grafana-ui/src/components/Divider/Divider.story.tsx

@@ -17,8 +17,14 @@ const meta: Meta<typeof Divider> = {
   },
 };
 
-export const Basic: StoryFn<typeof Divider> = ({ direction }) => {
+export const Basic: StoryFn<typeof Divider> = ({ direction, spacing }) => {
-  return <Divider direction={direction} />;
+  return (
+    <div style={{ display: direction === 'vertical' ? 'flex' : 'block', flexDirection: 'row', height: '50px' }}>
+      <div>My text here</div>
+      <Divider direction={direction} spacing={spacing} />
+      <div>My text here</div>
+    </div>
+  );
 };
 
 export const Examples: StoryFn<typeof Divider> = () => {

packages/grafana-ui/src/components/Divider/Divider.tsx

@@ -1,17 +1,17 @@
 import { css } from '@emotion/css';
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
+import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';
 
-import { useTheme2 } from '../../themes';
+import { useStyles2 } from '../../themes';
 
 interface DividerProps {
   direction?: 'vertical' | 'horizontal';
+  spacing?: ThemeSpacingTokens;
 }
 
-export const Divider = ({ direction = 'horizontal' }: DividerProps) => {
+export const Divider = ({ direction = 'horizontal', spacing = 2 }: DividerProps) => {
-  const theme = useTheme2();
+  const styles = useStyles2(useCallback((theme) => getStyles(theme, spacing), [spacing]));
-  const styles = getStyles(theme);
 
   if (direction === 'vertical') {
     return <div className={styles.verticalDivider}></div>;
@@ -22,16 +22,16 @@ export const Divider = ({ direction = 'horizontal' }: DividerProps) => {
 
 Divider.displayName = 'Divider';
 
-const getStyles = (theme: GrafanaTheme2) => {
+const getStyles = (theme: GrafanaTheme2, spacing: ThemeSpacingTokens) => {
   return {
     horizontalDivider: css({
       borderTop: `1px solid ${theme.colors.border.weak}`,
-      margin: theme.spacing(2, 0),
+      margin: theme.spacing(spacing, 0),
       width: '100%',
     }),
     verticalDivider: css({
       borderRight: `1px solid ${theme.colors.border.weak}`,
-      margin: theme.spacing(0, 0.5),
+      margin: theme.spacing(0, spacing),
       height: '100%',
     }),
   };