From ed393a166d277d01ea8abb5241d09c223c2b0853 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 28 Apr 2020 18:53:15 -0400 Subject: [PATCH 1/5] Add body classes when flyouts and nav are open --- .../collapsible_nav/_collapsible_nav.scss | 1 + .../collapsible_nav/collapsible_nav.tsx | 5 +- src/components/flyout/flyout.tsx | 159 +++++++++--------- src/components/header/_header.scss | 8 +- 4 files changed, 90 insertions(+), 83 deletions(-) diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss index 7276a382f84..3dc5fa1c14e 100644 --- a/src/components/collapsible_nav/_collapsible_nav.scss +++ b/src/components/collapsible_nav/_collapsible_nav.scss @@ -21,6 +21,7 @@ // via the `dockingBreakpoint` and `isDocked` combination .euiCollapsibleNav.euiCollapsibleNav--isDocked { @include euiBottomShadowMedium; + z-index: $euiZHeader; // When docked, make it the same level as the header .euiCollapsibleNav__closeButton { display: none; diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx index 9d159f671dd..290321ce1a1 100644 --- a/src/components/collapsible_nav/collapsible_nav.tsx +++ b/src/components/collapsible_nav/collapsible_nav.tsx @@ -100,13 +100,16 @@ export const EuiCollapsibleNav: FunctionComponent = ({ if (navIsDocked) { document.body.classList.add('euiBody--collapsibleNavIsDocked'); + } else if (isOpen) { + document.body.classList.add('euiBody--collapsibleNavIsOpen'); } return () => { document.body.classList.remove('euiBody--collapsibleNavIsDocked'); + document.body.classList.remove('euiBody--collapsibleNavIsOpen'); window.removeEventListener('resize', functionToCallOnWindowResize); }; - }, [navIsDocked, functionToCallOnWindowResize]); + }, [navIsDocked, functionToCallOnWindowResize, isOpen]); const onKeyDown = (event: KeyboardEvent) => { if (event.keyCode === keyCodes.ESCAPE) { diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx index 0b2c7513cfb..79b303b0eed 100644 --- a/src/components/flyout/flyout.tsx +++ b/src/components/flyout/flyout.tsx @@ -18,10 +18,11 @@ */ import React, { - Component, + FunctionComponent, CSSProperties, Fragment, HTMLAttributes, + useEffect, } from 'react'; import classnames from 'classnames'; @@ -72,93 +73,89 @@ export interface EuiFlyoutProps style?: CSSProperties; } -export class EuiFlyout extends Component { - static defaultProps: Partial = { - size: 'm', - hideCloseButton: false, - ownFocus: false, - closeButtonAriaLabel: 'Closes this dialog', - maxWidth: false, - }; - - onKeyDown = (event: KeyboardEvent) => { +export const EuiFlyout: FunctionComponent = ({ + className, + children, + hideCloseButton = false, + onClose, + ownFocus = false, + size = 'm', + closeButtonAriaLabel = 'Closes this dialog', + maxWidth = false, + style, + ...rest +}) => { + const onKeyDown = (event: KeyboardEvent) => { if (event.keyCode === keyCodes.ESCAPE) { event.preventDefault(); - this.props.onClose(); + onClose(); } }; - render() { - const { - className, - children, - hideCloseButton, - onClose, - ownFocus, - size, - closeButtonAriaLabel, - maxWidth, - style, - ...rest - } = this.props; - - let newStyle; - let widthClassName; - if (maxWidth === true) { - widthClassName = 'euiFlyout--maxWidth-default'; - } else if (maxWidth !== false) { - const value = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth; - newStyle = { ...style, maxWidth: value }; - } - - const classes = classnames( - 'euiFlyout', - sizeToClassNameMap[size!], - widthClassName, - className - ); - - let closeButton; - if (onClose && !hideCloseButton) { - closeButton = ( - - ); - } + useEffect(() => { + document.body.classList.add('euiBody--hasFlyout'); + + return () => { + document.body.classList.remove('euiBody--hasFlyout'); + }; + }); + + let newStyle; + let widthClassName; + if (maxWidth === true) { + widthClassName = 'euiFlyout--maxWidth-default'; + } else if (maxWidth !== false) { + const value = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth; + newStyle = { ...style, maxWidth: value }; + } - const flyoutContent = ( -
- {closeButton} - {children} -
+ const classes = classnames( + 'euiFlyout', + sizeToClassNameMap[size!], + widthClassName, + className + ); + + let closeButton; + if (onClose && !hideCloseButton) { + closeButton = ( + ); + } - // If ownFocus is set, show an overlay behind the flyout and allow the user - // to click it to close it. - let optionalOverlay; - if (ownFocus) { - optionalOverlay = ; - } + const flyoutContent = ( +
+ {closeButton} + {children} +
+ ); + + // If ownFocus is set, show an overlay behind the flyout and allow the user + // to click it to close it. + let optionalOverlay; + if (ownFocus) { + optionalOverlay = ; + } - return ( - - - {optionalOverlay} - {/* Trap focus even when ownFocus={false}, otherwise closing the flyout won't return focus + return ( + + + {optionalOverlay} + {/* Trap focus even when ownFocus={false}, otherwise closing the flyout won't return focus to the originating button */} - {flyoutContent} - - ); - } -} + {flyoutContent} + + ); +}; diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index c1afcccd929..fa305dcc819 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -15,10 +15,16 @@ top: 0; left: 0; right: 0; - z-index: $euiZLevel7; } } .euiBody--headerIsFixed { padding-top: $euiHeaderHeightCompensation; } + +.euiBody--collapsibleNavIsOpen, +.euiBody--hasFlyout { + .euiHeader--fixed { + z-index: $euiZMask + 1; + } +} From 52e1775cc6b851fcb878d58b03cae640672ee0c3 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 28 Apr 2020 19:00:02 -0400 Subject: [PATCH 2/5] [EuiCollapsibleNav] Extend the props of the close button --- .../collapsible_nav.test.tsx.snap | 118 +++++++++++++----- .../collapsible_nav/collapsible_nav.test.tsx | 23 +++- .../collapsible_nav/collapsible_nav.tsx | 13 +- 3 files changed, 116 insertions(+), 38 deletions(-) diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap index dc3eae1d21b..6c316f413c5 100644 --- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap +++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap @@ -1,5 +1,92 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`EuiCollapsibleNav close button can be hidden 1`] = ` +Array [ +
, +
+
+
+
+
+
+
, +] +`; + +exports[`EuiCollapsibleNav close button extends EuiButtonEmpty 1`] = ` +Array [ +
, +
+
+
+
+ +
+
+
, +] +`; + exports[`EuiCollapsibleNav does not render if isOpen is false 1`] = `null`; exports[`EuiCollapsibleNav is rendered 1`] = ` @@ -341,34 +428,3 @@ Array [
, ] `; - -exports[`EuiCollapsibleNav props showCloseButton can be false 1`] = ` -Array [ -
, -
-
-
-
-
-
-
, -] -`; diff --git a/src/components/collapsible_nav/collapsible_nav.test.tsx b/src/components/collapsible_nav/collapsible_nav.test.tsx index 87131064594..92f7a8564e7 100644 --- a/src/components/collapsible_nav/collapsible_nav.test.tsx +++ b/src/components/collapsible_nav/collapsible_nav.test.tsx @@ -71,7 +71,22 @@ describe('EuiCollapsibleNav', () => { expect(component).toMatchSnapshot(); }); - test('showCloseButton can be false', () => { + test('showButtonIfDocked', () => { + const component = render( + } + isDocked={true} + showButtonIfDocked={true} + /> + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('close button', () => { + test('can be hidden', () => { const component = render( ); @@ -79,13 +94,11 @@ describe('EuiCollapsibleNav', () => { expect(component).toMatchSnapshot(); }); - test('showButtonIfDocked', () => { + test('extends EuiButtonEmpty', () => { const component = render( } - isDocked={true} - showButtonIfDocked={true} + closeButtonProps={{ className: 'class', 'data-test-subj': 'test' }} /> ); diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx index 290321ce1a1..c2b59eca9c7 100644 --- a/src/components/collapsible_nav/collapsible_nav.tsx +++ b/src/components/collapsible_nav/collapsible_nav.tsx @@ -32,7 +32,7 @@ import { EuiWindowEvent, keyCodes, htmlIdGenerator } from '../../services'; import { EuiFocusTrap } from '../focus_trap'; import { EuiOverlayMask } from '../overlay_mask'; import { CommonProps } from '../common'; -import { EuiButtonEmpty } from '../button'; +import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button'; import { EuiI18n } from '../i18n'; export type EuiCollapsibleNavProps = CommonProps & @@ -63,6 +63,10 @@ export type EuiCollapsibleNavProps = CommonProps & * If `false`, you must then keep the `button` displayed at all breakpoints. */ showCloseButton?: boolean; + /** + * Extend the props of the close button, an EuiButtonEmpty + */ + closeButtonProps?: EuiButtonEmptyProps; onClose?: () => void; }; @@ -75,6 +79,7 @@ export const EuiCollapsibleNav: FunctionComponent = ({ showButtonIfDocked = false, dockedBreakpoint = 992, showCloseButton = true, + closeButtonProps, onClose, id, ...rest @@ -159,7 +164,11 @@ export const EuiCollapsibleNav: FunctionComponent = ({ onClick={collapse} size="xs" iconType="cross" - className="euiCollapsibleNav__closeButton"> + {...closeButtonProps} + className={classNames( + 'euiCollapsibleNav__closeButton', + closeButtonProps && closeButtonProps.className + )}> From c3d212f7564225227d2563d2b446016476b8adb1 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 28 Apr 2020 19:18:53 -0400 Subject: [PATCH 3/5] [EuiPopover] Add `buffer` prop to adjust distance between popover and container --- .../__snapshots__/popover.test.tsx.snap | 50 +++++++++++++++++++ src/components/popover/popover.test.tsx | 16 ++++++ src/components/popover/popover.tsx | 8 +++ 3 files changed, 74 insertions(+) diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap index bd2718c587d..02400453a83 100644 --- a/src/components/popover/__snapshots__/popover.test.tsx.snap +++ b/src/components/popover/__snapshots__/popover.test.tsx.snap @@ -132,6 +132,56 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
`; +exports[`EuiPopover props buffer 1`] = ` +
+
+
+
+
+
+
+
+ +
+`; + exports[`EuiPopover props display block is rendered 1`] = `
{ expect(component.render()).toMatchSnapshot(); }); }); + + test('buffer', () => { + const component = mount( +
+ } + closePopover={() => {}} + buffer={0} + isOpen + /> +
+ ); + + expect(component.render()).toMatchSnapshot(); + }); }); describe('listener cleanup', () => { diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index 5254b7f6e63..191027128ea 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -147,6 +147,12 @@ export interface EuiPopoverProps { */ offset?: number; + /** + * Minimum distance between the popover and the bounding container. + * Default is 16 + */ + buffer?: number; + /** * Element to pass as the child element of the arrow. Use case is typically limited to an accompanying `EuiBeacon` */ @@ -520,6 +526,7 @@ export class EuiPopover extends Component { arrowBuffer: 10, }, returnBoundingBox: this.props.attachToAnchor, + buffer: this.props.buffer, }); // the popover's z-index must inherit from the button @@ -613,6 +620,7 @@ export class EuiPopover extends Component { attachToAnchor, display, onTrapDeactivation, + buffer, ...rest } = this.props; From 44b798abbd25699c6f697bf29b8fb6a64feb46ff Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 28 Apr 2020 21:31:02 -0400 Subject: [PATCH 4/5] cl --- CHANGELOG.md | 3 +++ src/components/header/_header.scss | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 438a74f5479..5d120d34804 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,8 @@ - Added `titleSize` prop to `EuiStep` and `EuiSteps` ([#3340](https://github.com/elastic/eui/pull/3340)) - Handled `ref` passed to `EuiHeaderSectionItemButton` ([#3378](https://github.com/elastic/eui/pull/3378)) - Added `iconProps` prop to `EuiCollapsibleNavGroup` to extend the props passed to the rendered `EuiIcon` ([#3365](https://github.com/elastic/eui/pull/3365)) +- Added `closeButtonProps` to `EuiCollapsibleNav` ([#3398](https://github.com/elastic/eui/pull/3398)) +- Added `buffer` prop to `EuiPopover` for altering minimum distance to container edges ([#3398](https://github.com/elastic/eui/pull/3398)) **Bug Fixes** @@ -14,6 +16,7 @@ - Applies `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers ([#3375](https://github.com/elastic/eui/pull/3375)) - Added `ReactElement` to `EuiCard` `image` prop type to allow custom component ([#3370](https://github.com/elastic/eui/pull/3370)) - Fixed `EuiCollapsibleNavGroup` `titleSize` prop type to properly exclude `l` and `m` sizes ([#3365](https://github.com/elastic/eui/pull/3365)) +- Fixed `EuiHeader` `z-index` issues with popovers and added body classes for the presence of `EuiFlyout` and `EuiCollapsibleNav.isOpen` ([#3398](https://github.com/elastic/eui/pull/3398)) ## [`23.1.0`](https://github.com/elastic/eui/tree/v23.1.0) diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index fa305dcc819..91f6c617e6f 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -25,6 +25,6 @@ .euiBody--collapsibleNavIsOpen, .euiBody--hasFlyout { .euiHeader--fixed { - z-index: $euiZMask + 1; + z-index: $euiZModal + 1; } } From 5114373c9c6cd733bf50ebb034d670c8040059e4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 29 Apr 2020 09:53:26 -0400 Subject: [PATCH 5/5] [EuiFlyout] i18n `closeButtonArialLabel` default --- .../flyout/__snapshots__/flyout.test.tsx.snap | 16 ++++++------- src/components/flyout/flyout.test.tsx | 2 +- src/components/flyout/flyout.tsx | 24 ++++++++++++------- 3 files changed, 24 insertions(+), 18 deletions(-) diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap index 047a7510a83..1744e4a6802 100644 --- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap +++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap @@ -23,7 +23,7 @@ exports[`EuiFlyout is rendered 1`] = ` tabindex="0" >