[Emotion] Convert EuiSideNav (#7521)

changelogs/upcoming/7521.md

@@ -0,0 +1,19 @@
+- Updated `EuiPageSidebar` and `EuiPageTemplate.Sidebar` with a new `hasEmbellish` prop (defaults to false)
+
+**Bug fixes**
+
+- Fixed `EuiSideNav` not correctly typing the `items` prop as required
+
+**Accessibility**
+
+- Fixed `EuiSideNav` to render a fallback aria-label on mobile toggles if no heading or mobile title exists
+
+**CSS-in-JS conversions**
+
+- Converted `EuiSideNav` to Emotion; Removed the following Sass variables:
+  - `$euiSideNavEmphasizedBackgroundColor`
+  - `$euiSideNavRootTextcolor`
+  - `$euiSideNavBranchTextcolor`
+  - `$euiSideNavSelectedTextcolor`
+  - `$euiSideNavDisabledTextcolor`
+- Removed the `euiSideNavEmbellish` Sass mixin. Use the new `EuiPageSidebar` `hasEmbellish` prop instead

src-docs/src/components/guide_page/_guide_page.scss

@@ -1,9 +1,5 @@
 @import '../../../../src/global_styling/mixins/helpers';
 
-.guideSideNav {
-  @include euiSideNavEmbellish;
-}
-
 .guideSideNav__content {
   @include euiYScroll;
   padding: 0 $euiSizeL $euiSizeL;

src-docs/src/views/app_view.js

@@ -50,7 +50,7 @@ export const AppView = ({ children, currentRoute = {} }) => {
         restrictWidth={false}
         mainProps={{ id: 'start-of-content' }}
       >
-        <EuiPageTemplate.Sidebar className="guideSideNav" sticky>
+        <EuiPageTemplate.Sidebar className="guideSideNav" sticky hasEmbellish>
           <GuidePageChrome
             currentRoute={currentRoute}
             navigation={routes.navigation}

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

@@ -5,7 +5,7 @@ export const EuiSideNavItem: FunctionComponent<
   EuiSideNavItemType<any>
 > = () => <div />;
 
-import { EuiSideNavHeadingProps } from '../../../../src/components/side_nav/side_nav';
+import { EuiSideNavHeadingProps } from '../../../../src/components/side_nav/_side_nav_heading';
 export const EuiSideNavHeading: FunctionComponent<
   EuiSideNavHeadingProps
 > = () => <div />;

src/components/index.scss

@@ -6,6 +6,5 @@
 @import 'datagrid/index';
 @import 'form/index';
 @import 'markdown_editor/index';
-@import 'side_nav/index';
 @import 'selectable/index';
 @import 'table/index';

src/components/page/page_sidebar/page_sidebar.stories.tsx

@@ -28,6 +28,7 @@ const meta: Meta<EuiPageSidebarProps> = {
   args: {
     // Component defaults
     paddingSize: 'm', // The component default is actually 'none', but for nicer visuals in Storybook we'll set it to 'm'
+    hasEmbellish: false,
     sticky: false,
     minWidth: 248,
     responsive: ['xs', 's'],
@@ -70,6 +71,7 @@ export const StickyOffset: Story = {
     ...hideStorybookControls<EuiPageSidebarProps>([
       'minWidth',
       'paddingSize',
+      'hasEmbellish',
       'responsive',
     ]),
   },

src/components/page/page_sidebar/page_sidebar.styles.ts

@@ -7,18 +7,38 @@
  */
 
 import { css } from '@emotion/react';
+
+import { UseEuiTheme, transparentize } from '../../../services';
 import { euiYScroll } from '../../../global_styling';
-import { UseEuiTheme } from '../../../services';
 
-export const euiPageSidebarStyles = (euiThemeContext: UseEuiTheme) => ({
-  euiPageSidebar: css`
-    /* Prevent side bar width from changing when content width changes */
-    flex: 0 1 0%;
-  `,
+export const euiPageSidebarStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  const embellishColor = transparentize(euiTheme.colors.lightShade, 0.3);
 
-  sticky: css`
-    ${euiYScroll(euiThemeContext, { height: 'auto' })}
-    flex-grow: 1;
-    position: sticky;
-  `,
-});
+  return {
+    euiPageSidebar: css`
+      /* Prevent side bar width from changing when content width changes */
+      flex: 0 1 0%;
+    `,
+    sticky: css`
+      ${euiYScroll(euiThemeContext, { height: 'auto' })}
+      flex-grow: 1;
+      position: sticky;
+    `,
+    embellish: css`
+      background: linear-gradient(
+          160deg,
+          ${embellishColor} 0,
+          ${embellishColor} ${euiTheme.size.xl},
+          transparent 0
+        ),
+        linear-gradient(
+          175deg,
+          ${embellishColor} 0,
+          ${embellishColor} ${euiTheme.size.base},
+          transparent 0
+        );
+    `,
+  };
+};

src/components/page/page_sidebar/page_sidebar.tsx

@@ -31,6 +31,10 @@ export interface EuiPageSidebarProps
    * When using this setting it's best to be consistent throughout all similar usages.
    */
   paddingSize?: EuiPaddingSize;
+  /**
+   * Renders a fancy little visual in the top left corner of the side bar
+   */
+  hasEmbellish?: boolean;
   /**
    * Adds `position: sticky` and affords for any fixed position headers.
    */
@@ -61,6 +65,7 @@ export const EuiPageSidebar: FunctionComponent<EuiPageSidebarProps> = ({
   paddingSize = 'none',
   minWidth = 248,
   responsive = ['xs', 's'],
+  hasEmbellish = false,
   style,
   ...rest
 }) => {
@@ -71,6 +76,7 @@ export const EuiPageSidebar: FunctionComponent<EuiPageSidebarProps> = ({
   const cssStyles = [
     styles.euiPageSidebar,
     !isResponding && sticky && styles.sticky,
+    hasEmbellish && styles.embellish,
     useEuiPaddingCSS()[paddingSize],
   ];