mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-21 12:49:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

Allow modals to have button icons

Browse source
This commit is contained in:
Gregor Wassmann 2022-01-29 00:04:39 +01:00
commit a46cd55d15
8 changed files with 67 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -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 |
| primaryButtonProps | <code>let</code> | No | <code>ButtonProps</code> | <code>{}</code> | Specify the primary button props |
| 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` |
@ -2354,6 +2355,7 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
| primaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
| primaryButtonProps | <code>let</code> | No | <code>ButtonProps</code> | <code>{}</code> | Specify the primary button props |
| 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 |

22
docs/src/COMPONENT_API.json
View file

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

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/ModalButtonWithProps" />

14
docs/src/pages/framed/Modal/ModalButtonWithProps.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"
primaryButtonProps="{{ icon: 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 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}
</Button>

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 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}
</Button>

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

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

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

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