From 77cd94953cf8c14b21373c53d055a8f8ed68110d Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Tue, 21 Nov 2023 15:24:14 +0100
Subject: [PATCH 1/4] feat(menu-item): add suffix prop
---
components/menu/src/menu-item/menu-item.js | 5 +++++
components/menu/src/menu-item/menu-item.styles.js | 6 ++++++
2 files changed, 11 insertions(+)
diff --git a/components/menu/src/menu-item/menu-item.js b/components/menu/src/menu-item/menu-item.js
index e322ef7df0..a3d21ea83e 100644
--- a/components/menu/src/menu-item/menu-item.js
+++ b/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) */
diff --git a/components/menu/src/menu-item/menu-item.styles.js b/components/menu/src/menu-item/menu-item.styles.js
index 7e5e5d3e77..13de49d4aa 100644
--- a/components/menu/src/menu-item/menu-item.styles.js
+++ b/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;
From 907f7467f76935be2e6cba085716c4eed9472088 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Tue, 21 Nov 2023 15:25:55 +0100
Subject: [PATCH 2/4] docs(menu-item): add suffix examples
---
.../menu/src/menu-item/menu-item.stories.js | 14 +++++++++++++-
docs/docs/components/menu.md | 17 ++++++++++++++++-
docs/src/css/custom.css | 3 +++
3 files changed, 32 insertions(+), 2 deletions(-)
diff --git a/components/menu/src/menu-item/menu-item.stories.js b/components/menu/src/menu-item/menu-item.stories.js
index 597c898663..c9ed8b5f93 100644
--- a/components/menu/src/menu-item/menu-item.stories.js
+++ b/components/menu/src/menu-item/menu-item.stories.js
@@ -1,4 +1,9 @@
-import { IconApps24 } from '@dhis2/ui-icons'
+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 +90,13 @@ 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 OnClick = (args) => (
<Menu>
<MenuItem
diff --git a/docs/docs/components/menu.md b/docs/docs/components/menu.md
index b68ab7e2a3..1bcd6ffc90 100644
--- a/docs/docs/components/menu.md
+++ b/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>
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 9d7ec24c6d..a764d94f73 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -248,3 +248,6 @@ footer {
flex-direction: column;
gap: 8px;
}
+.demo-fullwidth {
+ width: 100%;
+}
From 02bc9fe8de02677f94140aa200da850aa3a4ce9e Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Tue, 21 Nov 2023 15:26:28 +0100
Subject: [PATCH 3/4] test(menu-item): test suffix prop
---
.../menu/src/menu-item/features/accepts_suffix.feature | 5 +++++
.../src/menu-item/features/accepts_suffix/index.js | 10 ++++++++++
components/menu/src/menu-item/menu-item.stories.e2e.js | 2 ++
3 files changed, 17 insertions(+)
create mode 100644 components/menu/src/menu-item/features/accepts_suffix.feature
create mode 100644 components/menu/src/menu-item/features/accepts_suffix/index.js
diff --git a/components/menu/src/menu-item/features/accepts_suffix.feature b/components/menu/src/menu-item/features/accepts_suffix.feature
new file mode 100644
index 0000000000..dbc30cc762
--- /dev/null
+++ b/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
diff --git a/components/menu/src/menu-item/features/accepts_suffix/index.js b/components/menu/src/menu-item/features/accepts_suffix/index.js
new file mode 100644
index 0000000000..e61d19f251
--- /dev/null
+++ b/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')
+})
diff --git a/components/menu/src/menu-item/menu-item.stories.e2e.js b/components/menu/src/menu-item/menu-item.stories.e2e.js
index 3168e41875..3178e6d6b4 100644
--- a/components/menu/src/menu-item/menu-item.stories.e2e.js
+++ b/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" />
From 6c0bee8b2aaeeff66033a40744899cad591810a7 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Thu, 23 Nov 2023 10:52:50 +0100
Subject: [PATCH 4/4] docs(menu-item): add suffix and chevron story
---
components/menu/src/menu-item/menu-item.stories.js | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/components/menu/src/menu-item/menu-item.stories.js b/components/menu/src/menu-item/menu-item.stories.js
index c9ed8b5f93..ff4607aa06 100644
--- a/components/menu/src/menu-item/menu-item.stories.js
+++ b/components/menu/src/menu-item/menu-item.stories.js
@@ -1,3 +1,4 @@
+import { Tag } from '@dhis2/ui'
import { colors } from '@dhis2/ui-constants'
import {
IconApps24,
@@ -97,6 +98,13 @@ Suffix.args = {
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