Menu content update

apps/docs/src/data/structures/components.js

@@ -864,7 +864,7 @@ export const components = [
     accessibility: 'Passed WCAG 2.2 AA',
     category: 'Controls',
     description:
-      'Menu is a component that contains a list of actions. When a user clicks an item in the menu, the menu closes and the action is executed.',
+      'A menu presents a set of related actions from which a user may choose.',
     seoDescription:
       'Menu contains a list of actions. See some best UX practices .',
     sections: [

apps/docs/src/examples/components/menu/MenuAnatomy.js

@@ -0,0 +1,187 @@
+import React, { useContext } from 'react';
+import { Box, Grid, Diagram, Stack, ThemeContext } from 'grommet';
+import { Add } from '@hpe-design/icons-grommet';
+import { Annotation } from '../../../layouts';
+import {
+  MenuMockButton,
+  MenuMockContainer,
+  MenuMockItem,
+  MenuMockGroup,
+} from './MenuMock';
+
+const color = 'border';
+const thickness = 'hair';
+const type = 'direct';
+
+const connections = [
+  {
+    anchor: 'horizontal',
+    type,
+    color,
+    thickness,
+    fromTarget: '1',
+    toTarget: 'menu-button',
+  },
+  {
+    anchor: 'vertical',
+    type,
+    color,
+    thickness,
+    fromTarget: '1a',
+    toTarget: 'menu-label',
+  },
+  {
+    anchor: 'vertical',
+    type,
+    color,
+    thickness,
+    fromTarget: '1b',
+    toTarget: 'menu-icon',
+  },
+  {
+    anchor: 'horizontal',
+    type,
+    color,
+    thickness,
+    fromTarget: '2',
+    toTarget: 'drop-container',
+  },
+  {
+    anchor: 'horizontal',
+    type,
+    color,
+    thickness,
+    fromTarget: '3',
+    toTarget: 'menu-item-target',
+  },
+  {
+    anchor: 'vertical',
+    type,
+    color,
+    thickness,
+    fromTarget: '3a',
+    toTarget: 'item-label',
+  },
+  {
+    anchor: 'vertical',
+    type,
+    color,
+    thickness,
+    fromTarget: '3b',
+    toTarget: 'item-icon',
+  },
+  {
+    anchor: 'horizontal',
+    type,
+    color,
+    thickness,
+    fromTarget: '4',
+    toTarget: 'divider-target',
+  },
+];
+
+const AnatomyGrid = ({ ...rest }) => (
+  <Grid
+    columns={['max-content', 'max-content', '5xsmall']}
+    rows={[
+      '5xsmall',
+      'flex',
+      'flex',
+      'flex',
+      'flex',
+      'flex',
+      'flex',
+      'flex',
+      'flex',
+      'flex',
+      '5xsmall',
+    ]}
+    areas={[
+      ['annotation-1a', 'annotation-1b', 'empty-0'],
+      ['menu-area', 'menu-area', 'annotation-1'],
+      ['menu-area', 'menu-area', 'empty-1'],
+      ['menu-area', 'menu-area', 'annotation-2'],
+      ['menu-area', 'menu-area', 'empty-2'],
+      ['menu-area', 'menu-area', 'empty-3'],
+      ['menu-area', 'menu-area', 'annotation-4'],
+      ['menu-area', 'menu-area', 'empty-4'],
+      ['menu-area', 'menu-area', 'empty-5'],
+      ['menu-area', 'menu-area', 'annotation-3'],
+      ['annotation-3a', 'annotation-3b', 'empty-6'],
+    ]}
+    align="center"
+    justify="center"
+    {...rest}
+  />
+);
+
+export const MenuAnatomy = () => {
+  const theme = useContext(ThemeContext);
+  const menuTheme = theme?.menu || {};
+  const dropTheme = theme?.global.drop || {};
+
+  const annotations = [
+    { id: '1', gridArea: 'annotation-1', target: '1' },
+    { id: '1a', gridArea: 'annotation-1a', target: '1a' },
+    { id: '1b', gridArea: 'annotation-1b', target: '1b' },
+    { id: '2', gridArea: 'annotation-2', target: '2' },
+    { id: '3', gridArea: 'annotation-3', target: '3' },
+    { id: '3a', gridArea: 'annotation-3a', target: '3a' },
+    { id: '3b', gridArea: 'annotation-3b', target: '3b' },
+    { id: '4', gridArea: 'annotation-4', target: '4' },
+  ];
+
+  return (
+    <Stack margin={{ bottom: 'medium' }} interactiveChild="last">
+      <AnatomyGrid>
+        {annotations.map(({ id, gridArea, target, ...rest }) => (
+          <Annotation
+            key={id}
+            id={id}
+            target={target}
+            gridArea={gridArea}
+            {...rest}
+          />
+        ))}
+
+        {/* Menu anatomy mockup */}
+        <Box gridArea="menu-area" align="start">
+          {/* Adding bounding box to add dashed outline for clarity */}
+          <Box
+            border={{ style: 'dashed' }}
+            round="small"
+            margin={dropTheme.margin}
+          >
+            <MenuMockButton
+              round="small"
+              id="menu-button"
+              label={<Box id="menu-label">Menu</Box>}
+              icon={<Box id="menu-icon">{menuTheme.icons?.down.render()}</Box>}
+            />
+          </Box>
+          <MenuMockContainer>
+            <MenuMockGroup id="drop-container">
+              <MenuMockItem label="Action" />
+              <MenuMockItem label="Action" />
+              <MenuMockItem label="Action" />
+            </MenuMockGroup>
+            <MenuMockGroup showDivider dividerProps={{ id: 'divider-target' }}>
+              <MenuMockItem label="Action" />
+              <MenuMockItem icon={<Add />} label="Action" />
+              {/* Adding bounding box to add dashed outline for clarity */}
+              <Box border={{ style: 'dashed' }} round="small">
+                <MenuMockItem
+                  id="menu-item-target"
+                  label={<Box id="item-label">Action</Box>}
+                  icon={<Add id="item-icon" />}
+                  reverse
+                />
+              </Box>
+            </MenuMockGroup>
+          </MenuMockContainer>
+        </Box>
+      </AnatomyGrid>
+      <Diagram connections={connections} />
+    </Stack>
+  );
+};

apps/docs/src/examples/components/menu/MenuDangerousExample.js

@@ -1,17 +1,17 @@
 import PropTypes from 'prop-types';
-import { Menu, Notification } from 'grommet';
+import { Notification } from 'grommet';
 
 import { useState } from 'react';
 import { DestructiveConfirmation } from '../../templates';
+import { MenuMock } from './MenuMock';
 
 export const MenuDangerousExample = ({ bestPractice = true }) => {
   const [showModal, setShowModal] = useState(false);
   const [toast, setToast] = useState(false);
 
   const items = [
-    { label: 'View details', onClick: () => {} },
-    { label: 'Edit profile', onClick: () => {} },
-    { label: 'Apply blueprint', onClick: () => {} },
+    { label: 'Edit' },
+    { label: 'View servers' },
     {
       label: 'Delete',
       onClick: () => {
@@ -23,9 +23,8 @@ export const MenuDangerousExample = ({ bestPractice = true }) => {
 
   return (
     <>
-      <Menu
+      <MenuMock
         label="Actions"
-        open
         items={
           bestPractice
             ? [items.slice(0, items.length - 1), items.slice(-1)]
@@ -34,10 +33,10 @@ export const MenuDangerousExample = ({ bestPractice = true }) => {
       />
       {showModal && (
         <DestructiveConfirmation
-          title="Delete profile"
-          message={`This will permanently delete this profile, 
+          title="Delete server"
+          message={`This will permanently delete this server, 
           including all history, located at:`}
-          path="/servers/profiles/KCHDvfcByKvvjymNheg"
+          path="/servers/KCHDvfcByKvvjymNheg"
           setShowModal={setShowModal}
           setToast={setToast}
         />
@@ -46,7 +45,7 @@ export const MenuDangerousExample = ({ bestPractice = true }) => {
         <Notification
           toast
           status="normal"
-          message="Profile deleted."
+          message="Server deleted."
           onClose={() => setToast(false)}
         />
       )}

apps/docs/src/examples/components/menu/MenuDefaultExample.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Menu } from 'grommet';
+
+export const MenuDefaultExample = () => {
+  const items = [
+    { label: 'Edit' },
+    { label: 'View servers' },
+    { label: 'Add servers' },
+  ];
+
+  return <Menu label="Servers" items={items} alignSelf="start" />;
+};

apps/docs/src/examples/components/menu/MenuGroupingExample.js

@@ -1,21 +1,31 @@
 import PropTypes from 'prop-types';
-import { Menu } from 'grommet';
+import { MenuMock } from './MenuMock';
 
 export const MenuGroupingExample = ({ bestPractice = true }) => (
-  <Menu
-    label="Actions"
-    open
+  <MenuMock
+    label="Servers"
     items={
       bestPractice
         ? [
-            { label: 'View', onClick: () => {} },
-            { label: 'Add to group', onClick: () => {} },
-            { label: 'Update firmware', onClick: () => {} },
+            [
+              { label: 'Edit' },
+              {
+                label: 'View servers',
+              },
+              { label: 'Add servers' },
+              { label: 'Remove servers' },
+            ],
+            [{ label: 'Update firmware' }, { label: 'Update BIOS settings' }],
+            [{ label: 'Delete' }],
           ]
         : [
-            [{ label: 'View', onClick: () => {} }],
-            [{ label: 'Add to group', onClick: () => {} }],
-            [{ label: 'Update firmware', onClick: () => {} }],
+            [{ label: 'Edit' }],
+            [{ label: 'View servers' }],
+            [{ label: 'Add servers' }],
+            [{ label: 'Remove servers' }],
+            [{ label: 'Update firmware' }],
+            [{ label: 'Update BIOS settings' }],
+            [{ label: 'Delete' }],
           ]
     }
   />

apps/docs/src/examples/components/menu/MenuIconExample.js

@@ -1,31 +1,26 @@
 import React from 'react';
-import { Box, List, Menu } from 'grommet';
-import { More } from '@hpe-design/icons-grommet';
+import { Box, Menu } from 'grommet';
+import { More, Settings } from '@hpe-design/icons-grommet';
 
 export const MenuIconExample = () => {
-  const data = ['User 1', 'User 2', 'User 3'];
-
   return (
-    <Box width={{ max: 'xlarge' }} fill>
-      <List
-        data={data}
-        pad="xsmall"
-        action={() => (
-          <Box direction="row" align="center" gap="medium">
-            <Menu
-              icon={<More />}
-              hoverIndicator
-              items={[{ label: 'Deactivate' }, { label: 'Suspend' }]}
-            />
-          </Box>
-        )}
-      >
-        {(datum, index) => (
-          <Box key={index} direction="row" align="center" justify="between">
-            {datum}
-          </Box>
-        )}
-      </List>
+    <Box direction="row" align="start" gap="small">
+      <Menu
+        icon={<More />}
+        items={[
+          { label: 'Edit' },
+          { label: 'View servers' },
+          { label: 'Add servers' },
+        ]}
+      />
+      <Menu
+        icon={<Settings />}
+        items={[
+          { label: 'Edit preferences' },
+          { label: 'View system details' },
+          { label: 'Reset system settings' },
+        ]}
+      />
     </Box>
   );
 };

apps/docs/src/examples/components/menu/MenuItemCountExample.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import { MenuMock } from './MenuMock';
+
+export const MenuItemCountExample = ({ bestPractice = true }) => (
+  <MenuMock
+    label="Servers"
+    items={
+      bestPractice
+        ? [
+            { label: 'Edit' },
+            { label: 'View servers' },
+            { label: 'Add servers' },
+            { label: 'Remove servers' },
+          ]
+        : [
+            [
+              { label: 'Edit' },
+              { label: 'View servers' },
+              { label: 'Add servers' },
+              { label: 'Remove servers' },
+            ],
+            [
+              { label: 'Reset servers' },
+              { label: 'Update firmware' },
+              { label: 'Update BIOS settings' },
+            ],
+            [{ label: 'Delete' }],
+          ]
+    }
+  />
+);
+
+MenuItemCountExample.propTypes = {
+  bestPractice: PropTypes.bool,
+};