feat(DES-14641): add FormDialog block with docs and demos#303
feat(DES-14641): add FormDialog block with docs and demos#303leahwangcloudflare wants to merge 5 commits intocloudflare:mainfrom
Conversation
geoquant
left a comment
geoquant
left a comment
There was a problem hiding this comment.
@leahwangcloudflare looks good to me! if we make changes to the kumo library we need to include a "changeset"; run pnpm changeset to include one and make sure it's a minor or patch. you can ask your favorite agent
commit: |
Docs PreviewCommit: |
Visual Regression Report12 screenshot(s) with visual changes: Button / Variant: Secondary161 px (0.14%) changed
Button / Sizes676 px (0.59%) changed
Button / Loading State3 px (0%) changed
Button / Disabled State231 px (0.2%) changed
Dialog / Dialog With Actions233 px (0.2%) changed
Dialog / Dialog Basic197 px (0.17%) changed
Dialog / Dialog Confirmation2,102 px (1.82%) changed
Dialog / Dialog With Combobox244 px (0.21%) changed
Select / Select Basic468 px (0.41%) changed
Select / Select With Tooltip504 px (0.44%) changed
Select / Select Loading1,529 px (0.63%) changed
Select (Open)0 px (0%) changed
18 screenshot(s) unchanged
Generated by Kumo Visual Regression |
nandanmen
left a comment
nandanmen
left a comment
There was a problem hiding this comment.
Padding feels uneven here:
It almost feels like there should be a visual separator for the footer? A border or a different background color maybe?
| /** Whether the submit action is in progress */ | ||
| isSubmitting?: boolean; | ||
| /** Whether the submit button should be disabled */ | ||
| isSubmitDisabled?: boolean; | ||
| /** Submit button label (default: "Save") */ | ||
| submitButtonText?: string; | ||
| /** Cancel button label (default: "Cancel") */ | ||
| cancelButtonText?: string; |
There was a problem hiding this comment.
We should remove these from props and export a FormDialogSubmitButton component (or similar). The caller then does this instead:
<FormDialog>
...
<FormDialogSubmitButton disabled={...} loading={...}>
Submit
</FormDialogSubmitButton>
</FormDialog>This allows us to:
- Simplify the props
- Allow for composition (e.g. add icons to button etc)
- Change other props of the button without needing to update the props of FormDialog
| <DialogClose | ||
| render={(props) => ( | ||
| <Button {...props} variant="secondary" disabled={isSubmitting}> | ||
| {cancelButtonText} | ||
| </Button> | ||
| )} | ||
| /> |
There was a problem hiding this comment.
We can do the same here by exporting a CancelButton component
…n exports Replace isSubmitting, isSubmitDisabled, submitButtonText, and cancelButtonText props with composable cancelButton and submitButton slot props. Both default to the new exported sub-components so existing usage requires no changes.
|
@nandanmen Hey Nanda, thanks for the feedback! I just adjusted spacing - now the bottom button has the same pb and pr. I wanted to avoid having divider since it introduces visual noise - so intentionally added extra spacing above the bottom button to create more visual distance, let me know your thoughts! |
nandanmen
left a comment
nandanmen
left a comment
There was a problem hiding this comment.
@leahwangcloudflare much better, thanks!
3 participants
Summary:
Adds a new FormDialog block (packages/kumo/src/blocks/form-dialog/) with sm and base size variants, optional banner and errorMessage props, and built-in submit/cancel actions
Adds docs page at /blocks/form-dialog with installation instructions, usage example, and four demos (basic, size, multiple sections, banner, error state)
Adds Form Dialog to the docs site sidebar nav
Jira
DES-14641