Merge pull request #1438 from dhis2/merge-master

chore: merge master to alpha
dhis2 · Dec 8, 2023 · bd17a0a · bd17a0a
2 parents 9c83313 + a687b8c
commit bd17a0a
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,23 +1,9 @@
-# [9.0.0-alpha.1](https://github.com/dhis2/ui/compare/v8.16.0-alpha.2...v9.0.0-alpha.1) (2023-12-06)
+# [8.16.0](https://github.com/dhis2/ui/compare/v8.15.1...v8.16.0) (2023-12-07)
 
 
-### Bug Fixes
-
-* **constants:** remove buttonVariantProptype from constants ([#1436](https://github.com/dhis2/ui/issues/1436)) ([d4dc535](https://github.com/dhis2/ui/commit/d4dc5350ac4254feb7a4e0c1aa4a55113845e247))
-
-
-### BREAKING CHANGES
-
-* **constants:** `buttonVariantPropType` has been removed from constants.
-This is mostly intended for internal use, but was part of the public API.
-
-# [8.16.0-alpha.2](https://github.com/dhis2/ui/compare/v8.16.0-alpha.1...v8.16.0-alpha.2) (2023-11-29)
-
-
-### Bug Fixes
+### Features
 
-* **prop-type:** fix deprecation of buttonVariantPropType ([#1433](https://github.com/dhis2/ui/issues/1433)) ([81644a8](https://github.com/dhis2/ui/commit/81644a8e54cf7a4f29ff33536029df6e2bad9437))
-* **types:** minor type fixes ([#1434](https://github.com/dhis2/ui/issues/1434)) [skip release] ([5e1068d](https://github.com/dhis2/ui/commit/5e1068d5ce6be0e52bee1d98ace752b1bf08f683))
+* **menu-item:** add suffix prop ([77cd949](https://github.com/dhis2/ui/commit/77cd94953cf8c14b21373c53d055a8f8ed68110d))
 
 ## [8.15.1](https://github.com/dhis2/ui/compare/v8.15.0...v8.15.1) (2023-11-28)
 

diff --git a/collections/ui/API.md b/collections/ui/API.md
@@ -1122,6 +1122,7 @@ import { MenuItem } from '@dhis2/ui'
 |icon|node|||An icon for the left side of the menu item|
 |label|node|||Text in the menu item|
 |showSubMenu|boolean|||When true, nested menu items are shown in a Popper|
+|suffix|node|||A supporting element shown at the end of the menu item|
 |target|string|||For using menu item as a link|
 |toggleSubMenu|function|||On click, this function is called (without args)|
 |value|string|||Value associated with item. Passed as an argument to onClick handler.|

diff --git a/components/menu/API.md b/components/menu/API.md
@@ -90,6 +90,7 @@ import { MenuItem } from '@dhis2-ui/menu'
 |icon|node|||An icon for the left side of the menu item|
 |label|node|||Text in the menu item|
 |showSubMenu|boolean|||When true, nested menu items are shown in a Popper|
+|suffix|node|||A supporting element shown at the end of the menu item|
 |target|string|||For using menu item as a link|
 |toggleSubMenu|function|||On click, this function is called (without args)|
 |value|string|||Value associated with item. Passed as an argument to onClick handler.|

diff --git a/components/menu/src/menu-item/features/accepts_suffix.feature 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
@@ -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.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.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" />
diff --git a/components/menu/src/menu-item/menu-item.stories.js b/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

diff --git 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;

diff --git 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
@@ -248,3 +248,6 @@ footer {
     flex-direction: column;
     gap: 8px;
 }
+.demo-fullwidth {
+    width: 100%;
+}