From 5dcf4a2d38b87d46bdd2b3ff153ec4c3b24c4970 Mon Sep 17 00:00:00 2001 From: Eric Xian Date: Fri, 29 Mar 2024 13:08:48 -0700 Subject: [PATCH 1/3] Update DrawerFooter with additionalPrimaryActions prop: - also add trailing icon to dropdown item --- spec/__snapshots__/Storyshots.test.js.snap | 127 ++++++++++++++++++--- src/Drawer/Drawer.mdx | 4 + src/Drawer/Drawer.stories.jsx | 58 +++++++++- src/Drawer/DrawerFooter.jsx | 81 +++++++++---- src/Drawer/DrawerFooter.scss | 1 + src/Dropdown/Dropdown.stories.jsx | 2 +- src/Dropdown/DropdownItem.jsx | 6 +- src/Dropdown/DropdownItem.module.scss | 6 +- 8 files changed, 243 insertions(+), 42 deletions(-) diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap index bc1d8d33..e72980be 100644 --- a/spec/__snapshots__/Storyshots.test.js.snap +++ b/spec/__snapshots__/Storyshots.test.js.snap @@ -5927,6 +5927,101 @@ Array [ ] `; +exports[`Storyshots Components/Drawer Additional Primary Actions 1`] = ` +Array [ + , +
, +
+
+
+ Title goes here +
+ +
+
+

+ Proin elementum vitae nibh nec tincidunt. Donec vel placerat mi, vitae malesuada odio. Sed varius libero sed erat faucibus ultrices. Suspendisse potenti. Mauris sit amet sollicitudin urna. Donec porttitor, est quis aliquet condimentum, nisi felis porta odio, eu luctus dui ex id nisi. Curabitur ultrices enim in dolor laoreet porta. Proin vehicula at nisl a maximus. Sed lorem enim, elementum in arcu eu, lacinia consequat arcu. Pellentesque non nibh viverra, imperdiet purus at, finibus turpis. Sed mattis erat a risus dignissim, eu ultrices est rhoncus. Fusce nec feugiat tortor. Quisque tincidunt nulla urna, ut egestas massa congue a. Quisque metus felis, auctor sit amet posuere eu, aliquam blandit libero. Mauris sodales, velit sit amet egestas aliquet, ipsum arcu porta lacus, vitae mattis felis elit in metus. Nulla ligula ligula, laoreet in dictum sit amet, pretium ac est. +

+
+
+
+
+ +
+ +
+
+
+
, +] +`; + exports[`Storyshots Components/Drawer Default 1`] = ` Array [ + + + +

+ Proin elementum vitae nibh nec tincidunt. Donec vel placerat mi, + vitae malesuada odio. Sed varius libero sed erat faucibus ultrices. + Suspendisse potenti. Mauris sit amet sollicitudin urna. Donec + porttitor, est quis aliquet condimentum, nisi felis porta odio, eu + luctus dui ex id nisi. Curabitur ultrices enim in dolor laoreet + porta. Proin vehicula at nisl a maximus. Sed lorem enim, elementum in + arcu eu, lacinia consequat arcu. Pellentesque non nibh viverra, + imperdiet purus at, finibus turpis. Sed mattis erat a risus + dignissim, eu ultrices est rhoncus. Fusce nec feugiat tortor. Quisque + tincidunt nulla urna, ut egestas massa congue a. Quisque metus felis, + auctor sit amet posuere eu, aliquam blandit libero. Mauris sodales, + velit sit amet egestas aliquet, ipsum arcu porta lacus, vitae mattis + felis elit in metus. Nulla ligula ligula, laoreet in dictum sit amet, + pretium ac est. +

+ + null }, + { text: 'Save and preview', onClick: () => null, trailingIcon: faUpRightFromSquare }, + ]} + primaryActionIcon={faEnvelope} + primaryActionText="Send" + secondaryActionText="Cancel" + onSecondaryAction={toggleVisible} + /> + + + ); +}; + export const Empty = () => { const [isVisible, setVisible] = useState(false); diff --git a/src/Drawer/DrawerFooter.jsx b/src/Drawer/DrawerFooter.jsx index fe4cd6cf..f46a9382 100644 --- a/src/Drawer/DrawerFooter.jsx +++ b/src/Drawer/DrawerFooter.jsx @@ -2,11 +2,15 @@ import React from 'react'; import * as propTypes from 'prop-types'; import Button from 'src/Button'; +import { + Dropdown, DropdownToggle, DropdownItem, DropdownMenu, +} from 'src/Dropdown'; import './DrawerFooter.scss'; const DrawerFooter = ({ children, + additionalPrimaryActions, isPrimaryActionLoading, isSecondaryActionLoading, primaryActionDisabled, @@ -19,13 +23,16 @@ const DrawerFooter = ({ secondaryActionText, onPrimaryAction, onSecondaryAction, -}) => ( -
-
- {children} -
-
- {onSecondaryAction && ( +}) => { + const isDropdownToggle = !!additionalPrimaryActions.length; + + return ( +
+
+ {children} +
+
+ {onSecondaryAction && ( - )} + {!isDropdownToggle && onPrimaryAction && ( + + )} + {isDropdownToggle && ( + + {primaryActionText} + + {additionalPrimaryActions.map((action) => ( + + {action.text} + + ))} + + + )} +
-
-); + ); +}; DrawerFooter.propTypes = { + additionalPrimaryActions: propTypes.arrayOf( + propTypes.shape({ + disabled: propTypes.bool, + leadingIcon: propTypes.object, + text: propTypes.string.isRequired, + trailingIcon: propTypes.object, + onClick: propTypes.func.isRequired, + }), + ), children: propTypes.node, isPrimaryActionLoading: propTypes.bool, isSecondaryActionLoading: propTypes.bool, @@ -72,6 +108,7 @@ DrawerFooter.propTypes = { DrawerFooter.defaultProps = { children: undefined, + additionalPrimaryActions: [], isPrimaryActionLoading: false, isSecondaryActionLoading: false, primaryActionDisabled: false, diff --git a/src/Drawer/DrawerFooter.scss b/src/Drawer/DrawerFooter.scss index aecf318d..639bedf5 100644 --- a/src/Drawer/DrawerFooter.scss +++ b/src/Drawer/DrawerFooter.scss @@ -8,6 +8,7 @@ padding: $synth-spacing-4; &__actions { + display: flex; > :not(:first-child) { margin-left: $synth-spacing-1; } diff --git a/src/Dropdown/Dropdown.stories.jsx b/src/Dropdown/Dropdown.stories.jsx index e85957f0..68d66551 100644 --- a/src/Dropdown/Dropdown.stories.jsx +++ b/src/Dropdown/Dropdown.stories.jsx @@ -90,7 +90,7 @@ export const IconSwap = () => ( Add label - Compose email + Compose email diff --git a/src/Dropdown/DropdownItem.jsx b/src/Dropdown/DropdownItem.jsx index 59e95ece..9c7e81b7 100644 --- a/src/Dropdown/DropdownItem.jsx +++ b/src/Dropdown/DropdownItem.jsx @@ -17,6 +17,7 @@ const DropdownItem = ({ eventKey, href, leadingIcon, + trailingIcon, onClick, bsPrefix, ...props @@ -36,8 +37,9 @@ const DropdownItem = ({ onClick={onClick} {...props} > - { leadingIcon && } + { leadingIcon && } { children } + { trailingIcon && } ); @@ -69,6 +71,7 @@ DropdownItem.propTypes = { */ href: PropTypes.string, leadingIcon: PropTypes.object, + trailingIcon: PropTypes.object, /** Callback fired when the menu item is clicked. */ @@ -84,6 +87,7 @@ DropdownItem.defaultProps = { eventKey: undefined, href: undefined, leadingIcon: undefined, + trailingIcon: undefined, onClick: undefined, }; diff --git a/src/Dropdown/DropdownItem.module.scss b/src/Dropdown/DropdownItem.module.scss index c9701305..f98fd450 100644 --- a/src/Dropdown/DropdownItem.module.scss +++ b/src/Dropdown/DropdownItem.module.scss @@ -15,6 +15,10 @@ } } -.DropdownItemIcon { +.DropdownItemLeadingIcon { margin-right: $synth-spacing-2; } + +.DropdownItemTrailingIcon { + margin-left: $synth-spacing-2; +} From 7187cdd81391db0af8d3243a1e42eaabe3aa3065 Mon Sep 17 00:00:00 2001 From: Eric Xian Date: Fri, 29 Mar 2024 13:45:13 -0700 Subject: [PATCH 2/3] add back faTrash --- src/Drawer/Drawer.stories.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Drawer/Drawer.stories.jsx b/src/Drawer/Drawer.stories.jsx index 465c6c93..3d437e25 100644 --- a/src/Drawer/Drawer.stories.jsx +++ b/src/Drawer/Drawer.stories.jsx @@ -8,7 +8,7 @@ import Button from 'src/Button'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { - faEnvelope, faChevronLeft, faChevronRight, faUpRightFromSquare, + faEnvelope, faChevronLeft, faChevronRight, faTrash, faUpRightFromSquare, } from '@fortawesome/pro-solid-svg-icons'; import mdx from './Drawer.mdx'; From 167bfef0990a517a9064718b3d3423eb95861a62 Mon Sep 17 00:00:00 2001 From: Eric Xian Date: Fri, 29 Mar 2024 14:09:57 -0700 Subject: [PATCH 3/3] remove unused href --- src/Drawer/DrawerFooter.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Drawer/DrawerFooter.jsx b/src/Drawer/DrawerFooter.jsx index f46a9382..4d8bfc46 100644 --- a/src/Drawer/DrawerFooter.jsx +++ b/src/Drawer/DrawerFooter.jsx @@ -64,7 +64,6 @@ const DrawerFooter = ({ {additionalPrimaryActions.map((action) => (