Fixes for EuiHeader z-index, EuiPopover buffer, and EuiCollapsibleNav…

… close button props (#3398) * Add body classes when flyouts and nav are open * [EuiCollapsibleNav] Extend the props of the close button * [EuiPopover] Add `buffer` prop to adjust distance between popover and container * [EuiFlyout] i18n `closeButtonArialLabel` default
elastic · Apr 29, 2020 · 42c7ced · 42c7ced
1 parent fd4ee90
commit 42c7ced
Show file tree

Hide file tree

Showing 12 changed files with 298 additions and 130 deletions.
diff --git 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
@@ -1,5 +1,92 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiCollapsibleNav close button can be hidden 1`] = `
+Array [
+  <div />,
+  <div>
+    <div
+      data-focus-guard="true"
+      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      tabindex="0"
+    />
+    <div
+      data-focus-guard="true"
+      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      tabindex="1"
+    />
+    <div
+      data-focus-lock-disabled="false"
+    >
+      <nav
+        class="euiCollapsibleNav"
+        id="id"
+      />
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      tabindex="0"
+    />
+  </div>,
+]
+`;
+
+exports[`EuiCollapsibleNav close button extends EuiButtonEmpty 1`] = `
+Array [
+  <div />,
+  <div>
+    <div
+      data-focus-guard="true"
+      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      tabindex="0"
+    />
+    <div
+      data-focus-guard="true"
+      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      tabindex="1"
+    />
+    <div
+      data-focus-lock-disabled="false"
+    >
+      <nav
+        class="euiCollapsibleNav"
+        id="id"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton class"
+          data-test-subj="test"
+          type="button"
+        >
+          <span
+            class="euiButtonEmpty__content"
+          >
+            <div
+              aria-hidden="true"
+              class="euiButtonEmpty__icon"
+              data-euiicon-type="cross"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              <span
+                class="euiCollapsibleNav__closeButtonLabel"
+              >
+                close
+              </span>
+            </span>
+          </span>
+        </button>
+      </nav>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      tabindex="0"
+    />
+  </div>,
+]
+`;
+
 exports[`EuiCollapsibleNav does not render if isOpen is false 1`] = `null`;
 
 exports[`EuiCollapsibleNav is rendered 1`] = `
@@ -341,34 +428,3 @@ Array [
   </div>,
 ]
 `;
-
-exports[`EuiCollapsibleNav props showCloseButton can be false 1`] = `
-Array [
-  <div />,
-  <div>
-    <div
-      data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-      tabindex="0"
-    />
-    <div
-      data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-      tabindex="1"
-    />
-    <div
-      data-focus-lock-disabled="false"
-    >
-      <nav
-        class="euiCollapsibleNav"
-        id="id"
-      />
-    </div>
-    <div
-      data-focus-guard="true"
-      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-      tabindex="0"
-    />
-  </div>,
-]
-`;
diff --git 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
@@ -71,21 +71,34 @@ describe('EuiCollapsibleNav', () => {
       expect(component).toMatchSnapshot();
     });
 
-    test('showCloseButton can be false', () => {
+    test('showButtonIfDocked', () => {
+      const component = render(
+        <EuiCollapsibleNav
+          {...propsNeededToRender}
+          button={<button />}
+          isDocked={true}
+          showButtonIfDocked={true}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe('close button', () => {
+    test('can be hidden', () => {
       const component = render(
         <EuiCollapsibleNav {...propsNeededToRender} showCloseButton={false} />
       );
 
       expect(component).toMatchSnapshot();
     });
 
-    test('showButtonIfDocked', () => {
+    test('extends EuiButtonEmpty', () => {
       const component = render(
         <EuiCollapsibleNav
           {...propsNeededToRender}
-          button={<button />}
-          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
@@ -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<EuiCollapsibleNavProps> = ({
   showButtonIfDocked = false,
   dockedBreakpoint = 992,
   showCloseButton = true,
+  closeButtonProps,
   onClose,
   id,
   ...rest
@@ -100,13 +105,16 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
 
     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<EuiCollapsibleNavProps> = ({
       onClick={collapse}
       size="xs"
       iconType="cross"
-      className="euiCollapsibleNav__closeButton">
+      {...closeButtonProps}
+      className={classNames(
+        'euiCollapsibleNav__closeButton',
+        closeButtonProps && closeButtonProps.className
+      )}>
       <span className="euiCollapsibleNav__closeButtonLabel">
         <EuiI18n token="euiCollapsibleNav.closeButtonLabel" default="close" />
       </span>

diff --git 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"
     >
       <button
-        aria-label="Closes this dialog"
+        aria-label="Close this dialog"
         class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
@@ -66,7 +66,7 @@ exports[`EuiFlyout max width can be set to a custom number 1`] = `
       tabindex="0"
     >
       <button
-        aria-label="Closes this dialog"
+        aria-label="Close this dialog"
         class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
@@ -109,7 +109,7 @@ exports[`EuiFlyout max width can be set to a custom value and measurement 1`] =
       tabindex="0"
     >
       <button
-        aria-label="Closes this dialog"
+        aria-label="Close this dialog"
         class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
@@ -151,7 +151,7 @@ exports[`EuiFlyout max width can be set to a default 1`] = `
       tabindex="0"
     >
       <button
-        aria-label="Closes this dialog"
+        aria-label="Close this dialog"
         class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
@@ -194,7 +194,7 @@ exports[`EuiFlyout props accepts div props 1`] = `
       tabindex="0"
     >
       <button
-        aria-label="Closes this dialog"
+        aria-label="Close this dialog"
         class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
@@ -265,7 +265,7 @@ exports[`EuiFlyout size l is rendered 1`] = `
       tabindex="0"
     >
       <button
-        aria-label="Closes this dialog"
+        aria-label="Close this dialog"
         class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
@@ -307,7 +307,7 @@ exports[`EuiFlyout size m is rendered 1`] = `
       tabindex="0"
     >
       <button
-        aria-label="Closes this dialog"
+        aria-label="Close this dialog"
         class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
@@ -349,7 +349,7 @@ exports[`EuiFlyout size s is rendered 1`] = `
       tabindex="0"
     >
       <button
-        aria-label="Closes this dialog"
+        aria-label="Close this dialog"
         class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"

diff --git a/src/components/flyout/flyout.test.tsx b/src/components/flyout/flyout.test.tsx
@@ -49,7 +49,7 @@ describe('EuiFlyout', () => {
         const label = component
           .find('[data-test-subj="euiFlyoutCloseButton"]')
           .prop('aria-label');
-        expect(label).toBe('Closes this dialog');
+        expect(label).toBe('Close this dialog');
       });
 
       test('sets a custom label for the close button', () => {