design changes

elastic · Dec 1, 2020 · 15ba028 · 15ba028
1 parent 8f1ea88
commit 15ba028
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
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
@@ -0,0 +1,15 @@
+.lnsWorkspaceWarning__button {
+  color: $euiColorWarningText;
+}
+
+.lnsWorkspaceWarningList {
+  overflow-y: auto;
+  max-height: $euiSize * 20;
+  width: $euiSize * 16;
+}
+
+.lnsWorkspaceWarningList__item:not(:last-child) {
+  border-bottom: 1px $euiColorLightShade solid;
+  padding-bottom: $euiSize;
+  margin-bottom: $euiSize;
+}
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
@@ -5,10 +5,11 @@
  */
 
 import './workspace_panel_wrapper.scss';
+import './warnings_popover.scss';
 
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiPopover, EuiText, EuiButtonEmpty, EuiHorizontalRule } from '@elastic/eui';
+import { EuiPopover, EuiText, EuiButtonEmpty } from '@elastic/eui';
 
 export const WarningsPopover = ({
   children,
@@ -30,7 +31,7 @@ export const WarningsPopover = ({
         <EuiButtonEmpty
           onClick={onButtonClick}
           iconType="alert"
-          className="lnsWorkspaceWarningButton"
+          className="lnsWorkspaceWarning__button"
         >
           {i18n.translate('xpack.lens.chartWarnings.number', {
             defaultMessage: `{warningsCount} {warningsCount, plural, one {warning} other {warnings}}`,
@@ -43,12 +44,13 @@ export const WarningsPopover = ({
       isOpen={isPopoverOpen}
       closePopover={closePopover}
     >
-      {React.Children.map(children, (child, index) => (
-        <>
-          <EuiText style={{ width: 280 }}>{child}</EuiText>
-          {warningsCount - 1 !== index && <EuiHorizontalRule margin="s" />}
-        </>
-      ))}
+      <ul className="lnsWorkspaceWarningList">
+        {React.Children.map(children, (child, index) => (
+          <li key={index} className="lnsWorkspaceWarningList__item">
+            <EuiText size="s">{child}</EuiText>
+          </li>
+        ))}
+      </ul>
     </EuiPopover>
   );
 };
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
@@ -115,7 +115,3 @@
   75% { transform: translateY(15%); }
   100% { transform: translateY(10%); }
 }
-
-.lnsWorkspaceWarningButton {
-  color: $euiColorWarningText;
-}