Adding tooltips and fixing layouts/spacing

elastic · Sep 22, 2020 · a0e9aec · a0e9aec
1 parent cdff81b
commit a0e9aec
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 55 deletions.
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
@@ -332,7 +332,6 @@ export function DimensionEditor(props: DimensionEditorProps) {
 
  {!incompatibleSelectedOperationType && ParamEditor && (
  <>
- <EuiSpacer size="s" />
  <ParamEditor
  state={state}
  setState={setState}

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.tsx
@@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
- EuiForm,
  EuiFormRow,
  EuiSwitch,
  EuiSwitchEvent,
@@ -180,7 +179,7 @@ export const dateHistogramOperation: OperationDefinition<DateHistogramIndexPatte
  };
 
  return (
- <EuiForm>
+ <>
  {!intervalIsRestricted && (
  <EuiFormRow display="rowCompressed" hasChildLabel={false}>
  <EuiSwitch
@@ -314,7 +313,7 @@ export const dateHistogramOperation: OperationDefinition<DateHistogramIndexPatte
  )}
  </EuiFormRow>
  )}
- </EuiForm>
+ </>
  );
  },
 };

diff --git a/...operations/definitions/ranges/ranges.scss → ...s/definitions/ranges/advanced_editor.scss b/...operations/definitions/ranges/ranges.scss → ...s/definitions/ranges/advanced_editor.scss
diff --git a/...ins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx b/...ins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './ranges.scss';
+import './advanced_editor.scss';
 
 import React, { useState, MouseEventHandler } from 'react';
 import { i18n } from '@kbn/i18n';

diff --git a/...lugins/lens/public/indexpattern_datasource/operations/definitions/ranges/range_editor.tsx b/...lugins/lens/public/indexpattern_datasource/operations/definitions/ranges/range_editor.tsx
@@ -7,7 +7,15 @@
 import React, { useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { useDebounce } from 'react-use';
-import { EuiButtonEmpty, EuiFormRow, EuiRange, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import {
+ EuiButtonEmpty,
+ EuiFormRow,
+ EuiRange,
+ EuiFlexItem,
+ EuiFlexGroup,
+ EuiButtonIcon,
+ EuiToolTip,
+} from '@elastic/eui';
 import { IFieldFormat } from 'src/plugins/data/public';
 import { RangeColumnParams, UpdateParamsFnType, MODES_TYPES } from './ranges';
 import { AdvancedRangeEditor } from './advanced_editor';
@@ -36,28 +44,44 @@ const BaseRangeEditor = ({
  [maxBarsValue]
  );
 
+ const granularityLabel = i18n.translate('xpack.lens.indexPattern.ranges.granularity', {
+ defaultMessage: 'Granularity',
+ });
+ const decreaseButtonLabel = i18n.translate('xpack.lens.indexPattern.ranges.decreaseButtonLabel', {
+ defaultMessage: 'Decrease granularity',
+ });
+ const increaseButtonLabel = i18n.translate('xpack.lens.indexPattern.ranges.increaseButtonLabel', {
+ defaultMessage: 'Increase granularity',
+ });
+
  return (
  <>
  <EuiFormRow
- label={i18n.translate('xpack.lens.indexPattern.ranges.granularity', {
- defaultMessage: 'Granularity',
- })}
+ label={granularityLabel}
  data-test-subj="indexPattern-ranges-section-label"
+ labelType="legend"
+ fullWidth
+ display="rowCompressed"
  >
- <EuiFlexGroup alignItems="center" gutterSize="xs">
+ <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
  <EuiFlexItem grow={false}>
- <EuiButtonEmpty
- size="xs"
- iconType="minusInCircle"
- data-test-subj="lns-indexPattern-range-maxBars-minus"
- onClick={() =>
- setMaxBarsValue('' + Math.max(Number(maxBarsValue) - step, MIN_HISTOGRAM_BARS))
- }
- />
+ <EuiToolTip content={decreaseButtonLabel} delay="long">
+ <EuiButtonIcon
+ iconType="minusInCircle"
+ color="text"
+ data-test-subj="lns-indexPattern-range-maxBars-minus"
+ onClick={() =>
+ setMaxBarsValue('' + Math.max(Number(maxBarsValue) - step, MIN_HISTOGRAM_BARS))
+ }
+ aria-label={decreaseButtonLabel}
+ />
+ </EuiToolTip>
  </EuiFlexItem>
  <EuiFlexItem>
  <EuiRange
  compressed
+ fullWidth
+ aria-label={granularityLabel}
  data-test-subj="lns-indexPattern-range-maxBars-field"
  min={MIN_HISTOGRAM_BARS}
  max={maxHistogramBars}
@@ -67,24 +91,26 @@ const BaseRangeEditor = ({
  />
  </EuiFlexItem>
  <EuiFlexItem grow={false}>
- <EuiButtonEmpty
- size="xs"
- iconType="plusInCircle"
- data-test-subj="lns-indexPattern-range-maxBars-plus"
- onClick={() =>
- setMaxBarsValue('' + Math.min(Number(maxBarsValue) + step, maxHistogramBars))
- }
- />
+ <EuiToolTip content={decreaseButtonLabel} delay="long">
+ <EuiButtonIcon
+ iconType="plusInCircle"
+ color="text"
+ data-test-subj="lns-indexPattern-range-maxBars-plus"
+ onClick={() =>
+ setMaxBarsValue('' + Math.min(Number(maxBarsValue) + step, maxHistogramBars))
+ }
+ aria-label={increaseButtonLabel}
+ />
+ </EuiToolTip>
  </EuiFlexItem>
  </EuiFlexGroup>
  </EuiFormRow>
- <EuiFormRow hasChildLabel={false} display="rowCompressed">
- <EuiButtonEmpty size="xs" iconType="controlsHorizontal" onClick={() => onToggleEditor()}>
- {i18n.translate('xpack.lens.indexPattern.ranges.customIntervalsToggle', {
- defaultMessage: 'Create custom intervals',
- })}
- </EuiButtonEmpty>
- </EuiFormRow>
+
+ <EuiButtonEmpty size="xs" iconType="controlsHorizontal" onClick={() => onToggleEditor()}>
+ {i18n.translate('xpack.lens.indexPattern.ranges.customIntervalsToggle', {
+ defaultMessage: 'Create custom intervals',
+ })}
+ </EuiButtonEmpty>
  </>
  );
 };

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiForm } from '@elastic/eui';
 
 import { UI_SETTINGS } from '../../../../../../../../src/plugins/data/common';
 import { Range } from '../../../../../../../../src/plugins/expressions/common/expression_types/index';
@@ -182,21 +181,19 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn> = {
  );
  };
  return (
- <EuiForm>
- <RangeEditor
- setParam={setParam}
- maxBars={
- currentColumn.params.maxBars === AUTO_BARS
- ? maxBarsDefaultValue
- : currentColumn.params.maxBars
- }
- granularityStep={granularityStep}
- params={currentColumn.params}
- onChangeMode={onChangeMode}
- maxHistogramBars={uiSettings.get(UI_SETTINGS.HISTOGRAM_MAX_BARS)}
- rangeFormatter={rangeFormatter}
- />
- </EuiForm>
+ <RangeEditor
+ setParam={setParam}
+ maxBars={
+ currentColumn.params.maxBars === AUTO_BARS
+ ? maxBarsDefaultValue
+ : currentColumn.params.maxBars
+ }
+ granularityStep={granularityStep}
+ params={currentColumn.params}
+ onChangeMode={onChangeMode}
+ maxHistogramBars={uiSettings.get(UI_SETTINGS.HISTOGRAM_MAX_BARS)}
+ rangeFormatter={rangeFormatter}
+ />
  );
  },
 };
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiForm, EuiFormRow, EuiRange, EuiSelect } from '@elastic/eui';
+import { EuiFormRow, EuiRange, EuiSelect } from '@elastic/eui';
 import { IndexPatternColumn } from '../../indexpattern';
 import { updateColumnParam } from '../../state_helpers';
 import { DataType } from '../../../types';
@@ -171,7 +171,7 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn> = {
  }),
  });
  return (
- <EuiForm>
+ <>
  <EuiFormRow
  label={i18n.translate('xpack.lens.indexPattern.terms.size', {
  defaultMessage: 'Number of values',
@@ -274,7 +274,7 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn> = {
  })}
  />
  </EuiFormRow>
- </EuiForm>
+ </>
  );
  },
 };
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
@@ -17,7 +17,6 @@ import {
  EuiFormRow,
  EuiText,
  htmlIdGenerator,
- EuiForm,
  EuiColorPicker,
  EuiColorPickerProps,
  EuiToolTip,
@@ -366,7 +365,7 @@ export function DimensionEditor(props: VisualizationDimensionEditorProps<State>)
  'auto';
 
  return (
- <EuiForm>
+ <>
  <ColorPicker {...props} />
 
  <EuiFormRow
@@ -430,7 +429,7 @@ export function DimensionEditor(props: VisualizationDimensionEditorProps<State>)
  }}
  />
  </EuiFormRow>
- </EuiForm>
+ </>
  );
 }