diff --git a/CHANGELOG.md b/CHANGELOG.md index 04c944379e6..bea823e66ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,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** @@ -16,6 +18,7 @@ - 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 `EuiDatePickerRange` start date popover to sit left under the icon ([#3383](https://github.com/elastic/eui/pull/3383)) +- 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/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.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.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 9d159f671dd..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 @@ -100,13 +105,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) { @@ -156,7 +164,11 @@ export const EuiCollapsibleNav: FunctionComponent = ({ onClick={collapse} size="xs" iconType="cross" - className="euiCollapsibleNav__closeButton"> + {...closeButtonProps} + className={classNames( + 'euiCollapsibleNav__closeButton', + closeButtonProps && closeButtonProps.className + )}> 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" >
`; +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;