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

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

@ -30,19 +30,23 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
return (
<label className={cx(styles.wrapper, className)}>
<input
type="checkbox"
className={styles.input}
checked={value}
disabled={disabled}
onChange={handleOnChange}
value={htmlValue}
{...inputProps}
ref={ref}
/>
<span className={styles.checkmark} />
{label && <span className={styles.label}>{label}</span>}
{description && <span className={styles.description}>{description}</span>}
<div>
<input
type="checkbox"
className={styles.input}
checked={value}
disabled={disabled}
onChange={handleOnChange}
value={htmlValue}
{...inputProps}
ref={ref}
/>
<span className={styles.checkmark} />
</div>
<div>
{label && <span className={styles.label}>{label}</span>}
{description && <span className={styles.description}>{description}</span>}
</div>
</label>
);
}
@ -55,6 +59,9 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
return {
wrapper: css`
display: flex;
gap: ${theme.spacing(labelPadding)};
align-items: baseline;
position: relative;
vertical-align: middle;
font-size: 0;
@ -138,18 +145,17 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
css`
position: relative;
z-index: 2;
padding-left: ${theme.spacing(labelPadding)};
white-space: nowrap;
cursor: pointer;
position: relative;
top: -3px;
max-width: fit-content;
line-height: ${theme.typography.bodySmall.lineHeight};
margin-bottom: 0;
`
),
description: cx(
labelStyles.description,
css`
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 */
`
),