MOON-351: Add highlight state for TreeView and MenuItem (#401)

Jahia · Nov 16, 2023 · 6ec65a4 · 6ec65a4
1 parent ce7221d
commit 6ec65a4
Show file tree

Hide file tree

Showing 15 changed files with 292 additions and 357 deletions.
diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx
@@ -31,7 +31,8 @@ export const Default: Story<MenuProps> = args => (
         <MenuItem label="Variants" variant="title"/>
         <MenuItem isHover label="Item3 - Hover"/>
         <MenuItem isDisabled label="Item3 - Disabled"/>
-        <MenuItem isSelected label="Item3 - Selected"/>
+        <MenuItem isHighlighted label="Item3 - Highlighted"/>
+        <MenuItem isSelected label="Item4 - Selected"/>
     </Menu>
 );
 Default.args = {

diff --git a/src/components/Menu/MenuItem.scss b/src/components/Menu/MenuItem.scss
@@ -26,6 +26,12 @@
         background-color: var(--color-accent);
     }
 
+    &.moonstone-highlighted {
+        color: var(--color-light);
+
+        background-color: var(--color-gray60);
+    }
+
     &:focus {
         outline: none;
         box-shadow: inset 0 0 0 2px var(--color-accent);

diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
@@ -7,8 +7,9 @@ import {MenuItemProps, MenuItemVariants} from './MenuItem.types';
 export const MenuItem: React.FC<MenuItemProps> = ({
     variant = MenuItemVariants.Default,
     isHover,
-    isSelected,
+    isSelected = false,
     isDisabled = false,
+    isHighlighted = false,
     iconStart = null,
     iconSize = null,
     iconEnd = null,
@@ -27,6 +28,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
                 'moonstone-hover': isHover,
                 'moonstone-selected': isSelected,
                 'moonstone-disabled': isDisabled,
+                'moonstone-highlighted': isHighlighted && !isSelected,
                 'moonstone-title': variant === MenuItemVariants.Title
             },
             image && 'moonstone-menuItem-image',

diff --git a/src/components/Menu/MenuItem.types.ts b/src/components/Menu/MenuItem.types.ts
@@ -29,6 +29,11 @@ export type MenuItemProps = {
      */
     isDisabled?: boolean,
 
+    /**
+     * Is item highlighted, cannot be selected at the same time
+     */
+    isHighlighted?: boolean,
+
     /**
      * MenuItem label
      */

diff --git a/src/components/TreeView/ControlledTreeView.tsx b/src/components/TreeView/ControlledTreeView.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import './TreeView.scss';
-import {ControlledTreeViewProps} from './ControlledTreeView.types';
-import {TreeViewData} from './TreeView.types';
+import type {ControlledTreeViewProps, TreeViewData} from './TreeView.types';
 
 import {Loading, ChevronDown, ChevronRight, CheckboxChecked, CheckboxUnchecked} from '~/icons';
 import {Typography} from '~/components/Typography';
@@ -33,6 +32,7 @@ const ControlledTreeViewForwardRef: React.ForwardRefRenderFunction<HTMLUListElem
         data,
         openedItems = [],
         selectedItems = [],
+        highlightedItems = [],
         showCheckbox = false,
         onClickItem = () => undefined,
         onDoubleClickItem = () => undefined,
@@ -55,6 +55,7 @@ const ControlledTreeViewForwardRef: React.ForwardRefRenderFunction<HTMLUListElem
             const isOpen = Boolean(openedItems.includes(node.id)) || !isClosable;
             const isLoading = Boolean(node.isLoading);
             const isSelected = Boolean(selectedItems.includes(node.id));
+            const isHighlighted = Boolean(highlightedItems.includes(node.id) && !isSelected);
 
             // ---
             // Manage clicks events
@@ -93,6 +94,7 @@ const ControlledTreeViewForwardRef: React.ForwardRefRenderFunction<HTMLUListElem
                 {
                     'moonstone-small': size === 'small',
                     'moonstone-selected': isSelected && !showCheckbox,
+                    'moonstone-highlighted': isHighlighted,
                     'moonstone-reversed': isReversed,
                     'moonstone-disabled': node.isDisabled
                 }
@@ -103,7 +105,10 @@ const ControlledTreeViewForwardRef: React.ForwardRefRenderFunction<HTMLUListElem
                     itemComponent,
                     {
                         role: 'treeitem',
+                        'aria-selected': isSelected,
                         'aria-expanded': isOpen,
+                        'aria-busy': isLoading,
+                        'aria-current': isHighlighted ? 'page' : null,
                         key: `${depth}-${node.id}`,
                         style: {'--treeItem-depth': depth},
                         ...node.treeItemProps
@@ -129,7 +134,7 @@ const ControlledTreeViewForwardRef: React.ForwardRefRenderFunction<HTMLUListElem
                             onContextMenu={handleNodeContextMenu}
                         >
                             {showCheckbox ?
-                                (isSelected ? <CheckboxChecked className="moonstone-treeView_itemIconStart" role="checkbox" color="blue"/> : <CheckboxUnchecked className="moonstone-treeView_itemIconStart" role="checkbox"/>) :
+                                (isSelected ? <CheckboxChecked className="moonstone-treeView_itemIconStart" role="checkbox" color="blue" aria-checked="true"/> : <CheckboxUnchecked className="moonstone-treeView_itemIconStart" role="checkbox" aria-checked="false"/>) :
                                 (displayIcon(node.iconStart, 'small', 'moonstone-treeView_itemIconStart', parentHasIconStart))}
                             <Typography isNowrap
                                         className={clsx('flexFluid')}
@@ -149,7 +154,7 @@ const ControlledTreeViewForwardRef: React.ForwardRefRenderFunction<HTMLUListElem
     }
 
     // TreeView component
-    return React.createElement(component, {ref, role: 'tree', ...props}, generateLevelJSX(data, 0, false));
+    return React.createElement(component, {ref, role: 'tree', 'aria-multiselectable': showCheckbox, ...props}, generateLevelJSX(data, 0, false));
 };
 
 export const ControlledTreeView = React.forwardRef(ControlledTreeViewForwardRef);
diff --git a/src/components/TreeView/ControlledTreeView.types.ts b/src/components/TreeView/ControlledTreeView.types.ts
diff --git a/src/components/TreeView/TreeView.scss b/src/components/TreeView/TreeView.scss
@@ -3,11 +3,13 @@
     --treeItem-color: inherit;
     --treeItem-color_hover: var(--color-dark);
     --treeItem-color_selected: var(--color-light);
+    --treeItem-color_highlighted: var(--color-light);
     --treeItem-color_selected_hover: var(--color-light);
     --treeItem-background: inherit;
     --treeItem-background_hover: var(--color-gray_light40);
     --treeItem-background_selected: var(--color-accent);
     --treeItem-background_selected_hover: var(--color-accent);
+    --treeItem-background_highlighted: var(--color-gray60);
 }
 
 .moonstone-treeView_item {
@@ -44,11 +46,18 @@
         }
     }
 
+    &.moonstone-highlighted {
+        color: var(--treeItem-color_highlighted);
+
+        background-color: var(--treeItem-background_highlighted);
+    }
+
     // Theme reversed
     &.moonstone-reversed {
         --treeItem-color: var(--color-gray_light);
         --treeItem-color_hover: var(--color-light);
         --treeItem-background_hover: var(--color-gray40);
+        --treeItem-background_highlighted: var(--color-gray_light40);
     }
 
     &.moonstone-disabled {