From d38578aa6f4ebaaac03e8e0d52ed8b3d0b45ecf0 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Tue, 22 Sep 2020 09:00:12 -0600 Subject: [PATCH 01/10] Removed logoAPM icon --- src/components/icon/assets/logo_apm.js | 21 --------------------- src/components/icon/assets/logo_apm.svg | 7 ------- src/components/icon/icon.tsx | 1 - 3 files changed, 29 deletions(-) delete mode 100644 src/components/icon/assets/logo_apm.js delete mode 100644 src/components/icon/assets/logo_apm.svg diff --git a/src/components/icon/assets/logo_apm.js b/src/components/icon/assets/logo_apm.js deleted file mode 100644 index d5f529342bf..00000000000 --- a/src/components/icon/assets/logo_apm.js +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; - -const EuiIconLogoApm = ({ title, titleId, ...props }) => ( - - {title ? {title} : null} - - - - -); - -export const icon = EuiIconLogoApm; diff --git a/src/components/icon/assets/logo_apm.svg b/src/components/icon/assets/logo_apm.svg deleted file mode 100644 index 6477ae54c01..00000000000 --- a/src/components/icon/assets/logo_apm.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index 5a28ba7069b..23e0c3cd341 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -197,7 +197,6 @@ const typeToPathMap = { logsApp: 'app_logs', logoAerospike: 'logo_aerospike', logoApache: 'logo_apache', - logoAPM: 'logo_apm', logoAppSearch: 'logo_app_search', logoAWS: 'logo_aws', logoAWSMono: 'logo_aws_mono', From b1c61eafe1a2953ef9948bf8af8a555e1c3e223e Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Tue, 22 Sep 2020 09:04:22 -0600 Subject: [PATCH 02/10] Removed euiHeaderNotification class --- src/components/header/_mixins.scss | 1 - .../header/header_section/_header_section_item.scss | 5 ----- 2 files changed, 6 deletions(-) diff --git a/src/components/header/_mixins.scss b/src/components/header/_mixins.scss index afbff5964cf..b693f759d2b 100644 --- a/src/components/header/_mixins.scss +++ b/src/components/header/_mixins.scss @@ -30,7 +30,6 @@ } } - .euiHeaderNotification, .euiHeaderSectionItemButton__notification--badge { box-shadow: 0 0 0 1px $backgroundColor; } diff --git a/src/components/header/header_section/_header_section_item.scss b/src/components/header/header_section/_header_section_item.scss index 24582e88b9b..b54be94d58d 100644 --- a/src/components/header/header_section/_header_section_item.scss +++ b/src/components/header/header_section/_header_section_item.scss @@ -46,10 +46,6 @@ } } -// SET FOR DEPRECATION: 2/21/20 -// The `euiHeaderNotification` class was needed to be manually applied -// Now notifications can be automatically added to the buttons via props -.euiHeaderNotification, .euiHeaderSectionItemButton__notification { position: absolute; } @@ -80,7 +76,6 @@ } // On small screens just show a small dot indicating there are notifications - .euiHeaderNotification, .euiHeaderSectionItemButton__notification--badge { @include size($euiSizeS); top: 20%; From 259c792c206ca3e570e8f1c3fc8f2d96e3c73fc7 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Tue, 22 Sep 2020 09:17:55 -0600 Subject: [PATCH 03/10] Removed 'disabled' color from button components --- .../__snapshots__/button_empty.test.tsx.snap | 15 ----------- .../button/button_empty/button_empty.tsx | 8 +----- .../__snapshots__/button_icon.test.tsx.snap | 8 ------ .../button/button_icon/button_icon.tsx | 2 -- .../icon/__snapshots__/icon.test.tsx.snap | 26 ------------------- 5 files changed, 1 insertion(+), 58 deletions(-) diff --git a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap index fbb99a7e457..75ac67677c2 100644 --- a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap +++ b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap @@ -34,21 +34,6 @@ exports[`EuiButtonEmpty props color danger is rendered 1`] = ` `; -exports[`EuiButtonEmpty props color disabled is rendered 1`] = ` - -`; - exports[`EuiButtonEmpty props color ghost is rendered 1`] = ` - - - -
    -
  • - - - -
    • -
  • - - - -
    • -
- - - - - -`; - -exports[`EuiNavDrawer renders with falsy children 1`] = ` - -`; - -exports[`EuiNavDrawer renders with fragments 1`] = ` - -`; diff --git a/src/components/nav_drawer/_index.scss b/src/components/nav_drawer/_index.scss deleted file mode 100644 index 92cc8b78103..00000000000 --- a/src/components/nav_drawer/_index.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import 'variables'; - -// Components -@import 'nav_drawer'; -@import 'nav_drawer_flyout'; -@import 'nav_drawer_group'; diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss deleted file mode 100644 index ad9d03a0720..00000000000 --- a/src/components/nav_drawer/_nav_drawer.scss +++ /dev/null @@ -1,156 +0,0 @@ -// Nav drawer. Global application navigation. - -.euiNavDrawer { - width: $euiNavDrawerWidthCollapsed; - height: calc(100% - #{$euiNavDrawerTopPosition}); - position: fixed; - left: 0; - top: $euiNavDrawerTopPosition; - overflow: hidden; - z-index: $euiZHeader; - background: $euiHeaderBackgroundColor; - box-shadow: $euiNavDrawerSideShadow; - transition: width $euiAnimSpeedExtraFast $euiAnimSlightResistance; - display: flex; - - .euiNavDrawerMenu { - @include euiScrollBar; - overflow-y: auto; - overflow-x: hidden; - width: $euiNavDrawerWidthCollapsed; - height: 100%; - - &-hasFooter { - margin-bottom: $euiSizeXXL; - } - } - - .euiNavDrawer__expandButton { - @include euiBottomShadowFlat; - background-color: $euiColorEmptyShade; - position: fixed; - bottom: 0; - width: $euiNavDrawerWidthCollapsed; - transition: width $euiAnimSpeedExtraFast; - z-index: $euiZHeader + 1; - - .euiListGroupItem__button { - padding: $euiSizeM $euiSize; - } - - .navDrawerExpandButton-isCollapsed .euiListGroupItem__button { - max-width: 100%; - } - } - - &.euiNavDrawer-isCollapsed { - &.euiNavDrawer-flyoutIsExpanded { - width: $euiNavDrawerWidthCollapsed + $euiNavDrawerWidthExpanded; - } - - .euiNavDrawerMenu { - // Prevents scrollbar from overlapping links in collapsed form - // sass-lint:disable-block no-vendor-prefixes - // sass-lint:disable-block no-misspelled-properties - -ms-overflow-style: -ms-autohiding-scrollbar; - scrollbar-width: none; - - &::-webkit-scrollbar { - width: 0; - height: 0; - } - - .euiListGroup:not(.euiNavDrawer__expandButton) .euiListGroupItem__button { - max-width: $euiSizeXL; - } - - .euiListGroupItem__extraAction { - // Hides extra action from scrolling into view when tabbing in the collapsed view - visibility: hidden; - } - } - } - - &.euiNavDrawer-isExpanded { - width: $euiNavDrawerWidthExpanded; - - .euiNavDrawerMenu, - .euiNavDrawer__expandButton { - width: $euiNavDrawerWidthExpanded; - } - - &.euiNavDrawer-flyoutIsExpanded { - width: $euiNavDrawerWidthExpanded + $euiNavDrawerWidthCollapsed; - } - } -} - -.euiNavDrawerPage { - height: 100%; - - .euiNavDrawerPage__pageBody { - margin-left: $euiNavDrawerWidthCollapsed; - } -} - -@include euiBreakpoint('xs', 's') { - .euiNavDrawer { - width: 0; - - &.euiNavDrawer-isExpanded .euiNavDrawerMenu { - .euiListGroupItem__icon { - margin-right: $euiSizeM; - } - } - - &.euiNavDrawer-flyoutIsCollapsed .euiNavDrawerFlyout { - width: 0; - transition-duration: 0s; - } - - // No expand toggle on mobile - - .euiNavDrawerMenu-hasFooter { - margin-bottom: 0; - } - - .euiNavDrawer__expandButton { - display: none; - } - } - - .euiNavDrawerPage .euiNavDrawerPage__pageBody { - margin-left: 0; - } -} - -@include euiBreakpoint('xs', 's', 'm', 'l') { - .euiNavDrawer__expandButtonLockAction { - display: none; - } -} - -@include euiBreakpoint('xl') { - .euiNavDrawer-isLocked { - + .euiNavDrawerPage .euiNavDrawerPage__pageBody { - // Shrink the content from the left so it's no longer overlapped by the nav drawer (ALWAYS) - margin-left: $euiNavDrawerWidthExpanded !important; // sass-lint:disable-line no-important - transition: margin $euiAnimSpeedFast $euiAnimSlightResistance; - } - - &.euiNavDrawer-flyoutIsExpanded { - // Instead of one collapsed and one expanded, they're now both expanded - // Double the width of expanded sidebars - width: $euiNavDrawerWidthExpanded * 2 !important; // sass-lint:disable-line no-important - // Prevents a shift in the main menu on initial open. - // The lack of horizontal transition is less alarming than the shift. - transition: none; - } - } - - // In case they unlock while the flyout is expanded, - // the nav drawer doesn't actually get collapsed until an interaction - .euiNavDrawer-isExpanded.euiNavDrawer-flyoutIsExpanded { - width: $euiNavDrawerWidthExpanded * 2 !important; // sass-lint:disable-line no-important - } -} diff --git a/src/components/nav_drawer/_nav_drawer_flyout.scss b/src/components/nav_drawer/_nav_drawer_flyout.scss deleted file mode 100644 index c0e64954df0..00000000000 --- a/src/components/nav_drawer/_nav_drawer_flyout.scss +++ /dev/null @@ -1,32 +0,0 @@ -.euiNavDrawerFlyout { - @include euiScrollBar; - width: 0; - height: 100%; - padding: $euiSizeM $euiSizeS; - overflow-y: auto; - background-color: $euiNavDrawerBackgroundColor; - border-left: $euiBorderThin; - box-shadow: $euiNavDrawerSideShadow; - visibility: hidden; - opacity: 0; - - &.euiNavDrawerFlyout-isExpanded { - visibility: visible; - opacity: 1; - width: $euiNavDrawerWidthExpanded; - transition: opacity $euiAnimSpeedFast $euiNavDrawerContractingDelay, width $euiAnimSpeedNormal; - } - - &.euiNavDrawerFlyout-isCollapsed { - transition: opacity $euiAnimSpeedFast, width $euiAnimSpeedFast; - } - - .euiNavDrawerFlyout__title { - margin: 0 $euiSizeS $euiSizeXS; - } - - .euiNavDrawerFlyout__listGroup { - padding-left: 0; - padding-right: 0; - } -} diff --git a/src/components/nav_drawer/_nav_drawer_group.scss b/src/components/nav_drawer/_nav_drawer_group.scss deleted file mode 100644 index d44af8f5bc0..00000000000 --- a/src/components/nav_drawer/_nav_drawer_group.scss +++ /dev/null @@ -1,40 +0,0 @@ -.euiNavDrawerGroup__item { - .euiListGroupItem__label { - transition: all $euiAnimSpeedExtraFast; - } - - .euiListGroupItem__button { - color: inherit; // Force color to inherit from regular text color in case it's an anchor tag - - &:focus { - background-color: $euiFocusBackgroundColor; - border-radius: $euiBorderRadius; - } - } - - .euiListGroupItem__icon { - max-width: $euiSize; - } -} - -// Default icon will simulate an avatar but with coloring specific to -.euiNavDrawerGroup__itemDefaultIcon { - @include innerBorder('dark', 50%, .05); - @include size($euiSize); - line-height: $euiSize; - font-size: $euiSizeM; - flex-shrink: 0; // Ensures it never scales down below its intended size - display: inline-block; - text-align: center; - vertical-align: middle; - overflow: visible; - font-weight: $euiFontWeightMedium; // Explicitly state so it doesn't get overridden by inheritance - border-radius: 50%; - - &:after { - top: -$euiSizeXS; - left: -$euiSizeXS; - right: -$euiSizeXS; - bottom: -$euiSizeXS; - } -} diff --git a/src/components/nav_drawer/_variables.scss b/src/components/nav_drawer/_variables.scss deleted file mode 100644 index 6d53a9a6cf4..00000000000 --- a/src/components/nav_drawer/_variables.scss +++ /dev/null @@ -1,16 +0,0 @@ -// Themeable colors -$euiNavDrawerBackgroundColor: $euiHeaderBackgroundColor; - -// Drawer variables -$euiNavDrawerWidthExpanded: 240px; -$euiNavDrawerWidthCollapsed: $euiHeaderHeight; -$euiNavDrawerSideShadow: 2px 0 2px -1px rgba($euiShadowColor, .3); - -// Layout variables -$euiNavDrawerTopPosition: $euiHeaderHeight + 1px; - -// Animation variables -$euiNavDrawerExpandingDelay: $euiAnimSpeedNormal; -$euiNavDrawerContractingDelay: $euiAnimSpeedFast; -$euiNavDrawerExtendedDelay: $euiAnimSpeedExtraSlow * 2; -$euiNavDrawerMenuAddedDelay: $euiAnimSpeedExtraFast; diff --git a/src/components/nav_drawer/index.ts b/src/components/nav_drawer/index.ts deleted file mode 100644 index 754693c1545..00000000000 --- a/src/components/nav_drawer/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -export { EuiNavDrawer, EuiNavDrawerProps } from './nav_drawer'; -export { EuiNavDrawerGroup, EuiNavDrawerGroupProps } from './nav_drawer_group'; -export { - EuiNavDrawerFlyout, - EuiNavDrawerFlyoutProps, -} from './nav_drawer_flyout'; diff --git a/src/components/nav_drawer/nav_drawer.test.tsx b/src/components/nav_drawer/nav_drawer.test.tsx deleted file mode 100644 index af897240602..00000000000 --- a/src/components/nav_drawer/nav_drawer.test.tsx +++ /dev/null @@ -1,174 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; -import { render } from 'enzyme'; - -import { EuiNavDrawer } from './nav_drawer'; -import { EuiNavDrawerGroup, FlyoutMenuItem } from './nav_drawer_group'; -import { EuiListGroupItemProps } from '../list_group'; - -const extraAction: EuiListGroupItemProps['extraAction'] = { - color: 'subdued', - iconType: 'pin', - iconSize: 's', -}; - -const topLinks: FlyoutMenuItem[] = [ - { - label: 'Recently viewed', - iconType: 'clock', - flyoutMenu: { - title: 'Recent items', - listItems: [ - { - label: 'My dashboard', - href: '#', - iconType: 'dashboardApp', - extraAction, - }, - { - label: 'Workpad with title that wraps', - href: '#', - iconType: 'canvasApp', - extraAction, - }, - { - label: 'My logs', - href: '#', - iconType: 'logsApp', - 'aria-label': 'This is an alternate aria-label', - extraAction, - }, - ], - }, - }, - { - label: 'Favorites', - iconType: 'starEmpty', - flyoutMenu: { - title: 'Favorite items', - listItems: [ - { - label: 'My workpad', - href: '#', - iconType: 'canvasApp', - extraAction: { - color: 'subdued', - iconType: 'starFilled', - iconSize: 's', - 'aria-label': 'Remove from favorites', - alwaysShow: true, - }, - }, - { - label: 'My logs', - href: '#', - iconType: 'logsApp', - extraAction: { - color: 'subdued', - iconType: 'starFilled', - iconSize: 's', - 'aria-label': 'Remove from favorites', - alwaysShow: true, - }, - }, - ], - }, - }, -]; - -const exploreLinks: FlyoutMenuItem[] = [ - { - label: 'Canvas', - href: '#', - iconType: 'canvasApp', - isActive: true, - extraAction, - }, - { - label: 'Discover', - href: '#', - iconType: 'discoverApp', - extraAction, - }, - { - label: 'Visualize', - href: '#', - iconType: 'visualizeApp', - extraAction, - }, - { - label: 'Dashboard', - href: '#', - iconType: 'dashboardApp', - extraAction, - }, - { - label: 'Machine learning', - href: '#', - iconType: 'machineLearningApp', - extraAction, - }, - { - label: 'Custom Plugin (no icon)', - href: '#', - extraAction, - }, -]; - -describe('EuiNavDrawer', () => { - test('is rendered', () => { - const component = render( - - - - - ); - - expect(component).toMatchSnapshot(); - }); - - describe('renders', () => { - test('with fragments', () => { - const component = render( - - <> - - - - - ); - - expect(component).toMatchSnapshot(); - }); - - test('with falsy children', () => { - const component = render( - - {false && } - {true ? undefined : } - - - ); - - expect(component).toMatchSnapshot(); - }); - }); -}); diff --git a/src/components/nav_drawer/nav_drawer.tsx b/src/components/nav_drawer/nav_drawer.tsx deleted file mode 100644 index e6f3ee8fbc4..00000000000 --- a/src/components/nav_drawer/nav_drawer.tsx +++ /dev/null @@ -1,454 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { - Component, - ReactNode, - createRef, - MouseEventHandler, - isValidElement, - HTMLAttributes, -} from 'react'; -import classNames from 'classnames'; -import { EuiListGroup, EuiListGroupItem } from '../list_group'; -import { EuiNavDrawerFlyout } from './nav_drawer_flyout'; -import { - EuiNavDrawerGroup, - ATTR_SELECTOR, - FlyoutMenuItem, -} from './nav_drawer_group'; -import { EuiOutsideClickDetector } from '../outside_click_detector'; -import { EuiI18n } from '../i18n'; -import { EuiFlexItem, EuiFlexGroup } from '../flex'; -import { throttle } from '../color_picker/utils'; -import { CommonProps } from '../common'; - -const MENU_ELEMENT_ID = 'navDrawerMenu'; - -export interface EuiNavDrawerProps - extends CommonProps, - HTMLAttributes { - /** - * One or more ReactNodes to render as this component's content - */ - children?: ReactNode | ReactNode[]; - - /** - * Keep drawer locked open by default - */ - isLocked?: boolean; - - /** - * Returns the current state of isLocked - */ - onIsLockedUpdate?: (isLocked: boolean) => void; - - /** - * Adds fixed toggle button to bottom of menu area - */ - showExpandButton?: boolean; - - /** - * Display tooltips on side nav items - */ - showToolTips?: boolean; -} - -interface EuiNavDrawerState { - flyoutIsCollapsed: boolean; - flyoutListItems: FlyoutMenuItem[] | null; - focusReturnRef: ReactNode | null; - isCollapsed: boolean; - isLocked: boolean; - isManagingFocus: boolean; - navFlyoutTitle: string | undefined; - outsideClickDisabled: boolean; - toolTipsEnabled: boolean; -} - -export class EuiNavDrawer extends Component< - EuiNavDrawerProps, - EuiNavDrawerState -> { - static defaultProps = { - showExpandButton: true, - showToolTips: true, - }; - - state: EuiNavDrawerState = { - flyoutIsCollapsed: true, - flyoutListItems: null, - focusReturnRef: null, - isCollapsed: !this.props.isLocked, - isLocked: Boolean(this.props.isLocked), - isManagingFocus: false, - navFlyoutTitle: undefined, - outsideClickDisabled: true, - toolTipsEnabled: true, - }; - - expandButtonRef = createRef(); - - componentDidMount() { - if (this.props.isLocked) { - window.addEventListener('resize', this.functionToCallOnWindowResize); - } - } - - componentWillUnmount() { - window.removeEventListener('resize', this.functionToCallOnWindowResize); - } - - returnOnIsLockedUpdate = (isLockedState: EuiNavDrawerState['isLocked']) => { - if (this.props.onIsLockedUpdate) { - this.props.onIsLockedUpdate(isLockedState); - } - }; - - functionToCallOnWindowResize = throttle(() => { - if (window.innerWidth < 1200) { - this.collapseDrawer(); - this.collapseFlyout(); - } - // reacts every 50ms to resize changes and always gets the final update - }, 50); - - sideNavLockClicked = () => { - const { isLocked } = this.state; - - if (isLocked) { - window.removeEventListener('resize', this.functionToCallOnWindowResize); - } else { - window.addEventListener('resize', this.functionToCallOnWindowResize); - } - - this.returnOnIsLockedUpdate(!isLocked); - - this.setState({ - isLocked: !isLocked, - isCollapsed: false, - outsideClickDisabled: !isLocked, - }); - }; - - // Although not used in `src/`, this method is available to and used in `src-docs/` - // for implementation-specific nav menu toggling via `ref` reference - toggleOpen = () => { - this.setState( - ({ isCollapsed }) => ({ - isCollapsed: !isCollapsed, - }), - () => { - this.setState(({ isCollapsed }) => ({ - outsideClickDisabled: isCollapsed, - toolTipsEnabled: isCollapsed, - })); - } - ); - }; - - collapseButtonClick = () => { - if (this.state.isCollapsed) { - this.expandDrawer(); - } else { - this.collapseDrawer(); - } - - this.collapseFlyout(); - - requestAnimationFrame(() => { - if (this.expandButtonRef.current) { - this.expandButtonRef.current.focus(); - } - }); - }; - - expandDrawer = () => { - this.setState({ - isCollapsed: false, - outsideClickDisabled: false, - }); - - setTimeout(() => { - this.setState({ - toolTipsEnabled: false, - }); - }, 150); - }; - - collapseDrawer = () => { - this.setState({ - isCollapsed: true, - outsideClickDisabled: this.state.flyoutIsCollapsed ? true : false, - toolTipsEnabled: true, - isLocked: false, - }); - - this.returnOnIsLockedUpdate(false); - - // Scrolls the menu and flyout back to top when the nav drawer collapses - setTimeout(() => { - const element = document.getElementById('navDrawerMenu'); - if (element) { - element.scrollTop = 0; - } - }, 50); - - // In case it was locked before, remove the window resize listener - window.removeEventListener('resize', this.functionToCallOnWindowResize); - }; - - expandFlyout = ( - links: FlyoutMenuItem[], - title: string, - item: FlyoutMenuItem - ) => { - if (this.state.navFlyoutTitle === title) { - this.collapseFlyout(); - } else { - this.setState( - ({ isLocked }) => ({ - flyoutIsCollapsed: false, - flyoutListItems: links, - focusReturnRef: item.label, - isCollapsed: isLocked ? false : true, - navFlyoutTitle: title, - outsideClickDisabled: false, - toolTipsEnabled: false, - }), - () => { - // Ideally this uses React `ref` instead of `querySelector`, but the menu composition - // does not allow for deep `ref` element management at present - const element = document.querySelector( - `#${MENU_ELEMENT_ID} [${ATTR_SELECTOR}='${item.label}']` - ); - if (!element) return; - element.setAttribute('aria-expanded', 'true'); - } - ); - } - }; - - collapseFlyout = (shouldReturnFocus = true) => { - const { focusReturnRef: focusReturn } = this.state; - this.setState( - { - flyoutIsCollapsed: true, - navFlyoutTitle: undefined, - flyoutListItems: null, - toolTipsEnabled: this.state.isLocked ? false : true, - focusReturnRef: null, - }, - () => { - // Ideally this uses React `ref` instead of `querySelector`, but the menu composition - // does not allow for deep `ref` element management at present - const element = document.querySelector( - `#${MENU_ELEMENT_ID} [${ATTR_SELECTOR}='${focusReturn}']` - ) as HTMLElement; - if (!element) { - return; - } - requestAnimationFrame(() => { - element.setAttribute('aria-expanded', 'false'); - }); - if (!shouldReturnFocus) return; - requestAnimationFrame(() => { - element.focus(); - }); - } - ); - }; - - closeBoth = () => { - if (!this.state.isLocked) this.collapseDrawer(); - this.collapseFlyout(false); - }; - - handleDrawerMenuClick: MouseEventHandler = (event) => { - // walk up e.target until either: - // 1. a[href] - close the menu - // 2. document.body - do nothing - - let element = event.target as HTMLElement | null; - while ( - element !== null && - element !== document.body && - (element.tagName !== 'A' || element.getAttribute('href') === undefined) - ) { - element = element.parentElement; - } - - if (element !== document.body) { - // this is an anchor with an href - this.closeBoth(); - } - }; - - modifyChildren = (children: ReactNode | ReactNode[]): ReactNode => { - // Loop through the EuiNavDrawer children (EuiListGroup, EuiHorizontalRules, etc) - // Filter out falsy items - const filteredChildren = React.Children.toArray(children); - return React.Children.map(filteredChildren, (child) => { - if (isValidElement(child)) { - // Allow for Fragments by recursive modification - if (child.type === React.Fragment) { - return this.modifyChildren(child.props.children); - } - - // Check if child is an EuiNavDrawerGroup and if it does have a flyout, add the expand function - if (child.type === EuiNavDrawerGroup) { - return React.cloneElement(child, { - flyoutMenuButtonClick: this.expandFlyout, - showToolTips: this.state.toolTipsEnabled && this.props.showToolTips, - }); - } - } - - return child; - }); - }; - - render() { - const { - children, - className, - showExpandButton, - showToolTips, - isLocked, - onIsLockedUpdate, - ...rest - } = this.props; - - const classes = classNames( - 'euiNavDrawer', - { - 'euiNavDrawer-isCollapsed': this.state.isCollapsed, - 'euiNavDrawer-isExpanded': !this.state.isCollapsed, - 'euiNavDrawer-isLocked': this.state.isLocked, - 'euiNavDrawer-flyoutIsCollapsed': this.state.flyoutIsCollapsed, - 'euiNavDrawer-flyoutIsExpanded': !this.state.flyoutIsCollapsed, - }, - className - ); - - let footerContent; - if (showExpandButton) { - footerContent = ( - - - {([ - sideNavCollapse, - sideNavExpand, - sideNavLockAriaLabel, - sideNavLockExpanded, - sideNavLockCollapsed, - ]: string[]) => ( - - )} - - - ); - } - - const flyoutContent = ( - - ); - - // Add an onClick that expands the flyout sub menu for any list items (links) that have a flyoutMenu prop (sub links) - let modifiedChildren = children; - - modifiedChildren = this.modifyChildren(this.props.children); - - const menuClasses = classNames('euiNavDrawerMenu', { - 'euiNavDrawerMenu-hasFooter': footerContent, - }); - - return ( - this.closeBoth()} - isDisabled={this.state.outsideClickDisabled}> - - - ); - } -} diff --git a/src/components/nav_drawer/nav_drawer_flyout.tsx b/src/components/nav_drawer/nav_drawer_flyout.tsx deleted file mode 100644 index 85ba61564bc..00000000000 --- a/src/components/nav_drawer/nav_drawer_flyout.tsx +++ /dev/null @@ -1,141 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { - useState, - FunctionComponent, - KeyboardEventHandler, - HTMLAttributes, - useRef, -} from 'react'; -import classNames from 'classnames'; -import tabbable from 'tabbable'; - -import { keys } from '../../services'; - -import { EuiTitle } from '../title'; -import { EuiNavDrawerGroup, FlyoutMenuItem } from './nav_drawer_group'; -import { EuiListGroupProps } from '../list_group/list_group'; -import { EuiFocusTrap } from '../focus_trap'; -import { CommonProps } from '../common'; - -export interface EuiNavDrawerFlyoutProps - extends CommonProps, - HTMLAttributes { - /** - * Toggle the nav drawer between collapsed and expanded - */ - isCollapsed?: boolean; - - listItems?: FlyoutMenuItem[] | null; - - /** - * Passthrough function to be called when the flyout is closing - * @see `EuiNavDrawer` - */ - onClose?: (shouldReturnFocus?: boolean) => void; - - /** - * Display a title atop the flyout - */ - title?: string; - - wrapText?: EuiListGroupProps['wrapText']; -} - -export const EuiNavDrawerFlyout: FunctionComponent = ({ - className, - isCollapsed = true, - listItems, - onClose, - title, - wrapText = false, - ...rest -}) => { - const menuElementRef = useRef(null); - const [ - tabbables, - setTabbables, - ] = useState | null>(); - const LABEL = 'navDrawerFlyoutTitle'; - const classes = classNames( - 'euiNavDrawerFlyout', - { - 'euiNavDrawerFlyout-isCollapsed': isCollapsed, - 'euiNavDrawerFlyout-isExpanded': !isCollapsed, - }, - className - ); - - const handleKeyDown: KeyboardEventHandler = (event) => { - if (event.key === keys.ESCAPE) { - handleClose(); - } else if (event.key === keys.TAB) { - let tabs = tabbables; - if (!tabs && menuElementRef.current) { - tabs = tabbable(menuElementRef.current).filter( - (element) => element.tagName !== 'DIV' - ); - setTabbables(tabs); - } - if (!tabs) { - return; - } - if ( - (!event.shiftKey && document.activeElement === tabs[tabs.length - 1]) || - (event.shiftKey && document.activeElement === tabs[0]) - ) { - handleClose(); - } - } - }; - - const handleClose = (shouldReturnFocus = true) => { - setTabbables(null); - if (onClose) { - onClose(shouldReturnFocus); - } - }; - - return ( -
- -
- {title} -
- - {listItems ? ( - - handleClose(false)} - /> - - ) : null} -
- ); -}; diff --git a/src/components/nav_drawer/nav_drawer_group.tsx b/src/components/nav_drawer/nav_drawer_group.tsx deleted file mode 100644 index c36202ac0cb..00000000000 --- a/src/components/nav_drawer/nav_drawer_group.tsx +++ /dev/null @@ -1,117 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { FunctionComponent, ReactNode } from 'react'; -import classNames from 'classnames'; - -import { EuiListGroup, EuiListGroupProps } from '../list_group/list_group'; -import { EuiListGroupItemProps } from '../list_group/list_group_item'; -import { toInitials } from '../../services'; - -export const ATTR_SELECTOR = 'data-name'; - -export type FlyoutMenuItem = EuiListGroupItemProps & { - 'data-name'?: ReactNode | ReactNode[]; - flyoutMenu?: { - title: string; - listItems: FlyoutMenuItem[]; - }; - label: string; -}; - -export interface EuiNavDrawerGroupProps extends EuiListGroupProps { - listItems?: FlyoutMenuItem[]; - - /** - * While not normally required, it is required to pass a function for handling - * of the flyout menu button click - */ - flyoutMenuButtonClick?: ( - links: FlyoutMenuItem[], - title: string, - item: FlyoutMenuItem - ) => void; - - /** - * Passthrough function to be called when the flyout is closing - * @see `EuiNavDrawer` - */ - onClose?: () => void; -} - -export const EuiNavDrawerGroup: FunctionComponent = ({ - className, - listItems, - flyoutMenuButtonClick, - onClose = () => {}, - ...rest -}) => { - // Alter listItems object with prop flyoutMenu and extra props - const newListItems = !(listItems && !!listItems.length) - ? undefined - : listItems.map((item) => { - // If the flyout menu exists, pass back the list of times and the title with the onClick handler of the item - const { flyoutMenu, ...itemProps } = item; - if (flyoutMenu && flyoutMenuButtonClick) { - const items = [...flyoutMenu.listItems]; - const title = `${flyoutMenu.title}`; - itemProps.onClick = () => { - flyoutMenuButtonClick(items, title, item); - }; - itemProps['aria-expanded'] = false; - } else { - itemProps.onClick = (event) => { - if (item.onClick) { - item.onClick(event); - } - onClose(); - }; - } - - // Make some declarations of props for the side nav implementation - itemProps.className = classNames( - 'euiNavDrawerGroup__item', - item.className - ); - itemProps.size = item.size || 's'; - itemProps[ATTR_SELECTOR] = item.label; - itemProps['aria-label'] = item['aria-label'] || item.label; - - // Add an avatar in place of non-existent icons - const itemProvidesIcon = !!item.iconType || !!item.icon; - if (!itemProvidesIcon) { - itemProps.icon = ( - - {toInitials(item.label)} - - ); - } - - // And return the item with conditional `onClick` and without `flyoutMenu` - return { ...itemProps }; - }); - - return ( - - ); -}; diff --git a/src/components/popover/popover.test.tsx b/src/components/popover/popover.test.tsx index e67674a5827..21c980ecb12 100644 --- a/src/components/popover/popover.test.tsx +++ b/src/components/popover/popover.test.tsx @@ -104,7 +104,6 @@ describe('EuiPopover', () => { const component = mount( } closePopover={closePopoverHandler} isOpen @@ -121,7 +120,6 @@ describe('EuiPopover', () => { const component = mount( } closePopover={closePopoverHandler} isOpen={false} diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index 698c59e4e2b..a1aa8c6ab4d 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -131,8 +131,6 @@ export interface EuiPopoverProps { * scrolls, this supports having fixed-position popover anchors. */ repositionOnScroll?: boolean; - withTitle?: boolean; - /** By default, popover content inherits the z-index of the anchor * component; pass zIndex to override */ zIndex?: number; @@ -603,7 +601,6 @@ export class EuiPopover extends Component { insert, isOpen, ownFocus, - withTitle, children, className, closePopover, @@ -633,7 +630,6 @@ export class EuiPopover extends Component { display ? displayToClassNameMap[display] : null, { 'euiPopover-isOpen': this.state.isOpening, - 'euiPopover--withTitle': withTitle, }, className ); @@ -644,7 +640,6 @@ export class EuiPopover extends Component { 'euiPopover__panel', `euiPopover__panel--${this.state.arrowPosition}`, { 'euiPopover__panel-isOpen': this.state.isOpening }, - { 'euiPopover__panel-withTitle': withTitle }, { 'euiPopover__panel-noArrow': !hasArrow || attachToAnchor }, { 'euiPopover__panel-isAttached': attachToAnchor }, panelClassName diff --git a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.tsx.snap b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.tsx.snap index de94fcf448c..5001571c665 100644 --- a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.tsx.snap +++ b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.tsx.snap @@ -22,7 +22,6 @@ exports[`FieldValueSelectionFilter active - field is global 1`] = ` ownFocus={true} panelClassName="euiFilterGroup__popoverPanel" panelPaddingSize="none" - withTitle={false} >
= threshold; return ( {searchBox} diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap index a1242310499..5c387a1da73 100644 --- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap +++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap @@ -8,7 +8,7 @@ exports[`EuiTablePagination is rendered 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >
{ isOpen={this.state.isPopoverOpen} closePopover={this.closePopover} panelPaddingSize="none" - withTitle anchorPosition="upRight"> diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap index 71de909509a..c883b88d662 100644 --- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap +++ b/src/components/tour/__snapshots__/tour_step.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiTourStep can be closed 1`] = `
@@ -20,7 +20,7 @@ exports[`EuiTourStep can be closed 1`] = ` exports[`EuiTourStep can override the footer action 1`] = `
@@ -37,7 +37,7 @@ exports[`EuiTourStep can override the footer action 1`] = ` exports[`EuiTourStep can set a minWidth 1`] = `
@@ -54,7 +54,7 @@ exports[`EuiTourStep can set a minWidth 1`] = ` exports[`EuiTourStep can turn off the beacon 1`] = `
@@ -71,7 +71,7 @@ exports[`EuiTourStep can turn off the beacon 1`] = ` exports[`EuiTourStep is rendered 1`] = `
diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx index b7f35f9a212..96707fba7b4 100644 --- a/src/components/tour/tour_step.tsx +++ b/src/components/tour/tour_step.tsx @@ -217,7 +217,6 @@ export const EuiTourStep: FunctionComponent = ({ panelStyle={newStyle || style} offset={hasBeacon ? 10 : 0} arrowChildren={hasBeacon && } - withTitle {...rest}> From 2a834e8711f5028e3f9085fda8160b4063d40b17 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Tue, 22 Sep 2020 09:46:21 -0600 Subject: [PATCH 05/10] Removed deprecated 'compressed' and 'displayOnly' props from EuiFormRow --- src/components/form/form_row/form_row.tsx | 39 ++--------------------- 1 file changed, 2 insertions(+), 37 deletions(-) diff --git a/src/components/form/form_row/form_row.tsx b/src/components/form/form_row/form_row.tsx index 13a58cd1af9..de96da41f2f 100644 --- a/src/components/form/form_row/form_row.tsx +++ b/src/components/form/form_row/form_row.tsx @@ -91,17 +91,6 @@ type EuiFormRowCommonProps = CommonProps & { isInvalid?: boolean; error?: ReactNode | ReactNode[]; helpText?: ReactNode; - /** - * **DEPRECATED: use `display: rowCompressed` instead.** - * When `true`, tightens up the spacing. - */ - compressed?: boolean; - /** - * **DEPRECATED: use `display: center` instead.** - * Vertically centers non-input style content so it aligns - * better with input style content. - */ - displayOnly?: boolean; }; type LabelProps = { @@ -178,9 +167,7 @@ export class EuiFormRow extends Component { fullWidth, className, describedByIds, - compressed, display, - displayOnly, hasChildLabel, id: propsId, ...rest @@ -188,35 +175,13 @@ export class EuiFormRow extends Component { const { id } = this.state; - /** - * Remove when `compressed` is deprecated - */ - let shimDisplay: EuiFormRowDisplayKeys; - if (compressed && display === 'row') { - shimDisplay = 'rowCompressed'; - } else { - /** - * Safe use of ! as prop default is 'row' - */ - shimDisplay = display!; - } - - /** - * Remove when `displayOnly` is deprecated - */ - if (compressed && displayOnly) { - shimDisplay = 'centerCompressed'; - } else if (displayOnly && display === 'row') { - shimDisplay = 'center'; - } - const classes = classNames( 'euiFormRow', { 'euiFormRow--hasEmptyLabelSpace': hasEmptyLabelSpace, 'euiFormRow--fullWidth': fullWidth, }, - displayToClassNameMap[shimDisplay], + displayToClassNameMap[display!], // Safe use of ! as default prop is 'row' className ); @@ -308,7 +273,7 @@ export class EuiFormRow extends Component { /** * Safe use of ! as default prop is 'row' */ - displayOnly || display!.startsWith('center'), + display!.startsWith('center'), }); const sharedProps = { From 1ff92b83cfe6ac0e871d08f839891b32e35757ab Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Tue, 22 Sep 2020 10:48:04 -0600 Subject: [PATCH 06/10] Removed deprecated prop usage from EuiFormRow's tests --- .../form/form_row/__snapshots__/form_row.test.tsx.snap | 4 ++-- src/components/form/form_row/form_row.test.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap b/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap index a20b07174f3..9cf34cc1f0f 100644 --- a/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap +++ b/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap @@ -219,7 +219,7 @@ exports[`EuiFormRow is rendered 1`] = ` exports[`EuiFormRow props compressed is rendered 1`] = `
{ test('displayOnly is rendered', () => { const component = render( - + just some text ); @@ -205,7 +205,7 @@ describe('EuiFormRow', () => { describe('compressed', () => { test('is rendered', () => { const component = render( - + ); From edb59960717330fe8544ddd5e267bceda2c9156b Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Tue, 22 Sep 2020 13:04:42 -0600 Subject: [PATCH 07/10] small cleanup --- src-docs/src/views/button/button_icon.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/button/button_icon.js b/src-docs/src/views/button/button_icon.js index 47b9e8cda9c..564ca4ec2c0 100644 --- a/src-docs/src/views/button/button_icon.js +++ b/src-docs/src/views/button/button_icon.js @@ -14,21 +14,27 @@ const colors = [ 'success', 'warning', 'danger', - 'disabled', ]; export default () => ( - {colors.map((color) => ( + {colors.map(color => ( window.alert('Button clicked')} iconType="arrowRight" aria-label="Next" - disabled={color === 'disabled' ? true : false} /> ))} + + window.alert('Button clicked')} + iconType="arrowRight" + aria-label="Next" + disabled + /> + ); From a87ed75aad56340efa996a5aff1556533d19ee8d Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 12 Oct 2020 16:48:54 -0400 Subject: [PATCH 08/10] Removing obsolete test --- .../__snapshots__/form_row.test.tsx.snap | 32 ------------------- .../form/form_row/form_row.test.tsx | 22 ------------- 2 files changed, 54 deletions(-) diff --git a/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap b/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap index 9cf34cc1f0f..540698931b0 100644 --- a/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap +++ b/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap @@ -217,21 +217,6 @@ exports[`EuiFormRow is rendered 1`] = `
`; -exports[`EuiFormRow props compressed is rendered 1`] = ` -
-
- -
-
-`; - exports[`EuiFormRow props describedByIds is rendered 1`] = `
`; -exports[`EuiFormRow props displayOnly is rendered 1`] = ` -
-
- - just some text - -
-
-`; - exports[`EuiFormRow props error as array is rendered 1`] = `
{ expect(component).toMatchSnapshot(); }); - test('displayOnly is rendered', () => { - const component = render( - - just some text - - ); - - expect(component).toMatchSnapshot(); - }); - - describe('compressed', () => { - test('is rendered', () => { - const component = render( - - - - ); - - expect(component).toMatchSnapshot(); - }); - }); - describe('display type', () => { DISPLAYS.forEach((display) => { test(`${display} is rendered`, () => { From 6152dd38b0b8fd1f8d535e32bf6170275e06ed31 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 13 Oct 2020 10:47:27 -0400 Subject: [PATCH 09/10] linter --- src-docs/src/views/button/button_icon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/button/button_icon.js b/src-docs/src/views/button/button_icon.js index 564ca4ec2c0..7c5ca071acb 100644 --- a/src-docs/src/views/button/button_icon.js +++ b/src-docs/src/views/button/button_icon.js @@ -18,7 +18,7 @@ const colors = [ export default () => ( - {colors.map(color => ( + {colors.map((color) => ( Date: Fri, 16 Oct 2020 11:17:39 -0600 Subject: [PATCH 10/10] changelog --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ce69ef48da0..d66a7a33bc6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,11 @@ - Removed `EuiToggle` and `EuiButtonToggle` in favor of `aria-pressed` ([4056](https://github.com/elastic/eui/pull/4056)) - Updated `legend` and `idSelected` props of `EuiButtonGroup` to be required ([4056](https://github.com/elastic/eui/pull/4056)) +- Removed `logoAPM` in favor of `logoObservability` ([4065](https://github.com/elastic/eui/pull/4065)) +- Removed `.euiHeaderNotification` CSS class ([4065](https://github.com/elastic/eui/pull/4065)) +- Removed `EuiNavDrawer` in favor of `EuiCollapsibleNav` ([4065](https://github.com/elastic/eui/pull/4065)) +- Removed `compressed` and `displayOnly` props from `EuiFormRow` in favor of the `display` prop ([4065](https://github.com/elastic/eui/pull/4065)) +- Removed `EuiPopover`'s `withTitle` prop ([4065](https://github.com/elastic/eui/pull/4065)) **Theme: Amsterdam**