Merge pull request #26 from andreadelrio/textbased-flyout-dsgn

Design - [Text based] Configure Lens suggestion on the fly from Discover
stratoula · Jul 3, 2023 · 0e81095 · 0e81095
2 parents 3155576 + c42845f
commit 0e81095
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 41 deletions.
diff --git a/src/plugins/unified_histogram/public/chart/histogram.tsx b/src/plugins/unified_histogram/public/chart/histogram.tsx
@@ -146,6 +146,7 @@ export function Histogram({
   const chartCss = css`
     position: relative;
     flex-grow: 1;
+    margin-block: ${euiTheme.size.xs};
 
     & > div {
       height: 100%;

diff --git a/x-pack/plugins/lens/public/app_plugin/app.scss b/x-pack/plugins/lens/public/app_plugin/app.scss
@@ -38,3 +38,7 @@
     }
   }
 }
+
+.lnsEditConfigurationFlyout {
+  background: none;
+}
diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/get_edit_lens_configuration.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/get_edit_lens_configuration.tsx
@@ -113,6 +113,7 @@ export function getEditLensConfiguration(
           defaultMessage: 'Edit configuration',
         })}
         size="s"
+        className="lnsEditConfigurationFlyout"
         hideCloseButton
       >
         <Provider store={lensStore}>

diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx
@@ -7,7 +7,9 @@
 
 import React, { useMemo } from 'react';
 import {
+  EuiButtonEmpty,
   EuiFlyoutBody,
+  EuiFlyoutFooter,
   EuiSpacer,
   EuiFlexGroup,
   EuiFlexItem,
@@ -16,6 +18,7 @@ import {
   EuiCallOut,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import type { CoreStart } from '@kbn/core/public';
 import type { Datatable } from '@kbn/expressions-plugin/public';
@@ -125,46 +128,48 @@ export function LensEditConfigurationFlyout({
     onUpdateStateCb: updateAll,
   };
   return (
-    <EuiFlyoutBody
-      className="lnsEditFlyoutBody"
-      css={css`
-        .euiFlyoutBody__overflowContent {
-          padding: ${euiTheme.size.s};
-        }
-      `}
-    >
-      <EuiFlexGroup gutterSize="s">
-        <EuiFlexItem grow={false}>
-          <EuiButtonIcon
-            iconType="menuRight"
-            iconSize="m"
-            size="xs"
-            onClick={closeFlyout}
-            data-test-subj="collapseFlyoutButton"
-            aria-controls="lens-config-close-button"
-            aria-expanded="true"
-            aria-label={i18n.translate('xpack.lens.config.closeFlyoutAriaLabel', {
-              defaultMessage: 'Close flyout',
-            })}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiCallOut
-            title={i18n.translate('xpack.lens.config.configFlyoutCallout', {
-              defaultMessage: 'SQL currently offers limited configuration options',
-            })}
-            iconType="iInCircle"
-          />
-          <EuiSpacer size="m" />
-          <VisualizationToolbar
-            activeVisualization={activeVisualization}
-            framePublicAPI={framePublicAPI}
-            onUpdateStateCb={updateAll}
-          />
-          <EuiSpacer size="m" />
-          <ConfigPanelWrapper {...layerPanelsProps} />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlyoutBody>
+    <>
+      <EuiFlyoutBody
+        className="lnsEditFlyoutBody"
+        css={css`
+          .euiFlyoutBody__overflowContent {
+            padding: ${euiTheme.size.s};
+          }
+        `}
+      >
+        <EuiFlexGroup gutterSize="s">
+          <EuiFlexItem>
+            <EuiCallOut
+              size="s"
+              title={i18n.translate('xpack.lens.config.configFlyoutCallout', {
+                defaultMessage: 'SQL currently offers limited configuration options',
+              })}
+              iconType="iInCircle"
+            />
+            <EuiSpacer size="m" />
+            <VisualizationToolbar
+              activeVisualization={activeVisualization}
+              framePublicAPI={framePublicAPI}
+              onUpdateStateCb={updateAll}
+            />
+            <EuiSpacer size="m" />
+            <ConfigPanelWrapper {...layerPanelsProps} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiButtonEmpty
+          onClick={closeFlyout}
+          data-test-subj="collapseFlyoutButton"
+          aria-controls="lens-config-close-button"
+          aria-expanded="true"
+          aria-label={i18n.translate('xpack.lens.config.closeFlyoutAriaLabel', {
+            defaultMessage: 'Close flyout',
+          })}
+        >
+          <FormattedMessage id="xpack.lens.config.closeFlyoutLabel" defaultMessage="Close" />
+        </EuiButtonEmpty>
+      </EuiFlyoutFooter>
+    </>
   );
 }