#719 - ActionMenu - Refresh UI + active state

packages/react-components/src/components/ActionMenu/ActionMenu.module.scss

@@ -6,15 +6,19 @@ $base-class: 'action-menu';
     border-radius: var(--radius-3);
     background-color: var(--picker-list-background);
     padding: 0;
+    padding: var(--spacing-2);
     overflow: hidden;
     list-style: none;
 
     &__item {
       display: flex;
+      position: relative;
       align-items: center;
+      margin-bottom: var(--spacing-05);
       outline: 0;
       border: 0;
       border-radius: 0;
+      border-radius: var(--radius-3);
       background: none;
       padding: 7px var(--spacing-3);
       width: 100%;
@@ -27,13 +31,31 @@ $base-class: 'action-menu';
         cursor: pointer;
       }
 
+      &:focus,
+      &:active {
+        background-color: var(--picker-list-option-background-active);
+      }
+
       &:focus {
         outline: 2px solid var(--action-primary-default);
         outline-offset: -2px;
       }
 
+      > * {
+        pointer-events: none;
+      }
+
       &--with-divider {
-        border-top: 1px solid var(--border-basic-secondary);
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          left: 0;
+          background-color: var(--border-basic-secondary);
+          width: 100%;
+          height: 1px;
+          content: '';
+        }
       }
 
       &--disabled {
@@ -44,6 +66,21 @@ $base-class: 'action-menu';
           cursor: not-allowed;
         }
       }
+
+      &--active {
+        background-color: var(--picker-list-option-background-active);
+
+        &::after {
+          position: absolute;
+          left: -8px;
+          border-top-right-radius: var(--radius-3);
+          border-bottom-right-radius: var(--radius-3);
+          background: var(--action-primary-default);
+          width: 3px;
+          height: 36px;
+          content: '';
+        }
+      }
     }
   }
 }

packages/react-components/src/components/ActionMenu/ActionMenu.stories.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { MoreHoriz } from '@livechat/design-system-icons/react/tabler';
 
+import { Checkbox } from '../Checkbox';
 import { Icon } from '../Icon';
 import { RadioButton } from '../RadioButton';
 import { Switch } from '../Switch';
@@ -31,35 +32,75 @@ export const Default = (): React.ReactElement => (
 );
 
 export const KeepOpenOnItemClick = (): React.ReactElement => {
-  const [checkboxValue, setCheckboxValue] = React.useState('one');
-  const [switchOneValue, setSwitchOneValue] = React.useState(false);
+  const [radioButtonValue, setRadioButtonValue] = React.useState('one');
+  const [switchOneValue, setSwitchOneValue] = React.useState(true);
   const [switchTwoValue, setSwitchTwoValue] = React.useState(false);
+  const [checkboxOneValue, setCheckboxOneValue] = React.useState(true);
+  const [checkboxTwoValue, setCheckboxTwoValue] = React.useState(true);
+  const [activeOptionsKeys, setActiveOptionsKeys] = React.useState([
+    'one',
+    'three',
+    'five',
+    'six',
+  ]);
+
+  const handleOptionSelect = (
+    key: string,
+    type: string,
+    optionHandler: void
+  ) => {
+    const newActiveOptions = activeOptionsKeys;
+
+    if (type === 'radio') {
+      if (!activeOptionsKeys.includes(key)) {
+        const keyToRemove = key === 'one' ? 'two' : 'one';
+        const index = activeOptionsKeys.indexOf(keyToRemove);
+        newActiveOptions.splice(index, 1);
+        setActiveOptionsKeys([...newActiveOptions, key]);
+      }
+    }
+
+    if (type === 'switch' || type === 'checkbox') {
+      if (activeOptionsKeys.includes(key)) {
+        const index = activeOptionsKeys.indexOf(key);
+        newActiveOptions.splice(index, 1);
+        setActiveOptionsKeys([...newActiveOptions]);
+      } else {
+        activeOptionsKeys.push(key);
+      }
+    }
+
+    return optionHandler;
+  };
 
   return (
     <div className="action-menu-preview">
       <ActionMenu
+        activeOptionKeys={activeOptionsKeys}
         options={[
           {
             key: 'one',
             element: (
               <ActionMenuItem>
-                <RadioButton checked={checkboxValue === 'one'}>
+                <RadioButton checked={radioButtonValue === 'one'}>
                   Radio label one
                 </RadioButton>
               </ActionMenuItem>
             ),
-            onClick: () => setCheckboxValue('one'),
+            onClick: () =>
+              handleOptionSelect('one', 'radio', setRadioButtonValue('one')),
           },
           {
             key: 'two',
             element: (
               <ActionMenuItem>
-                <RadioButton checked={checkboxValue === 'two'}>
+                <RadioButton checked={radioButtonValue === 'two'}>
                   Radio label two
                 </RadioButton>
               </ActionMenuItem>
             ),
-            onClick: () => setCheckboxValue('two'),
+            onClick: () =>
+              handleOptionSelect('two', 'radio', setRadioButtonValue('two')),
           },
           {
             key: 'three',
@@ -73,7 +114,12 @@ export const KeepOpenOnItemClick = (): React.ReactElement => {
                 Toggle label one
               </ActionMenuItem>
             ),
-            onClick: () => setSwitchOneValue((s) => !s),
+            onClick: () =>
+              handleOptionSelect(
+                'three',
+                'switch',
+                setSwitchOneValue((s) => !s)
+              ),
           },
           {
             key: 'four',
@@ -87,7 +133,49 @@ export const KeepOpenOnItemClick = (): React.ReactElement => {
                 Toggle label two
               </ActionMenuItem>
             ),
-            onClick: () => setSwitchTwoValue((s) => !s),
+            onClick: () =>
+              handleOptionSelect(
+                'four',
+                'switch',
+                setSwitchTwoValue((s) => !s)
+              ),
+          },
+          {
+            key: 'five',
+            withDivider: true,
+            element: (
+              <ActionMenuItem
+                leftNode={
+                  <Checkbox checked={checkboxOneValue}>
+                    Checkbox label one
+                  </Checkbox>
+                }
+              />
+            ),
+            onClick: () =>
+              handleOptionSelect(
+                'five',
+                'checkbox',
+                setCheckboxOneValue((s) => !s)
+              ),
+          },
+          {
+            key: 'six',
+            element: (
+              <ActionMenuItem
+                leftNode={
+                  <Checkbox checked={checkboxTwoValue}>
+                    Checkbox label two
+                  </Checkbox>
+                }
+              />
+            ),
+            onClick: () =>
+              handleOptionSelect(
+                'six',
+                'checkbox',
+                setCheckboxTwoValue((s) => !s)
+              ),
           },
         ]}
         triggerRenderer={<Icon source={MoreHoriz} kind="primary" />}

packages/react-components/src/components/ActionMenu/ActionMenu.tsx

@@ -40,6 +40,10 @@ export interface ActionMenuProps {
    * Menu will stay open after option click
    */
   keepOpenOnClick?: boolean;
+  /**
+   * Set the keys array for active elements
+   */
+  activeOptionKeys?: string[];
 }
 
 const baseClass = 'action-menu';
@@ -51,6 +55,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
   placement = 'bottom-end',
   openedOnInit = false,
   keepOpenOnClick,
+  activeOptionKeys,
   ...props
 }) => {
   const [isVisible, setIsVisible] = React.useState(openedOnInit);
@@ -137,6 +142,8 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
                 [styles[`${baseClass}__list__item--disabled`]]: o.disabled,
                 [styles[`${baseClass}__list__item--with-divider`]]:
                   o.withDivider,
+                [styles[`${baseClass}__list__item--active`]]:
+                  activeOptionKeys?.includes(o.key),
               })}
             >
               {o.element}