Upgrade EUI to v30.5.1 (#84677)

* Updated to [email protected], fixed types and unit tests * Cleanup some imports * Fix a text color swap, now back to danger text * Bump EUI to v30.4.2 * Revert snapshot changes from ownFocus modification * Clean up alert flyout test actions to better represent user actions * Upgrade EUI to 30.5.1 * More accurate test interaction Co-authored-by: Kibana Machine <[email protected]>
elastic · Dec 4, 2020 · 2f72c8a · 2f72c8a
1 parent 40e206e
commit 2f72c8a
Show file tree

Hide file tree

Showing 58 changed files with 155 additions and 1,240 deletions.
diff --git a/package.json b/package.json
@@ -107,7 +107,7 @@
     "@elastic/datemath": "link:packages/elastic-datemath",
     "@elastic/elasticsearch": "7.10.0",
     "@elastic/ems-client": "7.11.0",
-    "@elastic/eui": "30.2.0",
+    "@elastic/eui": "30.5.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/node-crypto": "1.2.1",

diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/header_help_menu.tsx b/src/core/public/chrome/ui/header/header_help_menu.tsx
@@ -319,7 +319,6 @@ class HeaderHelpMenuUI extends Component<Props, State> {
         data-test-subj="helpMenuButton"
         id="headerHelpMenu"
         isOpen={this.state.isOpen}
-        ownFocus
         repositionOnScroll
       >
         <EuiPopoverTitle>

diff --git a/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap b/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap
diff --git a/src/plugins/dashboard/public/application/actions/library_notification_popover.tsx b/src/plugins/dashboard/public/application/actions/library_notification_popover.tsx
@@ -50,7 +50,6 @@ export function LibraryNotificationPopover({
 
   return (
     <EuiPopover
-      ownFocus
       button={
         <EuiButtonIcon
           data-test-subj={`embeddablePanelNotification-${id}`}

diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -110,7 +110,6 @@ function FilterBarUI(props: Props) {
           closePopover={() => setIsAddFilterPopoverOpen(false)}
           anchorPosition="downLeft"
           panelPaddingSize="none"
-          ownFocus={true}
           initialFocus=".filterEditor__hiddenItem"
           repositionOnScroll
         >

diff --git a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
@@ -71,7 +71,6 @@ export function QueryLanguageSwitcher(props: Props) {
     <EuiPopover
       id="queryLanguageSwitcherPopover"
       anchorClassName="euiFormControlLayout__append"
-      ownFocus
       anchorPosition={props.anchorPosition || 'downRight'}
       button={button}
       isOpen={isPopoverOpen}

diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
@@ -206,7 +206,6 @@ export function SavedQueryManagementComponent({
         anchorPosition="downLeft"
         panelPaddingSize="none"
         buffer={-8}
-        ownFocus
         repositionOnScroll
       >
         <div

diff --git a/src/plugins/discover/public/application/components/sidebar/change_indexpattern.tsx b/src/plugins/discover/public/application/components/sidebar/change_indexpattern.tsx
@@ -75,7 +75,6 @@ export function ChangeIndexPattern({
       closePopover={() => setPopoverIsOpen(false)}
       display="block"
       panelPaddingSize="s"
-      ownFocus
     >
       <div style={{ width: 320 }}>
         <EuiPopoverTitle>

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
@@ -197,7 +197,6 @@ export function DiscoverField({
 
   return (
     <EuiPopover
-      ownFocus
       display="block"
       button={
         <FieldButton

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { EventHandler, MouseEvent as ReactMouseEvent } from 'react';
+import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from '@kbn/test/jest';
 import { findTestSubject } from '@elastic/eui/lib/test';
@@ -146,33 +146,4 @@ describe('DiscoverFieldSearch', () => {
     popover = component.find(EuiPopover);
     expect(popover.prop('isOpen')).toBe(false);
   });
-
-  test('click outside popover should close popover', () => {
-    const triggerDocumentMouseDown: EventHandler<any> = (e: ReactMouseEvent<any>) => {
-      const event = new Event('mousedown');
-      // @ts-ignore
-      event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
-      document.dispatchEvent(event);
-    };
-    const triggerDocumentMouseUp: EventHandler<any> = (e: ReactMouseEvent<any>) => {
-      const event = new Event('mouseup');
-      // @ts-ignore
-      event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
-      document.dispatchEvent(event);
-    };
-    const component = mountWithIntl(
-      <div onMouseDown={triggerDocumentMouseDown} onMouseUp={triggerDocumentMouseUp} id="wrapperId">
-        <DiscoverFieldSearch {...defaultProps} />
-      </div>
-    );
-    const btn = findTestSubject(component, 'toggleFieldFilterButton');
-    btn.simulate('click');
-    let popover = component.find(EuiPopover);
-    expect(popover.length).toBe(1);
-    expect(popover.prop('isOpen')).toBe(true);
-    component.find('#wrapperId').simulate('mousedown');
-    component.find('#wrapperId').simulate('mouseup');
-    popover = component.find(EuiPopover);
-    expect(popover.prop('isOpen')).toBe(false);
-  });
 });
diff --git a/src/plugins/home/public/application/components/recently_accessed.js b/src/plugins/home/public/application/components/recently_accessed.js
@@ -99,7 +99,6 @@ export class RecentlyAccessed extends Component {
     return (
       <EuiPopover
         id="popover"
-        ownFocus
         button={openPopoverComponent}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}

diff --git a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
diff --git a/src/plugins/inspector/public/ui/inspector_view_chooser.tsx b/src/plugins/inspector/public/ui/inspector_view_chooser.tsx
@@ -121,7 +121,6 @@ export class InspectorViewChooser extends Component<Props, State> {
     return (
       <EuiPopover
         id="inspectorViewChooser"
-        ownFocus
         button={triggerButton}
         isOpen={this.state.isSelectorOpen}
         closePopover={this.closeSelector}

diff --git a/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx b/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx
@@ -186,7 +186,6 @@ export function openContextMenu(
       closePopover={onClose}
       panelPaddingSize="none"
       anchorPosition="downRight"
-      ownFocus={true}
     >
       <EuiContextMenu
         initialPanelId="mainMenu"

diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
@@ -152,7 +152,6 @@ const VisLegendItemComponent = ({
 
   const renderDetails = () => (
     <EuiPopover
-      ownFocus
       display="block"
       button={button}
       isOpen={selected}

diff --git a/...m/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/...m/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx
@@ -24,7 +24,7 @@ const ItemRow = styled.div`
 
 const SubduedDescriptionListTitle = styled(EuiDescriptionListTitle)`
   &&& {
-    color: ${({ theme }) => theme.eui.textColors.subdued};
+    color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   }
 `;
 

diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx
@@ -20,7 +20,7 @@ export const ItemRow = styled('tr')`
 `;
 
 export const ItemTitle = styled('td')`
-  color: ${({ theme }) => theme.eui.textColors.subdued};
+  color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   padding-right: 1rem;
 `;
 

diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts b/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts
@@ -129,7 +129,7 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
         color: (el: cytoscape.NodeSingular) =>
           el.hasClass('primary') || el.selected()
             ? theme.eui.euiColorPrimaryText
-            : theme.eui.textColors.text,
+            : theme.eui.euiTextColor,
         // theme.euiFontFamily doesn't work here for some reason, so we're just
         // specifying a subset of the fonts for the label text.
         'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif',

diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx
@@ -22,7 +22,7 @@ const CausedByContainer = styled('h5')`
 `;
 
 const CausedByHeading = styled('span')`
-  color: ${({ theme }) => theme.eui.textColors.subdued};
+  color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   display: block;
   font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
   font-weight: ${({ theme }) => theme.eui.euiFontWeightBold};

diff --git a/...rs/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot b/...rs/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,7 @@ const ItemRow = styled.div` @@
     const SubduedDescriptionListTitle = styled(EuiDescriptionListTitle)`
       &&& {
-        color: ${({ theme }) => theme.eui.textColors.subdued};
+        color: ${({ theme }) => theme.eui.euiTextSubduedColor};
       }
     `;
@@ Expand Down @@