mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +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

64
COMPONENT_INDEX.md
View file

@ -2281,28 +2281,29 @@ 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 &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element | | 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 | | 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 | | size | <code>let</code> | No | <code>"xs" &#124; "sm" &#124; "lg"</code> | <code>undefined</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> | <code>undefined</code> | Specify the modal heading | | modalHeading | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal heading |
| modalLabel | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal label | | modalLabel | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal label |
| modalAriaLabel | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the modal | | modalAriaLabel | <code>let</code> | No | <code>string</code> | <code>undefined</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 "submit" and "click:button--primary" events<br />to be dispatched when pressing "Enter" | | primaryButtonIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the primary button icon |
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text | | 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" |
| 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` | | secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
| selectorPrimaryFocus | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal | | 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` |
| preventCloseOnClickOutside | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the modal from closing when clicking outside | | selectorPrimaryFocus | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element | | 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 ### Slots
@ -2351,15 +2352,16 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- | | :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
| 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 | | primaryButtonIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the primary button icon |
| primaryClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the primary button | | primaryButtonDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text | | primaryClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the primary button |
| 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` | | secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
| secondaryClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the secondary button | | 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` |
| danger | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant | | secondaryClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the secondary button |
| danger | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
### Slots ### Slots

20
docs/src/COMPONENT_API.json
View file

@ -6073,6 +6073,16 @@
"constant": false, "constant": false,
"reactive": 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", "name": "shouldSubmitOnEnter",
"kind": "let", "kind": "let",
@ -6237,6 +6247,16 @@
"constant": false, "constant": false,
"reactive": 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", "name": "primaryButtonDisabled",
"kind": "let", "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" /> <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 */ /** Specify the primary button text */
export let primaryButtonText = ""; 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 */ /** Set to `true` to disable the primary button */
export let primaryButtonDisabled = false; export let primaryButtonDisabled = false;
@ -74,6 +80,7 @@
kind="{danger ? 'danger' : 'primary'}" kind="{danger ? 'danger' : 'primary'}"
disabled="{primaryButtonDisabled}" disabled="{primaryButtonDisabled}"
class="{primaryClass}" class="{primaryClass}"
icon="{primaryButtonIcon}"
on:click="{submit}" on:click="{submit}"
> >
{primaryButtonText} {primaryButtonText}

7
src/Modal/Modal.svelte
View file

@ -55,6 +55,12 @@
/** Set to `true` to disable the primary button */ /** Set to `true` to disable the primary button */
export let primaryButtonDisabled = false; 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 * Set to `true` for the "submit" and "click:button--primary" events
* to be dispatched when pressing "Enter" * to be dispatched when pressing "Enter"
@ -300,6 +306,7 @@
<Button <Button
kind="{danger ? 'danger' : 'primary'}" kind="{danger ? 'danger' : 'primary'}"
disabled="{primaryButtonDisabled}" disabled="{primaryButtonDisabled}"
icon="{primaryButtonIcon}"
on:click="{() => { on:click="{() => {
dispatch('submit'); dispatch('submit');
dispatch('click:button--primary'); dispatch('click:button--primary');

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

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

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

@ -81,6 +81,12 @@ export interface ModalProps
*/ */
primaryButtonDisabled?: boolean; 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 * Set to `true` for the "submit" and "click:button--primary" events
* to be dispatched when pressing "Enter" * to be dispatched when pressing "Enter"