diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 362b8628..ed8d98b0 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2223,27 +2223,28 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the modal | -| size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the modal | -| danger | let | No | boolean | false | Set to `true` to use the danger variant | -| alert | let | No | boolean | false | Set to `true` to enable alert mode | -| passiveModal | let | No | boolean | false | Set to `true` to use the passive variant | -| modalHeading | let | No | string | -- | Specify the modal heading | -| modalLabel | let | No | string | -- | Specify the modal label | -| modalAriaLabel | let | No | string | -- | Specify the ARIA label for the modal | -| iconDescription | let | No | string | "Close the modal" | Specify the ARIA label for the close icon | -| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements | -| hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content | -| primaryButtonText | let | No | string | "" | Specify the primary button text | -| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button | -| shouldSubmitOnEnter | let | No | boolean | true | Set to `true` for the primary button to be triggered when pressing "Enter" | -| secondaryButtonText | let | No | string | "" | Specify the secondary button text | -| selectorPrimaryFocus | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | -| preventCloseOnClickOutside | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| open | let | Yes | boolean | false | Set to `true` to open the modal | +| size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the modal | +| danger | let | No | boolean | false | Set to `true` to use the danger variant | +| alert | let | No | boolean | false | Set to `true` to enable alert mode | +| passiveModal | let | No | boolean | false | Set to `true` to use the passive variant | +| modalHeading | let | No | string | -- | Specify the modal heading | +| modalLabel | let | No | string | -- | Specify the modal label | +| modalAriaLabel | let | No | string | -- | Specify the ARIA label for the modal | +| iconDescription | let | No | string | "Close the modal" | Specify the ARIA label for the close icon | +| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements | +| hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content | +| primaryButtonText | let | No | string | "" | Specify the primary button text | +| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button | +| shouldSubmitOnEnter | let | No | boolean | true | Set to `true` for the primary button to be triggered when pressing "Enter" | +| secondaryButtonText | let | No | string | "" | Specify the secondary button text | +| secondaryButtons | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` | +| selectorPrimaryFocus | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | +| preventCloseOnClickOutside | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -2258,13 +2259,13 @@ None. | Event name | Type | Detail | | :---------------------- | :--------- | :------------------------------ | | transitionend | dispatched | { open: boolean; } | +| click:button--secondary | dispatched | { text: string; } | | keydown | forwarded | -- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | submit | dispatched | -- | -| click:button--secondary | dispatched | -- | | close | dispatched | -- | | open | dispatched | -- | @@ -2291,14 +2292,15 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------- | -| primaryButtonText | let | No | string | "" | Specify the primary button text | -| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button | -| primaryClass | let | No | string | -- | Specify a class for the primary button | -| secondaryButtonText | let | No | string | "" | Specify the secondary button text | -| secondaryClass | let | No | string | -- | Specify a class for the secondary button | -| danger | let | No | boolean | false | Set to `true` to use the danger variant | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------- | +| primaryButtonText | let | No | string | "" | Specify the primary button text | +| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button | +| primaryClass | let | No | string | -- | Specify a class for the primary button | +| secondaryButtonText | let | No | string | "" | Specify the secondary button text | +| secondaryButtons | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` | +| secondaryClass | let | No | string | -- | Specify a class for the secondary button | +| danger | let | No | boolean | false | Set to `true` to use the danger variant | ### Slots @@ -2308,7 +2310,9 @@ None. ### Events -None. +| Event name | Type | Detail | +| :---------------------- | :--------- | :----------------------------- | +| click:button--secondary | dispatched | { text: string; } | ## `ModalHeader` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index ddc88e81..675d727a 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -5397,6 +5397,16 @@ "constant": false, "reactive": false }, + { + "name": "secondaryButtons", + "kind": "let", + "description": "2-tuple prop to render two secondary buttons for a 3 button modal\nsupersedes `secondaryButtonText`", + "type": "[{ text: string; }, { text: string; }]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "selectorPrimaryFocus", "kind": "let", @@ -5459,13 +5469,17 @@ "name": "transitionend", "detail": "{ open: boolean; }" }, + { + "type": "dispatched", + "name": "click:button--secondary", + "detail": "{ text: string; }" + }, { "type": "forwarded", "name": "keydown", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }, { "type": "dispatched", "name": "submit" }, - { "type": "dispatched", "name": "click:button--secondary" }, { "type": "dispatched", "name": "close" }, { "type": "dispatched", "name": "open" } ], @@ -5545,6 +5559,16 @@ "constant": false, "reactive": false }, + { + "name": "secondaryButtons", + "kind": "let", + "description": "2-tuple prop to render two secondary buttons for a 3 button modal\nsupersedes `secondaryButtonText`", + "type": "[{ text: string; }, { text: string; }]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "secondaryClass", "kind": "let", @@ -5566,7 +5590,13 @@ } ], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], - "events": [], + "events": [ + { + "type": "dispatched", + "name": "click:button--secondary", + "detail": "{ text: string; }" + } + ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } }, diff --git a/docs/src/pages/components/ComposedModal.svx b/docs/src/pages/components/ComposedModal.svx index 65adc6ac..2c8c084d 100644 --- a/docs/src/pages/components/ComposedModal.svx +++ b/docs/src/pages/components/ComposedModal.svx @@ -9,3 +9,9 @@ components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"] ### Composed modal + +### Multiple secondary buttons + +Use the `secondaryButtons` prop in `ModalFooter` to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`. + + \ No newline at end of file diff --git a/docs/src/pages/components/Modal.svx b/docs/src/pages/components/Modal.svx index 6592e74d..e4ddd46f 100644 --- a/docs/src/pages/components/Modal.svx +++ b/docs/src/pages/components/Modal.svx @@ -14,6 +14,12 @@ +### Multiple secondary buttons + +Use the `secondaryButtons` prop to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`. + + + ### Extra-small size diff --git a/docs/src/pages/framed/Modal/3ButtonComposedModal.svelte b/docs/src/pages/framed/Modal/3ButtonComposedModal.svelte new file mode 100644 index 00000000..f53b5a31 --- /dev/null +++ b/docs/src/pages/framed/Modal/3ButtonComposedModal.svelte @@ -0,0 +1,31 @@ + + + + + + + + + + + diff --git a/docs/src/pages/framed/Modal/3ButtonModal.svelte b/docs/src/pages/framed/Modal/3ButtonModal.svelte new file mode 100644 index 00000000..aed0c062 --- /dev/null +++ b/docs/src/pages/framed/Modal/3ButtonModal.svelte @@ -0,0 +1,23 @@ + + + + + +

Create a new Cloudant database in the US South region.

+
diff --git a/src/ComposedModal/ModalFooter.svelte b/src/ComposedModal/ModalFooter.svelte index 9cfec0da..aa5145f7 100644 --- a/src/ComposedModal/ModalFooter.svelte +++ b/src/ComposedModal/ModalFooter.svelte @@ -1,4 +1,8 @@ -
- {#if secondaryButtonText} - + {/each} + {:else if secondaryButtonText} + {/if} diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte index d4d65d24..a55657b1 100644 --- a/src/Modal/Modal.svelte +++ b/src/Modal/Modal.svelte @@ -1,6 +1,7 @@