Skip to content

Commit

Permalink
feat(Modal): support disabled actions (#561)
Browse files Browse the repository at this point in the history
## 📝 Changes

- Passes through `isDisabled` prop to action buttons to support them
being disabled
- Adds some documentation to Storybook for this but felt it didn't need
a full story or specific unit tests for this change

Note that with Easy UI we're moving to a more constraint-based design
for components to promote consistency. That's why we're not blindly
allowing any button prop to pass through the actions, because it can
lead to unintended Modal styles. So for now we're listing specific props
that are allowed to pass through.

## ✅ Checklist

- [x] Code is complete and in accordance with our style guide
- [x] Stories (docs) in Storybook accompany any relevant component
changes
- [x] Ensure no accessibility violations are reported in Storybook
- [x] Specs and documentation are up-to-date
- [x] Cross-browser check is performed (Chrome, Safari, Firefox)
- [x] Changeset is added
  • Loading branch information
stephenjwatkins authored Aug 24, 2023
1 parent ac19d12 commit 8fe2ca9
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/small-windows-impress.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@easypost/easy-ui": minor
---

feat(Modal): support disabled actions
8 changes: 8 additions & 0 deletions documentation/specs/Modal.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
1 change: 1 addition & 0 deletions easy-ui-react/src/Modal/Modal.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ A `<Modal />` is a page overlay that displays information and blocks interaction
primaryAction={{
content: "Button 1",
onAction: () => {},
isDisabled: false,
}}
/>
</Modal>
Expand Down
15 changes: 13 additions & 2 deletions easy-ui-react/src/Modal/ModalFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ type ModalFooterProps = {
primaryAction: {
content: string;
onAction: () => void;
isDisabled?: boolean;
};

/**
Expand All @@ -20,6 +21,7 @@ type ModalFooterProps = {
secondaryAction?: {
content: string;
onAction: () => void;
isDisabled?: boolean;
};
};

Expand All @@ -33,11 +35,20 @@ export function ModalFooter(props: ModalFooterProps) {
return (
<div className={className}>
{secondaryAction && (
<Button onPress={secondaryAction.onAction} color="neutral">
<Button
onPress={secondaryAction.onAction}
color="neutral"
isDisabled={secondaryAction.isDisabled}
>
{secondaryAction.content}
</Button>
)}
<Button onPress={primaryAction.onAction}>{primaryAction.content}</Button>
<Button
onPress={primaryAction.onAction}
isDisabled={primaryAction.isDisabled}
>
{primaryAction.content}
</Button>
</div>
);
}

0 comments on commit 8fe2ca9

Please sign in to comment.