From 2f5d699a3e136e12be1ca9be4f4fc51a5bbe38c9 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 1 Jun 2021 10:37:57 -0400
Subject: [PATCH] Checkbox: Fixes vertical layout isssue with Checkboxes due to
 fixed height (#35022) (#35055)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit dc5e7695e4b50e84665867d51feed2f662f583fb)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
---
 .../src/components/Forms/Checkbox.story.tsx   | 23 +++++++++++++++++++
 .../src/components/Forms/Checkbox.tsx         |  1 -
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
index 9d052bd853e..6416e996fd2 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import mdx from './Checkbox.mdx';
 import { Checkbox } from './Checkbox';
+import { VerticalGroup } from '../Layout/Layout';
 
 export default {
   title: 'Forms/Checkbox',
@@ -34,3 +35,25 @@ export const uncontrolled = () => {
     />
   );
 };
+
+export const StackedList = () => {
+  return (
+    <VerticalGroup>
+      <Checkbox
+        defaultChecked={true}
+        label="Skip TLS cert validation"
+        description="Set to true if you want to skip TLS cert validation"
+      />
+      <Checkbox
+        defaultChecked={true}
+        label="Another checkbox"
+        description="Another long description that does not make any sense"
+      />
+      <Checkbox
+        defaultChecked={true}
+        label="Another checkbox times 2"
+        description="Another long description that does not make any sense or does it?"
+      />
+    </VerticalGroup>
+  );
+};
diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
index fabac95b6f2..8483357d0c1 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
@@ -65,7 +65,6 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
       position: relative;
       padding-left: ${checkboxSize};
       vertical-align: middle;
-      height: ${theme.spacing(3)};
     `,
     input: css`
       position: absolute;