fix(MenuItem): QUV-1108 Avoid adding extra space to the left, based i…

…n a new state 'active' and in presence of selectionScheme prop
DevoInc · Jun 8, 2023 · 82d1b99 · 82d1b99
1 parent f50d5b5
commit 82d1b99
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 7 deletions.
diff --git a/packages/core/src/components/Menu/subcomponents/MenuItem/MenuItem.stories.tsx b/packages/core/src/components/Menu/subcomponents/MenuItem/MenuItem.stories.tsx
@@ -92,6 +92,22 @@ export const Selectable: Story = {
     })(),
 };
 
+export const ActiveForNavigation: Story = {
+  name: 'Active for navigation',
+  render: () =>
+    (() => {
+      const [active, setActive] = React.useState(false);
+      const onOptionClick = () => setActive(!active);
+      return (
+        <Menu.Item
+          label="Option one"
+          onClick={onOptionClick}
+          state={active ? 'active' : 'enabled'}
+        />
+      );
+    })(),
+};
+
 export const CustomContent: Story = {
   render: () =>
     (() => {

diff --git a/packages/core/src/components/Menu/subcomponents/MenuItem/MenuItem.tsx b/packages/core/src/components/Menu/subcomponents/MenuItem/MenuItem.tsx
@@ -109,6 +109,13 @@ export const MenuItem: React.FC<MenuItemProps> = ({
     : selectionScheme === 'multiple'
     ? 'menuitemcheckbox'
     : 'menuitem';
+  const hasExtraLeftSpaceEval =
+    (hasExtraLeftSpace ||
+      Boolean(icon) ||
+      isSelectable ||
+      Boolean(selectionScheme)) &&
+    !Boolean(children);
+
   return (
     <StyledMenuItem as={as}>
       <StyledMenuItemInner
@@ -120,10 +127,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
         as={isLink ? 'a' : isSelectable ? 'label' : 'button'}
         disabled={!isLink && !isSelectable && isDisabled}
         download={download}
-        hasExtraLeftSpace={
-          (hasExtraLeftSpace || Boolean(icon) || isSelectable) &&
-          !Boolean(children)
-        }
+        hasExtraLeftSpace={hasExtraLeftSpaceEval}
         href={isDisabled ? null : href}
         id={id}
         name={isSelectable ? null : name}

diff --git a/packages/core/src/components/Menu/subcomponents/MenuItem/styled/StyledMenuItemInner.ts b/packages/core/src/components/Menu/subcomponents/MenuItem/styled/StyledMenuItemInner.ts
@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import {
+  ActiveState,
   BasicState,
   ButtonAttrProps,
   ExpandedState,
@@ -28,6 +29,7 @@ export interface StyledMenuItemInnerProps
   /** State of the menu item */
   state?:
     | BasicState
+    | ActiveState
     | MouseState
     | FeaturedState
     | SelectedState
@@ -37,6 +39,7 @@ export interface StyledMenuItemInnerProps
 
 export const StyledMenuItemInner = styled.button<StyledMenuItemInnerProps>`
   ${({ hasExtraLeftSpace, state = 'enabled', theme, unlimitedHeight }) => {
+    const stateForTokens = state === 'active' ? 'activated' : state;
     const aliasTokens = theme.alias;
     const tokens = aliasTokens.menus.item;
     const horPadding = menuItemSizeConfig(theme).horPadding;
@@ -60,8 +63,8 @@ export const StyledMenuItemInner = styled.button<StyledMenuItemInnerProps>`
         ${aliasTokens.mutation.transitionDuration.action};
       height: ${unlimitedHeight ? 'auto' : tokens.size.minHeight};
       padding: ${unlimitedHeight ? horPadding : `0 ${horPadding}`};
-      background-color: ${tokens.color.background[state]};
-      color: ${tokens.color.text[state]};
+      background-color: ${tokens.color.background[stateForTokens]};
+      color: ${tokens.color.text[stateForTokens]};
       cursor: pointer;
       text-decoration: none;
 
@@ -109,7 +112,7 @@ export const StyledMenuItemInner = styled.button<StyledMenuItemInnerProps>`
       ${(state === 'expanded' || state === 'hovered' || state === 'pressed') &&
       css`
         &&& {
-          ${menuItemBackdropMixin({ tokens, state })};
+          ${menuItemBackdropMixin({ tokens, state: stateForTokens })};
         }
       `}
 

diff --git a/packages/core/src/declarations/commonProps.ts b/packages/core/src/declarations/commonProps.ts
@@ -128,6 +128,8 @@ export type ExpandedState = 'expanded';
 
 export type FeaturedState = 'featured';
 
+export type ActiveState = 'active';
+
 export type ReadonlyState = 'readonly';
 
 export type UIState = 'created' | 'deleted';