[EuiPopover] Fix filter drop-shadow bug (#6604)

* Fix filter drop-shadow bug in popovers * Add CL entry * CSS indentation * Update src/themes/amsterdam/global_styling/mixins/shadow.ts Co-authored-by: Cee Chen <[email protected]> * Update src/themes/amsterdam/global_styling/mixins/shadow.ts Co-authored-by: Cee Chen <[email protected]> * Removed unused array --------- Co-authored-by: Cee Chen <[email protected]>
elastic · Feb 16, 2023 · 8cf4d8f · 8cf4d8f
1 parent 7933593
commit 8cf4d8f
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 61 deletions.
diff --git a/src-docs/src/views/context_menu/content_panel.js b/src-docs/src/views/context_menu/content_panel.js
diff --git a/src-docs/src/views/context_menu/content_panel.tsx b/src-docs/src/views/context_menu/content_panel.tsx
@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+
+import {
+  EuiButton,
+  EuiContextMenuPanel,
+  EuiPopover,
+  EuiSelectable,
+  EuiSelectableOption,
+  EuiHorizontalRule,
+  EuiContextMenuItem,
+  EuiTitle,
+  EuiSpacer,
+  EuiPanel,
+} from '../../../../src/components';
+
+import { useGeneratedHtmlId } from '../../../../src/services';
+
+export default () => {
+  const [isPopoverOpen, setPopover] = useState(false);
+  const customContextMenuPopoverId = useGeneratedHtmlId({
+    prefix: 'customContextMenuPopover',
+  });
+
+  const onButtonClick = () => {
+    setPopover(!isPopoverOpen);
+  };
+
+  const closePopover = () => {
+    setPopover(false);
+  };
+
+  const button = (
+    <EuiButton
+      size="s"
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={onButtonClick}
+    >
+      Click to show some content
+    </EuiButton>
+  );
+
+  const [options, setOptions] = useState<EuiSelectableOption[]>([
+    {
+      label: 'APM',
+    },
+    {
+      label: 'filebeat-*',
+    },
+    {
+      label: 'logs-*',
+    },
+    {
+      label: 'metrics-*',
+    },
+  ]);
+
+  return (
+    <EuiPopover
+      id={customContextMenuPopoverId}
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      panelPaddingSize="none"
+      anchorPosition="downLeft"
+    >
+      <EuiContextMenuPanel>
+        <EuiContextMenuItem key="item-1" icon="indexOpen" size="s">
+          Add a field to this data view
+        </EuiContextMenuItem>
+        <EuiContextMenuItem key="item-2" icon="indexSettings" size="s">
+          Manage this data view
+        </EuiContextMenuItem>
+
+        <EuiHorizontalRule margin="none" />
+
+        <EuiPanel color="transparent" paddingSize="s">
+          <EuiTitle size="xxxs">
+            <h3>Data views</h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiSelectable
+            aria-label="Find a data view"
+            searchable
+            searchProps={{
+              compressed: true,
+              placeholder: 'Find a data view',
+            }}
+            options={options}
+            onChange={(newOptions) => setOptions(newOptions)}
+          >
+            {(list, search) => (
+              <>
+                {search}
+                {list}
+              </>
+            )}
+          </EuiSelectable>
+        </EuiPanel>
+      </EuiContextMenuPanel>
+    </EuiPopover>
+  );
+};
diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js
@@ -135,7 +135,7 @@ export const ContextMenuExample = {
       title: 'Displaying custom elements',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: contentPanelSource,
         },
       ],

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -458,7 +458,7 @@ exports[`props options list is rendered 1`] = `
     </div>
   </div>
   <div
-    class="euiPanel euiPanel--plain euiPopover__panel euiComboBoxOptionsList css-s8iu-euiPanel-grow-m-plain-euiPopover__panel-isOpen-bottom-isOpen-bottom"
+    class="euiPanel euiPanel--plain euiPopover__panel euiComboBoxOptionsList emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-bottom-isOpen-bottom"
     data-popover-open="true"
     data-popover-panel="true"
     data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList"

diff --git a/src/themes/amsterdam/global_styling/mixins/shadow.ts b/src/themes/amsterdam/global_styling/mixins/shadow.ts
@@ -57,17 +57,19 @@ export const euiShadowMedium = (
 ) => {
   const color = _color || euiTheme.colors.shadow;
 
-  const array = [
-    `0 .9px 4px ${getShadowColor(color, 0.08, colorMode)}`,
-    `0 2.6px 8px ${getShadowColor(color, 0.06, colorMode)}`,
-    `0 5.7px 12px ${getShadowColor(color, 0.05, colorMode)}`,
-    `0 15px 15px ${getShadowColor(color, 0.04, colorMode)}`,
-  ];
-
   if (property === 'filter') {
-    return `filter: ${array.reduce((v, i) => `${v} drop-shadow(${i})`, '')};`;
+    // Using only one drop-shadow filter instead of multiple is more performant & prevents Safari bugs
+    return `filter: drop-shadow(0 5.7px 9px ${getShadowColor(
+      color,
+      0.2,
+      colorMode
+    )});`;
   } else {
-    return `box-shadow: ${array.map((v) => v)};`;
+    return `box-shadow:
+      0 .9px 4px ${getShadowColor(color, 0.08, colorMode)},
+      0 2.6px 8px ${getShadowColor(color, 0.06, colorMode)},
+      0 5.7px 12px ${getShadowColor(color, 0.05, colorMode)},
+      0 15px 15px ${getShadowColor(color, 0.04, colorMode)};`;
   }
 };
 

diff --git a/upcoming_changelogs/6604.md b/upcoming_changelogs/6604.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed bug in `EuiPopover` where multiple filter `drop-shadow()` were causing inner shadows in Safari
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Fixed bug in `EuiPopover` where multiple filter `drop-shadow()` were causing inner shadows in Safari