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

TimeRangePicker: Options list padding (#100343)

Browse Source
This commit is contained in:
Torkel Ödegaard 2025-02-10 14:12:23 +01:00 committed by GitHub
parent 30abff9998
commit 68700e3d7d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
View File

@ -1,7 +1,7 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { useRef, ReactNode } from 'react'; import { useRef, ReactNode } from 'react';
import { TimeOption } from '@grafana/data'; import { GrafanaTheme2, TimeOption } from '@grafana/data';
import { useStyles2 } from '../../../themes'; import { useStyles2 } from '../../../themes';
import { t } from '../../../utils/i18n'; import { t } from '../../../utils/i18n';
@ -55,6 +55,7 @@ const Options = ({ options, value, onChange, title }: Props) => {
onKeyDown={handleKeys} onKeyDown={handleKeys}
ref={localRef} ref={localRef}
aria-roledescription={t('time-picker.time-range.aria-role', 'Time range selection')} aria-roledescription={t('time-picker.time-range.aria-role', 'Time range selection')}
className={styles.list}
> >
{options.map((option, index) => ( {options.map((option, index) => (
<TimeRangeOption <TimeRangeOption
@ -66,7 +67,6 @@ const Options = ({ options, value, onChange, title }: Props) => {
/> />
))} ))}
</ul> </ul>
<div className={styles.grow} />
</> </>
); );
}; };
@ -91,9 +91,8 @@ const getStyles = () => ({
}), }),
}); });
const getOptionsStyles = () => ({ const getOptionsStyles = (theme: GrafanaTheme2) => ({
grow: css({ list: css({
flexGrow: 1, padding: theme.spacing(0.5),
alignItems: 'flex-start',
}), }),
}); });

28
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeOption.tsx
View File

@ -14,27 +14,39 @@ const getStyles = (theme: GrafanaTheme2) => {
alignItems: 'center', alignItems: 'center',
flexDirection: 'row-reverse', flexDirection: 'row-reverse',
justifyContent: 'space-between', justifyContent: 'space-between',
}), position: 'relative',
selected: css({
background: theme.colors.action.selected,
fontWeight: theme.typography.fontWeightMedium,
}), }),
radio: css({ radio: css({
opacity: 0, opacity: 0,
width: '0 !important', width: '0 !important',
'&:focus-visible + label': getFocusStyles(theme), '&:focus-visible + label': getFocusStyles(theme),
}), }),
label: css({ label: css({
cursor: 'pointer', cursor: 'pointer',
flex: 1, flex: 1,
padding: '7px 9px 7px 9px', padding: theme.spacing(1),
borderRadius: theme.shape.radius.default,
'&:hover': { '&:hover': {
background: theme.colors.action.hover, background: theme.colors.action.hover,
cursor: 'pointer', cursor: 'pointer',
}, },
}), }),
labelSelected: css({
background: theme.colors.action.selected,
'&::before': {
backgroundImage: theme.colors.gradients.brandVertical,
borderRadius: theme.shape.radius.default,
content: '" "',
display: 'block',
height: '100%',
position: 'absolute',
width: theme.spacing(0.5),
left: 0,
top: 0,
},
}),
}; };
}; };
@ -54,7 +66,7 @@ export const TimeRangeOption = memo<Props>(({ value, onSelect, selected = false,
const id = uuidv4(); const id = uuidv4();
return ( return (
<li className={cx(styles.container, selected && styles.selected)}> <li className={styles.container}>
<input <input
className={styles.radio} className={styles.radio}
checked={selected} checked={selected}
@ -65,7 +77,7 @@ export const TimeRangeOption = memo<Props>(({ value, onSelect, selected = false,
id={id} id={id}
onChange={() => onSelect(value)} onChange={() => onSelect(value)}
/> />
<label className={styles.label} htmlFor={id}> <label className={cx(styles.label, selected && styles.labelSelected)} htmlFor={id}>
{value.display} {value.display}
</label> </label>
</li> </li>