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>