panel option section moved to grafana-ui and new panel option grid component

packages/grafana-ui/src/components/PanelOptionGrid/PanelOptionGrid.tsx

+import React, { SFC } from 'react';
+
+interface Props {
+  cols?: number;
+  children: JSX.Element[] | JSX.Element;
+}
+
+export const PanelOptionGrid: SFC<Props> = ({ children }) => {
+
+  return (
+    <div className="panel-option-grid">
+      {children}
+    </div>
+  );
+};

packages/grafana-ui/src/components/PanelOptionGrid/_PanelOptionGrid.scss

+.panel-option-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  margin-bottom: 10px;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}

packages/grafana-ui/src/components/PanelOptionSection/_PanelOptionSection.scss

+.panel-option-section {
+  margin-bottom: 10px;
+  border: $panel-option-section-border;
+  border-radius: $border-radius;
+  background: $page-bg;
+}
+
+.panel-option-section__header {
+  padding: 4px 20px;
+  font-size: 1.1rem;
+  background: $panel-option-section-header-bg;
+  position: relative;
+
+  .btn {
+    position: absolute;
+    right: 0;
+    top: 0px;
+  }
+}
+
+.panel-option-section__body {
+  padding: 20px;
+
+  &--queries {
+    min-height: 200px;
+  }
+}

packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx

@@ -3,6 +3,7 @@ import tinycolor, { ColorInput } from 'tinycolor2';
 
 import { Threshold, BasicGaugeColor } from '../../types';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
+import { PanelOptionSection } from '../PanelOptionSection/PanelOptionSection';
 
 export interface Props {
   thresholds: Threshold[];
@@ -204,8 +205,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
   render() {
     return (
-      <div className="section gf-form-group">
-        <h5 className="section-heading">Thresholds</h5>
+      <PanelOptionSection title="Thresholds">
         <div className="thresholds">
           <div className="color-indicators">
             {this.renderIndicator()}
@@ -216,7 +216,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
             {this.renderBase()}
           </div>
         </div>
-      </div>
+      </PanelOptionSection>
     );
   }
 }

packages/grafana-ui/src/components/index.scss

@@ -3,3 +3,5 @@
 @import 'ThresholdsEditor/ThresholdsEditor';
 @import 'Tooltip/Tooltip';
 @import 'Select/Select';
+@import 'PanelOptionSection/PanelOptionSection';
+@import 'PanelOptionGrid/PanelOptionGrid';

packages/grafana-ui/src/components/index.ts

@@ -16,3 +16,5 @@ export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
 export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
 export { GfFormLabel } from './GfFormLabel/GfFormLabel';
 export { Graph } from './Graph/Graph';
+export { PanelOptionSection } from './PanelOptionSection/PanelOptionSection';
+export { PanelOptionGrid } from './PanelOptionGrid/PanelOptionGrid';

public/app/features/dashboard/dashgrid/EditorTabBody.tsx

@@ -2,9 +2,8 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import { CustomScrollbar } from '@grafana/ui';
+import { CustomScrollbar, PanelOptionSection } from '@grafana/ui';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
-import { PanelOptionSection } from './PanelOptionSection';
 
 interface Props {
   children: JSX.Element;

public/app/features/dashboard/dashgrid/QueriesTab.tsx

@@ -9,7 +9,7 @@ import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { QueryInspector } from './QueryInspector';
 import { QueryOptions } from './QueryOptions';
 import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
-import { PanelOptionSection } from './PanelOptionSection';
+import { PanelOptionSection } from '@grafana/ui';
 
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';

public/app/features/dashboard/dashgrid/VisualizationTab.tsx

@@ -9,7 +9,6 @@ import { EditorTabBody, EditorToolbarView } from './EditorTabBody';
 import { VizTypePicker } from './VizTypePicker';
 import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
-import { PanelOptionSection } from './PanelOptionSection';
 
 // Types
 import { PanelModel } from '../panel_model';
@@ -62,13 +61,13 @@ export class VisualizationTab extends PureComponent<Props, State> {
     }
 
     return (
-      <PanelOptionSection>
+      <>
         {PanelOptions ? (
           <PanelOptions options={this.getPanelDefaultOptions()} onChange={this.onPanelOptionsChanged} />
         ) : (
           <p>Visualization has no options</p>
         )}
-      </PanelOptionSection>
+      </>
     );
   }
 

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

 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, PanelOptionSection } from '@grafana/ui';
 
 import { Switch } from 'app/core/components/Switch/Switch';
 import { Label } from '../../../core/components/Label/Label';
@@ -20,8 +20,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
     const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options;
 
     return (
-      <div className="section gf-form-group">
-        <h5 className="section-heading">Gauge</h5>
+      <PanelOptionSection title="Gauge">
         <div className="gf-form">
           <Label width={8}>Min value</Label>
           <input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} />
@@ -42,7 +41,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
           checked={showThresholdMarkers}
           onChange={this.onToggleThresholdMarkers}
         />
-      </div>
+      </PanelOptionSection>
     );
   }
 }

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

 import React, { PureComponent } from 'react';
-import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor, Threshold } from '@grafana/ui';
+import {
+  BasicGaugeColor,
+  GaugeOptions,
+  PanelOptionsProps,
+  ThresholdsEditor,
+  Threshold,
+  PanelOptionGrid,
+} from '@grafana/ui';
 
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
 import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
@@ -31,15 +38,13 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
     const { onChange, options } = this.props;
     return (
       <>
-        <div className="form-section">
+        <PanelOptionGrid>
           <ValueOptions onChange={onChange} options={options} />
           <GaugeOptionsEditor onChange={onChange} options={options} />
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
-        </div>
+        </PanelOptionGrid>
 
-        <div className="form-section">
-          <ValueMappings onChange={onChange} options={options} />
-        </div>
+        <ValueMappings onChange={onChange} options={options} />
       </>
     );
   }

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

 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap, PanelOptionSection } from '@grafana/ui';
 
 import MappingRow from './MappingRow';
 
@@ -75,8 +75,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
     const { mappings } = this.state;
 
     return (
-      <div className="section gf-form-group">
-        <h5 className="section-heading">Value mappings</h5>
+      <PanelOptionSection title="Value Mappings">
         <div>
           {mappings.length > 0 &&
             mappings.map((mapping, index) => (
@@ -94,7 +93,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
           </div>
           <div className="add-mapping-row-label">Add mapping</div>
         </div>
-      </div>
+      </PanelOptionSection>
     );
   }
 }

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

 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, PanelOptionSection } from '@grafana/ui';
 
 import { Label } from 'app/core/components/Label/Label';
 import { Select} from '@grafana/ui';
@@ -40,8 +40,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
     const { stat, unit, decimals, prefix, suffix } = this.props.options;
 
     return (
-      <div className="section gf-form-group">
-        <h5 className="section-heading">Value</h5>
+      <PanelOptionSection title="Value">
         <div className="gf-form">
           <Label width={labelWidth}>Stat</Label>
           <Select
@@ -73,7 +72,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
           <Label width={labelWidth}>Suffix</Label>
           <input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
         </div>
-      </div>
+      </PanelOptionSection>
     );
   }
 }

public/app/plugins/panel/gauge/types.ts

+
+

public/sass/components/_panel_editor.scss

@@ -230,30 +230,3 @@
   min-width: 200px;
 }
 
-.panel-option-section {
-  margin-bottom: 10px;
-  border: $panel-option-section-border;
-  border-radius: $border-radius;
-}
-
-.panel-option-section__header {
-  padding: 4px 20px;
-  font-size: 1.1rem;
-  background: $panel-option-section-header-bg;
-  position: relative;
-
-  .btn {
-    position: absolute;
-    right: 0;
-    top: 0px;
-  }
-}
-
-.panel-option-section__body {
-  padding: 20px;
-  background: $page-bg;
-
-  &--queries {
-    min-height: 200px;
-  }
-}