From 77cd94953cf8c14b21373c53d055a8f8ed68110d Mon Sep 17 00:00:00 2001 From: Joseph John Aas Cooper 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 = ({ {label} + {suffix && {suffix}} + {(chevron || children) && ( @@ -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 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: , + suffix: , +} + export const OnClick = (args) => ( + + } label="Filter data" /> + } label="Change time period" /> + } label="Open in Data Visualizer app" suffix= {}/> + + + +- 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 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 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 = () => ( Icon} label="Menu item" /> ) + +export const WithSuffix = () => From 6c0bee8b2aaeeff66033a40744899cad591810a7 Mon Sep 17 00:00:00 2001 From: Joseph John Aas Cooper 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: , } +export const SuffixAndChevron = Template.bind({}) +SuffixAndChevron.args = { + label: 'Security notifications', + chevron: true, + suffix: 3, +} + export const OnClick = (args) => (