From a0a06911d81604d8eb3f05241c35fcc91b48e14f Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 7 Dec 2018 17:08:28 +0100
Subject: [PATCH] Toggle buttons

---
 public/app/plugins/panel/gauge/MappingRow.tsx | 60 +++++++++----------
 1 file changed, 29 insertions(+), 31 deletions(-)

diff --git a/public/app/plugins/panel/gauge/MappingRow.tsx b/public/app/plugins/panel/gauge/MappingRow.tsx
index 63930d617cd..93d17c24692 100644
--- a/public/app/plugins/panel/gauge/MappingRow.tsx
+++ b/public/app/plugins/panel/gauge/MappingRow.tsx
@@ -88,7 +88,7 @@ export default class MappingRow extends PureComponent<Props, State> {
     const valueMap = mapping as ValueMap;
 
     return (
-      <div className="gf-form-inline">
+      <div className="gf-form">
         <div className="gf-form-inline">
           <Label width={4}>Value</Label>
           <input className="gf-form-input" onChange={this.onMappingValueChange} value={valueMap.value} />
@@ -105,36 +105,34 @@ export default class MappingRow extends PureComponent<Props, State> {
     const { mappingType } = this.state;
 
     return (
-      <div>
-        <div className="gf-form-inline">
-          <ToggleButtonGroup
-            label="Mapping type"
-            onChange={mappingType => this.onMappingTypeChange(mappingType)}
-            render={({ selectedValue, onChange }) => {
-              return [
-                <ToggleButton
-                  className="btn-small"
-                  key="value"
-                  onChange={onChange}
-                  selected={selectedValue === mappingType}
-                  value="Value"
-                >
-                  Value
-                </ToggleButton>,
-                <ToggleButton
-                  className="btn-small"
-                  key="range"
-                  onChange={onChange}
-                  selected={selectedValue === mappingType}
-                  value="Range"
-                >
-                  Range
-                </ToggleButton>,
-              ];
-            }}
-          />
-          <div>{this.renderRow()}</div>
-        </div>
+      <div className="gf-form-inline">
+        <ToggleButtonGroup
+          onChange={mappingType => this.onMappingTypeChange(mappingType)}
+          value={mappingType}
+          render={({ selectedValue, onChange }) => {
+            return [
+              <ToggleButton
+                className="btn-small"
+                key="value"
+                onChange={onChange}
+                selected={selectedValue === MappingType.ValueToText}
+                value={MappingType.ValueToText}
+              >
+                Value
+              </ToggleButton>,
+              <ToggleButton
+                className="btn-small"
+                key="range"
+                onChange={onChange}
+                selected={selectedValue === MappingType.RangeToText}
+                value={MappingType.RangeToText}
+              >
+                Range
+              </ToggleButton>,
+            ];
+          }}
+        />
+        <div>{this.renderRow()}</div>
       </div>
     );
   }