feat(modal): support 3-button Modal, ComposedModal (#724)

* feat(modal): support 3-button modal #528, #472

* fix(modal): "supercede" --> "supersede"

* test(modal): test secondaryButtons prop, updated click:button--secondary custom event

* docs(modal): add multiple secondary button example for ComposedModal

* docs(modal): rename example

* fix(modal): do not render secondary button if secondaryButtonText is falsy

* docs(composed-modal): add button to re-open modal
This commit is contained in:
Eric Liu 2021-07-05 08:44:51 -07:00 committed by GitHub
commit f4a3646cb4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 230 additions and 50 deletions

View file

@ -26,6 +26,13 @@ export interface ModalFooterProps
*/
secondaryButtonText?: string;
/**
* 2-tuple prop to render two secondary buttons for a 3 button modal
* supersedes `secondaryButtonText`
* @default []
*/
secondaryButtons?: [{ text: string }, { text: string }];
/**
* Specify a class for the secondary button
*/
@ -40,6 +47,6 @@ export interface ModalFooterProps
export default class ModalFooter extends SvelteComponentTyped<
ModalFooterProps,
{},
{ ["click:button--secondary"]: CustomEvent<{ text: string }> },
{ default: {} }
> {}

View file

@ -89,6 +89,13 @@ export interface ModalProps
*/
secondaryButtonText?: string;
/**
* 2-tuple prop to render two secondary buttons for a 3 button modal
* supersedes `secondaryButtonText`
* @default []
*/
secondaryButtons?: [{ text: string }, { text: string }];
/**
* Specify a selector to be focused when opening the modal
* @default "[data-modal-primary-focus]"
@ -118,13 +125,13 @@ export default class Modal extends SvelteComponentTyped<
ModalProps,
{
transitionend: CustomEvent<{ open: boolean }>;
["click:button--secondary"]: CustomEvent<{ text: string }>;
keydown: WindowEventMap["keydown"];
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
submit: CustomEvent<any>;
["click:button--secondary"]: CustomEvent<any>;
close: CustomEvent<any>;
open: CustomEvent<any>;
},