Storybook: update docs for Layout (#23288)

* Storybook: expand layout docs

* Search: Ad align prop

* Search: Default align to normal

* Search: Expand docs

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

@@ -0,0 +1,104 @@
+import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Layout, HorizontalGroup, VerticalGroup } from './Layout';
+import { Button } from '../Button';
+import { Select } from '../index';
+
+# Layout
+
+## Generic
+
+Used for aligning items in specified orientation. Useful for multiple elements that need to be arranged in rows or columns.
+
+Expects multiple elements as `children` prop. This is the base for more specialised `Horizontal-` and `VerticalGroup` components.
+
+### Props
+<Props of={Layout} />
+
+## Horizontal
+
+Used for horizontally aligning several elements (e.g. Button, Select) with a predefined spacing between them.
+<Preview>
+    <HorizontalGroup>
+      <Button>Button 1</Button>
+      <Button>Button 2</Button>
+      <Button>Button 3</Button>
+    </HorizontalGroup>
+ </Preview>
+
+ <Preview>
+   <HorizontalGroup>
+     <Select
+       size='sm'
+       onChange={() => {}}
+       options={[
+         { value: 1, label: 'Option 1' },
+         { value: 2, label: 'Option 2' },
+       ]}
+     />
+     <Select
+       size='sm'
+       onChange={() => {}}
+       options={[
+         { value: 1, label: 'Option 1' },
+         { value: 2, label: 'Option 2' },
+       ]}
+     />
+     <Select
+       size='sm'
+       onChange={() => {}}
+       options={[
+         { value: 1, label: 'Option 1' },
+         { value: 2, label: 'Option 2' },
+       ]}
+     />
+   </HorizontalGroup>
+ </Preview>
+
+
+### Props
+<Props of={HorizontalGroup} />
+
+
+## Vertical
+
+Used for vertically aligning several elements (e.g. Button, Select) with a predefined spacing between them.
+<Preview>
+    <VerticalGroup>
+      <Button>Button 1</Button>
+      <Button>Button 2</Button>
+      <Button>Button 3</Button>
+    </VerticalGroup>
+ </Preview>
+
+ <Preview>
+   <VerticalGroup justify='center'>
+    <Select
+      size='sm'
+      onChange={() => {}}
+      options={[
+        { value: 1, label: 'Option 1' },
+        { value: 2, label: 'Option 2' },
+      ]}
+    />
+    <Select
+      size='sm'
+      onChange={() => {}}
+      options={[
+        { value: 1, label: 'Option 1' },
+        { value: 2, label: 'Option 2' },
+      ]}
+    />
+    <Select
+      size='sm'
+      onChange={() => {}}
+      options={[
+        { value: 1, label: 'Option 1' },
+        { value: 2, label: 'Option 2' },
+      ]}
+    />
+   </VerticalGroup>
+ </Preview>
+
+
+### Props
+<Props of={VerticalGroup} />

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

@@ -4,11 +4,17 @@ import { VerticalGroup, HorizontalGroup, Layout } from './Layout';
 import { Button } from '../Button';
 import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
 import { select } from '@storybook/addon-knobs';
+import mdx from './Layout.mdx';
 
 export default {
   title: 'Layout/Groups',
   component: Layout,
   decorators: [withStoryContainer, withCenteredStory, withHorizontallyCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 const justifyVariants = ['flex-start', 'flex-end', 'space-between'];

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

@@ -9,12 +9,14 @@ enum Orientation {
 }
 type Spacing = 'xs' | 'sm' | 'md' | 'lg';
 type Justify = 'flex-start' | 'flex-end' | 'space-between' | 'center';
+type Align = 'normal' | 'flex-start' | 'flex-end' | 'center';
 
 export interface LayoutProps {
   children: React.ReactNode[];
   orientation?: Orientation;
   spacing?: Spacing;
   justify?: Justify;
+  align?: Align;
 }
 
 export interface ContainerProps {
@@ -27,9 +29,10 @@ export const Layout: React.FC<LayoutProps> = ({
   orientation = Orientation.Horizontal,
   spacing = 'sm',
   justify = 'flex-start',
+  align = 'normal',
 }) => {
   const theme = useTheme();
-  const styles = getStyles(theme, orientation, spacing, justify);
+  const styles = getStyles(theme, orientation, spacing, justify, align);
   return (
     <div className={styles.layout}>
       {React.Children.map(children, (child, index) => {
@@ -56,25 +59,28 @@ export const Container: React.FC<ContainerProps> = ({ children, padding, margin
   return <div className={styles.wrapper}>{children}</div>;
 };
 
-const getStyles = stylesFactory((theme: GrafanaTheme, orientation: Orientation, spacing: Spacing, justify: Justify) => {
+const getStyles = stylesFactory(
-  return {
+  (theme: GrafanaTheme, orientation: Orientation, spacing: Spacing, justify: Justify, align) => {
-    layout: css`
+    return {
-      display: flex;
+      layout: css`
-      flex-direction: ${orientation === Orientation.Vertical ? 'column' : 'row'};
+        display: flex;
-      justify-content: ${justify};
+        flex-direction: ${orientation === Orientation.Vertical ? 'column' : 'row'};
-      height: 100%;
+        justify-content: ${justify};
-    `,
+        align-items: ${align};
-    buttonWrapper: css`
+        height: 100%;
-      margin-bottom: ${orientation === Orientation.Horizontal ? 0 : theme.spacing[spacing]};
+      `,
-      margin-right: ${orientation === Orientation.Horizontal ? theme.spacing[spacing] : 0};
+      buttonWrapper: css`
+        margin-bottom: ${orientation === Orientation.Horizontal ? 0 : theme.spacing[spacing]};
+        margin-right: ${orientation === Orientation.Horizontal ? theme.spacing[spacing] : 0};
 
-      &:last-child {
+        &:last-child {
-        margin-bottom: 0;
+          margin-bottom: 0;
-        margin-right: 0;
+          margin-right: 0;
-      }
+        }
-    `,
+      `,
-  };
+    };
-});
+  }
+);
 
 const getContainerStyles = stylesFactory((theme: GrafanaTheme, padding?: Spacing, margin?: Spacing) => {
   const paddingSize = (padding && theme.spacing[padding]) || 0;