From dc0bfb26cfd27ab441bae7c5e9043b10a53e913b Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
Date: Thu, 12 Sep 2019 14:42:28 +0200
Subject: [PATCH] Fix: Align buttons and label in ToggleButtonGroup (#19036)

---
 .../ToggleButtonGroup.story.tsx               | 49 +++++++++++++++++++
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   |  4 +-
 public/sass/components/_gf-form.scss          |  4 ++
 .../sass/components/_toggle_button_group.scss |  2 +-
 public/sass/pages/_explore.scss               |  4 --
 5 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.story.tsx

diff --git a/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.story.tsx b/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.story.tsx
new file mode 100644
index 00000000000..d187a6f29af
--- /dev/null
+++ b/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.story.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { ToggleButton, ToggleButtonGroup } from './ToggleButtonGroup';
+import { UseState } from '../../utils/storybook/UseState';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+
+const ToggleButtonGroupStories = storiesOf('UI/ToggleButtonGroup', module);
+
+const options = [
+  { value: 'first', label: 'First' },
+  { value: 'second', label: 'Second' },
+  { value: 'third', label: 'Third' },
+];
+
+ToggleButtonGroupStories.addDecorator(withCenteredStory);
+
+ToggleButtonGroupStories.add('default', () => {
+  return (
+    <UseState
+      initialState={{
+        value: 'first',
+      }}
+    >
+      {(value, updateValue) => {
+        return (
+          <ToggleButtonGroup label="Options">
+            {options.map((option, index) => {
+              return (
+                <ToggleButton
+                  key={`${option.value}-${index}`}
+                  value={option.value}
+                  onChange={newValue => {
+                    action('on change')(newValue);
+                    updateValue({ value: newValue });
+                  }}
+                  selected={value.value === option.value}
+                >
+                  {option.label}
+                </ToggleButton>
+              );
+            })}
+          </ToggleButtonGroup>
+        );
+      }}
+    </UseState>
+  );
+});
diff --git a/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index e9600d9971e..51798b7b874 100644
--- a/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -12,7 +12,7 @@ export class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
     const { children, label, transparent } = this.props;
 
     return (
-      <div className="gf-form">
+      <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>
       </div>
@@ -44,7 +44,7 @@ export const ToggleButton: FC<ToggleButtonProps> = ({
     }
   };
 
-  const btnClassName = `btn ${className} ${selected ? 'active' : ''}`;
+  const btnClassName = `btn ${className}${selected ? ' active' : ''}`;
   const button = (
     <button className={btnClassName} onClick={onClick}>
       <span>{children}</span>
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 60ef89a5d8e..eb6e0be5969 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -20,6 +20,10 @@ $input-border: 1px solid $input-border-color;
     justify-content: flex-end;
   }
 
+  &--align-center {
+    align-content: center;
+  }
+
   &--alt {
     flex-direction: column;
     align-items: flex-start;
diff --git a/public/sass/components/_toggle_button_group.scss b/public/sass/components/_toggle_button_group.scss
index eb57860233d..1559f8ee570 100644
--- a/public/sass/components/_toggle_button_group.scss
+++ b/public/sass/components/_toggle_button_group.scss
@@ -1,10 +1,10 @@
 .toggle-button-group {
   display: flex;
-  padding-top: 5px;
 
   .btn {
     @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
 
+    height: $input-height;
     padding: 7px 10px;
     font-weight: $font-weight-semi-bold;
     font-size: $font-size-sm;
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 5a37856efe8..636871e7897 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -349,10 +349,6 @@
 .query-type-toggle {
   margin-left: 5px;
 
-  .toggle-button-group {
-    padding-top: 2px;
-  }
-
   .btn.active {
     background-color: $input-bg;
     background-image: none;