mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Fix/add width to toggle button group (#21924)
* Grafana-UI: Add option to customize ToggleButtonGroup's width * Grafana-UI: Add an option to customize TimeOfDayPicker width via width prop * Grafana-UI: Add comment * Grafana-UI: Switch width to size for TimeOfDayPicker * Cleanup merge
This commit is contained in:
parent
fee18f143e
commit
ec0051c075
@ -4,12 +4,15 @@ import { css } from 'emotion';
|
||||
import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme } from '@grafana/data';
|
||||
import { useTheme, Icon } from '../../index';
|
||||
import { stylesFactory } from '../../themes';
|
||||
import { inputSizes } from '../Forms/commonStyles';
|
||||
import { FormInputSize } from '../Forms/types';
|
||||
|
||||
interface Props {
|
||||
onChange: (value: DateTime) => void;
|
||||
value: DateTime;
|
||||
showHour?: boolean;
|
||||
minuteStep?: number;
|
||||
size?: FormInputSize;
|
||||
}
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
@ -40,13 +43,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
};
|
||||
});
|
||||
|
||||
export const TimeOfDayPicker: FC<Props> = ({ minuteStep = 1, showHour = true, onChange, value }) => {
|
||||
export const TimeOfDayPicker: FC<Props> = ({ minuteStep = 1, showHour = true, onChange, value, size = 'auto' }) => {
|
||||
const theme = useTheme();
|
||||
const styles = getStyles(theme);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<RcTimePicker
|
||||
className={inputSizes()[size]}
|
||||
popupClassName={styles.picker}
|
||||
defaultValue={dateTimeAsMoment()}
|
||||
onChange={(value: any) => onChange(dateTime(value))}
|
||||
|
@ -1,20 +1,30 @@
|
||||
import React, { FC, ReactNode, PureComponent } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Tooltip } from '../Tooltip/Tooltip';
|
||||
|
||||
interface ToggleButtonGroupProps {
|
||||
label?: string;
|
||||
children: JSX.Element[];
|
||||
transparent?: boolean;
|
||||
width?: number;
|
||||
}
|
||||
|
||||
export class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
|
||||
render() {
|
||||
const { children, label, transparent } = this.props;
|
||||
const { children, label, transparent, width } = this.props;
|
||||
const labelClasses = classNames('gf-form-label', {
|
||||
'gf-form-label--transparent': transparent,
|
||||
[`width-${width}`]: width,
|
||||
});
|
||||
const buttonGroupClasses = classNames('toggle-button-group', {
|
||||
'toggle-button-group--transparent': transparent,
|
||||
'toggle-button-group--padded': width, // Add extra padding to compensate for buttons border
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="gf-form gf-form--align-center">
|
||||
{label && <label className={`gf-form-label ${transparent ? 'gf-form-label--transparent' : ''}`}>{label}</label>}
|
||||
<div className={`toggle-button-group ${transparent ? 'toggle-button-group--transparent' : ''}`}>{children}</div>
|
||||
{label && <label className={labelClasses}>{label}</label>}
|
||||
<div className={buttonGroupClasses}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -32,4 +32,8 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--padded {
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user