mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
fix(modal): shouldSubmitOnEnter should also dispatch "click:button--primary" (#1007)
* fix(modal): shouldSubmitOnEnter should also dispatch "click:button--primary" Fixes #1005 * yarn build:lib
This commit is contained in:
Eric Liu
GitHub
parent
84d6778036
commit
49a94b0ee4
4 changed files with 30 additions and 25 deletions
|
|
@ -2276,28 +2276,28 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
|
||||
| size | <code>let</code> | No | <code>"xs" | "sm" | "lg"</code> | -- | Set the size of the modal |
|
||||
| danger | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
| alert | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable alert mode |
|
||||
| passiveModal | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the passive variant |
|
||||
| modalHeading | <code>let</code> | No | <code>string</code> | -- | Specify the modal heading |
|
||||
| modalLabel | <code>let</code> | No | <code>string</code> | -- | Specify the modal label |
|
||||
| modalAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the modal |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Close the modal"</code> | Specify the ARIA label for the close icon |
|
||||
| hasForm | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains form elements |
|
||||
| hasScrollingContent | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains scrolling content |
|
||||
| primaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||
| primaryButtonDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||
| shouldSubmitOnEnter | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the primary button to be triggered when pressing "Enter" |
|
||||
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||
| secondaryButtons | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
|
||||
| selectorPrimaryFocus | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal |
|
||||
| preventCloseOnClickOutside | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the modal from closing when clicking outside |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
|
||||
| size | <code>let</code> | No | <code>"xs" | "sm" | "lg"</code> | -- | Set the size of the modal |
|
||||
| danger | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
| alert | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable alert mode |
|
||||
| passiveModal | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the passive variant |
|
||||
| modalHeading | <code>let</code> | No | <code>string</code> | -- | Specify the modal heading |
|
||||
| modalLabel | <code>let</code> | No | <code>string</code> | -- | Specify the modal label |
|
||||
| modalAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the modal |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Close the modal"</code> | Specify the ARIA label for the close icon |
|
||||
| hasForm | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains form elements |
|
||||
| hasScrollingContent | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains scrolling content |
|
||||
| primaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||
| primaryButtonDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||
| shouldSubmitOnEnter | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the "submit" and "click:button--primary" events<br />to be dispatched when pressing "Enter" |
|
||||
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||
| secondaryButtons | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
|
||||
| selectorPrimaryFocus | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal |
|
||||
| preventCloseOnClickOutside | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the modal from closing when clicking outside |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
}}"
|
||||
|
|
|
|||
3
types/Modal/Modal.svelte.d.ts
vendored
3
types/Modal/Modal.svelte.d.ts
vendored
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue