Fix: Align buttons and label in ToggleButtonGroup (#19036)

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>
+  );
+});

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>

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;

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;

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;