[Feature Branch] EuiCollapsibleNav

CHANGELOG.md

@@ -1,18 +1,35 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+### Feature: EuiCollapsibleNav ([#3019](https://github.com/elastic/eui/pull/3019))
+
+- Added `EuiCollapsibleNav` and `EuiCollapsibleNavGroup` components
+- Added `EuiPinnableListGroup`, an extension of `EuiListGroup`
+- Added `ghost` colored `EuiListGroupItem`, increased overall large size, and fixed focus states
+- Added `color` and `size` props to `EuiListGroup`
+- Added `home` and `menu` glyphs to `EuiIcon`
+- Added simple `euiXScroll` and `euiYScroll` SASS mixins and CSS utility equivelants
+
+**Bug Fixes**
+
+- Fixed `EuiAccordion` icon margins, focus state, and flex issue in IE
+- Fixed `1.1px` height of  `EuiHorizontalRule`
+
+### Extraneous to feature
+
 - Improved `EuiModal` close button position to prevent from overlapping with the title ([#3176](https://github.com/elastic/eui/pull/3176))
 
 **Bug Fixes**
 
 - Fixed EuiBasicTable proptypes of itemId ([#3133](https://github.com/elastic/eui/pull/3133))
 - Updated `EuiSuperDatePicker` to inherit the selected value in quick select ([#3105](https://github.com/elastic/eui/pull/3105))
 
+
 ## [`22.1.0`](https://github.com/elastic/eui/tree/v22.1.0)
 
 - Added `delimiter` prop to `EuiComboBox` ([#3104](https://github.com/elastic/eui/pull/3104))
 - Added `useColorPickerState` and `useColorStopsState` utilities ([#3067](https://github.com/elastic/eui/pull/3067))
 - Fixed `EuiSearchBar` related types ([#3147](https://github.com/elastic/eui/pull/3147))
-- Added `prepend` and `append` ability to `EuiSuperSelect` ([#3167](https://github.com/elastic/eui/pull/3167)) 
+- Added `prepend` and `append` ability to `EuiSuperSelect` ([#3167](https://github.com/elastic/eui/pull/3167))
 
 ## [`22.0.0`](https://github.com/elastic/eui/tree/v22.0.0)
 

scripts/a11y-testing.js

@@ -19,6 +19,7 @@ const docsPages = async (root, page) => {
     `${root}#/layout/spacer`,
     `${root}#/navigation/breadcrumbs`,
     `${root}#/navigation/context-menu`,
+    `${root}#/navigation/collapsible-nav`,
     `${root}#/navigation/control-bar`,
     `${root}#/navigation/facet`,
     `${root}#/navigation/link`,

src-docs/src/components/guide_components.scss

@@ -5,6 +5,10 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 
 .guideBody {
   background: linear-gradient(90deg, $euiPageBackgroundColor 50%, $euiColorEmptyShade 50%);
+
+  &--overflowHidden {
+    overflow: hidden;
+  }
 }
 
 .guidePage {
@@ -182,6 +186,14 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   height: 1px;
 }
 
+.guideFullScreenOverlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
 @import '../views/guidelines/index';
 @import 'guide_section/index';
 @import 'guide_rule/index';

src-docs/src/routes.js

@@ -63,6 +63,8 @@ import { CodeEditorExample } from './views/code_editor/code_editor_example';
 
 import { CodeExample } from './views/code/code_example';
 
+import { CollapsibleNavExample } from './views/collapsible_nav/collapsible_nav_example';
+
 import { ColorPickerExample } from './views/color_picker/color_picker_example';
 
 import { ComboBoxExample } from './views/combo_box/combo_box_example';
@@ -321,6 +323,7 @@ const navigation = [
     items: [
       BreadcrumbsExample,
       ButtonExample,
+      CollapsibleNavExample,
       ContextMenuExample,
       ControlBarExample,
       FacetExample,

src-docs/src/services/full_screen/full_screen.tsx

@@ -0,0 +1,43 @@
+import React, {
+  useState,
+  Fragment,
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+  useEffect,
+} from 'react';
+
+import { EuiFocusTrap } from '../../../../src/components/focus_trap';
+import { EuiButton } from '../../../../src/components/button';
+
+export const GuideFullScreen: FunctionComponent<{
+  children: (setFullScreen: (isFullScreen: boolean) => void) => ReactElement;
+  buttonText?: ReactNode;
+  isFullScreen?: boolean;
+}> = ({
+  children,
+  isFullScreen = false,
+  buttonText = 'Show fullscreen demo',
+}) => {
+  const [fullScreen, setFullScreen] = useState(isFullScreen);
+
+  // Watch for fullScreen status and appropriately add/remove body classes for hiding scroll
+  useEffect(() => {
+    if (fullScreen) {
+      document.body.classList.add('guideBody--overflowHidden');
+    }
+    return () => {
+      document.body.classList.remove('guideBody--overflowHidden');
+    };
+  }, [fullScreen]);
+
+  return (
+    <Fragment>
+      <EuiButton onClick={() => setFullScreen(true)} iconType="fullScreen">
+        {buttonText}
+      </EuiButton>
+
+      {fullScreen && <EuiFocusTrap>{children(setFullScreen)}</EuiFocusTrap>}
+    </Fragment>
+  );
+};

src-docs/src/views/collapsible_nav/collapsible_nav.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+
+import { EuiCollapsibleNav } from '../../../../src/components/collapsible_nav';
+import { EuiButton, EuiButtonToggle } from '../../../../src/components/button';
+import { EuiTitle } from '../../../../src/components/title';
+import { EuiSpacer } from '../../../../src/components/spacer';
+import { EuiText } from '../../../../src/components/text';
+import { EuiCode } from '../../../../src/components/code';
+
+export default () => {
+  const [navIsOpen, setNavIsOpen] = useState(false);
+  const [navIsDocked, setNavIsDocked] = useState(false);
+
+  return (
+    <>
+      <EuiCollapsibleNav
+        isOpen={navIsOpen}
+        button={
+          <EuiButton onClick={() => setNavIsOpen(!navIsOpen)}>
+            Toggle nav
+          </EuiButton>
+        }
+        isDocked={navIsDocked}
+        onClose={() => setNavIsOpen(false)}>
+        <div style={{ padding: 16 }}>
+          <EuiTitle>
+            <h2>I am some nav</h2>
+          </EuiTitle>
+          <EuiSpacer />
+          <EuiButtonToggle
+            label={`Docked: ${navIsDocked ? 'on' : 'off'}`}
+            fill={navIsDocked}
+            onChange={() => {
+              setNavIsDocked(!navIsDocked);
+            }}
+          />
+        </div>
+      </EuiCollapsibleNav>
+
+      {navIsDocked && (
+        <EuiText size="s" color="subdued">
+          <p>
+            The button gets hidden by default when nav is docked unless you set{' '}
+            <EuiCode language="js">hideButtonIfDocked = false</EuiCode>.
+          </p>
+        </EuiText>
+      )}
+    </>
+  );
+};