[Lens] Improve Toolbar Responsiveness (#130175)

* reduce flex gutters, fix wrapping behavior, etc. * hide text at medium and lower bps for better fit * adjust full screen toolbar styles * expand hiding of button text to large bp * adjust flex item alignment and wrapping
2025-04-24 09:48:58 -04:00 · 2022-04-14 09:56:38 -04:00 · 2022-04-14 09:56:38 -04:00 · d5d798f09c
commit d5d798f09c
parent 708d6d0778
11 changed files with 121 additions and 98 deletions
--- a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
@ -49,7 +49,7 @@ export function DataTableToolbar(props: VisualizationToolbarProps<DatatableVisua
  }, [setState, state]);

  return (
-    <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" responsive={false}>
+    <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
      <ToolbarPopover
        title={i18n.translate('xpack.lens.table.valuesVisualOptions', {
          defaultMessage: 'Visual options',
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss
@ -6,9 +6,18 @@
 }

 .lnsChartSwitch__summaryIcon {
-  margin-right: $euiSizeS;
  transform: translateY(-1px);
  color: $euiTextSubduedColor;
+
+  @include euiBreakpoint('xl') {
+    margin-right: $euiSizeS;
+  }
+}
+
+.lnsChartSwitch__summaryText {
+  @include euiBreakpoint('xs', 's', 'm', 'l') {
+    @include euiScreenReaderOnly;
+  }
 }

 .lnsChartSwitch__append {
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
@ -92,7 +92,7 @@ function VisualizationSummary({
      {description.icon && (
        <EuiIcon size="l" className="lnsChartSwitch__summaryIcon" type={description.icon} />
      )}
-      {description.label}
+      <span className="lnsChartSwitch__summaryText">{description.label}</span>
    </>
  );
 }
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/warnings_popover.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/warnings_popover.scss
@ -1,5 +1,7 @@
-.lnsWorkspaceWarning__button {
-  color: $euiColorWarningText;
+.lnsWorkspaceWarning__buttonText {
+  @include euiBreakpoint('xs', 's', 'm', 'l') {
+    @include euiScreenReaderOnly;
+  }
 }

 .lnsWorkspaceWarningList {
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/warnings_popover.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/warnings_popover.tsx
@ -31,16 +31,21 @@ export const WarningsPopover = ({
      panelPaddingSize="none"
      button={
        <EuiButtonEmpty
+          color="warning"
          onClick={onButtonClick}
          iconType="alert"
          className="lnsWorkspaceWarning__button"
        >
-          {i18n.translate('xpack.lens.chartWarnings.number', {
-            defaultMessage: `{warningsCount} {warningsCount, plural, one {warning} other {warnings}}`,
-            values: {
-              warningsCount,
-            },
-          })}
+          {warningsCount}
+          <span className="lnsWorkspaceWarning__buttonText">
+            {' '}
+            {i18n.translate('xpack.lens.chartWarnings.number', {
+              defaultMessage: `{warningsCount, plural, one {warning} other {warnings}}`,
+              values: {
+                warningsCount,
+              },
+            })}
+          </span>
        </EuiButtonEmpty>
      }
      isOpen={isPopoverOpen}
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
@ -87,15 +87,19 @@
 }

 .lnsWorkspacePanelWrapper__toolbar {
+  margin-bottom: $euiSizeXS;
+}
+
+.lnsWorkspacePanelWrapper__toolbar--fullscreen {
+  background-color: $euiColorEmptyShade;
+  justify-content: flex-end;
  margin-bottom: 0;
+  padding: $euiSizeS $euiSizeS 0;
+}

-  &.lnsWorkspacePanelWrapper__toolbar--fullscreen {
-    padding: $euiSizeS $euiSizeS 0 $euiSizeS;
-    background-color: #FFF;
-  }
-
-  & > .euiFlexItem {
-    min-height: $euiButtonHeightSmall;
+.lnsWorkspacePanelWrapper__applyButton .euiButton__text {
+  @include euiBreakpoint('xs', 's', 'm', 'l') {
+    @include euiScreenReaderOnly;
  }
 }

--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
@ -103,80 +103,76 @@ export function WorkspacePanelWrapper({
  return (
    <>
      {!(isFullscreen && (autoApplyEnabled || warningMessages?.length)) && (
-        <div>
-          <EuiFlexGroup
-            alignItems="center"
-            gutterSize="m"
-            direction="row"
-            responsive={false}
-            wrap={true}
-            justifyContent="spaceBetween"
-            className={classNames('lnsWorkspacePanelWrapper__toolbar', {
-              'lnsWorkspacePanelWrapper__toolbar--fullscreen': isFullscreen,
-            })}
-          >
-            {!isFullscreen && (
-              <EuiFlexItem grow={false}>
-                <EuiFlexGroup gutterSize="m" justifyContent="flexStart">
-                  <EuiFlexItem grow={false}>
-                    <ChartSwitch
-                      data-test-subj="lnsChartSwitcher"
-                      visualizationMap={visualizationMap}
-                      datasourceMap={datasourceMap}
-                      framePublicAPI={framePublicAPI}
-                    />
-                  </EuiFlexItem>
-                  {activeVisualization && activeVisualization.renderToolbar && (
-                    <EuiFlexItem grow={false}>
-                      <NativeRenderer
-                        render={activeVisualization.renderToolbar}
-                        nativeProps={{
-                          frame: framePublicAPI,
-                          state: visualizationState,
-                          setState: setVisualizationState,
-                        }}
-                      />
-                    </EuiFlexItem>
-                  )}
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            )}
+        <EuiFlexGroup
+          alignItems="flexEnd"
+          gutterSize="s"
+          direction="row"
+          className={classNames('lnsWorkspacePanelWrapper__toolbar', {
+            'lnsWorkspacePanelWrapper__toolbar--fullscreen': isFullscreen,
+          })}
+          responsive={false}
+        >
+          {!isFullscreen && (
            <EuiFlexItem>
-              <EuiFlexGroup
-                alignItems="center"
-                justifyContent="flexEnd"
-                gutterSize="s"
-                responsive={false}
-              >
+              <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={true}>
                <EuiFlexItem grow={false}>
-                  {warningMessages?.length ? (
-                    <WarningsPopover>{warningMessages}</WarningsPopover>
-                  ) : null}
+                  <ChartSwitch
+                    data-test-subj="lnsChartSwitcher"
+                    visualizationMap={visualizationMap}
+                    datasourceMap={datasourceMap}
+                    framePublicAPI={framePublicAPI}
+                  />
                </EuiFlexItem>
-                {!autoApplyEnabled && (
+
+                {activeVisualization && activeVisualization.renderToolbar && (
                  <EuiFlexItem grow={false}>
-                    <div>
-                      <EuiButton
-                        disabled={autoApplyEnabled || changesApplied}
-                        fill
-                        className={DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS}
-                        iconType="checkInCircleFilled"
-                        onClick={() => dispatchLens(applyChanges())}
-                        size="m"
-                        data-test-subj="lnsApplyChanges__toolbar"
-                      >
-                        <FormattedMessage
-                          id="xpack.lens.editorFrame.applyChangesLabel"
-                          defaultMessage="Apply changes"
-                        />
-                      </EuiButton>
-                    </div>
+                    <NativeRenderer
+                      render={activeVisualization.renderToolbar}
+                      nativeProps={{
+                        frame: framePublicAPI,
+                        state: visualizationState,
+                        setState: setVisualizationState,
+                      }}
+                    />
                  </EuiFlexItem>
                )}
              </EuiFlexGroup>
            </EuiFlexItem>
-          </EuiFlexGroup>
-        </div>
+          )}
+
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+              {warningMessages?.length ? (
+                <EuiFlexItem grow={false}>
+                  <WarningsPopover>{warningMessages}</WarningsPopover>
+                </EuiFlexItem>
+              ) : null}
+
+              {!autoApplyEnabled && (
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    disabled={autoApplyEnabled || changesApplied}
+                    fill
+                    className={
+                      'lnsWorkspacePanelWrapper__applyButton ' +
+                      DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS
+                    }
+                    iconType="checkInCircleFilled"
+                    onClick={() => dispatchLens(applyChanges())}
+                    size="m"
+                    data-test-subj="lnsApplyChanges__toolbar"
+                    minWidth="auto"
+                  >
+                    <FormattedMessage
+                      id="xpack.lens.editorFrame.applyChangesLabel"
+                      defaultMessage="Apply changes"
+                    />
+                  </EuiButton>
+                </EuiFlexItem>
+              )}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
      )}

      <EuiPageContent
--- a/x-pack/plugins/lens/public/heatmap_visualization/toolbar_component.tsx
+++ b/x-pack/plugins/lens/public/heatmap_visualization/toolbar_component.tsx
@ -50,9 +50,9 @@ export const HeatmapToolbar = memo(
      frame.datasourceLayers
    ).truncateText;
    return (
-      <EuiFlexGroup gutterSize="m" justifyContent="spaceBetween" responsive={false}>
-        <EuiFlexItem>
-          <EuiFlexGroup gutterSize="none" responsive={false}>
+      <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
            <ToolbarPopover
              title={i18n.translate('xpack.lens.shared.curveLabel', {
                defaultMessage: 'Visual options',
@ -71,6 +71,7 @@ export const HeatmapToolbar = memo(
                }}
              />
            </ToolbarPopover>
+
            <LegendSettingsPopover
              groupPosition={'right'}
              legendOptions={legendOptions}
@ -124,8 +125,9 @@ export const HeatmapToolbar = memo(
            />
          </EuiFlexGroup>
        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiFlexGroup gutterSize="none" responsive={false}>
+
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
            <TooltipWrapper
              tooltipContent={i18n.translate('xpack.lens.heatmap.verticalAxisDisabledHelpText', {
                defaultMessage: 'This setting only applies when vertical axis is enabled.',
@ -161,6 +163,7 @@ export const HeatmapToolbar = memo(
                />
              </ToolbarPopover>
            </TooltipWrapper>
+
            <TooltipWrapper
              tooltipContent={i18n.translate('xpack.lens.heatmap.horizontalAxisDisabledHelpText', {
                defaultMessage: 'This setting only applies when horizontal axis is enabled.',
--- a/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx
@ -156,7 +156,7 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
  ).truncateText;

  return (
-    <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" responsive={false}>
+    <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
      <ToolbarPopover
        title={i18n.translate('xpack.lens.pieChart.valuesLabel', {
          defaultMessage: 'Labels',
--- a/x-pack/plugins/lens/public/visualizations/gauge/toolbar_component/index.tsx
+++ b/x-pack/plugins/lens/public/visualizations/gauge/toolbar_component/index.tsx
@ -30,9 +30,9 @@ export const GaugeToolbar = memo((props: VisualizationToolbarProps<GaugeVisualiz
  });

  return (
-    <EuiFlexGroup gutterSize="m" justifyContent="spaceBetween" responsive={false}>
-      <EuiFlexItem>
-        <EuiFlexGroup gutterSize="none" responsive={false}>
+    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
          <ToolbarPopover
            handleClose={() => {
              setSubtitleMode(inputValue.labelMinor ? 'custom' : 'none');
--- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/index.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/index.tsx
@ -297,14 +297,15 @@ export const XyToolbar = memo(function XyToolbar(
  ).truncateText;

  return (
-    <EuiFlexGroup gutterSize="m" justifyContent="spaceBetween" responsive={false}>
-      <EuiFlexItem>
-        <EuiFlexGroup gutterSize="none" responsive={false}>
+    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
          <VisualOptionsPopover
            state={state}
            setState={setState}
            datasourceLayers={frame.datasourceLayers}
          />
+
          <LegendSettingsPopover
            legendOptions={legendOptions}
            mode={legendMode}
@ -410,8 +411,9 @@ export const XyToolbar = memo(function XyToolbar(
          />
        </EuiFlexGroup>
      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiFlexGroup gutterSize="none" responsive={false}>
+
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
          <TooltipWrapper
            tooltipContent={
              shouldRotate
@ -449,6 +451,7 @@ export const XyToolbar = memo(function XyToolbar(
              hasPercentageAxis={hasPercentageAxis(axisGroups, 'left', state)}
            />
          </TooltipWrapper>
+
          <AxisSettingsPopover
            axis="x"
            layers={state?.layers}
@ -470,6 +473,7 @@ export const XyToolbar = memo(function XyToolbar(
              isTimeHistogramModeEnabled && !useLegacyTimeAxis && !shouldRotate
            }
          />
+
          <TooltipWrapper
            tooltipContent={
              shouldRotate