CR

elastic · Sep 1, 2024 · 14e0c1f · 14e0c1f
1 parent e58c5c3
commit 14e0c1f
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 49 deletions.
diff --git a/...lens/public/editor_frame_service/editor_frame/config_panel/chart_switch/chart_switch.scss b/...lens/public/editor_frame_service/editor_frame/config_panel/chart_switch/chart_switch.scss
@@ -7,15 +7,6 @@
 
 .lnsChartSwitch__options {
   width: 384px;
-
-  .lnsChartSwitch__option {
-    padding: $euiSizeS 0;
-  }
-
-  .euiSelectableList__groupLabel {
-    padding: $euiSizeS;
-  }
-
 }
 
 .lnsChartSwitch__summaryIcon {

diff --git a/...blic/editor_frame_service/editor_frame/config_panel/chart_switch/chart_switch_popover.tsx b/...blic/editor_frame_service/editor_frame/config_panel/chart_switch/chart_switch_popover.tsx
@@ -7,7 +7,7 @@
 
 import './chart_switch.scss';
 import React, { useState, memo } from 'react';
-import { EuiPopover, EuiPopoverTitle, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiPopover } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ChartSwitchTrigger } from '@kbn/visualization-ui-components';
 import { useLensSelector, selectVisualization } from '../../../../state_management';
@@ -37,7 +37,7 @@ export const ChartSwitchPopover = memo(function ChartSwitchPopover(
         ownFocus
         initialFocus=".lnsChartSwitch__popoverPanel"
         panelClassName="lnsChartSwitch__popoverPanel"
-        panelPaddingSize="s"
+        panelPaddingSize="none"
         button={
           <ChartSwitchTrigger
             icon={icon}
@@ -50,15 +50,6 @@ export const ChartSwitchPopover = memo(function ChartSwitchPopover(
         closePopover={() => setFlyoutOpen(false)}
         anchorPosition="downLeft"
       >
-        <EuiPopoverTitle>
-          <EuiFlexGroup alignItems="center" responsive={false}>
-            <EuiFlexItem>
-              {i18n.translate('xpack.lens.configPanel.visualizationTypes', {
-                defaultMessage: 'Visualization types',
-              })}
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPopoverTitle>
         {flyoutOpen ? <ChartSwitch {...props} onChartSelect={() => setFlyoutOpen(false)} /> : null}
       </EuiPopover>
     </div>

diff --git a/...c/editor_frame_service/editor_frame/config_panel/chart_switch/chart_switch_selectable.tsx b/...c/editor_frame_service/editor_frame/config_panel/chart_switch/chart_switch_selectable.tsx
@@ -5,7 +5,13 @@
  * 2.0.
  */
 import React from 'react';
-import { EuiSelectable, EuiSelectableOption, EuiSelectableProps, IconType } from '@elastic/eui';
+import {
+  EuiSelectable,
+  EuiPopoverTitle,
+  EuiSelectableOption,
+  EuiSelectableProps,
+  IconType,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
@@ -53,7 +59,6 @@ export const ChartSwitchSelectable = ({
         showIcons: false,
         onFocusBadge: false,
         isVirtualized: false,
-        paddingSize: 'none',
       }}
       renderOption={(option, searchValue) => (
         <ChartOption option={option} searchValue={searchValue} />
@@ -78,7 +83,7 @@ export const ChartSwitchSelectable = ({
     >
       {(list, search) => (
         <>
-          {search}
+          <EuiPopoverTitle paddingSize="s">{search}</EuiPopoverTitle>
           {list}
         </>
       )}

diff --git a/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx b/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx
@@ -22,6 +22,7 @@ import { Position, VerticalAlignment, HorizontalAlignment, LegendValue } from '@
 import { LegendSize } from '@kbn/visualizations-plugin/public';
 import { useDebouncedValue } from '@kbn/visualization-utils';
 import { XYLegendValue } from '@kbn/visualizations-plugin/common/constants';
+import { ToolbarDivider } from '../toolbar_divider';
 import { ToolbarPopover, type ToolbarPopoverProps } from '../toolbar_popover';
 import { LegendLocationSettings } from './location/legend_location_settings';
 import { ColumnsNumberSetting } from './layout/columns_number_setting';
@@ -315,7 +316,7 @@ export function LegendSettingsPopover<LegendStats extends LegendValue = XYLegend
 
       {showsStatisticsSetting && (
         <>
-          <EuiHorizontalRule margin="s" />
+          <ToolbarDivider />
           <EuiFormRow
             display="columnCompressed"
             label={i18n.translate('xpack.lens.shared.legendStatistics', {

diff --git a/x-pack/plugins/lens/public/shared_components/toolbar_divider.tsx b/x-pack/plugins/lens/public/shared_components/toolbar_divider.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiHorizontalRule } from '@elastic/eui';
+import { css } from '@emotion/css';
+
+export const ToolbarDivider = () => (
+  <EuiHorizontalRule
+    margin="s"
+    className={css`
+      margin-inline: -8px;
+      inline-size: calc(100% + 16px);
+    `}
+  />
+);
diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx
@@ -27,15 +27,8 @@ import { type AccessorConfig, DimensionTrigger } from '@kbn/visualization-ui-com
 import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import { getColorsFromMapping } from '@kbn/coloring';
 import useObservable from 'react-use/lib/useObservable';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPopover,
-  EuiPopoverTitle,
-  EuiSelectable,
-} from '@elastic/eui';
+import { EuiPopover, EuiSelectable } from '@elastic/eui';
 import { ToolbarButton } from '@kbn/shared-ux-button-toolbar';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { generateId } from '../../id_generator';
 import {
   isDraggedDataViewField,
@@ -1410,21 +1403,7 @@ const SubtypeSwitch = ({
         closePopover={() => setFlyoutOpen(false)}
         anchorPosition="downLeft"
       >
-        <EuiPopoverTitle>
-          <EuiFlexGroup
-            alignItems="center"
-            responsive={false}
-            css={{ padding: `${euiThemeVars.euiSizeXS} ${euiThemeVars.euiSizeM}` }}
-          >
-            <EuiFlexItem>
-              {i18n.translate('xpack.lens.xyChart.stackingOptions', {
-                defaultMessage: 'Stacking',
-              })}
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPopoverTitle>
         <EuiSelectable
-          listProps={{ paddingSize: 's' }}
           css={{ width: 200 }}
           singleSelection
           data-test-subj="lnsChartSwitchList"

diff --git a/...ck/plugins/lens/public/visualizations/xy/xy_config_panel/visual_options_popover/index.tsx b/...ck/plugins/lens/public/visualizations/xy/xy_config_panel/visual_options_popover/index.tsx
@@ -8,8 +8,8 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { TooltipWrapper } from '@kbn/visualization-utils';
-import { EuiHorizontalRule } from '@elastic/eui';
 import { BarOrientationSettings } from '../../../../shared_components/bar_orientation';
+import { ToolbarDivider } from '../../../../shared_components/toolbar_divider';
 import { ToolbarPopover } from '../../../../shared_components';
 import { MissingValuesOptions } from './missing_values_option';
 import { LineCurveOption } from './line_curve_option';
@@ -123,7 +123,7 @@ export const VisualOptionsPopover: React.FC<VisualOptionsPopoverProps> = ({
           />
         ) : null}
 
-        {shouldDisplayDividerHr ? <EuiHorizontalRule margin="s" /> : null}
+        {shouldDisplayDividerHr ? <ToolbarDivider /> : null}
 
         {hasAreaSettings ? (
           <>
@@ -138,7 +138,7 @@ export const VisualOptionsPopover: React.FC<VisualOptionsPopoverProps> = ({
               }}
             />
 
-            <EuiHorizontalRule margin="s" />
+            <ToolbarDivider />
           </>
         ) : null}
         <LineCurveOption