[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 (cherry picked from commit d5d798f)
elastic · Apr 14, 2022 · 9a50077 · 9a50077
1 parent a84ef7c
commit 9a50077
Show file tree

Hide file tree

Showing 11 changed files with 121 additions and 98 deletions.
diff --git 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',

diff --git a/...k/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss b/...k/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 {

diff --git a/...ck/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/...ck/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>
     </>
   );
 }

diff --git a/...ugins/lens/public/editor_frame_service/editor_frame/workspace_panel/warnings_popover.scss b/...ugins/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 {

diff --git a/...lugins/lens/public/editor_frame_service/editor_frame/workspace_panel/warnings_popover.tsx b/...lugins/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}

diff --git a/...ens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss b/...ens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
@@ -87,15 +87,19 @@
 }
 
 .lnsWorkspacePanelWrapper__toolbar {
-  margin-bottom: 0;
+  margin-bottom: $euiSizeXS;
+}
 
-  &.lnsWorkspacePanelWrapper__toolbar--fullscreen {
-    padding: $euiSizeS $euiSizeS 0 $euiSizeS;
-    background-color: #FFF;
-  }
+.lnsWorkspacePanelWrapper__toolbar--fullscreen {
+  background-color: $euiColorEmptyShade;
+  justify-content: flex-end;
+  margin-bottom: 0;
+  padding: $euiSizeS $euiSizeS 0;
+}
 
-  & > .euiFlexItem {
-    min-height: $euiButtonHeightSmall;
+.lnsWorkspacePanelWrapper__applyButton .euiButton__text {
+  @include euiBreakpoint('xs', 's', 'm', 'l') {
+    @include euiScreenReaderOnly;
   }
 }
 

diff --git a/...lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/...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

diff --git 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.',

diff --git 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',

diff --git 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');

diff --git 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