Design cleanup

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.scss

@@ -10,25 +10,20 @@
 }
 
 .lnsSuggestionsPanel__title {
-  margin: $euiSizeS 0 $euiSizeXS;
+  margin-left: $euiSizeXS / 2;
 }
 
 .lnsSuggestionsPanel__suggestions {
   @include euiScrollBar;
   @include lnsOverflowShadowHorizontal;
   padding-top: $euiSizeXS;
-  overflow-x: auto;
+  overflow-x: scroll;
   overflow-y: hidden;
   display: flex;
 
   // Padding / negative margins to make room for overflow shadow
   padding-left: $euiSizeXS;
   margin-left: -$euiSizeXS;
-
-  // Add margin to the next of the same type
-  > * + * {
-    margin-left: $euiSizeS;
-  }
 }
 
 // These sizes also match canvas' page thumbnails for consistency
@@ -39,12 +34,13 @@ $lnsSuggestionWidth: 150px;
   flex: 0 0 auto;
   width: $lnsSuggestionWidth !important;
   height: $lnsSuggestionHeight;
-  // Allows the scrollbar to stay flush to window
-  margin-bottom: $euiSize;
+  margin-right: $euiSizeS;
+  margin-left: $euiSizeXS / 2;
+  margin-bottom: $euiSizeXS / 2;
 }
 
-.lnsSuggestionPanel__button--selected {
-  background-color: gray;
+.lnsSuggestionPanel__button-isSelected {
+  @include euiFocusRing;
 }
 
 .lnsSidebar__suggestionIcon {
@@ -61,3 +57,21 @@ $lnsSuggestionWidth: 150px;
   height: $lnsSuggestionHeight - $euiSize;
   pointer-events: none;
 }
+
+.lnsSuggestionChartWrapper--withLabel {
+  height: $lnsSuggestionHeight - $euiSizeL;
+}
+
+.lnsSuggestionPanel__buttonLabel {
+  @include euiFontSizeXS;
+  display: block;
+  font-weight: $euiFontWeightBold;
+  text-align: center;
+  flex-grow: 0;
+}
+
+/* TYPES */
+.lnsSuggestionChartWrapper--visMetric {
+  padding-left: $euiSizeS;
+  padding-right: $euiSizeS;
+}

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx

@@ -7,7 +7,16 @@
 import _ from 'lodash';
 import React, { useState, useEffect, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiIcon, EuiTitle, EuiPanel, EuiIconTip, EuiToolTip, EuiButton } from '@elastic/eui';
+import {
+  EuiIcon,
+  EuiTitle,
+  EuiPanel,
+  EuiIconTip,
+  EuiToolTip,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+} from '@elastic/eui';
 import { toExpression, Ast } from '@kbn/interpreter/common';
 import { i18n } from '@kbn/i18n';
 import classNames from 'classnames';
@@ -62,7 +71,7 @@ const SuggestionPreview = ({
     <EuiToolTip content={suggestion.title}>
       <EuiPanel
         className={classNames('lnsSuggestionPanel__button', {
-          'lnsSuggestionPanel__button--selected': selected,
+          'lnsSuggestionPanel__button-isSelected': selected,
         })}
         paddingSize="none"
         data-test-subj="lnsSuggestion"
@@ -71,9 +80,9 @@ const SuggestionPreview = ({
         {expressionError ? (
           <div className="lnsSidebar__suggestionIcon">
             <EuiIconTip
-              size="xxl"
+              size="xl"
               color="danger"
-              type="cross"
+              type="alert"
               aria-label={i18n.translate('xpack.lens.editorFrame.previewErrorLabel', {
                 defaultMessage: 'Preview rendering failed',
               })}
@@ -84,7 +93,9 @@ const SuggestionPreview = ({
           </div>
         ) : previewExpression ? (
           <ExpressionRendererComponent
-            className="lnsSuggestionChartWrapper"
+            className={classNames('lnsSuggestionChartWrapper', [
+              `lnsSuggestionChartWrapper--${suggestion.previewIcon}`,
+            ])}
             expression={previewExpression}
             onRenderFailure={(e: unknown) => {
               // eslint-disable-next-line no-console
@@ -93,9 +104,9 @@ const SuggestionPreview = ({
             }}
           />
         ) : (
-          <div className="lnsSidebar__suggestionIcon">
+          <span className="lnsSidebar__suggestionIcon">
             <EuiIcon size="xxl" type={suggestion.previewIcon} />
-          </div>
+          </span>
         )}
       </EuiPanel>
     </EuiToolTip>
@@ -163,20 +174,37 @@ function InnerSuggestionPanel({
 
   return (
     <div className="lnsSuggestionsPanel">
-      <EuiTitle className="lnsSuggestionsPanel__title" size="xxs">
-        <h3>
-          <FormattedMessage
-            id="xpack.lens.editorFrame.suggestionPanelTitle"
-            defaultMessage="Suggestions"
-          />
-          {stagedPreview &&
-            '(Previewing a suggestion currently, you can go back to your previous state)'}
-        </h3>
-      </EuiTitle>
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem>
+          <EuiTitle className="lnsSuggestionsPanel__title" size="xxs">
+            <h3>
+              <FormattedMessage
+                id="xpack.lens.editorFrame.suggestionPanelTitle"
+                defaultMessage="Suggestions"
+              />
+            </h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        {stagedPreview && (
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              size="xs"
+              onClick={() => {
+                dispatch({
+                  type: 'SUBMIT_SUGGESTION',
+                });
+              }}
+            >
+              Confirm and reload suggestions
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+
       <div className="lnsSuggestionsPanel__suggestions">
         <EuiPanel
           className={classNames('lnsSuggestionPanel__button', {
-            'lnsSuggestionPanel__button--selected': lastSelectedSuggestion === -1,
+            'lnsSuggestionPanel__button-isSelected': lastSelectedSuggestion === -1,
           })}
           paddingSize="none"
           data-test-subj="lnsSuggestion"
@@ -187,8 +215,12 @@ function InnerSuggestionPanel({
             });
           }}
         >
-          Current visualization
+          <div className="lnsSuggestionChartWrapper lnsSuggestionChartWrapper--withLabel">
+            &lt;- Render vis here -&gt;
+          </div>
+          <span className="lnsSuggestionPanel__buttonLabel">Current</span>
         </EuiPanel>
+
         {suggestions.map((suggestion, index) => {
           return (
             <SuggestionPreview
@@ -215,17 +247,6 @@ function InnerSuggestionPanel({
             />
           );
         })}
-        {stagedPreview && (
-          <EuiButton
-            onClick={() => {
-              dispatch({
-                type: 'SUBMIT_SUGGESTION',
-              });
-            }}
-          >
-            Show more suggestions
-          </EuiButton>
-        )}
       </div>
     </div>
   );

x-pack/legacy/plugins/lens/public/metric_visualization_plugin/auto_scale.tsx

@@ -75,6 +75,7 @@ export class AutoScale extends React.Component<Props, State> {
               maxWidth: '100%',
               maxHeight: '100%',
               overflow: 'hidden',
+              lineHeight: 1.5,
             }}
           >
             <div
@@ -106,7 +107,7 @@ export function computeScale(
   child: ClientDimensionable | null
 ) {
   const MAX_SCALE = 1;
-  const MIN_SCALE = 0.3;
+  const MIN_SCALE = 0.2;
 
   if (!parent || !child) {
     return 1;

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/_xy_expression.scss

@@ -1,3 +1,11 @@
 .lnsChart {
   height: 100%;
 }
+
+.lnsChart__empty {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx

@@ -129,19 +129,17 @@ export function XYChart({
   if (Object.values(data.tables).every(table => table.rows.length === 0)) {
     const icon: IconType = layers.length > 0 ? getIconForSeriesType(layers[0].seriesType) : 'bar';
     return (
-      <EuiFlexGroup gutterSize="s" direction="column" alignItems="center" justifyContent="center">
-        <EuiFlexItem>
+      <EuiText className="lnsChart__empty" textAlign="center" color="subdued" size="xs">
+        <p>
           <EuiIcon type={icon} color="subdued" size="l" />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiText color="subdued" size="xs">
-            <FormattedMessage
-              id="xpack.lens.xyVisualization.noDataLabel"
-              defaultMessage="No results found"
-            />
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        </p>
+        <p>
+          <FormattedMessage
+            id="xpack.lens.xyVisualization.noDataLabel"
+            defaultMessage="No results found"
+          />
+        </p>
+      </EuiText>
     );
   }