Minor renames and other fixes

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

@@ -1,11 +0,0 @@
-.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/PanelOptionGrid/PanelOptionGrid.tsx → packages/grafana-ui/src/components/PanelOptionsGrid/PanelOptionsGrid.tsx

@@ -5,10 +5,10 @@ interface Props {
   children: JSX.Element[] | JSX.Element;
 }
 
-export const PanelOptionGrid: SFC<Props> = ({ children }) => {
+export const PanelOptionsGrid: SFC<Props> = ({ children }) => {
 
   return (
-    <div className="panel-option-grid">
+    <div className="panel-options-grid">
       {children}
     </div>
   );

packages/grafana-ui/src/components/PanelOptionsGrid/_PanelOptionsGrid.scss

@@ -0,0 +1,10 @@
+.panel-options-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+
+  @include media-breakpoint-up(lg) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}

packages/grafana-ui/src/components/PanelOptionSection/PanelOptionSection.tsx → packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx

@@ -7,11 +7,11 @@ interface Props {
   children: JSX.Element | JSX.Element[];
 }
 
-export const PanelOptionSection: SFC<Props> = props => {
+export const PanelOptionsGroup: SFC<Props> = props => {
   return (
-    <div className="panel-option-section">
+    <div className="panel-options-group">
       {props.title && (
-        <div className="panel-option-section__header">
+        <div className="panel-options-group__header">
           {props.title}
           {props.onClose && (
             <button className="btn btn-link" onClick={props.onClose}>
@@ -20,7 +20,7 @@ export const PanelOptionSection: SFC<Props> = props => {
           )}
         </div>
       )}
-      <div className="panel-option-section__body">{props.children}</div>
+      <div className="panel-options-group__body">{props.children}</div>
     </div>
   );
 };

packages/grafana-ui/src/components/PanelOptionSection/_PanelOptionSection.scss → packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss

@@ -1,14 +1,14 @@
-.panel-option-section {
+.panel-options-group {
   margin-bottom: 10px;
-  border: $panel-option-section-border;
+  border: $panel-options-group-border;
   border-radius: $border-radius;
   background: $page-bg;
 }
 
-.panel-option-section__header {
+.panel-options-group__header {
   padding: 4px 20px;
   font-size: 1.1rem;
-  background: $panel-option-section-header-bg;
+  background: $panel-options-group-header-bg;
   position: relative;
 
   .btn {
@@ -18,7 +18,7 @@
   }
 }
 
-.panel-option-section__body {
+.panel-options-group__body {
   padding: 20px;
 
   &--queries {

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

@@ -3,7 +3,7 @@ import tinycolor, { ColorInput } from 'tinycolor2';
 
 import { Threshold, BasicGaugeColor } from '../../types';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
-import { PanelOptionSection } from '../PanelOptionSection/PanelOptionSection';
+import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 
 export interface Props {
   thresholds: Threshold[];
@@ -205,7 +205,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
   render() {
     return (
-      <PanelOptionSection title="Thresholds">
+      <PanelOptionsGroup 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>
-      </PanelOptionSection>
+      </PanelOptionsGroup>
     );
   }
 }

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

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

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

@@ -16,5 +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';
+export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
+export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';

public/app/features/alerting/partials/alert_tab.html

@@ -2,8 +2,8 @@
   <div class="alert alert-error m-b-2" ng-show="ctrl.error">
     <i class="fa fa-warning"></i> {{ctrl.error}}
   </div>
-  <div class="panel-option-section">
-    <div class="panel-option-section__body">
+  <div class="panel-options-group">
+    <div class="panel-options-group__body">
       <div class="gf-form-group">
         <h4 class="section-heading">Rule</h4>
         <div class="gf-form-inline">
@@ -125,9 +125,9 @@
     </div>
   </div>
 
-  <div class="panel-option-section">
-    <div class="panel-option-section__header">Notifications</div>
-    <div class="panel-option-section__body">
+  <div class="panel-options-group">
+    <div class="panel-options-group__header">Notifications</div>
+    <div class="panel-options-group__body">
       <div class="gf-form-inline">
         <div class="gf-form">
           <span class="gf-form-label width-8">Send to</span>

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

@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import { CustomScrollbar, PanelOptionSection } from '@grafana/ui';
+import { CustomScrollbar, PanelOptionsGroup } from '@grafana/ui';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 
 interface Props {
@@ -96,9 +96,9 @@ export class EditorTabBody extends PureComponent<Props, State> {
 
   renderOpenView(view: EditorToolbarView) {
     return (
-      <PanelOptionSection title={view.title || view.heading} onClose={this.onCloseOpenView}>
+      <PanelOptionsGroup title={view.title || view.heading} onClose={this.onCloseOpenView}>
         {view.render()}
-      </PanelOptionSection>
+      </PanelOptionsGroup>
     );
   }
 

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 '@grafana/ui';
+import { PanelOptionsGroup } from '@grafana/ui';
 
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -216,7 +216,7 @@ export class QueriesTab extends PureComponent<Props, State> {
     return (
       <EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
         <>
-          <PanelOptionSection>
+          <PanelOptionsGroup>
             <div className="query-editor-rows">
               <div ref={element => (this.element = element)} />
 
@@ -239,10 +239,10 @@ export class QueriesTab extends PureComponent<Props, State> {
                 </div>
               </div>
             </div>
-          </PanelOptionSection>
-          <PanelOptionSection>
+          </PanelOptionsGroup>
+          <PanelOptionsGroup>
             <QueryOptions panel={panel} datasource={currentDS} />
-          </PanelOptionSection>
+          </PanelOptionsGroup>
         </>
       </EditorTabBody>
     );

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

@@ -111,9 +111,9 @@ export class VisualizationTab extends PureComponent<Props, State> {
     for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
       template +=
         `
-      <div class="panel-option-section" ng-cloak>` +
-        (i > 0 ? `<div class="panel-option-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
-        `<div class="panel-option-section__body">
+      <div class="panel-options-group" ng-cloak>` +
+        (i > 0 ? `<div class="panel-options-group__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
+        `<div class="panel-options-group__body">
           <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
         </div>
       </div>

public/app/features/panel/partials/general_tab.html

@@ -1,6 +1,6 @@
-<div class="panel-option-section">
+<div class="panel-options-group">
   <!-- <div class="panel&#45;option&#45;section__header">Information</div> -->
-  <div class="panel-option-section__body">
+  <div class="panel-options-group__body">
     <div class="section">
       <div class="gf-form">
         <span class="gf-form-label width-7">Title</span>
@@ -17,9 +17,9 @@
   </div>
 </div>
 
-<div class="panel-option-section">
-  <div class="panel-option-section__header">Repeating</div>
-  <div class="panel-option-section__body">
+<div class="panel-options-group">
+  <div class="panel-options-group__header">Repeating</div>
+  <div class="panel-options-group__body">
     <div class="section">
       <div class="gf-form">
         <span class="gf-form-label width-9">Repeat</span>
@@ -46,9 +46,9 @@
   </div>
 </div>
 
-<div class="panel-option-section">
-  <div class="panel-option-section__header">Drilldown Links</div>
-  <div class="panel-option-section__body">
+<div class="panel-options-group">
+  <div class="panel-options-group__header">Drilldown Links</div>
+  <div class="panel-options-group__body">
     <panel-links-editor panel="ctrl.panel"></panel-links-editor>
   </div>
 </div>

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

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, PanelOptionSection } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
 
 import { Switch } from 'app/core/components/Switch/Switch';
 import { Label } from '../../../core/components/Label/Label';
@@ -20,7 +20,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
     const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options;
 
     return (
-      <PanelOptionSection title="Gauge">
+      <PanelOptionsGroup 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} />
@@ -41,7 +41,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
           checked={showThresholdMarkers}
           onChange={this.onToggleThresholdMarkers}
         />
-      </PanelOptionSection>
+      </PanelOptionsGroup>
     );
   }
 }

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

@@ -5,7 +5,7 @@ import {
   PanelOptionsProps,
   ThresholdsEditor,
   Threshold,
-  PanelOptionGrid,
+  PanelOptionsGrid,
 } from '@grafana/ui';
 
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
@@ -38,11 +38,11 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
     const { onChange, options } = this.props;
     return (
       <>
-        <PanelOptionGrid>
+        <PanelOptionsGrid>
           <ValueOptions onChange={onChange} options={options} />
           <GaugeOptionsEditor onChange={onChange} options={options} />
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
-        </PanelOptionGrid>
+        </PanelOptionsGrid>
 
         <ValueMappings onChange={onChange} options={options} />
       </>

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

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

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

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { GaugeOptions, PanelOptionsProps, PanelOptionSection } from '@grafana/ui';
+import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
 
 import { Label } from 'app/core/components/Label/Label';
 import { Select} from '@grafana/ui';
@@ -40,7 +40,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
     const { stat, unit, decimals, prefix, suffix } = this.props.options;
 
     return (
-      <PanelOptionSection title="Value">
+      <PanelOptionsGroup title="Value">
         <div className="gf-form">
           <Label width={labelWidth}>Stat</Label>
           <Select
@@ -72,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>
-      </PanelOptionSection>
+      </PanelOptionsGroup>
     );
   }
 }

public/sass/_variables.dark.scss

@@ -391,8 +391,8 @@ $panel-editor-tabs-line-color: #e3e3e3;
 $panel-editor-viz-item-bg-hover: darken($blue, 47%);
 $panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
 
-$panel-option-section-border: 1px solid $dark-3;
-$panel-option-section-header-bg: linear-gradient(0deg, $gray-blue, $dark-1);
+$panel-options-group-border: 1px solid $dark-3;
+$panel-options-group-header-bg: linear-gradient(0deg, $gray-blue, $dark-1);
 
 $panel-grid-placeholder-bg: darken($blue, 47%);
 $panel-grid-placeholder-shadow: 0 0 4px $blue;

public/sass/_variables.light.scss

@@ -399,8 +399,8 @@ $panel-editor-tabs-line-color: $dark-5;
 $panel-editor-viz-item-bg-hover: lighten($blue, 62%);
 $panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);
 
-$panel-option-section-border: 1px solid $gray-6;
-$panel-option-section-header-bg: linear-gradient(0deg, $gray-6, $gray-7);
+$panel-options-group-border: 1px solid $gray-6;
+$panel-options-group-header-bg: linear-gradient(0deg, $gray-6, $gray-7);
 
 $panel-grid-placeholder-bg: lighten($blue, 62%);
 $panel-grid-placeholder-shadow: 0 0 4px $blue-light;