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

grafana/ui: add icon as a prefix in time range input component (#66084)

Browse Source
This commit is contained in:
Reem Tariq 2023-05-26 10:59:02 +02:00 committed by GitHub
parent 0b4c790e55
commit cebc8853f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
View File

@ -31,6 +31,7 @@ export interface TimeRangeInputProps {
/** Controls visibility of the preset time ranges (e.g. **Last 5 minutes**) in the picker menu */ /** Controls visibility of the preset time ranges (e.g. **Last 5 minutes**) in the picker menu */
hideQuickRanges?: boolean; hideQuickRanges?: boolean;
disabled?: boolean; disabled?: boolean;
showIcon?: boolean;
} }
const noop = () => {}; const noop = () => {};
@ -46,6 +47,7 @@ export const TimeRangeInput = ({
isReversed = true, isReversed = true,
hideQuickRanges = false, hideQuickRanges = false,
disabled = false, disabled = false,
showIcon = false,
}: TimeRangeInputProps) => { }: TimeRangeInputProps) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const theme = useTheme2(); const theme = useTheme2();
@ -84,6 +86,7 @@ export const TimeRangeInput = ({
aria-label={selectors.components.TimePicker.openButton} aria-label={selectors.components.TimePicker.openButton}
onClick={onOpen} onClick={onOpen}
> >
{showIcon && <Icon name="clock-nine" size={'sm'} className={styles.icon} />}
{isValidTimeRange(value) ? ( {isValidTimeRange(value) ? (
<TimePickerButtonLabel value={value} timeZone={timeZone} /> <TimePickerButtonLabel value={value} timeZone={timeZone} />
) : ( ) : (
@ -162,5 +165,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, disabled = false) => {
color: ${theme.colors.text.disabled}; color: ${theme.colors.text.disabled};
opacity: 1; opacity: 1;
`, `,
icon: css`
margin-right: ${theme.spacing(0.5)};
`,
}; };
}); });