From 676a9a922f0dc3ecc354a8d8819798f36ecd6d93 Mon Sep 17 00:00:00 2001 From: Saket Bajaj <42207428+saket2403@users.noreply.github.com> Date: Mon, 29 Aug 2022 22:51:13 +0530 Subject: [PATCH] Add action button (#306) --- packages/terra-application/CHANGELOG.md | 3 + .../ApplicationNavigation.jsx | 8 ++- .../private/ApplicationNavigation.jsx | 9 ++- .../DrawerMenuCommon.module.scss | 11 ++++ .../private/common/PopupMenuUser.module.scss | 7 ++- .../private/common/_PopupMenu.jsx | 16 +++-- .../private/common/_PopupMenuUser.jsx | 25 +++++++- .../drawer-menu/DrawerMenuUser.module.scss | 46 ++++++++++++++- .../private/drawer-menu/_DrawerMenu.jsx | 11 +++- .../private/drawer-menu/_DrawerMenuUser.jsx | 28 ++++++++- .../DrawerMenuCommon.module.scss | 11 ++++ .../private/utility-menu/_UtilityMenu.jsx | 9 ++- .../private/utils/helpers.js | 5 ++ .../private/utils/propTypes.js | 17 +++++- .../ApplicationNavigation.app.mdx | 20 ++++++- .../example/ApplicationNavigationExample.jsx | 8 +++ .../ApplicationNavigation.test.jsx | 7 +++ .../ApplicationNavigation.test.jsx | 4 ++ .../ApplicationNavigation.test.jsx.snap | 6 ++ .../drawer-menu/DrawerMenuUser.test.jsx | 8 +++ .../__snapshots__/DrawerMenu.test.jsx.snap | 1 + .../DrawerMenuUser.test.jsx.snap | 30 ++++++++++ .../private/utility-menu/UtilityMenu.test.jsx | 4 ++ .../__snapshots__/UtilityMenu.test.jsx.snap | 55 ++++++++++++++++++ .../1__Popup_Open.png | Bin 28643 -> 30231 bytes ...SelectLogout_called_on_clicking_logout.png | Bin 18368 -> 30231 bytes .../1__Drawer_Open.png | Bin 28340 -> 29290 bytes ...licationNavigation_displays_nav_drawer.png | Bin 28340 -> 29290 bytes ...awerMenuStateChange_callback_triggered.png | Bin 28340 -> 29290 bytes .../1__Popup_Open.png | Bin 27190 -> 28181 bytes ...SelectLogout_called_on_clicking_logout.png | Bin 17468 -> 28181 bytes .../1__Drawer_Open.png | Bin 151773 -> 150740 bytes ...licationNavigation_displays_nav_drawer.png | Bin 151773 -> 150740 bytes ...awerMenuStateChange_callback_triggered.png | Bin 151773 -> 150740 bytes .../1__Popup_Open.png | Bin 30699 -> 32157 bytes ...SelectLogout_called_on_clicking_logout.png | Bin 20342 -> 32157 bytes .../1__Drawer_Open.png | Bin 171502 -> 172473 bytes ...licationNavigation_displays_nav_drawer.png | Bin 171502 -> 172473 bytes ...awerMenuStateChange_callback_triggered.png | Bin 171502 -> 172473 bytes packages/terra-dev-site/CHANGELOG.md | 3 + .../chrome_huge/loaders-spec/props_table.png | Bin 180596 -> 180561 bytes 41 files changed, 331 insertions(+), 21 deletions(-) diff --git a/packages/terra-application/CHANGELOG.md b/packages/terra-application/CHANGELOG.md index 6b2ba99da..5f977e19c 100644 --- a/packages/terra-application/CHANGELOG.md +++ b/packages/terra-application/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added user action utility button. + ## 1.53.1 - (June 22, 2022) * Changed diff --git a/packages/terra-application/src/application-navigation/ApplicationNavigation.jsx b/packages/terra-application/src/application-navigation/ApplicationNavigation.jsx index 966a898ad..7306b7a79 100644 --- a/packages/terra-application/src/application-navigation/ApplicationNavigation.jsx +++ b/packages/terra-application/src/application-navigation/ApplicationNavigation.jsx @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import uuidv4 from 'uuid/v4'; import TerraApplicationNavigation from './private/ApplicationNavigation'; import { - titleConfigPropType, navigationItemsPropType, extensionItemsPropType, utilityItemsPropType, userConfigPropType, + titleConfigPropType, navigationItemsPropType, extensionItemsPropType, utilityItemsPropType, userConfigPropType, userActionConfigPropType, } from './private/utils/propTypes'; import ApplicationErrorBoundary from '../application-error-boundary'; @@ -113,6 +113,10 @@ const propTypes = { * A configuration object that defines the strings rendered within the ApplicationNavigation header. */ titleConfig: titleConfigPropType, + /** + * A configuration object to render an action button for user Config. + */ + userActionConfig: userActionConfigPropType, /** * A configuration object with information pertaining to the application's user. */ @@ -150,6 +154,7 @@ const ApplicationNavigation = ({ userConfig, utilityItems, workspace, + userActionConfig, }) => { const applicationIntl = React.useContext(ApplicationIntlContext); const navigationPromptCheckpointRef = useRef(); @@ -187,6 +192,7 @@ const ApplicationNavigation = ({ onSelectNavigationItem={propOnSelectNavigationItem && onSelectNavigationItem} activeNavigationItemKey={activeNavigationItemKey} userConfig={userConfig} + userActionConfig={userActionConfig} extensionItems={extensionItems} onSelectExtensionItem={onSelectExtensionItem} utilityItems={utilityItems} diff --git a/packages/terra-application/src/application-navigation/private/ApplicationNavigation.jsx b/packages/terra-application/src/application-navigation/private/ApplicationNavigation.jsx index ce88b8aef..f3c5b2dfa 100644 --- a/packages/terra-application/src/application-navigation/private/ApplicationNavigation.jsx +++ b/packages/terra-application/src/application-navigation/private/ApplicationNavigation.jsx @@ -15,7 +15,7 @@ import DrawerMenu from './drawer-menu/_DrawerMenu'; import UtilityMenu from './utility-menu/_UtilityMenu'; import { shouldRenderCompactNavigation } from './utils/helpers'; import { - titleConfigPropType, userConfigPropType, navigationItemsPropType, extensionItemsPropType, utilityItemsPropType, + titleConfigPropType, userConfigPropType, navigationItemsPropType, extensionItemsPropType, utilityItemsPropType, userActionConfigPropType, } from './utils/propTypes'; import WorkspaceLayout from './workspace-layout/WorkspaceLayout'; @@ -95,6 +95,10 @@ const propTypes = { * Ex: `onSelectLogout()` */ onSelectLogout: PropTypes.func, + /** + * A configuration object to render an action button for user Config. + */ + userActionConfig: userActionConfigPropType, /** * An array of configuration objects with information specifying the creation of additional utility menu items. * These items are rendered within the popup utility menu at larger breakpoints and within the drawer menu at smaller breakpoints. @@ -140,6 +144,7 @@ const ApplicationNavigation = ({ notifications, children, workspace, + userActionConfig, }) => { const drawerMenuRef = useRef(); const contentLayoutRef = useRef(); @@ -235,6 +240,7 @@ const ApplicationNavigation = ({ { const listRef = useRef(); const buttonRef = useRef(); @@ -120,6 +125,9 @@ const PopupMenu = ({ function setButtonRef(node) { buttonRef.current = node; } + useEffect(() => { + listRef.current.focus(); + }, []); function handleArrowDown(event) { if (listRef.current.hasChildNodes()) { @@ -201,7 +209,7 @@ const PopupMenu = ({ {customContent} ) : undefined} - {userConfig ? : null} + {userConfig ? : null}