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
1 changed files with 23 additions and 17 deletions
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 ( return (
<label className={cx(styles.wrapper, className)}> <label className={cx(styles.wrapper, className)}>
<input <div>
type="checkbox" <input
className={styles.input} type="checkbox"
checked={value} className={styles.input}
disabled={disabled} checked={value}
onChange={handleOnChange} disabled={disabled}
value={htmlValue} onChange={handleOnChange}
{...inputProps} value={htmlValue}
ref={ref} {...inputProps}
/> ref={ref}
<span className={styles.checkmark} /> />
{label && <span className={styles.label}>{label}</span>} <span className={styles.checkmark} />
{description && <span className={styles.description}>{description}</span>} </div>
<div>
{label && <span className={styles.label}>{label}</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 */
` `
), ),