diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 6d73a94c..2b1cc6f8 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2276,28 +2276,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 | -| 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 | +| 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 "submit" and "click:button--primary" events
to be dispatched 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 diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 8e0845d3..ed3b3c5e 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -6041,7 +6041,7 @@ { "name": "shouldSubmitOnEnter", "kind": "let", - "description": "Set to `true` for the primary button to be triggered when pressing \"Enter\"", + "description": "Set to `true` for the \"submit\" and \"click:button--primary\" events\nto be dispatched when pressing \"Enter\"", "type": "boolean", "value": "true", "isFunction": false, diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte index cd7ac834..eb96c46b 100644 --- a/src/Modal/Modal.svelte +++ b/src/Modal/Modal.svelte @@ -55,7 +55,10 @@ /** Set to `true` to disable the primary button */ export let primaryButtonDisabled = false; - /** Set to `true` for the primary button to be triggered when pressing "Enter" */ + /** + * Set to `true` for the "submit" and "click:button--primary" events + * to be dispatched when pressing "Enter" + */ export let shouldSubmitOnEnter = true; /** Specify the secondary button text */ @@ -174,6 +177,7 @@ e.preventDefault(); } else if (shouldSubmitOnEnter && e.key === 'Enter') { dispatch('submit'); + dispatch('click:button--primary'); } } }}" diff --git a/types/Modal/Modal.svelte.d.ts b/types/Modal/Modal.svelte.d.ts index bc27704d..0caf5e93 100644 --- a/types/Modal/Modal.svelte.d.ts +++ b/types/Modal/Modal.svelte.d.ts @@ -78,7 +78,8 @@ export interface ModalProps primaryButtonDisabled?: boolean; /** - * Set to `true` for the primary button to be triggered when pressing "Enter" + * Set to `true` for the "submit" and "click:button--primary" events + * to be dispatched when pressing "Enter" * @default true */ shouldSubmitOnEnter?: boolean;