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

packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx

@@ -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))}

packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -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>}
+        {label && <label className={labelClasses}>{label}</label>}
-        <div className={`toggle-button-group ${transparent ? 'toggle-button-group--transparent' : ''}`}>{children}</div>
+        <div className={buttonGroupClasses}>{children}</div>
       </div>
     );
   }

public/sass/components/_toggle_button_group.scss

@@ -32,4 +32,8 @@
       margin-left: 0;
     }
   }
+
+  &--padded {
+    padding-left: 2px;
+  }
 }