From ec0051c075a7cd770d59f7dab17c6c016f30d428 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Tue, 11 Feb 2020 16:47:52 +0200
Subject: [PATCH] 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
---
 .../components/TimePicker/TimeOfDayPicker.tsx    |  7 +++++--
 .../ToggleButtonGroup/ToggleButtonGroup.tsx      | 16 +++++++++++++---
 public/sass/components/_toggle_button_group.scss |  4 ++++
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx b/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx
index 11362e4f79e..4f02815909d 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx
+++ b/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))}
diff --git a/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index 51798b7b874..e886cc8d6cd 100644
--- a/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/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>}
-        <div className={`toggle-button-group ${transparent ? 'toggle-button-group--transparent' : ''}`}>{children}</div>
+        {label && <label className={labelClasses}>{label}</label>}
+        <div className={buttonGroupClasses}>{children}</div>
       </div>
     );
   }
diff --git a/public/sass/components/_toggle_button_group.scss b/public/sass/components/_toggle_button_group.scss
index 1559f8ee570..25a410c632a 100644
--- a/public/sass/components/_toggle_button_group.scss
+++ b/public/sass/components/_toggle_button_group.scss
@@ -32,4 +32,8 @@
       margin-left: 0;
     }
   }
+
+  &--padded {
+    padding-left: 2px;
+  }
 }