sort of a hacky way to figure if the small variation should be used for the label

improve light theme look

use new toggle button group in logs

stop propagation on click event

clean up styles

improve support for small when a label is present

refactoring - move toggle button to the group file. turn it into a stateless component

improve support for light theme

rename dedupe to dedup

use radius variable

public/app/core/components/ToggleButtonGroup/ToggleButton.tsx

-import React, { PureComponent } from 'react';
-
-interface ToggleButtonProps {
-  onChange?: (value) => void;
-  selected?: boolean;
-  value: any;
-  classNames?: string;
-}
-interface ToggleButtonState {}
-
-export default class ToggleButton extends PureComponent<ToggleButtonProps, ToggleButtonState> {
-  static defaultProps = {
-    classNames: '',
-  };
-
-  handleChange = () => {
-    const { onChange, value } = this.props;
-    if (onChange) {
-      onChange(value);
-    }
-  };
-
-  render() {
-    const { children, selected, classNames } = this.props;
-    const btnClassName = `btn ${classNames} ${selected ? 'active' : ''}`;
-
-    return (
-      <button className={btnClassName} onClick={this.handleChange}>
-        <span>{children}</span>
-      </button>
-    );
-  }
-}

public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx

-import React, { PureComponent, ReactElement } from 'react';
+import React, { SFC, ReactNode, PureComponent, ReactElement } from 'react';
 
 interface ToggleButtonGroupProps {
   onChange: (value) => void;
@@ -9,7 +9,12 @@ interface ToggleButtonGroupProps {
 export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
   getValues() {
     const { children } = this.props;
-    return React.Children.toArray(children).map(c => c['props'].value);
+    return React.Children.toArray(children).map((c: ReactElement<any>) => c.props.value);
+  }
+
+  smallChildren() {
+    const { children } = this.props;
+    return React.Children.toArray(children).every((c: ReactElement<any>) => c.props.className.includes('small'));
   }
 
   handleToggle(toggleValue) {
@@ -24,6 +29,7 @@ export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupPr
     const { children, value, label } = this.props;
     const values = this.getValues();
     const selectedValue = value || values[0];
+    const labelClassName = `gf-form-label ${this.smallChildren() ? 'small' : ''}`;
 
     const childClones = React.Children.map(children, (child: ReactElement<any>) => {
       const { value: buttonValue } = child.props;
@@ -37,10 +43,34 @@ export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupPr
     return (
       <div className="gf-form">
         <div className="toggle-button-group">
-          {label && <label className="gf-form-label">{label}</label>}
+          {label && <label className={labelClassName}>{label}</label>}
           {childClones}
         </div>
       </div>
     );
   }
 }
+
+interface ToggleButtonProps {
+  onChange?: (value) => void;
+  selected?: boolean;
+  value: any;
+  className?: string;
+  children: ReactNode;
+}
+
+export const ToggleButton: SFC<ToggleButtonProps> = ({ children, selected, className = '', value, onChange }) => {
+  const handleChange = event => {
+    event.stopPropagation();
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  const btnClassName = `btn ${className} ${selected ? 'active' : ''}`;
+  return (
+    <button className={btnClassName} onClick={handleChange}>
+      <span>{children}</span>
+    </button>
+  );
+};

public/app/features/explore/Logs.tsx

@@ -16,6 +16,7 @@ import {
 } from 'app/core/logs_model';
 import { findHighlightChunksInText } from 'app/core/utils/text';
 import { Switch } from 'app/core/components/Switch/Switch';
+import ToggleButtonGroup, { ToggleButton } from 'app/core/components/ToggleButtonGroup/ToggleButtonGroup';
 
 import Graph from './Graph';
 import LogLabels from './LogLabels';
@@ -304,30 +305,13 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
             <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small />
             <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small />
             <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} small />
-            <Switch
-              label="Dedup: off"
-              checked={dedup === LogsDedupStrategy.none}
-              onChange={() => this.onChangeDedup(LogsDedupStrategy.none)}
-              small
-            />
-            <Switch
-              label="Dedup: exact"
-              checked={dedup === LogsDedupStrategy.exact}
-              onChange={() => this.onChangeDedup(LogsDedupStrategy.exact)}
-              small
-            />
-            <Switch
-              label="Dedup: numbers"
-              checked={dedup === LogsDedupStrategy.numbers}
-              onChange={() => this.onChangeDedup(LogsDedupStrategy.numbers)}
-              small
-            />
-            <Switch
-              label="Dedup: signature"
-              checked={dedup === LogsDedupStrategy.signature}
-              onChange={() => this.onChangeDedup(LogsDedupStrategy.signature)}
-              small
-            />
+            <ToggleButtonGroup label="Dedup" onChange={this.onChangeDedup} value={dedup}>
+              {Object.keys(LogsDedupStrategy).map((dedupType, i) => (
+                <ToggleButton className="btn-small" key={i} value={dedupType}>
+                  {dedupType}
+                </ToggleButton>
+              ))}
+            </ToggleButtonGroup>
             {hasData &&
               meta && (
                 <div className="logs-meta">

public/sass/components/_toggle_button_group.scss

@@ -3,25 +3,35 @@
 
   .gf-form-label {
     background-color: $input-label-bg;
+    &:first-child {
+      border-radius: $border-radius 0 0 $border-radius;
+      margin: 0;
+    }
+    &.small {
+      padding: ($input-padding-y / 2) ($input-padding-x / 2);
+      font-size: $font-size-xs;
+    }
   }
 
   .btn {
-    @include buttonBackground($input-bg, $input-bg);
+    background-color: $typeahead-selected-bg;
+    border-radius: 0;
+    color: $text-color;
     &.active {
-      background-color: lighten($input-label-bg, 5%);
-      color: $link-color;
+      background-color: $input-bg;
       &:hover {
         cursor: default;
       }
     }
-  }
 
-  &:first-child {
-    border-radius: 2px 0 0 2px;
-    margin: 0;
-  }
-  &:last-child {
-    border-radius: 0 2px 2px 0;
-    margin-left: 0 !important;
+    &:first-child {
+      border-radius: $border-radius 0 0 $border-radius;
+      margin: 0;
+    }
+
+    &:last-child {
+      border-radius: 0 $border-radius $border-radius 0;
+      margin-left: 0;
+    }
   }
 }