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
|
### Props
|
||||||
|
|
||||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| modalHeading | <code>let</code> | No | <code>string</code> | -- | Specify the modal heading |
|
||||||
| modalLabel | <code>let</code> | No | <code>string</code> | -- | Specify the modal label |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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" |
|
| 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 |
|
| 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` |
|
| 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 |
|
| 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 |
|
| 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 |
|
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6041,7 +6041,7 @@
|
||||||
{
|
{
|
||||||
"name": "shouldSubmitOnEnter",
|
"name": "shouldSubmitOnEnter",
|
||||||
"kind": "let",
|
"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",
|
"type": "boolean",
|
||||||
"value": "true",
|
"value": "true",
|
||||||
"isFunction": false,
|
"isFunction": false,
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,10 @@
|
||||||
/** Set to `true` to disable the primary button */
|
/** Set to `true` to disable the primary button */
|
||||||
export let primaryButtonDisabled = false;
|
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;
|
export let shouldSubmitOnEnter = true;
|
||||||
|
|
||||||
/** Specify the secondary button text */
|
/** Specify the secondary button text */
|
||||||
|
|
@ -174,6 +177,7 @@
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
} else if (shouldSubmitOnEnter && e.key === 'Enter') {
|
} else if (shouldSubmitOnEnter && e.key === 'Enter') {
|
||||||
dispatch('submit');
|
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;
|
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
|
* @default true
|
||||||
*/
|
*/
|
||||||
shouldSubmitOnEnter?: boolean;
|
shouldSubmitOnEnter?: boolean;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue