[EuiSideNav] Fixes and enhancements for the Elastic Solution Nav

.sass-lint.yml

@@ -28,6 +28,10 @@ rules:
     - 2
     -
       style: 'uppercase'
+  mixins-before-declarations:
+    - 2
+    -
+      exclude: ['euiBreakpoint', 'euiCanAnimate']
   mixin-name-format:
     - 2
     -
@@ -81,4 +85,4 @@ rules:
   # Warns are nice for deprecations and development
   no-warn: 0
   # Transition all is useful in certain situations and there's no recent info to suggest slowdown
-  no-transition-all: 0
+  no-transition-all: 0

CHANGELOG.md

@@ -1,11 +1,19 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `testenv` mock for `EuiFlyout` ([#4858](https://github.com/elastic/eui/pull/4858))
+- Added `mobile` glyph to `EuiIcon` ([#4827](https://github.com/elastic/eui/pull/4827))
+- Reduced display of arrow icon in `EuiSideNav` to only if the item is **not** linked but has children ([#4827](https://github.com/elastic/eui/pull/4827))
+- Increased size and prominence of mobile toggle in `EuiSideNav` ([#4827](https://github.com/elastic/eui/pull/4827))
+- Added `heading`, `headingProps`, and `mobileBreakpoints` props for better accessibility to `EuiSideNav` ([#4827](https://github.com/elastic/eui/pull/4827))
 
 **Bug fixes**
 
 - Fixed mobile menus styles on `EuiDataGrid` ([#4844](https://github.com/elastic/eui/pull/4844))
 
+**Theme: Amsterdam**
+
+- Decreased spacing and root element size of `EuiSideNav` ([#4816](https://github.com/elastic/eui/pull/4816))
+
 ## [`34.2.0`](https://github.com/elastic/eui/tree/v34.2.0)
 
 - Removed `text-transform: capitalize` from the `EuiTourSteps` title to better fit with Elastic title guidelines ([#4839](https://github.com/elastic/eui/pull/4839))
@@ -21,7 +29,6 @@
 **Bug fixes**
 
 - Fixed `onBlur` and `data-test-subj` prop propagation in `EuiColorPicker` ([#4822](https://github.com/elastic/eui/pull/4822))
-- Fixed mobile menus styles on `EuiDataGrid` ([#4844](https://github.com/elastic/eui/pull/4844))
 
 ## [`34.1.0`](https://github.com/elastic/eui/tree/v34.1.0)
 

src-docs/src/components/guide_components.scss

@@ -32,6 +32,7 @@ $elasticLogoTextDark: #1C1E23;
 }
 
 .guideSideNav {
+  @include euiSideNavEmbellish;
   min-width: $guideSideNavWidth;
 }
 
@@ -42,7 +43,7 @@ $elasticLogoTextDark: #1C1E23;
 
 .guideSideNav__search {
   flex-shrink: 0;
-  padding: $euiSizeL;
+  padding: $euiSizeS $euiSizeS $euiSize;
 }
 
 .guideSideNav__item {
@@ -324,6 +325,10 @@ $elasticLogoTextDark: #1C1E23;
     padding: 0;
     border-top: $euiBorderThin;
   }
+
+  .guideSideNav__search {
+    padding: $euiSizeS;
+  }
 }
 
 .guideHomePage__blockformCard {
@@ -456,4 +461,4 @@ $elasticLogoTextDark: #1C1E23;
   > * {
     padding: $euiSizeL;
   }
-}
+}

src-docs/src/views/empty_prompt/custom.js

@@ -5,7 +5,7 @@ import { EuiEmptyPrompt, EuiButton } from '../../../../src/components';
 export default () => (
   <EuiEmptyPrompt
     iconType="dataVisualizer"
-    iconColor={null}
+    iconColor="default"
     title={<h2>You have no spice</h2>}
     titleSize="xs"
     body={

src-docs/src/views/icon/icons.js

@@ -146,6 +146,7 @@ export const iconTypes = [
   'minus',
   'minusInCircle',
   'minusInCircleFilled',
+  'mobile',
   'moon',
   'nested',
   'node',

src-docs/src/views/side_nav/props.tsx

@@ -1,6 +1,11 @@
 import React, { FunctionComponent } from 'react';
+
 import { EuiSideNavItemType } from '../../../../src/components/side_nav/side_nav_types';
+export const EuiSideNavItem: FunctionComponent<EuiSideNavItemType<
+  any
+>> = () => <div />;
 
-export const SideNavItem: FunctionComponent<EuiSideNavItemType<any>> = () => (
+import { EuiSideNavHeadingProps } from '../../../../src/components/side_nav/side_nav';
+export const EuiSideNavHeading: FunctionComponent<EuiSideNavHeadingProps> = () => (
   <div />
 );

src-docs/src/views/side_nav/side_nav.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
 import { EuiSideNav } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default () => {
   const [isSideNavOpenOnMobile, setisSideNavOpenOnMobile] = useState(false);
@@ -11,29 +12,29 @@ export default () => {
 
   const sideNav = [
     {
-      name: 'Kibana',
-      id: 0,
+      name: 'Root item',
+      id: htmlIdGenerator('basicExample')(),
       items: [
         {
-          name: 'Advanced settings',
-          id: 1,
+          name: 'Item with onClick',
+          id: htmlIdGenerator('basicExample')(),
           onClick: () => {},
         },
         {
-          name: 'Index Patterns (link)',
-          id: 2,
-          href: 'http://www.elastic.co',
+          name: 'Item with href',
+          id: htmlIdGenerator('basicExample')(),
+          href: '/#/navigation/side-nav',
         },
         {
-          name: 'Saved Objects',
-          id: 3,
+          name: 'Selected item',
+          id: htmlIdGenerator('basicExample')(),
           onClick: () => {},
           isSelected: true,
         },
         {
-          name: 'Reporting',
-          id: 4,
-          onClick: () => {},
+          name: 'Disabled item',
+          id: htmlIdGenerator('basicExample')(),
+          disabled: true,
         },
       ],
     },
@@ -42,7 +43,7 @@ export default () => {
   return (
     <EuiSideNav
       aria-label="Basic example"
-      mobileTitle="Navigate within $APP_NAME"
+      mobileTitle="Basic example"
       toggleOpenOnMobile={() => toggleOpenOnMobile()}
       isOpenOnMobile={isSideNavOpenOnMobile}
       style={{ width: 192 }}

src-docs/src/views/side_nav/side_nav_complex.js

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 
 import { EuiIcon, EuiSideNav } from '../../../../src/components';
+import { slugify } from '../../../../src/services';
 
 export default () => {
   const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
-  const [selectedItemName, setSelectedItem] = useState('Lion stuff');
+  const [selectedItemName, setSelectedItem] = useState('Time stuff');
 
   const toggleOpenOnMobile = () => {
     setIsSideNavOpenOnMobile(!isSideNavOpenOnMobile);
@@ -17,16 +18,17 @@ export default () => {
   const createItem = (name, data = {}) => {
     // NOTE: Duplicate `name` values will cause `id` collisions.
     return {
-      ...data,
-      id: name,
+      id: slugify(name),
       name,
       isSelected: selectedItemName === name,
       onClick: () => selectItem(name),
+      ...data,
     };
   };
 
   const sideNav = [
     createItem('Elasticsearch', {
+      onClick: undefined,
       icon: <EuiIcon type="logoElasticsearch" />,
       items: [
         createItem('Data sources'),
@@ -39,6 +41,7 @@ export default () => {
       ],
     }),
     createItem('Kibana', {
+      onClick: undefined,
       icon: <EuiIcon type="logoKibana" />,
       items: [
         createItem('Advanced settings', {
@@ -63,6 +66,7 @@ export default () => {
       ],
     }),
     createItem('Logstash', {
+      onClick: undefined,
       icon: <EuiIcon type="logoLogstash" />,
       items: [createItem('Pipeline viewer')],
     }),