Expand EuiFlyout usage to help EuiCollapsibleNav (#4713)

* Fix when animation happens with docked navs * Conditionally render children of EuiCollapsibleNavGroup * [BREAKING] Width of EuiCollapsibleNav is now add via `style` prop instead of Sass * [EuiFlyout] Extending `size` prop to accept width types - Also does a better job with mobile sizing and not just overtaking the whole screen all the time * [EuiFlyout] Added `side` prop * [EuiFlyout] added `type=push`, `pushBreakpoint` and `outsideClickCloses` props * [EuiFlyout] Added `as` prop * [BREAKING] Update EuiCollapsibleNav to use EuiFlyout * Added `closeButton` and `closeButtonPosition` to EuiFlyout and using ‘outside’ but default in EuiCollabsibleNav * Fixing up EuiCallapsibleNav with docking of EuiFlyout * [Breaking] EuiFlyout defaults to `ownFocus = true` * [EuiFlyout] Wrapping in EuiPortal when `ownFocus=true` * Fixing z-indexes of flyouts compared to header - Basically always wrap in a port (or mask) unless pushed. Then shift the mask below header with `top` instead of z-index. * Fixing visible focus ring on overflowing content like in flyouts * Changing EuiFlyout `tabindex=0` to `-1`
elastic · May 11, 2021 · f44cf94 · f44cf94
1 parent e6e47ad
commit f44cf94
Show file tree

Hide file tree

Showing 39 changed files with 2,091 additions and 1,237 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 - Added `textTransform` property to `schemaDetectors` prop of `EuiDataGrid`([#4752](https://github.com/elastic/eui/pull/4752))
 - Added `color`, `continuityAbove`, `continuityAboveBelow`, `continuityBelow`, `continuityWithin`, `eraser`, `fullScreenExit`, `function`, `percent`, `wordWrap`, and `wordWrapDisabled` glyphs to `EuiIcon` ([#4779](https://github.com/elastic/eui/pull/4779))
+- Added `as`, `role`, `closeButtonProps`, `closeButtonPosition`, `outsideClickCloses`, `side`, `type`, and `pushMinBreakpoint` props to `EuiFlyout` ([#4713](https://github.com/elastic/eui/pull/4713))
+- Extended `EuiFlyout` `size` prop to accept any CSS `width` value ([#4713](https://github.com/elastic/eui/pull/4713))
+- Extended `EuiFlyout` and most of its props in `EuiCollapsibleNav` ([#4713](https://github.com/elastic/eui/pull/4713))
+
+**Breaking changes**
+
+- Changed the default of `EuiFlyout` `ownFocus` to `true` ([#4713](https://github.com/elastic/eui/pull/4713))
+- Wrapped `EuiFlyout` within the `EuiOverlayMask` when `ownFocus=true` ([#4713](https://github.com/elastic/eui/pull/4713))
+- Changed `EuiCollapsibleNav` width sizing from a Sass variable to a `size` prop ([#4713](https://github.com/elastic/eui/pull/4713))
+- Changed `EuiOverlayMask` z-indexing when positioned `below` header to using `top` offset ([#4713](https://github.com/elastic/eui/pull/4713))
 
 **Bug fixes**
 

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -211,7 +211,7 @@ $elasticLogoTextDark: #1C1E23;
   height: 100%;
   left: 0;
   top: 0;
-  z-index: $euiZHeader + 1;
+  z-index: $euiZHeader;
   overflow: auto;
 
   &--withHeader {

diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
@@ -324,7 +324,7 @@ const Knob = ({
             }}
           />
         );
-      } else return null;
+      } else return helpText || null;
 
     case PropTypes.Custom:
       if (custom && custom.use) {
@@ -352,9 +352,9 @@ const Knob = ({
     case PropTypes.Function:
     case PropTypes.Array:
     case PropTypes.Object:
-      return null;
+      return helpText || null;
     default:
-      return assertUnreachable();
+      return helpText || assertUnreachable();
   }
 };
 

diff --git a/src-docs/src/views/accordion/accordion_multiple.js b/src-docs/src/views/accordion/accordion_multiple.js
@@ -45,7 +45,7 @@ export default () => (
       paddingSize="m">
       <EuiText size="s">
         <p>
-          This content area will grow to accomodate when the accordion below
+          This content area will grow to accommodate when the accordion below
           opens
         </p>
       </EuiText>

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav.tsx
@@ -8,16 +8,25 @@ import { EuiText } from '../../../../src/components/text';
 import { EuiCode } from '../../../../src/components/code';
 
 export default () => {
-  const [navIsOpen, setNavIsOpen] = useState(false);
-  const [navIsDocked, setNavIsDocked] = useState(false);
+  const [navIsOpen, setNavIsOpen] = useState<boolean>(
+    JSON.parse(
+      String(localStorage.getItem('euiCollapsibleNavExample--isDocked'))
+    ) || false
+  );
+  const [navIsDocked, setNavIsDocked] = useState<boolean>(
+    JSON.parse(
+      String(localStorage.getItem('euiCollapsibleNavExample--isDocked'))
+    ) || false
+  );
 
   return (
     <>
       <EuiCollapsibleNav
         isOpen={navIsOpen}
         isDocked={navIsDocked}
+        size={240}
         button={
-          <EuiButton onClick={() => setNavIsOpen(!navIsOpen)}>
+          <EuiButton onClick={() => setNavIsOpen((isOpen) => !isOpen)}>
             Toggle nav
           </EuiButton>
         }
@@ -27,9 +36,20 @@ export default () => {
             <h2>I am some nav</h2>
           </EuiTitle>
           <EuiSpacer />
+          <EuiText size="s" color="subdued">
+            <p>
+              The docked status is being stored in{' '}
+              <EuiCode>localStorage</EuiCode>.
+            </p>
+          </EuiText>
+          <EuiSpacer />
           <EuiButton
             onClick={() => {
               setNavIsDocked(!navIsDocked);
+              localStorage.setItem(
+                'euiCollapsibleNavExample--isDocked',
+                JSON.stringify(!navIsDocked)
+              );
             }}>
             Docked: {navIsDocked ? 'on' : 'off'}
           </EuiButton>
@@ -39,8 +59,9 @@ export default () => {
       {navIsDocked && (
         <EuiText size="s" color="subdued">
           <p>
-            The button gets hidden by default when the nav is docked unless you
-            set <EuiCode language="js">showButtonIfDocked = true</EuiCode>.
+            The <EuiCode>button</EuiCode> gets hidden by default when the nav is
+            docked unless you set{' '}
+            <EuiCode language="js">showButtonIfDocked = true</EuiCode>.
           </p>
         </EuiText>
       )}

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -56,11 +56,9 @@ const LearnLinks: EuiPinnableListGroupItemProps[] = [
 ];
 
 export default () => {
-  const [navIsOpen, setNavIsOpen] = useState(
-    JSON.parse(String(localStorage.getItem('navIsDocked'))) || false
-  );
+  const [navIsOpen, setNavIsOpen] = useState(true);
   const [navIsDocked, setNavIsDocked] = useState(
-    JSON.parse(String(localStorage.getItem('navIsDocked'))) || false
+    JSON.parse(String(localStorage.getItem('nav2IsDocked'))) || false
   );
 
   /**
@@ -234,7 +232,7 @@ export default () => {
               onClick={() => {
                 setNavIsDocked(!navIsDocked);
                 localStorage.setItem(
-                  'navIsDocked',
+                  'nav2IsDocked',
                   JSON.stringify(!navIsDocked)
                 );
               }}

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_example.js b/src-docs/src/views/collapsible_nav/collapsible_nav_example.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -11,23 +9,22 @@ import {
   EuiText,
   EuiCallOut,
   EuiCollapsibleNavGroup,
+  EuiHorizontalRule,
 } from '../../../../src/components';
 
+import { collapsibleNavConfig } from './playground';
+
 import CollapsibleNav from './collapsible_nav';
 const collapsibleNavSource = require('!!raw-loader!./collapsible_nav');
-const collapsibleNavHtml = renderToHtml(CollapsibleNav);
 
 import CollapsibleNavGroup from './collapsible_nav_group';
 const collapsibleNavGroupSource = require('!!raw-loader!./collapsible_nav_group');
-const collapsibleNavGroupHtml = renderToHtml(CollapsibleNavGroup);
 
 import CollapsibleNavList from './collapsible_nav_list';
 const collapsibleNavListSource = require('!!raw-loader!./collapsible_nav_list');
-const collapsibleNavListHtml = renderToHtml(CollapsibleNavList);
 
 import CollapsibleNavAll from './collapsible_nav_all';
 const collapsibleNavAllSource = require('!!raw-loader!./collapsible_nav_all');
-const collapsibleNavAllHtml = renderToHtml(CollapsibleNavAll);
 
 export const CollapsibleNavExample = {
   title: 'Collapsible nav',
@@ -46,19 +43,15 @@ export const CollapsibleNavExample = {
           type: GuideSectionTypes.JS,
           code: collapsibleNavSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: collapsibleNavHtml,
-        },
       ],
       text: (
         <>
           <p>
-            <strong>EuiCollapsibleNav</strong> is a similar implementation to{' '}
+            <strong>EuiCollapsibleNav</strong> is a custom implementation of{' '}
             <Link to="/layout/flyout">
               <strong>EuiFlyout</strong>
             </Link>
-            ; the visibility of which must be maintained by the consuming
+            ; the visibility of which must still be maintained by the consuming
             application. An extra feature that it provides is the ability to{' '}
             <EuiCode>dock</EuiCode> the flyout. This affixes the flyout to the
             window and pushes the body content by adding left side padding.
@@ -72,11 +65,13 @@ export const CollapsibleNavExample = {
       props: { EuiCollapsibleNav },
       demo: <CollapsibleNav />,
       snippet: `<EuiCollapsibleNav
+  size={240}
   button={<EuiButton onClick={() => setNavIsOpen(!navIsOpen)}>Toggle nav</EuiButton>}
   isOpen={navIsOpen}
   isDocked={navIsDocked}
   onClose={() => setNavIsOpen(false)}
 />`,
+      playground: collapsibleNavConfig,
     },
     {
       title: 'Collapsible nav group',
@@ -85,10 +80,6 @@ export const CollapsibleNavExample = {
           type: GuideSectionTypes.JS,
           code: collapsibleNavGroupSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: collapsibleNavGroupHtml,
-        },
       ],
       text: (
         <>
@@ -130,10 +121,6 @@ export const CollapsibleNavExample = {
           type: GuideSectionTypes.JS,
           code: collapsibleNavListSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: collapsibleNavListHtml,
-        },
       ],
       text: (
         <>
@@ -152,7 +139,15 @@ export const CollapsibleNavExample = {
           <p>Below are a few established patterns to use.</p>
         </>
       ),
-      demo: <CollapsibleNavList />,
+      demo: (
+        <div>
+          <CollapsibleNavList />
+          <EuiHorizontalRule margin="none" />
+        </div>
+      ),
+      demoPanelProps: {
+        paddingSize: 'none',
+      },
       snippet: `<EuiCollapsibleNavGroup
   title="Kibana"
   iconType="logoKibana"
@@ -179,10 +174,6 @@ export const CollapsibleNavExample = {
           type: GuideSectionTypes.JS,
           code: collapsibleNavAllSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: collapsibleNavAllHtml,
-        },
       ],
       text: (
         <>

diff --git a/src-docs/src/views/collapsible_nav/playground.js b/src-docs/src/views/collapsible_nav/playground.js
@@ -0,0 +1,54 @@
+import { PropTypes } from 'react-view';
+import { EuiCollapsibleNav } from '../../../../src/components/';
+import { propUtilityForPlayground } from '../../services/playground';
+
+export const collapsibleNavConfig = () => {
+  const docgenInfo = Array.isArray(EuiCollapsibleNav.__docgenInfo)
+    ? EuiCollapsibleNav.__docgenInfo[0]
+    : EuiCollapsibleNav.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.isOpen = {
+    ...propsToUse.isOpen,
+    value: true,
+  };
+
+  propsToUse.ownFocus = {
+    ...propsToUse.ownFocus,
+    value: false,
+    disabled: true,
+  };
+
+  propsToUse.size = {
+    ...propsToUse.size,
+    type: PropTypes.Number,
+    value: 240,
+  };
+
+  propsToUse.as = {
+    ...propsToUse.as,
+    type: PropTypes.string,
+    value: 'nav',
+  };
+
+  propsToUse.as = {
+    ...propsToUse.as,
+    type: PropTypes.string,
+    value: 'nav',
+  };
+
+  return {
+    config: {
+      componentName: 'EuiCollapsibleNav',
+      props: propsToUse,
+      scope: {
+        EuiCollapsibleNav,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiCollapsibleNav'],
+        },
+      },
+    },
+  };
+};