mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(modal): support primaryButtonIcon prop (#1047)

Browse source
This commit is contained in:
Gregor Wassmann 2022-01-29 18:35:08 +01:00 • committed by GitHub
commit a8039a4d1e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 96 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

6
COMPONENT_INDEX.md
View file

@ -2282,7 +2282,7 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| :------------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; 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" &#124; "sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the modal |
@ -2297,6 +2297,7 @@ None.
| 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 |
| primaryButtonIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the primary button icon |
| 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` |
@ -2352,8 +2353,9 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
| primaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
| primaryButtonIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the primary button icon |
| primaryButtonDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
| primaryClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the primary button |
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |

20
docs/src/COMPONENT_API.json
View file

@ -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",

3
docs/src/pages/components/Modal.svx
View file

@ -42,3 +42,6 @@ Use the `secondaryButtons` prop to render two secondary buttons for a "3-button
<FileSource src="/framed/Modal/ModalPreventOutsideClick" />
### Button with icon
<FileSource src="/framed/Modal/ModalButtonWithIcon" />

14
docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte Normal file
View file

@ -0,0 +1,14 @@
<script>
import { Modal } from "carbon-components-svelte";
import Send16 from "carbon-icons-svelte/lib/Send16";
</script>
<Modal
open
modalHeading="Invite someone"
primaryButtonText="Send invitation"
primaryButtonIcon="{Send16}"
secondaryButtonText="Cancel"
>
<p>Do you really want to invite someone?</p>
</Modal>

7
src/ComposedModal/ModalFooter.svelte
View file

@ -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}

7
src/Modal/Modal.svelte
View file

@ -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 @@
<Button
kind="{danger ? 'danger' : 'primary'}"
disabled="{primaryButtonDisabled}"
icon="{primaryButtonIcon}"
on:click="{() => {
dispatch('submit');
dispatch('click:button--primary');

6
types/ComposedModal/ModalFooter.svelte.d.ts vendored
View file

@ -9,6 +9,12 @@ export interface ModalFooterProps
*/
primaryButtonText?: string;
/**
* Specify the primary button icon
* @default undefined
*/
primaryButtonIcon?: typeof import("svelte").SvelteComponent;
/**
* Set to `true` to disable the primary button
* @default false

6
types/Modal/Modal.svelte.d.ts vendored
View file

@ -81,6 +81,12 @@ export interface ModalProps
*/
primaryButtonDisabled?: boolean;
/**
* Specify the primary button icon
* @default undefined
*/
primaryButtonIcon?: typeof import("svelte").SvelteComponent;
/**
* Set to `true` for the "submit" and "click:button--primary" events
* to be dispatched when pressing "Enter"