Using drop down instead

public/app/core/components/Picker/SimplePicker.tsx

@@ -11,7 +11,7 @@ interface Props {
   onSelected: (item: any) => {} | void;
   options: any[];
   placeholder?: string;
-  width: number;
+  width?: number;
   value: any;
 }
 
@@ -29,7 +29,7 @@ const SimplePicker: SFC<Props> = ({
   return (
     <Select
       classNamePrefix={`gf-form-select-box`}
-      className={`width-${width} gf-form-input gf-form-input--form-dropdown ${className || ''}`}
+      className={`${width ? 'width-' + width : ''} gf-form-input gf-form-input--form-dropdown ${className || ''}`}
       components={{
         Option: DescriptionOption,
       }}

public/app/plugins/panel/gauge/MappingRow.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Label } from 'app/core/components/Label/Label';
-import ToggleButtonGroup, { ToggleButton } from 'app/core/components/ToggleButtonGroup/ToggleButtonGroup';
+import SimplePicker from 'app/core/components/Picker/SimplePicker';
 import { MappingType, RangeMap, ValueMap } from 'app/types';
 
 interface Props {
@@ -13,6 +13,11 @@ interface State {
   mapping: ValueMap | RangeMap;
 }
 
+const mappingOptions = [
+  { value: MappingType.ValueToText, label: 'Value' },
+  { value: MappingType.RangeToText, label: 'Range' },
+];
+
 export default class MappingRow extends PureComponent<Props, State> {
   constructor(props) {
     super(props);
@@ -147,34 +152,13 @@ export default class MappingRow extends PureComponent<Props, State> {
     return (
       <div className="mapping-row">
         <div className="mapping-row-type">
-          <ToggleButtonGroup
+          <SimplePicker
-            onChange={mappingType => this.onMappingTypeChange(mappingType)}
+            placeholder="Choose type"
-            value={mapping.type}
+            options={mappingOptions}
-            stackedButtons={true}
+            value={mappingOptions.find(o => o.value === mapping.type)}
-            render={({ selectedValue, onChange, stackedButtons }) => {
+            getOptionLabel={i => i.label}
-              return [
+            getOptionValue={i => i.value}
-                <ToggleButton
+            onSelected={type => this.onMappingTypeChange(type)}
-                  className="btn-small"
-                  key="value"
-                  onChange={onChange}
-                  selected={selectedValue === MappingType.ValueToText}
-                  value={MappingType.ValueToText}
-                  stackedButtons={stackedButtons}
-                >
-                  Value
-                </ToggleButton>,
-                <ToggleButton
-                  className="btn-small"
-                  key="range"
-                  onChange={onChange}
-                  selected={selectedValue === MappingType.RangeToText}
-                  value={MappingType.RangeToText}
-                  stackedButtons={stackedButtons}
-                >
-                  Range
-                </ToggleButton>,
-              ];
-            }}
           />
         </div>
         <div>{this.renderRow()}</div>

public/app/plugins/panel/gauge/ValueMappings.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { defaultProps, OptionModuleProps } from './module';
-import { MappingType } from '../../../types';
 import ValueMappings from './ValueMappings';
+import { defaultProps, OptionModuleProps } from './module';
+import { MappingType } from 'app/types';
 
 const setup = (propOverrides?: object) => {
   const props: OptionModuleProps = {
@@ -20,12 +20,25 @@ const setup = (propOverrides?: object) => {
 
   const wrapper = shallow(<ValueMappings {...props} />);
 
-  return wrapper.instance() as ValueMappings;
+  const instance = wrapper.instance() as ValueMappings;
+
+  return {
+    instance,
+    wrapper,
+  };
 };
 
+describe('Render', () => {
+  it('should render component', () => {
+    const { wrapper } = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
 describe('On remove mapping', () => {
   it('Should remove mapping with id 0', () => {
-    const instance = setup();
+    const { instance } = setup();
     instance.onRemoveMapping(1);
 
     expect(instance.state.mappings).toEqual([
@@ -34,7 +47,7 @@ describe('On remove mapping', () => {
   });
 
   it('should remove mapping with id 1', () => {
-    const instance = setup();
+    const { instance } = setup();
     instance.onRemoveMapping(2);
 
     expect(instance.state.mappings).toEqual([
@@ -45,7 +58,7 @@ describe('On remove mapping', () => {
 
 describe('Next id to add', () => {
   it('should be 4', () => {
-    const instance = setup();
+    const { instance } = setup();
 
     instance.addMapping();
 
@@ -53,7 +66,7 @@ describe('Next id to add', () => {
   });
 
   it('should default to 1', () => {
-    const instance = setup({ options: { ...defaultProps.options } });
+    const { instance } = setup({ options: { ...defaultProps.options } });
 
     expect(instance.state.nextIdToAdd).toEqual(1);
   });

public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div
+  className="section gf-form-group"
+>
+  <h5
+    className="page-heading"
+  >
+    Value mappings
+  </h5>
+  <div>
+    <MappingRow
+      key="Ok-0"
+      mapping={
+        Object {
+          "id": 1,
+          "operator": "",
+          "text": "Ok",
+          "type": 1,
+          "value": "20",
+        }
+      }
+      removeMapping={[Function]}
+      updateMapping={[Function]}
+    />
+    <MappingRow
+      key="Meh-1"
+      mapping={
+        Object {
+          "from": "21",
+          "id": 2,
+          "operator": "",
+          "text": "Meh",
+          "to": "30",
+          "type": 2,
+        }
+      }
+      removeMapping={[Function]}
+      updateMapping={[Function]}
+    />
+  </div>
+  <div
+    className="add-mapping-row"
+    onClick={[Function]}
+  >
+    <div
+      className="add-mapping-row-icon"
+    >
+      <i
+        className="fa fa-plus"
+      />
+    </div>
+    <div
+      className="add-mapping-row-label"
+    >
+      Add mapping
+    </div>
+  </div>
+</div>
+`;

public/sass/components/_thresholds.scss

@@ -77,7 +77,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
+  height: 37px;
+  width: 37px;
   cursor: pointer;
 }