diff --git a/.changeset/small-windows-impress.md b/.changeset/small-windows-impress.md new file mode 100644 index 00000000..e6e6457a --- /dev/null +++ b/.changeset/small-windows-impress.md @@ -0,0 +1,5 @@ +--- +"@easypost/easy-ui": minor +--- + +feat(Modal): support disabled actions diff --git a/documentation/specs/Modal.md b/documentation/specs/Modal.md index 08a69c43..bdf15255 100644 --- a/documentation/specs/Modal.md +++ b/documentation/specs/Modal.md @@ -271,3 +271,11 @@ function PageWithModal() { - `useDialog`, `useModalOverlay` from `react-aria` - `IntersectionObserver` for styling when header and footer are stuck, as denoted here: https://ryanmulligan.dev/blog/sticky-header-scroll-shadow/ + +--- + +## Versions + +| Version | Owner | Change | +| :--------- | :-------------- | :----------------------------------------------- | +| 2023-08-22 | stephenjwatkins | Add `isDisabled` to actions to support disabling | diff --git a/easy-ui-react/src/Modal/Modal.mdx b/easy-ui-react/src/Modal/Modal.mdx index 9f2eb3f6..a9258a37 100644 --- a/easy-ui-react/src/Modal/Modal.mdx +++ b/easy-ui-react/src/Modal/Modal.mdx @@ -23,6 +23,7 @@ A `` is a page overlay that displays information and blocks interaction primaryAction={{ content: "Button 1", onAction: () => {}, + isDisabled: false, }} /> diff --git a/easy-ui-react/src/Modal/ModalFooter.tsx b/easy-ui-react/src/Modal/ModalFooter.tsx index 8e9cf878..ae70532a 100644 --- a/easy-ui-react/src/Modal/ModalFooter.tsx +++ b/easy-ui-react/src/Modal/ModalFooter.tsx @@ -12,6 +12,7 @@ type ModalFooterProps = { primaryAction: { content: string; onAction: () => void; + isDisabled?: boolean; }; /** @@ -20,6 +21,7 @@ type ModalFooterProps = { secondaryAction?: { content: string; onAction: () => void; + isDisabled?: boolean; }; }; @@ -33,11 +35,20 @@ export function ModalFooter(props: ModalFooterProps) { return (
{secondaryAction && ( - )} - +
); }