diff --git a/CHANGELOG.md b/CHANGELOG.md index a997206aaf..bd406ec8c4 100644 --- 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 index 8601d0f560..696a60c073 100644 --- 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 index 97fcf668ea..0c94d19033 100644 --- 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 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.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.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 = () => diff --git a/components/menu/src/menu-item/menu-item.stories.js b/components/menu/src/menu-item/menu-item.stories.js index 597c898663..ff4607aa06 100644 --- 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: , + suffix: , +} + +export const SuffixAndChevron = Template.bind({}) +SuffixAndChevron.args = { + label: 'Security notifications', + chevron: true, + suffix: 3, +} + 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%; +}