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

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

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