[Vis: Default editor] Fix spacing after EUI upgrade (#46568)

* Fix margins in vis editor data tab * Fix margins in vis editor options tab * Add a custom class to a string param
elastic · Sep 27, 2019 · 721b5d0 · 721b5d0
1 parent 0e71759
commit 721b5d0
Show file tree

Hide file tree

Showing 24 changed files with 146 additions and 144 deletions.
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/switch.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/switch.tsx
@@ -19,15 +19,14 @@
 
 import React from 'react';
 
-import { EuiSwitch, EuiToolTip } from '@elastic/eui';
+import { EuiFormRow, EuiSwitch, EuiToolTip } from '@elastic/eui';
 
 interface SwitchOptionProps<ParamName extends string> {
   dataTestSubj?: string;
   label?: string;
   tooltip?: string;
   disabled?: boolean;
   value?: boolean;
-  noStyle?: boolean;
   paramName: ParamName;
   setValue: (paramName: ParamName, value: boolean) => void;
 }
@@ -37,13 +36,12 @@ function SwitchOption<ParamName extends string>({
   tooltip,
   label,
   disabled,
-  noStyle = false,
   paramName,
   value = false,
   setValue,
 }: SwitchOptionProps<ParamName>) {
   return (
-    <div className={noStyle ? undefined : 'visEditorSidebar__switchOptionFormRow'}>
+    <EuiFormRow fullWidth={true}>
       <EuiToolTip content={tooltip} delay="long" position="right">
         <EuiSwitch
           label={label}
@@ -53,7 +51,7 @@ function SwitchOption<ParamName extends string>({
           onChange={ev => setValue(paramName, ev.target.checked)}
         />
       </EuiToolTip>
-    </div>
+    </EuiFormRow>
   );
 }
 

diff --git a/...legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx b/...legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx
@@ -127,7 +127,6 @@ function RangesPanel({
         value={stateParams.gauge.percentageMode}
         setValue={setGaugeValue}
       />
-      <EuiSpacer size="s" />
 
       <SelectOption
         disabled={stateParams.gauge.colorsRange.length < 2}

diff --git a/...ore_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.tsx b/...ore_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.tsx
@@ -19,7 +19,7 @@
 
 import React, { useMemo, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { VisOptionsProps } from 'ui/vis/editors/default';
 import { BasicVislibParams, SeriesParam, ValueAxis } from '../../../types';
@@ -88,6 +88,8 @@ function ChartOptions({
         setValue={setValueAxis}
       />
 
+      <EuiSpacer size="m" />
+
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <SelectOption
@@ -116,15 +118,19 @@ function ChartOptions({
       </EuiFlexGroup>
 
       {chart.type === ChartTypes.AREA && (
-        <SelectOption
-          label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.series.lineModeLabel', {
-            defaultMessage: 'Line mode',
-          })}
-          options={vis.type.editorConfig.collections.interpolationModes}
-          paramName="interpolate"
-          value={chart.interpolate}
-          setValue={setChart}
-        />
+        <>
+          <EuiSpacer size="m" />
+
+          <SelectOption
+            label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.series.lineModeLabel', {
+              defaultMessage: 'Line mode',
+            })}
+            options={vis.type.editorConfig.collections.interpolationModes}
+            paramName="interpolate"
+            value={chart.interpolate}
+            setValue={setChart}
+          />
+        </>
       )}
 
       {chart.type === ChartTypes.LINE && (

diff --git a/...ore_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx b/...ore_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx
@@ -18,7 +18,7 @@
  */
 
 import React, { useCallback } from 'react';
-import { EuiTitle, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -58,6 +58,7 @@ function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOpt
 
   return (
     <>
+      <EuiSpacer size="m" />
       <EuiTitle size="xxs">
         <h3>
           <FormattedMessage
@@ -66,6 +67,7 @@ function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOpt
           />
         </h3>
       </EuiTitle>
+      <EuiSpacer size="s" />
 
       <SwitchOption
         label={i18n.translate(
@@ -93,6 +95,8 @@ function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOpt
         setValue={setAxisLabel}
       />
 
+      <EuiSpacer size="m" />
+
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <SelectOption

diff --git a/...core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.tsx b/...core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.tsx
@@ -19,7 +19,7 @@
 
 import React, { useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { Vis } from 'ui/vis';
 import { SeriesParam } from '../../../types';
@@ -42,6 +42,8 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
 
   return (
     <>
+      <EuiSpacer size="m" />
+
       <SwitchOption
         label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.series.showLineLabel', {
           defaultMessage: 'Show line',
@@ -51,6 +53,8 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
         setValue={setChart}
       />
 
+      <EuiSpacer size="m" />
+
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <SelectOption
@@ -79,6 +83,8 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
         </EuiFlexItem>
       </EuiFlexGroup>
 
+      <EuiSpacer size="m" />
+
       <SwitchOption
         label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.series.showDotsLabel', {
           defaultMessage: 'Show dots',

diff --git a/...lugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axis_options.tsx b/...lugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axis_options.tsx
@@ -156,7 +156,6 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) {
         label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabel', {
           defaultMessage: 'Show axis lines and labels',
         })}
-        noStyle={true}
         paramName="show"
         value={axis.show}
         setValue={setValueAxis}
@@ -202,7 +201,7 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) {
         )}
       >
         <>
-          <EuiSpacer size="s" />
+          <EuiSpacer size="m" />
           <CustomExtentsOptions
             axis={axis}
             setValueAxisScale={setValueAxisScale}

diff --git a/...y/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/grid_panel.tsx b/...y/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/grid_panel.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useMemo, useEffect, useCallback } from 'react';
-import { EuiPanel, EuiTitle } from '@elastic/eui';
+import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -67,6 +67,8 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
         </h2>
       </EuiTitle>
 
+      <EuiSpacer size="m" />
+
       <SwitchOption
         disabled={hasHistogramAgg}
         label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.gridAxis.xAxisLinesLabel', {

diff --git a/...core_plugins/kbn_vislib_vis_types/public/components/options/point_series/point_series.tsx b/...core_plugins/kbn_vislib_vis_types/public/components/options/point_series/point_series.tsx
@@ -41,7 +41,7 @@ function PointSeriesOptions(props: VisOptionsProps<BasicVislibParams>) {
             />
           </h2>
         </EuiTitle>
-        <EuiSpacer size="s" />
+        <EuiSpacer size="m" />
 
         <BasicOptions {...props} />
 

diff --git a/...e_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx b/...e_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx
@@ -49,7 +49,7 @@ function ThresholdPanel({ stateParams, setValue, vis }: VisOptionsProps<BasicVis
           />
         </h2>
       </EuiTitle>
-      <EuiSpacer size="s" />
+      <EuiSpacer size="m" />
 
       <SwitchOption
         label={i18n.translate('kbnVislibVisTypes.editors.pointSeries.thresholdLine.showLabel', {

diff --git a/src/legacy/ui/public/vis/editors/default/_agg.scss b/src/legacy/ui/public/vis/editors/default/_agg.scss
@@ -16,6 +16,9 @@
   border: $euiBorderThick;
   border-radius: $euiBorderRadius;
   background-color: transparent;
-  margin: $euiSizeS 0;
   padding: $euiSizeS;
 }
+
+.visEditorAgg__subAgg + .visEditorAggParam__string {
+  margin-top: $euiSize;
+}
diff --git a/src/legacy/ui/public/vis/editors/default/_agg_params.scss b/src/legacy/ui/public/vis/editors/default/_agg_params.scss
@@ -1,5 +1,5 @@
 .visEditorAggParam--half {
-  margin-top: $euiSize;
+  margin: $euiSize 0;
   display: inline-block;
   width: calc(50% - #{$euiSizeS / 2});
 }

diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss
@@ -205,20 +205,10 @@
   }
 }
 
-.visEditorSidebar__aggParamFormRow {
-  margin-top: $euiSizeS;
-  margin-bottom: $euiSizeS;
-}
-
 .visEditorSidebar__aggGroupAccordionButtonContent {
   font-size: $euiFontSizeS;
 
    span {
     color: $euiColorDarkShade;
   }
 }
-
-.visEditorSidebar__switchOptionFormRow {
-  margin-top: $euiSizeS;
-  padding-bottom: $euiSizeS;
-}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/components/input_list.tsx b/src/legacy/ui/public/vis/editors/default/controls/components/input_list.tsx
@@ -177,7 +177,7 @@ function InputList({ config, list, onChange, setValidity }: InputListProps) {
     <>
       {models.map((item, index) => (
         <Fragment key={item.id}>
-          <EuiFlexGroup gutterSize="xs" alignItems="center">
+          <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
             {config.renderInputRow(item, index, onChangeValue)}
             <EuiFlexItem grow={false}>
               <EuiButtonIcon

diff --git a/src/legacy/ui/public/vis/editors/default/controls/components/mask_list.tsx b/src/legacy/ui/public/vis/editors/default/controls/components/mask_list.tsx
@@ -78,6 +78,7 @@ function MaskList({ showValidation, onBlur, ...rest }: MaskListProps) {
             values: { mask: mask.value || '*' },
           })}
           compressed
+          fullWidth
           isInvalid={showValidation ? mask.isInvalid : false}
           placeholder="*"
           onChange={ev => {

diff --git a/src/legacy/ui/public/vis/editors/default/controls/extended_bounds.tsx b/src/legacy/ui/public/vis/editors/default/controls/extended_bounds.tsx
@@ -75,44 +75,33 @@ function ExtendedBoundsParamEditor({
   };
 
   return (
-    <EuiFormRow
-      fullWidth={true}
-      isInvalid={showValidation ? !isValid : false}
-      error={error}
-      compressed
-    >
-      <>
-        {/*
-          We have to put it into React.Fragment to avoid errors:
-          EuiFormRow will try to put "compressed" as attribute into a EuiFlexGroup div
-        */}
-        <EuiFlexGroup gutterSize="s">
-          <EuiFlexItem>
-            <EuiFieldNumber
-              value={isUndefined(value.min) ? '' : value.min}
-              onChange={ev => handleChange(ev, 'min')}
-              onBlur={setTouched}
-              fullWidth={true}
-              isInvalid={showValidation ? !isValid : false}
-              aria-label={minLabel}
-              prepend={minLabel}
-              compressed
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFieldNumber
-              value={isUndefined(value.max) ? '' : value.max}
-              onChange={ev => handleChange(ev, 'max')}
-              onBlur={setTouched}
-              fullWidth={true}
-              isInvalid={showValidation ? !isValid : false}
-              aria-label={maxLabel}
-              prepend={maxLabel}
-              compressed
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </>
+    <EuiFormRow fullWidth={true} isInvalid={showValidation ? !isValid : false} error={error}>
+      <EuiFlexGroup gutterSize="s" responsive={false}>
+        <EuiFlexItem>
+          <EuiFieldNumber
+            value={isUndefined(value.min) ? '' : value.min}
+            onChange={ev => handleChange(ev, 'min')}
+            onBlur={setTouched}
+            fullWidth={true}
+            isInvalid={showValidation ? !isValid : false}
+            aria-label={minLabel}
+            prepend={minLabel}
+            compressed
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFieldNumber
+            value={isUndefined(value.max) ? '' : value.max}
+            onChange={ev => handleChange(ev, 'max')}
+            onBlur={setTouched}
+            fullWidth={true}
+            isInvalid={showValidation ? !isValid : false}
+            aria-label={maxLabel}
+            prepend={maxLabel}
+            compressed
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFormRow>
   );
 }

diff --git a/src/legacy/ui/public/vis/editors/default/controls/filter.tsx b/src/legacy/ui/public/vis/editors/default/controls/filter.tsx
@@ -129,7 +129,7 @@ function FilterRow({
           />
         </EuiFormRow>
       ) : null}
-      <EuiSpacer />
+      <EuiSpacer size="m" />
     </EuiForm>
   );
 }

diff --git a/src/legacy/ui/public/vis/editors/default/controls/ip_range_type.tsx b/src/legacy/ui/public/vis/editors/default/controls/ip_range_type.tsx
@@ -50,6 +50,7 @@ function IpRangeTypeParamEditor({ agg, value, setValue }: AggParamEditorProps<Ip
 
   return (
     <>
+      <EuiSpacer size="m" />
       <EuiButtonGroup
         isFullWidth={true}
         onChange={onClick}