setNavIsOpen(!navIsOpen)}>Toggle nav}
+ isOpen={navIsOpen}
+ isDocked={navIsDocked}
+ onClose={() => setNavIsOpen(false)}
+/>`,
+ },
+ {
+ title: 'Collapsible nav group',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: collapsibleNavGroupSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: collapsibleNavGroupHtml,
+ },
+ ],
+ text: (
+ <>
+
+ An EuiCollapsibleNavGroup adds some basic borders
+ and background color of none ,{' '}
+ light , or dark . Give each
+ section a heading by providing an optional title {' '}
+ and iconType . Make the section collapsible (
+ isCollapsible=true .
+
+
+ When in isCollapsible mode, a{' '}
+ title and{' '}
+ initialIsOpen:boolean is required.
+
+
+ ),
+ props: {
+ EuiCollapsibleNavGroup,
+ },
+ demo:
+ EuiCollapsibleNavGroups can contain any children.
+ They work well with{' '}
+ EuiListGroup, EuiPinnableListGroup
+ {' '}
+ and simple{' '}
+ EuiText
+
+ .
+
+ Below are a few established patterns to use.
+
+ ),
+ demo:
+ {}}
+ maxWidth="none"
+ color="subdued"
+ gutterSize="none"
+ size="s"
+ />
+ `,
+ },
+ {
+ title: 'Full pattern with header and saved pins',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: collapsibleNavAllSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: collapsibleNavAllHtml,
+ },
+ ],
+ text: (
+ <>
+ Putting it all together
+
+ The button below will launch a full screen example that includes{' '}
+ EuiHeader
+ {' '}
+ with a toggle button to open an EuiCollapsibleNav .
+ The contents of which are multiple{' '}
+ EuiCollapsibleNavGroups and saves the
+ open/closed/pinned state for each section and item in local store.
+
+
+ This is just a pattern and should be treated as such. Consuming
+ applications will need to create the navigation groups according to
+ their context and save the states as is appropriate to their data
+ store.
+
+
+ ),
+ demo:
+
+ This is a basic group without any modifications
+
+
+
+
+
+ This is a nice group with a heading supplied via{' '}
+ title and iconType .
+
+
+
+
+
+
+ This group is collapsible and set with{' '}
+ initialIsOpen . It has a heading that is the
+ collapsing button via title and{' '}
+ iconType .
+
+
+
+
+
+
+ This is a dark collapsible group
+ that is initally set to closed,{' '}
+ iconSize="xxl" and{' '}
+ titleSize="s" .
+
+
+
+
+);
diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
new file mode 100644
index 00000000000..c64b3661cf3
--- /dev/null
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+
+import { EuiCollapsibleNavGroup } from '../../../../src/components/collapsible_nav';
+import { EuiText } from '../../../../src/components/text';
+import {
+ EuiListGroup,
+ EuiListGroupProps,
+ EuiPinnableListGroup,
+ EuiPinnableListGroupItemProps,
+} from '../../../../src/components/list_group';
+import { EuiSpacer } from '../../../../src/components/spacer';
+import { EuiButton, EuiButtonIcon } from '../../../../src/components/button';
+import { EuiLink } from '../../../../src/components/link';
+
+const deploymentsList: EuiListGroupProps['listItems'] = [
+ {
+ label: 'combining-binaries',
+ iconType: 'logoAzureMono',
+ size: 's',
+ },
+ {
+ label: 'stack-monitoring',
+ iconType: 'logoAWSMono',
+ size: 's',
+ },
+];
+
+export const TopNavLinks: EuiPinnableListGroupItemProps[] = [
+ {
+ label: 'Home',
+ iconType: 'home',
+ isActive: true,
+ pinnable: false,
+ },
+ { label: 'Dashboards', pinned: true },
+ { label: 'Dev tools', pinned: true },
+ { label: 'Maps', pinned: true },
+];
+
+export const KibanaNavLinks: EuiPinnableListGroupItemProps[] = [
+ { label: 'Discover' },
+ { label: 'Visualize' },
+ { label: 'Dashboards' },
+ { label: 'Canvas' },
+ { label: 'Maps' },
+ { label: 'Machine Learning' },
+ { label: 'Graph' },
+];
+
+export const DeploymentsGroup = (
+
+ Deployment personal-databoard
+
+ }
+ iconType="logoGCPMono"
+ iconSize="xl"
+ isCollapsible={true}
+ initialIsOpen={false}
+ background="dark">
+
+
+ Manage deployments
+
+
+
+);
+
+export const SecurityGroup = (
+
+
+ Threat prevention, detection, and response with SIEM and endpoint
+ security.
+ Learn more
+
+
+
+);
+
+export default () => (
+ <>
+ {DeploymentsGroup}
+
+ {}}
+ maxWidth="none"
+ color="text"
+ gutterSize="none"
+ size="s"
+ />
+
+
+ {}}
+ maxWidth="none"
+ color="subdued"
+ gutterSize="none"
+ size="s"
+ />
+
+ {SecurityGroup}
+
+);
diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js
index 9b3fb3853f8..d8f76852a32 100644
--- a/src-docs/src/views/icon/icons.js
+++ b/src-docs/src/views/icon/icons.js
@@ -94,6 +94,7 @@ export const iconTypes = [
'heart',
'heatmap',
'help',
+ 'home',
'iInCircle',
'image',
'importAction',
@@ -129,6 +130,7 @@ export const iconTypes = [
'mapMarker',
'memory',
'merge',
+ 'menu',
'menuLeft',
'menuRight',
'minimize',
diff --git a/src-docs/src/views/list_group/list_group_example.js b/src-docs/src/views/list_group/list_group_example.js
index 7e704b16cfc..bf2aa4cd593 100644
--- a/src-docs/src/views/list_group/list_group_example.js
+++ b/src-docs/src/views/list_group/list_group_example.js
@@ -1,4 +1,5 @@
import React from 'react';
+import { Link } from 'react-router';
import { renderToHtml } from '../../services';
@@ -7,8 +8,10 @@ import { GuideSectionTypes } from '../../components';
import {
EuiListGroup,
EuiListGroupItem,
+ EuiPinnableListGroup,
EuiCode,
} from '../../../../src/components';
+import { EuiPinnableListGroupItem } from './props';
import ListGroup from './list_group';
const listGroupSource = require('!!raw-loader!./list_group');
@@ -30,6 +33,10 @@ import ListGroupItemColor from './list_group_item_color';
const listGroupItemColorSource = require('!!raw-loader!./list_group_item_color');
const listGroupItemColorHtml = renderToHtml(ListGroupItemColor);
+import PinnableListGroup from './pinnable_list_group';
+const pinnableListGroupSource = require('!!raw-loader!./pinnable_list_group');
+const pinnableListGroupHtml = renderToHtml(PinnableListGroup);
+
export const ListGroupExample = {
title: 'List group',
sections: [
@@ -191,7 +198,8 @@ export const ListGroupExample = {
anchor , or span . You can
enforce a different color of primary ,{' '}
text , or subdued with the{' '}
- color prop.
+ color prop. Or provide the prop directly to{' '}
+ EuiListGroup .
They also accept options for text size;{' '}
@@ -204,6 +212,58 @@ export const ListGroupExample = {
label="Primary"
color="primary"
size="s"
+/>`,
+ },
+ {
+ title: 'Pinnable list group',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: pinnableListGroupSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: pinnableListGroupHtml,
+ },
+ ],
+ text: (
+ <>
+
+ EuiPinnableListGroup is simply an extra wrapper
+ around an{' '}
+ EuiListGroup
+ {' '}
+ that provides visual indicators for pinning .
+
+
+ Pinning is the concept that users can click a pin icon and add it to
+ a subset of links (most likely shown in different list group). By
+ providing an onPinClick handler, the component
+ will automatically add the pin action to the item. However, the
+ consuming application must manage the listItem s
+ and their pinned state.
+
+
+ In order to get the full benefit of using{' '}
+ EuiPinnableListGroup , the component only supports
+ providing list items via the listItem prop and
+ does not support children .
+
+
+ ),
+ props: { EuiPinnableListGroup, EuiPinnableListGroupItem },
+ demo: {}}
+ listItems={[
+ {
+ label: 'A link',
+ href: '#',
+ pinned: true,
+ isActive: true,
+ },
+ ]}
/>`,
},
],
diff --git a/src-docs/src/views/list_group/list_group_item_color.tsx b/src-docs/src/views/list_group/list_group_item_color.tsx
index 883bd524338..46c58e3d680 100644
--- a/src-docs/src/views/list_group/list_group_item_color.tsx
+++ b/src-docs/src/views/list_group/list_group_item_color.tsx
@@ -4,20 +4,29 @@ import {
EuiListGroupItem,
EuiListGroup,
} from '../../../../src/components/list_group';
+import { EuiSpacer } from '../../../../src/components/spacer';
export default () => (
-
-
+ {}}
- label="Primary (s)"
- color="primary"
- size="s"
- />
+ {}}
+ label="Primary (s)"
+ color="primary"
+ size="s"
+ />
-
+
+
+
+
+
);
diff --git a/src-docs/src/views/list_group/list_group_link_actions.js b/src-docs/src/views/list_group/list_group_link_actions.js
index e3e31b1df89..ec6edf64304 100644
--- a/src-docs/src/views/list_group/list_group_link_actions.js
+++ b/src-docs/src/views/list_group/list_group_link_actions.js
@@ -68,7 +68,7 @@ export default class extends Component {
extraAction={{
color: 'subdued',
onClick: this.link1Clicked,
- iconType: favorite1 === 'link1' ? 'pinFilled' : 'pin',
+ iconType: favorite1 === 'link1' ? 'starFilled' : 'starEmpty',
iconSize: 's',
'aria-label': 'Favorite link1',
alwaysShow: favorite1 === 'link1',
@@ -83,7 +83,7 @@ export default class extends Component {
extraAction={{
color: 'subdued',
onClick: this.link2Clicked,
- iconType: favorite2 === 'link2' ? 'pinFilled' : 'pin',
+ iconType: favorite2 === 'link2' ? 'starFilled' : 'starEmpty',
iconSize: 's',
'aria-label': 'Favorite link2',
alwaysShow: favorite2 === 'link2',
@@ -98,7 +98,7 @@ export default class extends Component {
extraAction={{
color: 'subdued',
onClick: this.link3Clicked,
- iconType: favorite3 === 'link3' ? 'pinFilled' : 'pin',
+ iconType: favorite3 === 'link3' ? 'starFilled' : 'starEmpty',
iconSize: 's',
'aria-label': 'Favorite link3',
alwaysShow: favorite3 === 'link3',
@@ -114,7 +114,7 @@ export default class extends Component {
extraAction={{
color: 'subdued',
onClick: () => window.alert('Action clicked'),
- iconType: 'pin',
+ iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Favorite link4',
}}
diff --git a/src-docs/src/views/list_group/pinnable_list_group.tsx b/src-docs/src/views/list_group/pinnable_list_group.tsx
new file mode 100644
index 00000000000..4716de39ef8
--- /dev/null
+++ b/src-docs/src/views/list_group/pinnable_list_group.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import {
+ EuiPinnableListGroup,
+ EuiPinnableListGroupItemProps,
+} from '../../../../src/components/list_group';
+
+const someListItems: EuiPinnableListGroupItemProps[] = [
+ {
+ label: 'Label with iconType',
+ iconType: 'stop',
+ },
+ {
+ label: 'Pinned button with onClick',
+ pinned: true,
+ onClick: e => {
+ console.log('Pinned button clicked', e);
+ },
+ },
+ {
+ label: 'Link with href and custom pin titles',
+ href: '/#',
+ },
+ {
+ label: 'Active link',
+ isActive: true,
+ href: '/#',
+ },
+ {
+ label: 'Custom extra actions will override pinning ability',
+ extraAction: {
+ iconType: 'bell',
+ alwaysShow: true,
+ 'aria-label': 'bell',
+ },
+ },
+ {
+ label: 'Item with pinnability turned off',
+ pinnable: false,
+ },
+];
+
+export default () => (
+ <>
+ {
+ console.warn('Clicked: ', item);
+ }}
+ maxWidth="none"
+ pinTitle={(item: EuiPinnableListGroupItemProps) => `Pin ${item.label}`}
+ unpinTitle={(item: EuiPinnableListGroupItemProps) =>
+ `Unpin ${item.label}`
+ }
+ />
+
+);
diff --git a/src-docs/src/views/list_group/props.tsx b/src-docs/src/views/list_group/props.tsx
new file mode 100644
index 00000000000..c131a02172c
--- /dev/null
+++ b/src-docs/src/views/list_group/props.tsx
@@ -0,0 +1,7 @@
+import React, { FunctionComponent } from 'react';
+
+import { EuiPinnableListGroupItemProps } from '../../../../src/components/list_group';
+
+export const EuiPinnableListGroupItem: FunctionComponent<
+ EuiPinnableListGroupItemProps
+> = () =>
;
diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index 4f49249582f..d34f5210c31 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -35,7 +35,9 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
/>
-
-
-
-
-
-
+
Button content
@@ -306,7 +318,7 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
/>
-
-
{icon}
-
{buttonContent}
+
+ {buttonContent}
+
{optionalAction}
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
new file mode 100644
index 00000000000..9c6136cdc25
--- /dev/null
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCollapsibleNav is rendered 1`] = `null`;
+
+exports[`EuiCollapsibleNav props button 1`] = `
+
+`;
+
+exports[`EuiCollapsibleNav props hideButtonIfDocked 1`] = `
+
+`;
+
+exports[`EuiCollapsibleNav props isDocked 1`] = `
+
+
+
+
+
+
+
+
+
+ close
+
+
+
+
+
+
+
+`;
+
+exports[`EuiCollapsibleNav props isOpen 1`] = `
+Array [
+
,
+
+
+
+
+
+
+
+
+
+ close
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`EuiCollapsibleNav props onClose 1`] = `null`;
diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
new file mode 100644
index 00000000000..f15d58a6b49
--- /dev/null
+++ b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -0,0 +1,57 @@
+// Extends euiFlyout
+@use '../flyout/flyout';
+
+.euiCollapsibleNav {
+ @extend %eui-flyout;
+ right: auto;
+ left: 0;
+ width: $euiCollapsibleNavWidth;
+ max-width: 80vw;
+
+ &:not(.euiCollapsibleNav--isDocked) {
+ animation: euiCollapsibleNavIn $euiAnimSpeedNormal $euiAnimSlightResistance;
+ }
+}
+
+.euiCollapsibleNav__closeButton {
+ position: absolute;
+ right: 0;
+ top: $euiSize;
+ margin-right: -25%;
+}
+
+@include euiBreakpoint('l', 'xl') {
+ // The addition of this class is handled through JS as well
+ // but adding under the breakpoint mixin is an additional fail-safe
+ .euiCollapsibleNav.euiCollapsibleNav--isDocked {
+ @include euiBottomShadowMedium;
+
+ .euiCollapsibleNav__closeButton {
+ display: none;
+ }
+ }
+
+ .euiCollapsibleNav__toggle--navIsDocked {
+ display: none;
+ }
+
+ .euiBody--collapsibleNavIsDocked {
+ // Shrink the content from the left so it's no longer overlapped by the nav drawer (ALWAYS)
+ padding-left: $euiCollapsibleNavWidth !important; // sass-lint:disable-line no-important
+ transition: padding $euiAnimSpeedFast $euiAnimSlightResistance;
+ }
+}
+
+// Specific keyframes so in comes in from the left
+@keyframes euiCollapsibleNavIn {
+ 0% {
+ opacity: 0;
+ transform: translateX(-100%);
+ }
+
+ 75% {
+ opacity: 1;
+ transform: translateX(0%);
+ }
+}
+
diff --git a/src/components/collapsible_nav/_index.scss b/src/components/collapsible_nav/_index.scss
new file mode 100644
index 00000000000..a31c44be949
--- /dev/null
+++ b/src/components/collapsible_nav/_index.scss
@@ -0,0 +1,4 @@
+@import 'variables';
+
+@import 'collapsible_nav';
+@import 'collapsible_nav_group/index';
diff --git a/src/components/collapsible_nav/_variables.scss b/src/components/collapsible_nav/_variables.scss
new file mode 100644
index 00000000000..f883cd5f8a2
--- /dev/null
+++ b/src/components/collapsible_nav/_variables.scss
@@ -0,0 +1,14 @@
+// Sizing
+$euiCollapsibleNavWidth: $euiSize * 20; // ~ 320px
+
+$euiCollapsibleNavGroupLightBackgroundColor: $euiPageBackgroundColor;
+
+$euiCollapsibleNavGroupDarkBackgroundColor: lightOrDarkTheme(
+ shade($euiColorDarkestShade, 20%),
+ shade($euiColorLightestShade, 50%),
+);
+
+$euiCollapsibleNavGroupDarkHighContrastColor: makeGraphicContrastColor(
+ $euiColorPrimary,
+ $euiCollapsibleNavGroupDarkBackgroundColor
+);
diff --git a/src/components/collapsible_nav/collapsible_nav.test.tsx b/src/components/collapsible_nav/collapsible_nav.test.tsx
new file mode 100644
index 00000000000..e2cd94f2348
--- /dev/null
+++ b/src/components/collapsible_nav/collapsible_nav.test.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiCollapsibleNav } from './collapsible_nav';
+
+jest.mock('../overlay_mask', () => ({
+ EuiOverlayMask: (props: any) =>
,
+}));
+
+describe('EuiCollapsibleNav', () => {
+ test('is rendered', () => {
+ const component = render(
);
+
+ expect(component).toMatchSnapshot();
+ });
+
+ describe('props', () => {
+ test('onClose', () => {
+ const component = render(
+
{}} />
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+
+ test('isDocked', () => {
+ const component = render( & {
+ children?: ReactNode;
+ /**
+ * Keeps navigation flyout visible and push `` content via padding
+ */
+ isDocked?: boolean;
+ /**
+ * Shows the navigation flyout
+ */
+ isOpen?: boolean;
+ /**
+ * Button for controlling visible state of the nav
+ */
+ button?: ReactElement;
+ /**
+ * Removes display of toggle button when in docked state
+ */
+ hideButtonIfDocked?: boolean;
+ onClose?: () => void;
+ };
+
+export const EuiCollapsibleNav: FunctionComponent = ({
+ children,
+ className,
+ isDocked = false,
+ isOpen = false,
+ onClose,
+ button,
+ hideButtonIfDocked = true,
+ id,
+ ...rest
+}) => {
+ const [flyoutID] = useState(id || htmlIdGenerator()('euiCollapsibleNav'));
+ const [windowIsLargeEnoughToDock, setWindowIsLargeEnoughToDock] = useState(
+ window.innerWidth >= 992
+ );
+ const navIsDocked = isDocked && windowIsLargeEnoughToDock;
+
+ const functionToCallOnWindowResize = throttle(() => {
+ if (window.innerWidth < 992) {
+ setWindowIsLargeEnoughToDock(false);
+ } else {
+ setWindowIsLargeEnoughToDock(true);
+ }
+ // reacts every 50ms to resize changes and always gets the final update
+ }, 50);
+
+ // Watch for docked status and appropriately add/remove body classes and resize handlers
+ useEffect(() => {
+ if (isDocked) {
+ document.body.classList.add('euiBody--collapsibleNavIsDocked');
+ window.addEventListener('resize', functionToCallOnWindowResize);
+ }
+ return () => {
+ document.body.classList.remove('euiBody--collapsibleNavIsDocked');
+ window.removeEventListener('resize', functionToCallOnWindowResize);
+ };
+ }, [isDocked, functionToCallOnWindowResize]);
+
+ const onKeyDown = (event: KeyboardEvent) => {
+ if (event.keyCode === keyCodes.ESCAPE) {
+ event.preventDefault();
+ collapse();
+ }
+ };
+
+ const collapse = () => {
+ if (!navIsDocked) {
+ onClose && onClose();
+ }
+ };
+
+ const classes = classNames(
+ 'euiCollapsibleNav',
+ { 'euiCollapsibleNav--isDocked': navIsDocked },
+ className
+ );
+
+ let optionalOverlay;
+ if (!navIsDocked) {
+ optionalOverlay =
+
+ {children}
+
+
+
+
+
+
+ );
+
+ return (
+ <>
+ {trigger}
+ {(isOpen || navIsDocked) && flyout}
+
+ );
+};
diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
new file mode 100644
index 00000000000..ac3c4be8d54
--- /dev/null
+++ b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -0,0 +1,259 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCollapsibleNavGroup is rendered 1`] = `
+
+`;
+
+exports[`EuiCollapsibleNavGroup props background dark is rendered 1`] = `
+
+`;
+
+exports[`EuiCollapsibleNavGroup props background light is rendered 1`] = `
+
+`;
+
+exports[`EuiCollapsibleNavGroup props background none is rendered 1`] = `
+
+`;
+
+exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
+
+`;
+
+exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
+
+`;
+
+exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
+
+`;
+
+exports[`EuiCollapsibleNavGroup props titleElement can change the rendered element to h2 1`] = `
+
+`;
+
+exports[`EuiCollapsibleNavGroup props titleSize can be larger 1`] = `
+
+`;
+
+exports[`EuiCollapsibleNavGroup throws a warning if iconType is passed without a title 1`] = `
+
+`;
+
+exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accordion 1`] = `
+
+`;
diff --git a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
new file mode 100644
index 00000000000..257c5142be5
--- /dev/null
+++ b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
@@ -0,0 +1,59 @@
+.euiCollapsibleNavGroup {
+ &:not(:first-child) {
+ border-top: $euiBorderThin;
+ }
+
+ // This class does not accept a custom classname
+ .euiAccordion__triggerWrapper {
+ // Add padding to the trigger wrapper in case an `extraAction` is passed
+ // that doesn't get wrapped in the `__heading`
+ padding: $euiSize;
+ }
+}
+
+.euiCollapsibleNavGroup--light {
+ background-color: $euiCollapsibleNavGroupLightBackgroundColor;
+}
+
+.euiCollapsibleNavGroup--dark {
+ background-color: $euiCollapsibleNavGroupDarkBackgroundColor;
+ color: $euiColorGhost;
+
+ // Forcing better contrast of focus state on EuiAccordion toggle icon
+ .euiCollapsibleNavGroup__heading:focus .euiAccordion__iconWrapper {
+ color: $euiCollapsibleNavGroupDarkHighContrastColor;
+ animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; // sass-lint:disable-line no-important
+ }
+
+ .euiCollapsibleNavGroup__title {
+ color: inherit;
+ line-height: inherit;
+ }
+}
+
+.euiCollapsibleNavGroup__heading {
+ font-weight: $euiFontWeightSemiBold;
+
+ // If the heading is not in an accordion, it needs the padding
+ &:not(.euiAccordion__button) {
+ padding: $euiSize;
+ }
+}
+
+.euiCollapsibleNavGroup__children {
+ padding: $euiSizeS;
+}
+
+.euiCollapsibleNavGroup--withHeading .euiCollapsibleNavGroup__children {
+ padding-top: 0;
+}
+
+@keyframes euiCollapsibleNavGroupDarkFocusRingAnimate {
+ 0% {
+ box-shadow: 0 0 0 $euiFocusRingAnimStartSize $euiFocusRingAnimStartColor;
+ }
+
+ 100% {
+ box-shadow: 0 0 0 $euiFocusRingSize $euiCollapsibleNavGroupDarkHighContrastColor;
+ }
+}
diff --git a/src/components/collapsible_nav/collapsible_nav_group/_index.scss b/src/components/collapsible_nav/collapsible_nav_group/_index.scss
new file mode 100644
index 00000000000..667ebab6881
--- /dev/null
+++ b/src/components/collapsible_nav/collapsible_nav_group/_index.scss
@@ -0,0 +1 @@
+@import 'collapsible_nav_group';
diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx
new file mode 100644
index 00000000000..3a37ffed510
--- /dev/null
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { EuiCollapsibleNavGroup, BACKGROUNDS } from './collapsible_nav_group';
+
+describe('EuiCollapsibleNavGroup', () => {
+ test('is rendered', () => {
+ const component = render(
+ ;
+}
+
+type GroupAsAccordion = EuiCollapsibleNavGroupInterface &
+ // The HTML `title` prop conflicts in type with our `title` prop
+ Omit & {
+ /**
+ * If `true`, wraps children in the body of an accordion,
+ * requiring the prop `title` to be used as the button.
+ * When `false`, simply renders a div without any accordion functionality.
+ */
+ isCollapsible: true;
+ /**
+ * The title gets wrapped in the appropriate heading level
+ * with the option to add an iconType
+ */
+ title: ReactNode;
+ };
+
+type GroupAsDiv = EuiCollapsibleNavGroupInterface & {
+ /**
+ * If `true`, wraps children in the body of an accordion,
+ * requiring the prop `title` to be used as the button.
+ * When `false`, simply renders a div without any accordion functionality.
+ */
+ isCollapsible?: false;
+ /**
+ * The title gets wrapped in the appropriate heading level
+ * with the option to add an iconType
+ */
+ title?: ReactNode;
+} & HTMLAttributes;
+
+export type EuiCollapsibleNavGroupProps = ExclusiveUnion<
+ GroupAsAccordion,
+ GroupAsDiv
+>;
+
+export const EuiCollapsibleNavGroup: FunctionComponent<
+ EuiCollapsibleNavGroupProps
+> = ({
+ className,
+ children,
+ id,
+ title,
+ iconType,
+ iconSize = 'l',
+ background = 'none',
+ isCollapsible = false,
+ titleElement = 'h3',
+ titleSize = 'xxs',
+ ...rest
+}) => {
+ const [groupID] = useState(id || htmlIdGenerator()());
+ const titleID = `${groupID}__title`;
+
+ const classes = classNames(
+ 'euiCollapsibleNavGroup',
+ backgroundToClassNameMap[background],
+ {
+ 'euiCollapsibleNavGroup--withHeading': title,
+ },
+ className
+ );
+
+ // Warn if consumer passes an iconType without a title
+ if (iconType && !title) {
+ console.warn(
+ 'EuiCollapsibleNavGroup will not render an icon without `title`.'
+ );
+ }
+
+ const content = (
+ {children}
+ );
+
+ const headingClasses = 'euiCollapsibleNavGroup__heading';
+
+ const TitleElement = titleElement;
+ const titleContent = title ? (
+
+ {iconType && (
+
+
+ )}
+
+
+
+
+ {title}
+
+
+
+
+ ) : (
+ undefined
+ );
+
+ if (isCollapsible && title) {
+ return (
+
+ {content}
+
+ );
+ } else {
+ return (
+
+ {titleContent &&
{titleContent}
}
+ {content}
+
+
+`;
+
exports[`EuiIcon props type iInCircle is rendered 1`] = `
`;
+exports[`EuiIcon props type menu is rendered 1`] = `
+
+
+`;
+
exports[`EuiIcon props type menuLeft is rendered 1`] = `
(
+
+ {title ? {title} : null}
+
+);
+
+export const icon = EuiIconHome;
diff --git a/src/components/icon/assets/home.svg b/src/components/icon/assets/home.svg
new file mode 100644
index 00000000000..ad1a980e9b3
--- /dev/null
+++ b/src/components/icon/assets/home.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/components/icon/assets/menu.js b/src/components/icon/assets/menu.js
new file mode 100644
index 00000000000..8f38cfd85d3
--- /dev/null
+++ b/src/components/icon/assets/menu.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const EuiIconMenu = ({ title, titleId, ...props }) => (
+
+ {title ? {title} : null}
+
+);
+
+export const icon = EuiIconMenu;
diff --git a/src/components/icon/assets/menu.svg b/src/components/icon/assets/menu.svg
new file mode 100755
index 00000000000..3d1df578ed1
--- /dev/null
+++ b/src/components/icon/assets/menu.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 1b7815569cc..cbe7ecc5d24 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -142,6 +142,7 @@ const typeToPathMap = {
heartbeatApp: 'app_heartbeat',
heatmap: 'heatmap',
help: 'help',
+ home: 'home',
iInCircle: 'iInCircle',
image: 'image',
importAction: 'import',
@@ -241,6 +242,7 @@ const typeToPathMap = {
managementApp: 'app_management',
mapMarker: 'map_marker',
memory: 'memory',
+ menu: 'menu',
menuLeft: 'menuLeft',
menuRight: 'menuRight',
merge: 'merge',
diff --git a/src/components/index.js b/src/components/index.js
index 9efdf29620a..9dcc3991767 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -37,6 +37,8 @@ export { EuiCode, EuiCodeBlock, EuiCodeBlockImpl } from './code';
export { EuiCodeEditor } from './code_editor';
+export { EuiCollapsibleNav, EuiCollapsibleNavGroup } from './collapsible_nav';
+
export {
EuiColorPicker,
EuiColorPickerSwatch,
@@ -181,7 +183,11 @@ export { EuiKeyPadMenu, EuiKeyPadMenuItem } from './key_pad_menu';
export { EuiLink } from './link';
-export { EuiListGroup, EuiListGroupItem } from './list_group';
+export {
+ EuiListGroup,
+ EuiListGroupItem,
+ EuiPinnableListGroup,
+} from './list_group';
export { EuiMark } from './mark';
diff --git a/src/components/index.scss b/src/components/index.scss
index cc4f1615102..dce5687119d 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -14,6 +14,7 @@
@import 'card/index';
@import 'code/index';
@import 'code_editor/index';
+@import 'collapsible_nav/index';
@import 'color_picker/index';
@import 'combo_box/index';
@import 'context_menu/index';
diff --git a/src/components/list_group/__snapshots__/list_group.test.tsx.snap b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
index 72252c29443..ac58002cf33 100644
--- a/src/components/list_group/__snapshots__/list_group.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
@@ -3,14 +3,14 @@
exports[`EuiListGroup is rendered 1`] = `
`;
-exports[`EuiListGroup is rendered with listItems 1`] = `
+exports[`EuiListGroup listItems is rendered 1`] = `
+
+
+
+ Active link
+
+
+
@@ -87,21 +103,122 @@ exports[`EuiListGroup is rendered with listItems 1`] = `
`;
+exports[`EuiListGroup listItems is rendered with color 1`] = `
+
+`;
+
+exports[`EuiListGroup listItems is rendered with size 1`] = `
+
+`;
+
exports[`EuiListGroup props bordered is rendered 1`] = `
`;
exports[`EuiListGroup props flush is rendered 1`] = `
`;
exports[`EuiListGroup props gutter size m is rendered 1`] = `
`;
@@ -113,38 +230,38 @@ exports[`EuiListGroup props gutter size none is rendered 1`] = `
exports[`EuiListGroup props gutter size s is rendered 1`] = `
`;
exports[`EuiListGroup props maxWidth as a number is rendered 1`] = `
`;
exports[`EuiListGroup props maxWidth as a string is rendered 1`] = `
`;
exports[`EuiListGroup props maxWidth as true is rendered 1`] = `
`;
exports[`EuiListGroup props showToolTips is rendered 1`] = `
`;
exports[`EuiListGroup props wrapText is rendered 1`] = `
`;
diff --git a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
index e110e1cebbe..c43facbadcc 100644
--- a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
@@ -17,6 +17,23 @@ exports[`EuiListGroupItem is rendered 1`] = `
`;
+exports[`EuiListGroupItem props color ghost is rendered 1`] = `
+
+
+
+ Label
+
+
+
+`;
+
exports[`EuiListGroupItem props color inherit is rendered 1`] = `
{
expect(component).toMatchSnapshot();
});
- test('is rendered with listItems', () => {
- const component = render( = ({
wrapText = false,
maxWidth = true,
showToolTips = false,
+ color,
+ size,
ariaLabelledby,
...rest
}) => {
@@ -105,6 +117,8 @@ export const EuiListGroup: FunctionComponent = ({
key={`title-${index}`}
showToolTip={showToolTips}
wrapText={wrapText}
+ color={color}
+ size={size}
{...item}
/>,
];
diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
index 0801ae8043e..04457fe55e9 100644
--- a/src/components/list_group/list_group_item.tsx
+++ b/src/components/list_group/list_group_item.tsx
@@ -25,12 +25,13 @@ const sizeToClassNameMap: { [size in ItemSize]: string } = {
};
export const SIZES = Object.keys(sizeToClassNameMap) as ItemSize[];
-type Color = 'inherit' | 'primary' | 'text' | 'subdued';
+type Color = 'inherit' | 'primary' | 'text' | 'subdued' | 'ghost';
const colorToClassNameMap: { [color in Color]: string } = {
inherit: '',
primary: 'euiListGroupItem--primary',
text: 'euiListGroupItem--text',
subdued: 'euiListGroupItem--subdued',
+ ghost: 'euiListGroupItem--ghost',
};
export const COLORS = Object.keys(colorToClassNameMap) as Color[];
@@ -38,7 +39,7 @@ export type EuiListGroupItemProps = CommonProps &
ExclusiveUnion<
ExclusiveUnion<
ButtonHTMLAttributes,
- AnchorHTMLAttributes
+ Omit, 'href'>
>,
HTMLAttributes
> & {
@@ -48,7 +49,7 @@ export type EuiListGroupItemProps = CommonProps &
size?: ItemSize;
/**
* By default the item will inherit the color of its wrapper (button/link/span),
- * otherwise pass on of the acceptable options
+ * otherwise pass one of the acceptable options
*/
color?: Color;
diff --git a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
new file mode 100644
index 00000000000..75048f15230
--- /dev/null
+++ b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
@@ -0,0 +1,321 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
+
+`;
+
+exports[`EuiPinnableListGroup is rendered 1`] = `
+
+`;
diff --git a/src/components/list_group/pinnable_list_group/_index.scss b/src/components/list_group/pinnable_list_group/_index.scss
new file mode 100644
index 00000000000..0bd00f0595e
--- /dev/null
+++ b/src/components/list_group/pinnable_list_group/_index.scss
@@ -0,0 +1 @@
+@import 'pinnable_list_group';
diff --git a/src/components/list_group/pinnable_list_group/_pinnable_list_group.scss b/src/components/list_group/pinnable_list_group/_pinnable_list_group.scss
new file mode 100644
index 00000000000..05f7191ad2a
--- /dev/null
+++ b/src/components/list_group/pinnable_list_group/_pinnable_list_group.scss
@@ -0,0 +1,9 @@
+.euiPinnableListGroup__itemExtraAction {
+ svg {
+ transform: rotate(45deg);
+ }
+}
+
+.euiPinnableListGroup__itemExtraAction-pinned:not(:hover):not(:focus) {
+ color: makeGraphicContrastColor($euiColorLightShade);
+}
diff --git a/src/components/list_group/pinnable_list_group/index.ts b/src/components/list_group/pinnable_list_group/index.ts
new file mode 100644
index 00000000000..0b9cf97d764
--- /dev/null
+++ b/src/components/list_group/pinnable_list_group/index.ts
@@ -0,0 +1,5 @@
+export {
+ EuiPinnableListGroup,
+ EuiPinnableListGroupProps,
+ EuiPinnableListGroupItemProps,
+} from './pinnable_list_group';
diff --git a/src/components/list_group/pinnable_list_group/pinnable_list_group.test.tsx b/src/components/list_group/pinnable_list_group/pinnable_list_group.test.tsx
new file mode 100644
index 00000000000..7957953c655
--- /dev/null
+++ b/src/components/list_group/pinnable_list_group/pinnable_list_group.test.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import {
+ EuiPinnableListGroup,
+ EuiPinnableListGroupItemProps,
+} from './pinnable_list_group';
+
+const someListItems: EuiPinnableListGroupItemProps[] = [
+ {
+ label: 'Label with iconType',
+ iconType: 'stop',
+ },
+ {
+ label: 'Custom extra action',
+ extraAction: {
+ iconType: 'bell',
+ alwaysShow: true,
+ 'aria-label': 'bell',
+ },
+ },
+ {
+ label: 'Active link',
+ isActive: true,
+ href: '#',
+ },
+ {
+ label: 'Button with onClick',
+ pinned: true,
+ onClick: e => {
+ console.log('Visualize clicked', e);
+ },
+ },
+ {
+ label: 'Link with href',
+ href: '#',
+ },
+ {
+ label: 'Not pinnable',
+ href: '#',
+ pinnable: false,
+ },
+];
+
+describe('EuiPinnableListGroup', () => {
+ test('is rendered', () => {
+ const component = render(
+ {}}
+ />
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+
+ test('can have custom pin icon titles', () => {
+ const component = render(
+ {}}
+ pinTitle={(item: EuiPinnableListGroupItemProps) =>
+ `Pin ${item.label} to the top`
+ }
+ unpinTitle={(item: EuiPinnableListGroupItemProps) =>
+ `Unpin ${item.label} to the top`
+ }
+ />
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+});
diff --git a/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx b/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx
new file mode 100644
index 00000000000..c1b1a551d07
--- /dev/null
+++ b/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx
@@ -0,0 +1,129 @@
+import React, { FunctionComponent } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../../common';
+
+import { EuiI18n } from '../../i18n';
+import { EuiListGroup, EuiListGroupProps } from '../list_group';
+import { EuiListGroupItemProps } from '../list_group_item';
+
+const pinExtraAction: EuiListGroupItemProps['extraAction'] = {
+ color: 'primary',
+ iconType: 'pinFilled',
+ iconSize: 's',
+ className: 'euiPinnableListGroup__itemExtraAction',
+};
+
+const pinnedExtraAction: EuiListGroupItemProps['extraAction'] = {
+ color: 'primary',
+ iconType: 'pinFilled',
+ iconSize: 's',
+ className:
+ 'euiPinnableListGroup__itemExtraAction euiPinnableListGroup__itemExtraAction-pinned',
+ alwaysShow: true,
+};
+
+export type EuiPinnableListGroupItemProps = EuiListGroupItemProps & {
+ /**
+ * Saves the pinned status and changes the visibility of the pin icon
+ */
+ pinned?: boolean;
+ /**
+ * Passing `onPinClick` to the full EuiPinnableListGroup, will make every item pinnable.
+ * Set this property to `false` to turn off individual item pinnability
+ */
+ pinnable?: boolean;
+};
+
+export interface EuiPinnableListGroupProps
+ extends CommonProps,
+ EuiListGroupProps {
+ /**
+ * Extends `EuiListGroupItemProps`, at the very least, expecting a `label`.
+ * See #EuiPinnableListGroupItem
+ */
+ listItems: EuiPinnableListGroupItemProps[];
+ /**
+ * Shows the pin icon and calls this function on click.
+ * Returns `item: EuiPinnableListGroupItemProps`
+ */
+ onPinClick: (item: EuiPinnableListGroupItemProps) => void;
+ /**
+ * The pin icon needs a title/aria-label for accessibility.
+ * It is a function that passes the item back and must return a string `(item) => string`.
+ * Default is `"Pin item"`
+ */
+ pinTitle?: (item: EuiPinnableListGroupItemProps) => string;
+ /**
+ * The unpin icon needs a title/aria-label for accessibility.
+ * It is a function that passes the item back and must return a string `(item) => string`.
+ * Default is `"Unpin item"`
+ */
+ unpinTitle?: (item: EuiPinnableListGroupItemProps) => string;
+}
+
+export const EuiPinnableListGroup: FunctionComponent<
+ EuiPinnableListGroupProps
+> = ({ className, listItems, pinTitle, unpinTitle, onPinClick, ...rest }) => {
+ const classes = classNames('euiPinnableListGroup', className);
+
+ // Alter listItems object with extra props
+ const getNewListItems = (
+ pinExtraActionLabel: string,
+ pinnedExtraActionLabel: string
+ ) =>
+ listItems.map(item => {
+ const { pinned, pinnable = true, ...itemProps } = item;
+ // Make some declarations of props for the nav implementation
+ itemProps.className = classNames(
+ 'euiPinnableListGroup__item',
+ item.className
+ );
+
+ // Add the pinning action unless the item has it's own extra action
+ if (onPinClick && !itemProps.extraAction && pinnable) {
+ // Different displays for pinned vs unpinned
+ if (pinned) {
+ itemProps.extraAction = {
+ ...pinnedExtraAction,
+ title: unpinTitle ? unpinTitle(item) : pinnedExtraActionLabel,
+ 'aria-label': unpinTitle
+ ? unpinTitle(item)
+ : pinnedExtraActionLabel,
+ };
+ } else {
+ itemProps.extraAction = {
+ ...pinExtraAction,
+ title: pinTitle ? pinTitle(item) : pinExtraActionLabel,
+ 'aria-label': pinTitle ? pinTitle(item) : pinExtraActionLabel,
+ };
+ }
+ // Return the item on click
+ itemProps.extraAction.onClick = () => onPinClick(item);
+ }
+
+ return itemProps;
+ });
+
+ return (
+
+ {([pinExtraActionLabel, pinnedExtraActionLabel]: string[]) => {
+ const newListItems = getNewListItems(
+ pinExtraActionLabel,
+ pinnedExtraActionLabel
+ );
+ return (
+
+ );
+};
diff --git a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
index b8b6c6384b4..4c0ce67796d 100644
--- a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
+++ b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
@@ -15,7 +15,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
id="navDrawerMenu"
>