From a8039a4d1e6f2232d46a6e202c8a5f12bd3915c0 Mon Sep 17 00:00:00 2001 From: Gregor Wassmann Date: Sat, 29 Jan 2022 18:35:08 +0100 Subject: [PATCH] feat(modal): support primaryButtonIcon prop (#1047) --- COMPONENT_INDEX.md | 64 ++++++++++--------- docs/src/COMPONENT_API.json | 20 ++++++ docs/src/pages/components/Modal.svx | 3 + .../framed/Modal/ModalButtonWithIcon.svelte | 14 ++++ src/ComposedModal/ModalFooter.svelte | 7 ++ src/Modal/Modal.svelte | 7 ++ types/ComposedModal/ModalFooter.svelte.d.ts | 6 ++ types/Modal/Modal.svelte.d.ts | 6 ++ 8 files changed, 96 insertions(+), 31 deletions(-) create mode 100644 docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 379b3c0c..7190c229 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2281,28 +2281,29 @@ 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" | undefined | 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 | undefined | Specify the modal heading | -| modalLabel | let | No | string | undefined | Specify the modal label | -| modalAriaLabel | let | No | string | undefined | 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 | +| 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" | undefined | 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 | undefined | Specify the modal heading | +| modalLabel | let | No | string | undefined | Specify the modal label | +| modalAriaLabel | let | No | string | undefined | 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 | +| primaryButtonIcon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon | +| 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 @@ -2351,15 +2352,16 @@ 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 | undefined | 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 | undefined | 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 | +| primaryButtonIcon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon | +| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button | +| primaryClass | let | No | string | undefined | 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 | undefined | Specify a class for the secondary button | +| danger | let | No | boolean | false | Set to `true` to use the danger variant | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 78c211f6..2b5a1e00 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -6073,6 +6073,16 @@ "constant": false, "reactive": false }, + { + "name": "primaryButtonIcon", + "kind": "let", + "description": "Specify the primary button icon", + "type": "typeof import(\"svelte\").SvelteComponent", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, { "name": "shouldSubmitOnEnter", "kind": "let", @@ -6237,6 +6247,16 @@ "constant": false, "reactive": false }, + { + "name": "primaryButtonIcon", + "kind": "let", + "description": "Specify the primary button icon", + "type": "typeof import(\"svelte\").SvelteComponent", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, { "name": "primaryButtonDisabled", "kind": "let", diff --git a/docs/src/pages/components/Modal.svx b/docs/src/pages/components/Modal.svx index ee93147c..1bd4a3bd 100644 --- a/docs/src/pages/components/Modal.svx +++ b/docs/src/pages/components/Modal.svx @@ -42,3 +42,6 @@ Use the `secondaryButtons` prop to render two secondary buttons for a "3-button +### Button with icon + + diff --git a/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte b/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte new file mode 100644 index 00000000..060384f9 --- /dev/null +++ b/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte @@ -0,0 +1,14 @@ + + + +

Do you really want to invite someone?

+ diff --git a/src/ComposedModal/ModalFooter.svelte b/src/ComposedModal/ModalFooter.svelte index aa5145f7..7fd4485e 100644 --- a/src/ComposedModal/ModalFooter.svelte +++ b/src/ComposedModal/ModalFooter.svelte @@ -6,6 +6,12 @@ /** Specify the primary button text */ export let primaryButtonText = ""; + /** + * Specify the primary button icon + * @type {typeof import("svelte").SvelteComponent} + */ + export let primaryButtonIcon = undefined; + /** Set to `true` to disable the primary button */ export let primaryButtonDisabled = false; @@ -74,6 +80,7 @@ kind="{danger ? 'danger' : 'primary'}" disabled="{primaryButtonDisabled}" class="{primaryClass}" + icon="{primaryButtonIcon}" on:click="{submit}" > {primaryButtonText} diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte index eb96c46b..88beab80 100644 --- a/src/Modal/Modal.svelte +++ b/src/Modal/Modal.svelte @@ -55,6 +55,12 @@ /** Set to `true` to disable the primary button */ export let primaryButtonDisabled = false; + /** + * Specify the primary button icon + * @type {typeof import("svelte").SvelteComponent} + */ + export let primaryButtonIcon = undefined; + /** * Set to `true` for the "submit" and "click:button--primary" events * to be dispatched when pressing "Enter" @@ -300,6 +306,7 @@