[terra-outline-view] Add icon for nav-side-menu (#2154)

Co-authored-by: Sugan G <[email protected]>
cerner · May 9, 2024 · f66ea5d · f66ea5d
1 parent 0f60274
commit f66ea5d
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 11 deletions.
diff --git a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx
@@ -100,7 +100,7 @@ const FolderTreeItem = ({
   intl,
 }) => {
   const theme = useContext(ThemeContext);
-  const isFolder = subfolderItems?.length > 0;
+  const isFolder = subfolderItems?.length >= 0;
   const itemNode = useRef();
   const subFolderNode = useRef();
   const [radioButtonIsHovered, setRadioButtonIsHovered] = useState(false);
@@ -129,7 +129,7 @@ const FolderTreeItem = ({
     </ul>
   ) : null;
 
-  const itemIcon = subfolder ? <IconFolder a11yLabel={intl.formatMessage({ id: 'Terra.folder-tree.folder-icon' })} /> : icon;
+  const itemIcon = subfolder && !icon ? <IconFolder a11yLabel={intl.formatMessage({ id: 'Terra.folder-tree.folder-icon' })} /> : icon;
   const expandCollapseIcon = isExpanded
     ? <IconCaretDown height="8px" width="8px" style={{ verticalAlign: 'baseline' }} /> // eslint-disable-line react/forbid-component-props
     : <IconCaretRight height="8px" width="8px" style={{ verticalAlign: 'baseline' }} />; // eslint-disable-line react/forbid-component-props

diff --git a/...s/terra-framework-docs/src/terra-dev-site/doc/outline-view/example/DefaultOutlineView.jsx b/...s/terra-framework-docs/src/terra-dev-site/doc/outline-view/example/DefaultOutlineView.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconDocuments } from 'terra-icon';
+import { IconDocuments, IconHospital } from 'terra-icon';
 import OutlineView from 'terra-outline-view';
 
 const data = {
@@ -21,6 +21,7 @@ const data = {
             { id: 'item-1-level-3-1', label: 'Very Very Very Very Very Very Very Long Name Test', icon: <IconDocuments /> },
             { id: 'item-2-level-3-1', label: 'Even Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger Name Test', icon: <IconDocuments /> },
           ],
+          icon: <IconHospital />,
         },
       ],
     },

diff --git a/...ges/terra-framework-docs/src/terra-dev-site/test/outline-view/DefaultOutlineView.test.jsx b/...ges/terra-framework-docs/src/terra-dev-site/test/outline-view/DefaultOutlineView.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { IconDocuments } from 'terra-icon';
+import { IconDocuments, IconHospital } from 'terra-icon';
 import OutlineView from 'terra-outline-view';
 
 const DefaultOutlineView = () => {
@@ -9,6 +9,8 @@ const DefaultOutlineView = () => {
   const [expandedItems, setExpandedItems] = React.useState({
     projects: false,
     tests: false,
+    details: false,
+    test2: false,
   });
 
   const handleExpandCollapseKeys = (key) => {
@@ -98,7 +100,7 @@ const DefaultOutlineView = () => {
               isExpanded={expandedItems.tests}
               onSelect={() => { setSelectedKey('tests'); }}
               onToggle={() => { handleExpandCollapseKeys('tests'); }}
-              icon={<IconDocuments />}
+              icon={<IconHospital />}
               subfolderItems={[
                 (<OutlineView.Item
                   label="very_very_very_very_very_very_very_long_name_test.txt"
@@ -121,10 +123,28 @@ const DefaultOutlineView = () => {
                   isSelected={selectedKey === 'longer-name-test'}
                   onSelect={() => { setSelectedKey('longer-name-test'); }}
                 />),
+                (<OutlineView.Item
+                  label="test2"
+                  key="test2"
+                  isSelected={selectedKey === 'test2'}
+                  onSelect={() => { setSelectedKey('test2'); }}
+                  isExpanded={expandedItems.test2}
+                  onToggle={() => { handleExpandCollapseKeys('test2'); }}
+                  subfolderItems={[]}
+                />),
               ]}
             />),
           ]}
         />
+        <OutlineView.Item
+          label="Details"
+          key="details"
+          isSelected={selectedKey === 'details'}
+          onSelect={() => { setSelectedKey('details'); }}
+          isExpanded={expandedItems.details}
+          onToggle={() => { handleExpandCollapseKeys('details'); }}
+          subfolderItems={[]}
+        />
       </OutlineView>
     </div>
   );

diff --git a/packages/terra-navigation-side-menu/package.json b/packages/terra-navigation-side-menu/package.json
@@ -39,7 +39,8 @@
     "terra-content-container": "^3.0.0",
     "terra-icon": "^3.19.0",
     "terra-theme-context": "^1.9.0",
-    "terra-visually-hidden-text": "^2.0.0"
+    "terra-visually-hidden-text": "^2.0.0",
+    "terra-status-view": "^4.76.0"
   },
   "peerDependencies": {
     "react": "^16.8.5",

diff --git a/packages/terra-navigation-side-menu/src/MenuItem.module.scss b/packages/terra-navigation-side-menu/src/MenuItem.module.scss
@@ -54,7 +54,7 @@
         color: var(--terra-navigation-side-menu-item-hover-chevron-color, #bcbfc0);
       }
     }
-  
+
     &:focus {
       box-shadow: var(--terra-navigation-side-menu-item-focus-box-shadow, none);
       outline: var(--terra-navigation-side-menu-focus-outline, 2px dashed #000);
@@ -125,7 +125,7 @@
         box-shadow: var(--terra-navigation-side-menu-item-focus-box-shadow, none);
         outline: var(--terra-navigation-side-menu-focus-outline, 2px dashed #000);
         outline-offset: var(--terra-navigation-side-menu-focus-outline-offset, -2px);
-  
+
         /* stylelint-disable-next-line max-nesting-depth */
         .chevron {
           color: var(--terra-navigation-side-menu-item-selected-focus-chevron-color, #909496);
@@ -156,4 +156,8 @@
       width: var(--terra-navigation-side-menu-item-chevron-width, 0.8em);
     }
   }
+
+  .icon {
+    margin-right: 10px;
+  }
 }
diff --git a/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx b/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
@@ -6,6 +6,7 @@ import ContentContainer from 'terra-content-container';
 import VisuallyHiddenText from 'terra-visually-hidden-text';
 import * as KeyCode from 'keycode-js';
 import ThemeContext from 'terra-theme-context';
+import StatusView from 'terra-status-view';
 import MenuItem from './_MenuItem';
 
 import styles from './NavigationSideMenu.module.scss';
@@ -94,6 +95,8 @@ const processMenuItems = (menuItems) => {
       metaData: item.metaData,
       hasSubMenu: item.hasSubMenu,
       isRootMenu: item.isRootMenu,
+      icon: item.icon,
+      showIcon: item.showIcon,
     };
     if (item.childKeys) {
       item.childKeys.forEach((key) => {
@@ -306,6 +309,10 @@ class NavigationSideMenu extends Component {
       this.handleEvents(event, item, key);
     };
 
+    if (key === 'empty-child-key') {
+      return <StatusView variant="no-data" />;
+    }
+
     return (
       <MenuItem
         id={item.id}
@@ -317,6 +324,8 @@ class NavigationSideMenu extends Component {
         onKeyDown={onKeyDown}
         data-menu-item={key}
         tabIndex={(tabIndex === 0 && !(this.onBack)) ? '0' : '-1'}
+        icon={item.icon}
+        showIcon={item.showIcon}
       />
     );
   }

diff --git a/packages/terra-navigation-side-menu/src/_MenuItem.jsx b/packages/terra-navigation-side-menu/src/_MenuItem.jsx
@@ -7,6 +7,7 @@ import ThemeContext from 'terra-theme-context';
 import * as KeyCode from 'keycode-js';
 import ChevronRight from 'terra-icon/lib/icon/IconChevronRight';
 import VisuallyHiddenText from 'terra-visually-hidden-text';
+import { IconFolder, IconCaretRight, IconCaretDown } from 'terra-icon';
 
 import styles from './MenuItem.module.scss';
 
@@ -43,6 +44,15 @@ const propTypes = {
    * tabIndex for the menu item.
    * */
   tabIndex: PropTypes.string,
+  /**
+   * @private
+   * The icon to display to the left for the menu item.
+   */
+  icon: PropTypes.element,
+  /**
+   * If enabled, this prop will show the icon to the left for the menu item.
+   */
+  showIcon: PropTypes.bool,
 };
 
 class MenuItem extends React.Component {
@@ -94,10 +104,14 @@ class MenuItem extends React.Component {
       intl,
       isSelected,
       text,
+      icon,
+      showIcon,
       ...customProps
     } = this.props;
     const theme = this.context;
 
+    const itemIcon = hasChevron && !icon ? <IconFolder /> : icon;
+
     const itemClassNames = classNames(cx(
       'menu-item',
       { 'is-selected': isSelected && !hasChevron },
@@ -120,6 +134,7 @@ class MenuItem extends React.Component {
           onKeyDown={this.handleKeyDown}
           aria-haspopup={hasChevron}
         >
+          {showIcon && <span className={cx('icon')}>{itemIcon}</span>}
           <div className={cx('title')}>
             {this.textRender()}
           </div>

diff --git a/packages/terra-outline-view/src/OutlineView.jsx b/packages/terra-outline-view/src/OutlineView.jsx
@@ -122,14 +122,21 @@ class OutlineView extends Component {
 
   buildSideMenuItems = (items) => {
     if (items) {
-      const menuItems = [{ key: 'menu', text: this.props.title, childKeys: items.map(k => k.key) }];
+      const menuItems = [{ key: 'menu', text: this.props.title, childKeys: items.map(k => k.key) }, { key: 'empty-child-key', text: 'Empty' }];
       const sideMenuItems = [];
       items.forEach(item => {
+        let childKeys;
+        if (item && item.props.subfolderItems) {
+          childKeys = item.props.subfolderItems.length ? item.props.subfolderItems.map(k => k.key) : ['empty-child-key'];
+        }
         menuItems.push({
           key: item.key,
           text: item.props.label,
           id: item.id,
-          childKeys: (item && item.props.subfolderItems) ? item.props.subfolderItems.map(k => k.key) : [],
+          childKeys: childKeys || [],
+          icon: item.props.icon,
+          showIcon: true,
+          hasSubMenu: item && item.props.subfolderItems && item.props.subfolderItems.length === 0,
         });
         if (item && item.props.subfolderItems) {
           const subMenuItems = this.buildSideMenuSubItems(item.props.subfolderItems);
@@ -145,11 +152,18 @@ class OutlineView extends Component {
     if (items) {
       const sideMenuItems = [];
       items.forEach(item => {
+        let childKeys;
+        if (item && item.props.subfolderItems) {
+          childKeys = item.props.subfolderItems.length ? item.props.subfolderItems.map(k => k.key) : ['empty-child-key'];
+        }
         sideMenuItems.push({
           key: item.key,
           text: item.props.label,
           id: item.id,
-          childKeys: (item && item.props.subfolderItems) ? item.props.subfolderItems.map(k => k.key) : [],
+          childKeys: childKeys || [],
+          icon: item.props.icon,
+          showIcon: true,
+          hasSubMenu: item && item.props.subfolderItems && item.props.subfolderItems.length === 0,
         });
         if (item && item.props.subfolderItems) {
           const subMenuItems = this.buildSideMenuSubItems(item.props.subfolderItems);

diff --git a/packages/terra-outline-view/src/subcomponents/OutlineViewItem.jsx b/packages/terra-outline-view/src/subcomponents/OutlineViewItem.jsx
@@ -11,6 +11,7 @@ const propTypes = {
   label: PropTypes.string.isRequired,
   /**
    * The icon to display to the left of the name.
+   * Icon usage is restricted to Documents or Hospital.
    */
   icon: PropTypes.element,
   /**