Skip to content

Commit

Permalink
XS-128 improve drawer design (#327)
Browse files Browse the repository at this point in the history 
* improve drawer design

* added forward ref

* added ref

* fix lint

* added black backdrop for modals

* make close button bigger

* update styles to tailwind breakpoint

* Update classname

---------

Co-authored-by: Rushi Vishavadia <[email protected]>
  • Loading branch information
@SemenStruchev @rushi
SemenStruchev and rushi authored May 6, 2024
1 parent 08d300a commit 5a75285
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 72 deletions.
147 changes: 77 additions & 70 deletions src/components/Drawer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Dialog, Transition } from "@headlessui/react";
import clsx from "clsx";
import PropTypes from "prop-types";
import React, { Fragment } from "react";
import React, { Fragment, forwardRef } from "react";
import { CloseIcon } from "../icons";
import { Button } from "./Buttons/Button";

Expand All @@ -13,99 +13,106 @@ const sizes = {
"2xl": "w-screen md:max-w-screen-md 2xl:max-w-screen-lg", // This was the old size
};

export const Drawer = ({
isOpen = false,
title,
size = "medium",
content,
onClose,
classNames = {},
position = "right",
}) => {
return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog
as="div"
className={clsx("ui-drawer fixed inset-0 z-10 overflow-hidden", classNames.dialog)}
open={isOpen}
onClose={onClose}
>
<div className="flex h-screen w-full">
<Transition.Child
as={Fragment}
enter="ease-in-out duration-500"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-500"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="absolute inset-0 bg-gray bg-opacity-75 transition-opacity" />
</Transition.Child>
<div
className={clsx(
"fixed inset-y-0 flex max-w-full",
position === "right" ? "right-0" : "left-0",
classNames.dialogContent,
)}
>
export const Drawer = forwardRef(
({ isOpen = false, title, size = "medium", content, onClose, classNames = {}, position = "right" }, ref) => {
return (
<Transition.Root ref={ref} show={isOpen} as={Fragment}>
<Dialog
as="div"
className={clsx("ui-drawer fixed inset-0 z-10 overflow-hidden", classNames.dialog)}
open={isOpen}
onClose={onClose}
>
<div className="flex h-screen w-full">
<Transition.Child
as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom={position === "right" ? "translate-x-full" : "-translate-x-full"}
enterTo="translate-x-0"
leave="transform transition ease-out-in duration-500 sm:duration-700"
leaveFrom="translate-x-0"
leaveTo={position === "right" ? "translate-x-full" : "-translate-x-full"}
enter="ease-in-out duration-500"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-500"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay
className={clsx(
"absolute inset-0 bg-black bg-opacity-80 transition-opacity",
classNames.overlay,
)}
/>
</Transition.Child>
<div
className={clsx(
"fixed inset-y-0 flex max-w-full",
position === "right" ? "right-0" : "left-0",
classNames.dialogContent,
)}
>
<div className="flex">
{position === "right" ? <CloseButton onClose={onClose} /> : null}
<Transition.Child
as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom={position === "right" ? "translate-x-full" : "-translate-x-full"}
enterTo="translate-x-0"
leave="transform transition ease-out-in duration-500 sm:duration-700"
leaveFrom="translate-x-0"
leaveTo={position === "right" ? "translate-x-full" : "-translate-x-full"}
>
<div className="flex">
{position === "right" ? <CloseButton onClose={onClose} /> : null}

<div
className={clsx(
"flex h-full w-full flex-col overflow-y-auto bg-white px-4 py-8 shadow-xl sm:px-6",
sizes[size],
classNames.children,
)}
>
<div className="w-full">
{/* eslint-disable-next-line react/jsx-max-depth */}
<Dialog.Title>{title}</Dialog.Title>
<div
className={clsx(
"flex h-full w-full flex-col overflow-y-auto bg-white px-4 py-8 shadow-xl sm:px-6",
sizes[size],
classNames.children,
)}
>
<div className="w-full">
{/* eslint-disable-next-line react/jsx-max-depth */}
<Dialog.Title>{title}</Dialog.Title>
</div>
<div className={clsx("relative mt-3 flex-1", classNames.content)}>
{content}
</div>
</div>
<div className={clsx("relative mt-3 flex-1", classNames.content)}>{content}</div>
</div>

{position === "left" ? <CloseButton onClose={onClose} /> : null}
</div>
</Transition.Child>
{position === "left" ? <CloseButton onClose={onClose} /> : null}
</div>
</Transition.Child>
</div>
</div>
</div>
</Dialog>
</Transition.Root>
);
};
</Dialog>
</Transition.Root>
);
},
);

const CloseButton = ({ onClose }) => {
return (
<Button
size="small"
variant="link"
className={clsx(
"m-1 inline-flex !h-6 !w-6 items-center justify-center !rounded-full bg-gray !px-1.5",
"!text-white focus:hidden",
"m-2.5 inline-flex !h-10 !w-10 items-center justify-center !rounded-full bg-white !px-1.5",
"!text-black focus:hidden",
)}
onClick={onClose}
>
<CloseIcon size="tiny" />
<CloseIcon size="medium" />
</Button>
);
};

Drawer.propTypes = {
isOpen: PropTypes.bool,
isOpen: PropTypes.bool.isRequired,
title: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
content: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
content: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
onClose: PropTypes.func.isRequired,
classNames: PropTypes.object,
position: PropTypes.string,
};

Drawer.defaultProps = {
title: "",
classNames: {},
position: "right",
};
4 changes: 2 additions & 2 deletions src/components/Modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const Modal = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="ui-modal-overlay fixed inset-0 bg-gray-dark bg-opacity-75 transition-opacity" />
<Dialog.Overlay className="ui-modal-overlay fixed inset-0 bg-black bg-opacity-80 transition-opacity" />
</Transition.Child>

{/* This element is to trick the browser into centering the modal contents. */}
Expand Down Expand Up @@ -110,7 +110,7 @@ export const Modal = ({
{onClose ? (
<button
type="button"
className="absolute right-0 top-0 m-4 hidden p-2 text-gray hover:text-gray-darker sm:block"
className="absolute right-0 top-0 m-4 hidden p-2 text-black hover:text-gray-darker sm:block"
onClick={onClose}
>
<CloseIcon />
Expand Down

0 comments on commit 5a75285

Please sign in to comment.