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 | Create a new Cloudant database in the US South region.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