From cd5277befd70a6d4c03847cc34d040950b3b6d85 Mon Sep 17 00:00:00 2001
From: Jack Westbrook <jack.westbrook@gmail.com>
Date: Wed, 10 Nov 2021 10:51:10 +0100
Subject: [PATCH] Storybook: Fix decorator height (#41468)

* fix(storybook): make sure story background fills available height

* fix(storybook): add decorator to prevent badge filling all available height

* docs(badge): use centered story

* revert(badge): remove obsolete Meta typing
---
 packages/grafana-ui/.storybook/preview-head.html            | 6 ++++++
 packages/grafana-ui/src/components/Badge/Badge.story.tsx    | 3 ++-
 packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx | 2 +-
 .../src/utils/storybook/withRightAlignedStory.tsx           | 2 +-
 packages/grafana-ui/src/utils/storybook/withTheme.tsx       | 2 +-
 5 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 packages/grafana-ui/.storybook/preview-head.html

diff --git a/packages/grafana-ui/.storybook/preview-head.html b/packages/grafana-ui/.storybook/preview-head.html
new file mode 100644
index 00000000000..5bcc8d66948
--- /dev/null
+++ b/packages/grafana-ui/.storybook/preview-head.html
@@ -0,0 +1,6 @@
+<!-- Make sure iframe dom elements fill all available space for background consistency -->
+<style>
+  #root {
+    height: 100%;
+  }
+</style>
diff --git a/packages/grafana-ui/src/components/Badge/Badge.story.tsx b/packages/grafana-ui/src/components/Badge/Badge.story.tsx
index bb6fad403a6..4d790acf15a 100644
--- a/packages/grafana-ui/src/components/Badge/Badge.story.tsx
+++ b/packages/grafana-ui/src/components/Badge/Badge.story.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 import { Story } from '@storybook/react';
 import { Badge, BadgeProps } from '@grafana/ui';
 import { iconOptions } from '../../utils/storybook/knobs';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 export default {
   title: 'Data Display/Badge',
   component: Badge,
-  decorators: [],
+  decorators: [withCenteredStory],
   parameters: {
     docs: {},
   },
diff --git a/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx b/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
index 735c8162ab3..f5778b35814 100644
--- a/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
@@ -11,7 +11,7 @@ const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
         width: '100%',
         padding: '20px',
         display: 'flex',
-        minHeight: '80vh',
+        minHeight: '100%',
         background: `${theme.colors.background.primary}`,
       }}
     >
diff --git a/packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx b/packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx
index b1fc687efb0..44e238e6eb9 100644
--- a/packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx
@@ -5,7 +5,7 @@ const RightAlignedStory: React.FunctionComponent<{}> = ({ children }) => {
   return (
     <div
       style={{
-        height: '100vh  ',
+        minHeight: '100%',
         display: 'flex',
         alignItems: 'flex-start',
         justifyContent: 'flex-end',
diff --git a/packages/grafana-ui/src/utils/storybook/withTheme.tsx b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
index dc70d5bc7ca..b4bf4fe018c 100644
--- a/packages/grafana-ui/src/utils/storybook/withTheme.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
@@ -21,7 +21,7 @@ const ThemeableStory: React.FunctionComponent<{ handleSassThemeChange: SassTheme
           width: '100%',
           padding: '20px',
           display: 'flex',
-          minHeight: '80vh',
+          minHeight: '100%',
           background: `${theme.colors.background.primary}`,
         }}
       >