From a46cd55d156579b843a2c5600ddfa06e62f3e05f Mon Sep 17 00:00:00 2001 From: Gregor Wassmann Date: Sat, 29 Jan 2022 00:04:39 +0100 Subject: [PATCH] Allow modals to have button icons --- COMPONENT_INDEX.md | 2 ++ docs/src/COMPONENT_API.json | 22 +++++++++++++++++++ docs/src/pages/components/Modal.svx | 3 +++ .../framed/Modal/ModalButtonWithProps.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, 67 insertions(+) create mode 100644 docs/src/pages/framed/Modal/ModalButtonWithProps.svelte diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 379b3c0c..841f3f5c 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2297,6 +2297,7 @@ None. | 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 | +| primaryButtonProps | let | No | ButtonProps | {} | Specify the primary button props | | 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` | @@ -2354,6 +2355,7 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- | | primaryButtonText | let | No | string | "" | Specify the primary button text | +| primaryButtonProps | let | No | ButtonProps | {} | Specify the primary button props | | 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 | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 78c211f6..17970e00 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -6073,6 +6073,17 @@ "constant": false, "reactive": false }, + { + "name": "primaryButtonProps", + "kind": "let", + "description": "Specify the primary button props", + "type": "ButtonProps", + "value": "{}", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, { "name": "shouldSubmitOnEnter", "kind": "let", @@ -6237,6 +6248,17 @@ "constant": false, "reactive": false }, + { + "name": "primaryButtonProps", + "kind": "let", + "description": "Specify the primary button props", + "type": "ButtonProps", + "value": "{}", + "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..361666d5 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/ModalButtonWithProps.svelte b/docs/src/pages/framed/Modal/ModalButtonWithProps.svelte new file mode 100644 index 00000000..719e4a0a --- /dev/null +++ b/docs/src/pages/framed/Modal/ModalButtonWithProps.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..0628d9e5 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 props + * @type {ButtonProps} + */ + export let primaryButtonProps = {}; + /** Set to `true` to disable the primary button */ export let primaryButtonDisabled = false; @@ -75,6 +81,7 @@ disabled="{primaryButtonDisabled}" class="{primaryClass}" on:click="{submit}" + {...primaryButtonProps} > {primaryButtonText} diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte index eb96c46b..2c55649d 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 props + * @type {ButtonProps} + */ + export let primaryButtonProps = {}; + /** * Set to `true` for the "submit" and "click:button--primary" events * to be dispatched when pressing "Enter" @@ -304,6 +310,7 @@ dispatch('submit'); dispatch('click:button--primary'); }}" + {...primaryButtonProps} > {primaryButtonText} diff --git a/types/ComposedModal/ModalFooter.svelte.d.ts b/types/ComposedModal/ModalFooter.svelte.d.ts index 45d13517..aaeb69ab 100644 --- a/types/ComposedModal/ModalFooter.svelte.d.ts +++ b/types/ComposedModal/ModalFooter.svelte.d.ts @@ -9,6 +9,12 @@ export interface ModalFooterProps */ primaryButtonText?: string; + /** + * Specify the primary button props + * @default {} + */ + primaryButtonProps?: ButtonProps; + /** * Set to `true` to disable the primary button * @default false diff --git a/types/Modal/Modal.svelte.d.ts b/types/Modal/Modal.svelte.d.ts index 875a416b..051a0ef8 100644 --- a/types/Modal/Modal.svelte.d.ts +++ b/types/Modal/Modal.svelte.d.ts @@ -81,6 +81,12 @@ export interface ModalProps */ primaryButtonDisabled?: boolean; + /** + * Specify the primary button props + * @default {} + */ + primaryButtonProps?: ButtonProps; + /** * Set to `true` for the "submit" and "click:button--primary" events * to be dispatched when pressing "Enter"