IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 09:33:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

Checkbox: Fixes vertical layout isssue with Checkboxes due to fixed height (#35022)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-06-01 16:11:07 +02:00 committed by GitHub
parent 046de10cd7
commit dc5e7695e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
View File

@ -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>
);
};

1
packages/grafana-ui/src/components/Forms/Checkbox.tsx
View File

@ -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;