IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

GrafanaUI: Checkbox description fix (#61929)

Browse Source
This commit is contained in:
juanicabanas 2023-01-23 14:50:19 -03:00 committed by GitHub
parent 6b53f927b2
commit 7875fadd31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,6 +30,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
return ( return (
<label className={cx(styles.wrapper, className)}> <label className={cx(styles.wrapper, className)}>
<div>
<input <input
type="checkbox" type="checkbox"
className={styles.input} className={styles.input}
@ -41,8 +42,11 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
ref={ref} ref={ref}
/> />
<span className={styles.checkmark} /> <span className={styles.checkmark} />
</div>
<div>
{label && <span className={styles.label}>{label}</span>} {label && <span className={styles.label}>{label}</span>}
{description && <span className={styles.description}>{description}</span>} {description && <span className={styles.description}>{description}</span>}
</div>
</label> </label>
); );
} }
@ -55,6 +59,9 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
return { return {
wrapper: css` wrapper: css`
display: flex;
gap: ${theme.spacing(labelPadding)};
align-items: baseline;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
font-size: 0; font-size: 0;
@ -138,18 +145,17 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
css` css`
position: relative; position: relative;
z-index: 2; z-index: 2;
padding-left: ${theme.spacing(labelPadding)};
white-space: nowrap;
cursor: pointer; cursor: pointer;
position: relative;
top: -3px; top: -3px;
max-width: fit-content;
line-height: ${theme.typography.bodySmall.lineHeight};
margin-bottom: 0;
` `
), ),
description: cx( description: cx(
labelStyles.description, labelStyles.description,
css` css`
line-height: ${theme.typography.bodySmall.lineHeight}; line-height: ${theme.typography.bodySmall.lineHeight};
padding-left: ${theme.spacing(checkboxSize + labelPadding)};
margin-top: 0; /* The margin effectively comes from the top: -2px on the label above it */ margin-top: 0; /* The margin effectively comes from the top: -2px on the label above it */
` `
), ),