Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create DrawerFooter component with dropdown toggle for primary action #1165

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Create DrawerFooter component with dropdown toggle for primary action #1165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5dcf4a2
Update DrawerFooter with additionalPrimaryActions prop:
eric2523 Mar 29, 2024
7187cdd
add back faTrash
eric2523 Mar 29, 2024
167bfef
remove unused href
eric2523 Mar 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 111 additions & 16 deletions spec/__snapshots__/Storyshots.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5927,6 +5927,101 @@ Array [
]
`;

exports[`Storyshots Components/Drawer Additional Primary Actions 1`] = `
Array [
<button
className="Button btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
>
Open
</button>,
<div
className="DrawerBackgroundOverlay"
onClick={[Function]}
onKeyDown={[Function]}
role="presentation"
/>,
<div
className="Drawer Drawer--right Drawer--sm Drawer--behind-nav"
>
<div
className="Drawer__header Drawer__header--bordered"
>
<div
className="Drawer__title"
>
Title goes here
</div>
<button
aria-label="Close"
className="Drawer__header-action"
onClick={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-xmark "
data-icon="xmark"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 384 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
fill="currentColor"
style={Object {}}
/>
</svg>
</button>
</div>
<div
className="Drawer__body"
>
<p>
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.
</p>
</div>
<div
className="DrawerFooter"
>
<div />
<div
className="DrawerFooter__actions"
>
<button
aria-disabled={false}
className="Button btn btn-transparent"
disabled={false}
onClick={[Function]}
type="button"
>
Cancel
</button>
<div
className="Dropdown dropdown"
>
<button
aria-expanded={false}
aria-label="dropdown-toggle"
className="DropdownToggle dropdown-toggle btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
>
Send
</button>
</div>
</div>
</div>
</div>,
]
`;

exports[`Storyshots Components/Drawer Default 1`] = `
Array [
<button
Expand Down Expand Up @@ -24816,12 +24911,12 @@ Array [
role="presentation"
>
<button
aria-controls="react-aria-:r8:-tabpane-one"
aria-controls="react-aria-:r9:-tabpane-one"
aria-selected={true}
className="nav-link active"
data-rr-ui-event-key="one"
disabled={false}
id="react-aria-:r8:-tab-one"
id="react-aria-:r9:-tab-one"
onClick={[Function]}
role="tab"
type="button"
Expand All @@ -24834,12 +24929,12 @@ Array [
role="presentation"
>
<button
aria-controls="react-aria-:r8:-tabpane-two"
aria-controls="react-aria-:r9:-tabpane-two"
aria-selected={false}
className="nav-link"
data-rr-ui-event-key="two"
disabled={false}
id="react-aria-:r8:-tab-two"
id="react-aria-:r9:-tab-two"
onClick={[Function]}
role="tab"
tabIndex={-1}
Expand All @@ -24853,12 +24948,12 @@ Array [
role="presentation"
>
<button
aria-controls="react-aria-:r8:-tabpane-three"
aria-controls="react-aria-:r9:-tabpane-three"
aria-selected={false}
className="nav-link"
data-rr-ui-event-key="three"
disabled={false}
id="react-aria-:r8:-tab-three"
id="react-aria-:r9:-tab-three"
onClick={[Function]}
role="tab"
tabIndex={-1}
Expand All @@ -24872,13 +24967,13 @@ Array [
role="presentation"
>
<button
aria-controls="react-aria-:r8:-tabpane-four"
aria-controls="react-aria-:r9:-tabpane-four"
aria-disabled={true}
aria-selected={false}
className="nav-link disabled"
data-rr-ui-event-key="four"
disabled={true}
id="react-aria-:r8:-tab-four"
id="react-aria-:r9:-tab-four"
onClick={[Function]}
role="tab"
tabIndex={-1}
Expand All @@ -24892,9 +24987,9 @@ Array [
className="tab-content"
>
<div
aria-labelledby="react-aria-:r8:-tab-one"
aria-labelledby="react-aria-:r9:-tab-one"
className="fade tab-pane active show"
id="react-aria-:r8:-tabpane-one"
id="react-aria-:r9:-tabpane-one"
role="tabpanel"
>
<div
Expand All @@ -24908,9 +25003,9 @@ Array [
</div>
</div>
<div
aria-labelledby="react-aria-:r8:-tab-two"
aria-labelledby="react-aria-:r9:-tab-two"
className="fade tab-pane"
id="react-aria-:r8:-tabpane-two"
id="react-aria-:r9:-tabpane-two"
role="tabpanel"
>
<div
Expand All @@ -24924,9 +25019,9 @@ Array [
</div>
</div>
<div
aria-labelledby="react-aria-:r8:-tab-three"
aria-labelledby="react-aria-:r9:-tab-three"
className="fade tab-pane"
id="react-aria-:r8:-tabpane-three"
id="react-aria-:r9:-tabpane-three"
role="tabpanel"
>
<div
Expand All @@ -24940,9 +25035,9 @@ Array [
</div>
</div>
<div
aria-labelledby="react-aria-:r8:-tab-four"
aria-labelledby="react-aria-:r9:-tab-four"
className="fade tab-pane"
id="react-aria-:r8:-tabpane-four"
id="react-aria-:r9:-tabpane-four"
role="tabpanel"
>
<div
Expand Down
4 changes: 4 additions & 0 deletions src/Drawer/Drawer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,10 @@ you want the drawer to be the full width of the viewport but you want to disable

If additional components are required to be included, pass them as children to the `DrawerFooter`. This example also doesn't have a title or a border on the header, and the background overlay is turned off to allow interaction with outside elements.

### Additional Primary Actions

If additional primary actions are required, you can utilize the `primaryAdditionalActions` prop. This will render the primary action as a dropdown toggle.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
If additional primary actions are required, you can utilize the `primaryAdditionalActions` prop. This will render the primary action as a dropdown toggle.
If additional primary actions are required, you can utilize the `additionalPrimaryActions` prop. This will render the primary action as a dropdown toggle.


### Empty

While using the corresponding child components is recommended, Drawer is fully functional on its own and be closed by clicking outside of it or pressing the escape key. This is intended as an escape hatch to allow fully custom contents. In fully custom cases it is encouraged to include a close button. As the child components all work independent of each other it is also possible to use the header and body, but not the footer, for instance. This is useful for drawers which only include information and not an action.
58 changes: 57 additions & 1 deletion src/Drawer/Drawer.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Button from 'src/Button';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faEnvelope, faChevronLeft, faChevronRight, faTrash,
faEnvelope, faChevronLeft, faChevronRight, faTrash, faUpRightFromSquare,
} from '@fortawesome/pro-solid-svg-icons';

import mdx from './Drawer.mdx';
Expand Down Expand Up @@ -295,6 +295,62 @@ export const AdditionalActions = () => {
);
};

export const AdditionalPrimaryActions = () => {
const [isVisible, setVisible] = useState(false);

const toggleVisible = () => setVisible(!isVisible);

return (
<>
<Button onClick={toggleVisible}>Open</Button>
<Drawer
behindNav
defaultExpanded={false}
expandable={false}
hasBackgroundOverlay
orientation="right"
size="sm"
visible={isVisible}
onRequestClose={toggleVisible}
>
<DrawerHeader
bordered
title="Title goes here"
onRequestClose={toggleVisible}
/>
<DrawerBody>
<p>
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.
</p>
</DrawerBody>
<DrawerFooter
additionalPrimaryActions={[
{ text: 'Save', onClick: () => null },
{ text: 'Save and preview', onClick: () => null, trailingIcon: faUpRightFromSquare },
]}
primaryActionIcon={faEnvelope}
primaryActionText="Send"
secondaryActionText="Cancel"
onSecondaryAction={toggleVisible}
/>
</Drawer>
</>
);
};

export const Empty = () => {
const [isVisible, setVisible] = useState(false);

Expand Down
Loading
Loading