From 32d9b04666337015a698ac725e077b1618c8ecad Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Thu, 3 Jun 2021 13:37:59 +0100
Subject: [PATCH] Grafana-UI: Fix checkbox vertical alignment  (#35124)

* Grafana-UI: Fix Checkbox vertical layout issues

* reorganise css

* revert my 'fix' and just go back to setting a min height :(
---
 .../src/components/Forms/Checkbox.story.tsx          | 12 ++++++++++++
 .../grafana-ui/src/components/Forms/Checkbox.tsx     |  1 +
 2 files changed, 13 insertions(+)

diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
index 6416e996fd2..fac1bc339c0 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
@@ -2,6 +2,7 @@ import React, { useState, useCallback } from 'react';
 import mdx from './Checkbox.mdx';
 import { Checkbox } from './Checkbox';
 import { VerticalGroup } from '../Layout/Layout';
+import { Field } from './Field';
 
 export default {
   title: 'Forms/Checkbox',
@@ -57,3 +58,14 @@ export const StackedList = () => {
     </VerticalGroup>
   );
 };
+
+export const InAField = () => {
+  return (
+    <Field
+      label="Hidden"
+      description="Annotation queries can be toggled on or of at the top of the dashboard. With this option checked this toggle will be hidden."
+    >
+      <Checkbox name="hide" id="hide" defaultChecked={true} />
+    </Field>
+  );
+};
diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
index 8483357d0c1..c0631710e39 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
@@ -65,6 +65,7 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
       position: relative;
       padding-left: ${checkboxSize};
       vertical-align: middle;
+      min-height: ${theme.spacing(3)};
     `,
     input: css`
       position: absolute;