layout form changes

elastic · Jun 6, 2023 · 062d86a · 062d86a
1 parent ed2619f
commit 062d86a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/x-pack/plugins/lens/public/visualizations/tagcloud/tagcloud_toolbar/font_size_input.tsx b/x-pack/plugins/lens/public/visualizations/tagcloud/tagcloud_toolbar/font_size_input.tsx
@@ -39,13 +39,14 @@ export function FontSizeInput(props: Props) {
   return (
     <EuiDualRange
       id="tagCloudFontSizeSlider"
-      min={5}
+      min={1}
       max={120}
       step={1}
       value={fontSize}
       onChange={(value) => {
         setFontSize(value as [number, number]);
       }}
+      showLabels
       aria-label={i18n.translate('xpack.lens.label.tagcloud.fontSizeLabel', {
         defaultMessage: 'Font size',
       })}

diff --git a/x-pack/plugins/lens/public/visualizations/tagcloud/tagcloud_toolbar/tagcloud_toolbar.tsx b/x-pack/plugins/lens/public/visualizations/tagcloud/tagcloud_toolbar/tagcloud_toolbar.tsx
@@ -12,12 +12,12 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
-  EuiRadioGroup,
+  EuiSelect,
   EuiSwitch,
   EuiSwitchEvent,
 } from '@elastic/eui';
@@ -31,20 +31,20 @@ import { FontSizeInput } from './font_size_input';
 
 const ORIENTATION_OPTIONS = [
   {
-    id: Orientation.SINGLE,
-    label: i18n.translate('xpack.lens.label.tagcloud.orientation.single', {
+    value: Orientation.SINGLE,
+    text: i18n.translate('xpack.lens.label.tagcloud.orientation.single', {
       defaultMessage: 'Single',
     }),
   },
   {
-    id: Orientation.RIGHT_ANGLED,
-    label: i18n.translate('xpack.lens.label.tagcloud.orientation.rightAngled', {
+    value: Orientation.RIGHT_ANGLED,
+    text: i18n.translate('xpack.lens.label.tagcloud.orientation.rightAngled', {
       defaultMessage: 'Right angled',
     }),
   },
   {
-    id: Orientation.MULTIPLE,
-    label: i18n.translate('xpack.lens.label.tagcloud.orientation.multiple', {
+    value: Orientation.MULTIPLE,
+    text: i18n.translate('xpack.lens.label.tagcloud.orientation.multiple', {
       defaultMessage: 'Multiple',
     }),
   },
@@ -86,22 +86,24 @@ export function TagcloudToolbar(props: VisualizationToolbarProps<TagcloudState>)
                 defaultMessage: 'Orientation',
               })}
             >
-              <EuiRadioGroup
+              <EuiSelect
                 options={ORIENTATION_OPTIONS}
-                idSelected={props.state.orientation}
-                onChange={(id) => {
+                value={props.state.orientation}
+                onChange={(event: ChangeEvent<HTMLSelectElement>) => {
                   props.setState({
                     ...props.state,
-                    orientation: id as $Values<typeof Orientation>,
+                    orientation: e.target.value as $Values<typeof Orientation>,
                   });
                 }}
               />
             </EuiFormRow>
-            <EuiFormRow>
-              <EuiSwitch
-                label={i18n.translate('xpack.lens.label.tagcloud.showLabel', {
+            <EuiFormRow
+              display="columnCompressed"
+              label={i18n.translate('xpack.lens.label.tagcloud.showLabel', {
                   defaultMessage: 'Show label',
                 })}
+            >
+              <EuiSwitch
                 checked={props.state.showLabel}
                 onChange={(event: EuiSwitchEvent) => {
                   props.setState({