[Docs] Adds a *NEW* badge to side nav items that are new (#3283)

* Fixed EuiSideNav not passing `className` to item and icon * [Docs] Added an `isNew` prop to add a `NEW` badge to side nav
elastic · Apr 9, 2020 · 6a0ab1e · 6a0ab1e
1 parent a56fa8f
commit 6a0ab1e
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@
 - Added overflows to EuiDataGrid toolbar dropdowns when there are many columns ([#3238](https://github.com/elastic/eui/pull/3238))
 - Fixed `EuiIcon`'s icon `type` definition to allow custom React components ([#3252](https://github.com/elastic/eui/pull/3252))
 - Fixed `initialSelectedTab` properties used in `EuiDatePopoverContent` ([#3254](https://github.com/elastic/eui/pull/3254))
+- Fixed `EuiSideNavItem` overriding custom `className` of item and icon ([#3283](https://github.com/elastic/eui/pull/3283))
 
 ## [`22.3.0`](https://github.com/elastic/eui/tree/v22.3.0)
 

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -43,6 +43,27 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   }
 }
 
+.guideSideNav__item {
+  // Hate to do this, but it's the only way to get the badge to display correctly
+  .euiSideNavItemButton__label {
+    // By using the `icon` display of EuiSideNavItem, it will continue to:
+    // a) truncate properly
+    // b) not underline the badge when selected
+    // But it shows to the left of the label instead of right, so we have to shift the order of the label
+    order: -1;
+  }
+
+  .guideSideNav__newBadge {
+    margin-left: $euiSizeXS;
+    margin-right: $euiSizeXS;
+  }
+
+  // Shift the margin on the badge when selected and the dropdown arrow no longer shows
+  .euiSideNavItemButton-isSelected .guideSideNav__newBadge {
+    margin-right: 0;
+  }
+}
+
 .guideSideNav__item--inSearch {
   color: $euiColorDarkShade;
 }

diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -20,6 +20,7 @@ import {
 import { GuideLocaleSelector } from '../guide_locale_selector';
 import { GuideThemeSelector } from '../guide_theme_selector';
 import { EuiHighlight } from '../../../../src/components/highlight';
+import { EuiBadge } from '../../../../src/components/badge';
 
 const scrollTo = position => {
   $('html, body').animate(
@@ -243,9 +244,18 @@ export class GuidePageChrome extends Component {
       });
 
       const items = matchingItems.map(item => {
-        const { name, path, sections } = item;
+        const { name, path, sections, isNew } = item;
         const href = `#/${path}`;
 
+        let newBadge;
+        if (isNew) {
+          newBadge = (
+            <EuiBadge color="accent" className="guideSideNav__newBadge">
+              NEW
+            </EuiBadge>
+          );
+        }
+
         let visibleName = name;
         if (searchTerm) {
           visibleName = (
@@ -265,6 +275,8 @@ export class GuidePageChrome extends Component {
           items: this.renderSubSections(href, sections, searchTerm),
           isSelected: item === this.props.currentRoute,
           forceOpen: !!(searchTerm && hasMatchingSubItem),
+          className: 'guideSideNav__item',
+          icon: newBadge,
         };
       });
 

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
@@ -243,7 +243,7 @@ const createExample = (example, customTitle) => {
     );
   }
 
-  const { title, intro, sections, beta } = example;
+  const { title, intro, sections, beta, isNew } = example;
   sections.forEach(section => {
     section.id = slugify(section.title || title);
   });
@@ -267,6 +267,7 @@ const createExample = (example, customTitle) => {
     name: customTitle || title,
     component,
     sections,
+    isNew,
   };
 };
 

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_example.js b/src-docs/src/views/collapsible_nav/collapsible_nav_example.js
@@ -32,6 +32,7 @@ const collapsibleNavAllHtml = renderToHtml(CollapsibleNavAll);
 
 export const CollapsibleNavExample = {
   title: 'Collapsible nav',
+  isNew: true,
   intro: (
     <EuiText>
       <p>

diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js
@@ -65,6 +65,7 @@ const commentActionsSnippet = `<EuiComment username="janed" actions={customActio
 
 export const CommentExample = {
   title: 'Comment',
+  isNew: true,
   sections: [
     {
       source: [

diff --git a/src/components/side_nav/side_nav_item.tsx b/src/components/side_nav/side_nav_item.tsx
@@ -92,6 +92,7 @@ export function EuiSideNavItem<
   children,
   renderItem: RenderItem = DefaultRenderItem,
   depth = 0,
+  className,
   ...rest
 }: EuiSideNavItemProps<T>) {
   let childItems;
@@ -104,17 +105,21 @@ export function EuiSideNavItem<
 
   if (icon) {
     buttonIcon = cloneElement(icon, {
-      className: 'euiSideNavItemButton__icon',
+      className: classNames('euiSideNavItemButton__icon', icon.props.className),
     });
   }
 
-  const classes = classNames('euiSideNavItem', {
-    'euiSideNavItem--root': depth === 0,
-    'euiSideNavItem--rootIcon': depth === 0 && icon,
-    'euiSideNavItem--trunk': depth === 1,
-    'euiSideNavItem--branch': depth > 1,
-    'euiSideNavItem--hasChildItems': !!childItems,
-  });
+  const classes = classNames(
+    'euiSideNavItem',
+    {
+      'euiSideNavItem--root': depth === 0,
+      'euiSideNavItem--rootIcon': depth === 0 && icon,
+      'euiSideNavItem--trunk': depth === 1,
+      'euiSideNavItem--branch': depth > 1,
+      'euiSideNavItem--hasChildItems': !!childItems,
+    },
+    className
+  );
 
   const buttonClasses = classNames('euiSideNavItemButton', {
     'euiSideNavItemButton--isClickable': onClick || href,