[Lens] change line styles waiting for eui upgrade (elastic#125955)

lucasfcosta · Mar 2, 2022 · 9c20f04 · 9c20f04
1 parent 9037839
commit 9c20f04
Showing 1 changed file with 63 additions and 56 deletions.
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/shared/line_style_settings.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/shared/line_style_settings.tsx
@@ -7,7 +7,13 @@
 
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiButtonGroup, EuiFormRow, EuiRange } from '@elastic/eui';
+import {
+  EuiButtonGroup,
+  EuiFieldNumber,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+} from '@elastic/eui';
 import { YConfig } from '../../../../common/expressions';
 import { LineStyle } from '../../../../common/expressions/xy_chart';
 import { idPrefix } from '../dimension_editor';
@@ -29,60 +35,62 @@ export const LineStyleSettings = ({
         display="columnCompressed"
         fullWidth
         label={i18n.translate('xpack.lens.xyChart.lineStyle.label', {
-          defaultMessage: 'Line style',
+          defaultMessage: 'Line',
         })}
       >
-        <EuiButtonGroup
-          isFullWidth
-          legend={i18n.translate('xpack.lens.xyChart.lineStyle.label', {
-            defaultMessage: 'Line style',
-          })}
-          data-test-subj="lnsXY_line_style"
-          name="lineStyle"
-          buttonSize="compressed"
-          options={[
-            {
-              id: `${idPrefix}solid`,
-              label: i18n.translate('xpack.lens.xyChart.lineStyle.solid', {
-                defaultMessage: 'Solid',
-              }),
-              'data-test-subj': 'lnsXY_line_style_solid',
-            },
-            {
-              id: `${idPrefix}dashed`,
-              label: i18n.translate('xpack.lens.xyChart.lineStyle.dashed', {
-                defaultMessage: 'Dashed',
-              }),
-              'data-test-subj': 'lnsXY_line_style_dashed',
-            },
-            {
-              id: `${idPrefix}dotted`,
-              label: i18n.translate('xpack.lens.xyChart.lineStyle.dotted', {
-                defaultMessage: 'Dotted',
-              }),
-              'data-test-subj': 'lnsXY_line_style_dotted',
-            },
-          ]}
-          idSelected={`${idPrefix}${currentConfig?.lineStyle || 'solid'}`}
-          onChange={(id) => {
-            const newMode = id.replace(idPrefix, '') as LineStyle;
-            setConfig({ forAccessor: accessor, lineStyle: newMode });
-          }}
-        />
-      </EuiFormRow>
-      <EuiFormRow
-        display="columnCompressed"
-        fullWidth
-        label={i18n.translate('xpack.lens.xyChart.lineThickness.label', {
-          defaultMessage: 'Line thickness',
-        })}
-      >
-        <LineThicknessSlider
-          value={currentConfig?.lineWidth || 1}
-          onChange={(value) => {
-            setConfig({ forAccessor: accessor, lineWidth: value });
-          }}
-        />
+        <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
+          <EuiFlexItem grow={true}>
+            <LineThicknessSlider
+              value={currentConfig?.lineWidth || 1}
+              onChange={(value) => {
+                setConfig({ forAccessor: accessor, lineWidth: value });
+              }}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={true}>
+            <EuiButtonGroup
+              isFullWidth
+              legend={i18n.translate('xpack.lens.xyChart.lineStyle.label', {
+                defaultMessage: 'Line',
+              })}
+              data-test-subj="lnsXY_line_style"
+              name="lineStyle"
+              buttonSize="compressed"
+              options={[
+                {
+                  id: `${idPrefix}solid`,
+                  label: i18n.translate('xpack.lens.xyChart.lineStyle.solid', {
+                    defaultMessage: 'Solid',
+                  }),
+                  'data-test-subj': 'lnsXY_line_style_solid',
+                  iconType: 'lineSolid',
+                },
+                {
+                  id: `${idPrefix}dashed`,
+                  label: i18n.translate('xpack.lens.xyChart.lineStyle.dashed', {
+                    defaultMessage: 'Dashed',
+                  }),
+                  'data-test-subj': 'lnsXY_line_style_dashed',
+                  iconType: 'lineDashed',
+                },
+                {
+                  id: `${idPrefix}dotted`,
+                  label: i18n.translate('xpack.lens.xyChart.lineStyle.dotted', {
+                    defaultMessage: 'Dotted',
+                  }),
+                  'data-test-subj': 'lnsXY_line_style_dotted',
+                  iconType: 'lineDotted',
+                },
+              ]}
+              idSelected={`${idPrefix}${currentConfig?.lineStyle || 'solid'}`}
+              onChange={(id) => {
+                const newMode = id.replace(idPrefix, '') as LineStyle;
+                setConfig({ forAccessor: accessor, lineStyle: newMode });
+              }}
+              isIconOnly
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFormRow>
     </>
   );
@@ -108,11 +116,10 @@ const LineThicknessSlider = ({
   const [unsafeValue, setUnsafeValue] = useState<string>(String(value));
 
   return (
-    <EuiRange
-      fullWidth
+    <EuiFieldNumber
       data-test-subj="lnsXYThickness"
       value={unsafeValue}
-      showInput
+      fullWidth
       min={minRange}
       max={maxRange}
       step={1}