Merge pull request #1427 from dhis2/menu-item-suffix

feat: menu item suffix

components/menu/src/menu-item/features/accepts_suffix.feature

@@ -0,0 +1,5 @@
+Feature: The MenuItem accepts a suffix prop
+
+    Scenario: MenuItem renders supplied suffix
+        Given a MenuItem supplied with a suffix is rendered
+        Then the suffix will be visible

components/menu/src/menu-item/features/accepts_suffix/index.js

@@ -0,0 +1,10 @@
+import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
+
+Given('a MenuItem supplied with a suffix is rendered', () => {
+    cy.visitStory('MenuItem', 'With Suffix')
+    cy.get('[data-test="dhis2-uicore-menuitem"]').should('be.visible')
+})
+
+Then('the suffix will be visible', () => {
+    cy.contains('Suffix').should('be.visible')
+})

components/menu/src/menu-item/menu-item.js

@@ -39,6 +39,7 @@ const MenuItem = ({
     label,
     showSubMenu,
     toggleSubMenu,
+    suffix,
 }) => {
     const menuItemRef = useRef()
 
@@ -73,6 +74,8 @@ const MenuItem = ({
 
                     <span className="label">{label}</span>
 
+                    {suffix && <span className="suffix">{suffix}</span>}
+
                     {(chevron || children) && (
                         <span className="chevron">
                             <IconChevronRight24 />
@@ -118,6 +121,8 @@ MenuItem.propTypes = {
     label: PropTypes.node,
     /** When true, nested menu items are shown in a Popper */
     showSubMenu: PropTypes.bool,
+    /** A supporting element shown at the end of the menu item */
+    suffix: PropTypes.node,
     /** For using menu item as a link */
     target: PropTypes.string,
     /** On click, this function is called (without args) */

components/menu/src/menu-item/menu-item.stories.e2e.js

@@ -25,3 +25,5 @@ export const WithTarget = () => (
 export const WithIcon = () => (
     <MenuItem icon={<div>Icon</div>} label="Menu item" />
 )
+
+export const WithSuffix = () => <MenuItem suffix="Suffix" label="Menu item" />

components/menu/src/menu-item/menu-item.stories.js

@@ -1,4 +1,10 @@
-import { IconApps24 } from '@dhis2/ui-icons'
+import { Tag } from '@dhis2/ui'
+import { colors } from '@dhis2/ui-constants'
+import {
+    IconApps24,
+    IconVisualizationColumn24,
+    IconLaunch16,
+} from '@dhis2/ui-icons'
 import React, { useState } from 'react'
 import { Menu } from '../index.js'
 import { MenuItem } from './menu-item.js'
@@ -85,6 +91,20 @@ Icon.parameters = {
     },
 }
 
+export const Suffix = Template.bind({})
+Suffix.args = {
+    label: 'Open in Data Visualizer',
+    icon: <IconVisualizationColumn24 color={colors.grey600} />,
+    suffix: <IconLaunch16 color={colors.grey600} />,
+}
+
+export const SuffixAndChevron = Template.bind({})
+SuffixAndChevron.args = {
+    label: 'Security notifications',
+    chevron: true,
+    suffix: <Tag>3</Tag>,
+}
+
 export const OnClick = (args) => (
     <Menu>
         <MenuItem

components/menu/src/menu-item/menu-item.styles.js

@@ -96,6 +96,12 @@ export default css`
         height: 24px;
     }
 
+    .suffix {
+        display: flex;
+        align-items: center;
+        margin-left: ${spacers.dp8};
+    }
+
     .chevron {
         display: flex;
         align-items: center;

docs/docs/components/menu.md

@@ -3,7 +3,7 @@ title: Menu
 ---
 
 import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { FlyoutMenu, MenuItem, MenuDivider, MenuSectionHeader, IconSave24, IconDelete24, IconShare24, IconEdit24 } from '@dhis2/ui'
+import { FlyoutMenu, MenuItem, MenuDivider, MenuSectionHeader, IconSave24, IconDelete24, IconShare24, IconEdit24, IconVisualizationColumn24, IconFilter24, IconClock24, IconLaunch16 } from '@dhis2/ui'
 
 import API from '../../../components/menu/API.md'
 
@@ -106,6 +106,21 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
 -   Dividers can also show a section header, a text label for that group of menu items.
 -   Use a section header to clarify what the menu items refer to, but don't rely on it. Menus and menu item actions should be clear without needing section headers.
 
+### Suffix
+
+<Demo>
+    <FlyoutMenu className="demo-fullwidth">
+        <MenuItem icon= {<IconFilter24 />} label="Filter data" />
+        <MenuItem icon= {<IconClock24 />} label="Change time period" />
+        <MenuItem icon= {<IconVisualizationColumn24 />} label="Open in Data Visualizer app" suffix= {<IconLaunch16/>}/>
+    </FlyoutMenu>
+</Demo>
+
+-   A menu item can show a suffix.
+-   Use a suffix to show extra information about the context or intent of a menu item.
+-   Common use cases include showing a menu item's keyboard shortcut and showing an indicator that a menu item will open a new tab.
+-   Don't include interactive components, like buttons, in a menu item suffix.
+
 ### Icon
 
 <Demo>

docs/src/css/custom.css

@@ -248,3 +248,6 @@ footer {
     flex-direction: column;
     gap: 8px;
 }
+.demo-fullwidth {
+    width: 100%;
+}