Add ability to force open EuiSideNav items.

[arkwright]

Fixes #497.

items passed to EuiSideNav can now receive an item.forceOpen boolean property, which forces that particular nav item (and all of its parents) to render in the "open" state. .forceOpen can be selectively applied to individual items, or can be applied to every item in the tree to force the entire tree to be open. This allows us to draw attention and convenience to certain navigation levels so that they are more easily discoverable by the user.

I chose the name forceOpen because my first choice, isOpen, when set to undefined, shadows the isOpen prop passed to EuiSideNavItem, which ironically can force the entire navigation tree closed. For example, if you use a createItem() function to create individual navigation items, it might include a line like this:

const createItem = (name, data = {}) => {
  return {
    ...data,
    id: name,
    name,
    isOpen: name === 'specific item to force open' : true : undefined,
  };
};

It is impossible to set isOpen in the example above using the ternary pattern — all items which do not match will be forced shut, even when selected. Using the property forceOpen avoids this problem, and enables the ternary pattern.

Testing

If you want to test this work manually, I added a convenient demo at the bottom of the "Side Nav" living style guide page.

[arkwright]

I wrapped the props tests in a describe('props'). Beyond that, I only added the renders items having { forceOpen: true } in open state, and automatically opens parent items test to this file.

[cjcenizal]

LGTM! This is fantastic @arkwright. Thanks for doing this. I left a few minor comments but other than that, this PR is good to go.

[cjcenizal]

Can you change the #497 link to #515?

[cjcenizal]

While you're here could you fix this typo? "exapand" -> "expand"

[cjcenizal]

Thanks for adding these great docs!!

[cjcenizal]

Instead of deleting, can we destructure this var but then not use it? This is the pattern we've been using elsewhere when we want to prevent props from making their way into rest.

      const {
        id,
        name,
        isSelected,
        items: childItems,
        icon,
        onClick,
        href,
        forceOpen, // eslint-disable-line no-unused-vars
        ...rest
      } = item;

[snide]

Looks good to me from a functional / consumer perspective. Thanks for the PR.

[arkwright]

jenkins test this

[snide]

jenkins, test this

[arkwright]

jenkins test this