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 3-button Modal, ComposedModal (#724)

Browse source 
* feat(modal): support 3-button modal #528, #472

* fix(modal): "supercede" --> "supersede"

* test(modal): test secondaryButtons prop, updated click:button--secondary custom event

* docs(modal): add multiple secondary button example for ComposedModal

* docs(modal): rename example

* fix(modal): do not render secondary button if secondaryButtonText is falsy

* docs(composed-modal): add button to re-open modal
This commit is contained in:
Eric Liu 2021-07-05 08:44:51 -07:00 • committed by GitHub
commit f4a3646cb4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 230 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

66
COMPONENT_INDEX.md
View file

@ -2223,27 +2223,28 @@ 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> | -- | Set the size of the modal | | size | <code>let</code> | No | <code>"xs" &#124; "sm" &#124; "lg"</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> | -- | Specify the modal heading | | modalHeading | <code>let</code> | No | <code>string</code> | -- | Specify the modal heading |
| modalLabel | <code>let</code> | No | <code>string</code> | -- | Specify the modal label | | modalLabel | <code>let</code> | No | <code>string</code> | -- | Specify the modal label |
| modalAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the modal | | modalAriaLabel | <code>let</code> | No | <code>string</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 primary button to be triggered when pressing "Enter" | | shouldSubmitOnEnter | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the primary button to be triggered when pressing "Enter" |
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text | | 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
@ -2258,13 +2259,13 @@ None.
| Event name | Type | Detail | | Event name | Type | Detail |
| :---------------------- | :--------- | :------------------------------ | | :---------------------- | :--------- | :------------------------------ |
| transitionend | dispatched | <code>{ open: boolean; }</code> | | transitionend | dispatched | <code>{ open: boolean; }</code> |
| click:button--secondary | dispatched | <code>{ text: string; }</code> |
| keydown | forwarded | -- | | keydown | forwarded | -- |
| click | forwarded | -- | | click | forwarded | -- |
| mouseover | forwarded | -- | | mouseover | forwarded | -- |
| mouseenter | forwarded | -- | | mouseenter | forwarded | -- |
| mouseleave | forwarded | -- | | mouseleave | forwarded | -- |
| submit | dispatched | -- | | submit | dispatched | -- |
| click:button--secondary | dispatched | -- |
| close | dispatched | -- | | close | dispatched | -- |
| open | dispatched | -- | | open | dispatched | -- |
@ -2291,14 +2292,15 @@ 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 | | 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> | -- | Specify a class for the primary button | | primaryClass | <code>let</code> | No | <code>string</code> | -- | Specify a class for the primary button |
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text | | secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
| secondaryClass | <code>let</code> | No | <code>string</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> | -- | 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
@ -2308,7 +2310,9 @@ None.
### Events ### Events
None. | Event name | Type | Detail |
| :---------------------- | :--------- | :----------------------------- |
| click:button--secondary | dispatched | <code>{ text: string; }</code> |
## `ModalHeader` ## `ModalHeader`

34
docs/src/COMPONENT_API.json
View file

@ -5397,6 +5397,16 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "secondaryButtons",
"kind": "let",
"description": "2-tuple prop to render two secondary buttons for a 3 button modal\nsupersedes `secondaryButtonText`",
"type": "[{ text: string; }, { text: string; }]",
"value": "[]",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "selectorPrimaryFocus", "name": "selectorPrimaryFocus",
"kind": "let", "kind": "let",
@ -5459,13 +5469,17 @@
"name": "transitionend", "name": "transitionend",
"detail": "{ open: boolean; }" "detail": "{ open: boolean; }"
}, },
{
"type": "dispatched",
"name": "click:button--secondary",
"detail": "{ text: string; }"
},
{ "type": "forwarded", "name": "keydown", "element": "div" }, { "type": "forwarded", "name": "keydown", "element": "div" },
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "submit" }, { "type": "dispatched", "name": "submit" },
{ "type": "dispatched", "name": "click:button--secondary" },
{ "type": "dispatched", "name": "close" }, { "type": "dispatched", "name": "close" },
{ "type": "dispatched", "name": "open" } { "type": "dispatched", "name": "open" }
], ],
@ -5545,6 +5559,16 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "secondaryButtons",
"kind": "let",
"description": "2-tuple prop to render two secondary buttons for a 3 button modal\nsupersedes `secondaryButtonText`",
"type": "[{ text: string; }, { text: string; }]",
"value": "[]",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "secondaryClass", "name": "secondaryClass",
"kind": "let", "kind": "let",
@ -5566,7 +5590,13 @@
} }
], ],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [], "events": [
{
"type": "dispatched",
"name": "click:button--secondary",
"detail": "{ text: string; }"
}
],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
}, },

6
docs/src/pages/components/ComposedModal.svx
View file

@ -9,3 +9,9 @@ components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"]
### Composed modal ### Composed modal
<FileSource src="/framed/Modal/ComposedModal" /> <FileSource src="/framed/Modal/ComposedModal" />
### Multiple secondary buttons
Use the `secondaryButtons` prop in `ModalFooter` to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.
<FileSource src="/framed/Modal/3ButtonComposedModal" />

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

@ -14,6 +14,12 @@
<FileSource src="/framed/Modal/PassiveModal" /> <FileSource src="/framed/Modal/PassiveModal" />
### Multiple secondary buttons
Use the `secondaryButtons` prop to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.
<FileSource src="/framed/Modal/3ButtonModal" />
### Extra-small size ### Extra-small size
<FileSource src="/framed/Modal/ModalExtraSmall" /> <FileSource src="/framed/Modal/ModalExtraSmall" />

31
docs/src/pages/framed/Modal/3ButtonComposedModal.svelte Normal file
View file

@ -0,0 +1,31 @@
<script>
import {
Button,
ComposedModal,
ModalHeader,
ModalBody,
ModalFooter,
Checkbox,
} from "carbon-components-svelte";
let open = true;
let checked = false;
</script>
<Button on:click="{() => (open = true)}">Review changes</Button>
<ComposedModal bind:open on:submit="{() => (open = false)}">
<ModalHeader label="Changes" title="Confirm changes" />
<ModalBody hasForm>
<Checkbox labelText="I have reviewed the changes" bind:checked />
</ModalBody>
<ModalFooter
primaryButtonText="Proceed"
primaryButtonDisabled="{!checked}"
secondaryButtons="{[{ text: 'Cancel' }, { text: 'Review' }]}"
on:click:button--secondary="{({ detail }) => {
if (detail.text === 'Cancel') open = false;
if (detail.text === 'Review') console.log('Review');
}}"
/>
</ComposedModal>

23
docs/src/pages/framed/Modal/3ButtonModal.svelte Normal file
View file

@ -0,0 +1,23 @@
<script>
import { Button, Modal } from "carbon-components-svelte";
let open = false;
</script>
<Button on:click="{() => (open = true)}">Create database</Button>
<Modal
bind:open
modalHeading="Create database"
primaryButtonText="Confirm"
secondaryButtons="{[{ text: 'Cancel' }, { text: 'Edit' }]}"
on:click:button--secondary="{({ detail }) => {
if (detail.text === 'Cancel') open = false;
if (detail.text === 'Edit') console.log('Edit');
}}"
on:open
on:close
on:submit
>
<p>Create a new Cloudant database in the US South region.</p>
</Modal>

42
src/ComposedModal/ModalFooter.svelte
View file

@ -1,4 +1,8 @@
<script> <script>
/**
* @event {{ text: string; }} click:button--secondary
*/
/** Specify the primary button text */ /** Specify the primary button text */
export let primaryButtonText = ""; export let primaryButtonText = "";
@ -14,6 +18,13 @@
/** Specify the secondary button text */ /** Specify the secondary button text */
export let secondaryButtonText = ""; export let secondaryButtonText = "";
/**
* 2-tuple prop to render two secondary buttons for a 3 button modal
* supersedes `secondaryButtonText`
* @type {[{ text: string; }, { text: string; }]}
*/
export let secondaryButtons = [];
/** /**
* Specify a class for the secondary button * Specify a class for the secondary button
* @type {string} * @type {string}
@ -23,15 +34,38 @@
/** Set to `true` to use the danger variant */ /** Set to `true` to use the danger variant */
export let danger = false; export let danger = false;
import { getContext } from "svelte"; import { getContext, createEventDispatcher } from "svelte";
import Button from "../Button/Button.svelte"; import Button from "../Button/Button.svelte";
const dispatch = createEventDispatcher();
const { closeModal, submit } = getContext("ComposedModal"); const { closeModal, submit } = getContext("ComposedModal");
</script> </script>
<div class:bx--modal-footer="{true}" {...$$restProps}> <div
{#if secondaryButtonText} class:bx--modal-footer="{true}"
<Button kind="secondary" class="{secondaryClass}" on:click="{closeModal}"> class:bx--modal-footer--three-button="{secondaryButtons.length === 2}"
{...$$restProps}
>
{#if secondaryButtons.length > 0}
{#each secondaryButtons as button}
<Button
kind="secondary"
on:click="{() => {
dispatch('click:button--secondary', { text: button.text });
}}"
>
{button.text}
</Button>
{/each}
{:else if secondaryButtonText}
<Button
kind="secondary"
class="{secondaryClass}"
on:click="{() => {
closeModal();
dispatch('click:button--secondary', { text: secondaryButtonText });
}}"
>
{secondaryButtonText} {secondaryButtonText}
</Button> </Button>
{/if} {/if}

44
src/Modal/Modal.svelte
View file

@ -1,6 +1,7 @@
<script> <script>
/** /**
* @event {{ open: boolean; }} transitionend * @event {{ open: boolean; }} transitionend
* @event {{ text: string; }} click:button--secondary
*/ */
/** /**
@ -60,6 +61,13 @@
/** Specify the secondary button text */ /** Specify the secondary button text */
export let secondaryButtonText = ""; export let secondaryButtonText = "";
/**
* 2-tuple prop to render two secondary buttons for a 3 button modal
* supersedes `secondaryButtonText`
* @type {[{ text: string; }, { text: string; }]}
*/
export let secondaryButtons = [];
/** Specify a selector to be focused when opening the modal */ /** Specify a selector to be focused when opening the modal */
export let selectorPrimaryFocus = "[data-modal-primary-focus]"; export let selectorPrimaryFocus = "[data-modal-primary-focus]";
@ -257,15 +265,33 @@
<div class:bx--modal-content--overflow-indicator="{true}"></div> <div class:bx--modal-content--overflow-indicator="{true}"></div>
{/if} {/if}
{#if !passiveModal} {#if !passiveModal}
<div class:bx--modal-footer="{true}"> <div
<Button class:bx--modal-footer="{true}"
kind="secondary" class:bx--modal-footer--three-button="{secondaryButtons.length === 2}"
on:click="{() => { >
dispatch('click:button--secondary'); {#if secondaryButtons.length > 0}
}}" {#each secondaryButtons as button}
> <Button
{secondaryButtonText} kind="secondary"
</Button> on:click="{() => {
dispatch('click:button--secondary', { text: button.text });
}}"
>
{button.text}
</Button>
{/each}
{:else if secondaryButtonText}
<Button
kind="secondary"
on:click="{() => {
dispatch('click:button--secondary', {
text: secondaryButtonText,
});
}}"
>
{secondaryButtonText}
</Button>
{/if}
<Button <Button
kind="{danger ? 'danger' : 'primary'}" kind="{danger ? 'danger' : 'primary'}"
disabled="{primaryButtonDisabled}" disabled="{primaryButtonDisabled}"

7
tests/ComposedModal.test.svelte
View file

@ -15,5 +15,10 @@
<ModalBody hasForm> <ModalBody hasForm>
<Checkbox labelText="I have reviewed the changes" bind:checked /> <Checkbox labelText="I have reviewed the changes" bind:checked />
</ModalBody> </ModalBody>
<ModalFooter primaryButtonText="Proceed" primaryButtonDisabled="{!checked}" /> <ModalFooter
primaryButtonText="Proceed"
primaryButtonDisabled="{!checked}"
secondaryButtons="{[{ text: 'Cancel' }, { text: 'Duplicate' }]}"
on:click:button--secondary="{({ detail }) => {}}"
/>
</ComposedModal> </ComposedModal>

3
tests/Modal.test.svelte
View file

@ -10,8 +10,9 @@
bind:open bind:open
modalHeading="Create database" modalHeading="Create database"
primaryButtonText="Confirm" primaryButtonText="Confirm"
secondaryButtons="{[{ text: 'Cancel' }, { text: 'Duplicate' }]}"
secondaryButtonText="Cancel" secondaryButtonText="Cancel"
on:click:button--secondary="{() => (open = false)}" on:click:button--secondary="{({ detail }) => (open = false)}"
on:open on:open
on:close on:close
on:submit on:submit

9
types/ComposedModal/ModalFooter.d.ts vendored
View file

@ -26,6 +26,13 @@ export interface ModalFooterProps
*/ */
secondaryButtonText?: string; secondaryButtonText?: string;
/**
* 2-tuple prop to render two secondary buttons for a 3 button modal
* supersedes `secondaryButtonText`
* @default []
*/
secondaryButtons?: [{ text: string }, { text: string }];
/** /**
* Specify a class for the secondary button * Specify a class for the secondary button
*/ */
@ -40,6 +47,6 @@ export interface ModalFooterProps
export default class ModalFooter extends SvelteComponentTyped< export default class ModalFooter extends SvelteComponentTyped<
ModalFooterProps, ModalFooterProps,
{}, { ["click:button--secondary"]: CustomEvent<{ text: string }> },
{ default: {} } { default: {} }
> {} > {}

9
types/Modal/Modal.d.ts vendored
View file

@ -89,6 +89,13 @@ export interface ModalProps
*/ */
secondaryButtonText?: string; secondaryButtonText?: string;
/**
* 2-tuple prop to render two secondary buttons for a 3 button modal
* supersedes `secondaryButtonText`
* @default []
*/
secondaryButtons?: [{ text: string }, { text: string }];
/** /**
* Specify a selector to be focused when opening the modal * Specify a selector to be focused when opening the modal
* @default "[data-modal-primary-focus]" * @default "[data-modal-primary-focus]"
@ -118,13 +125,13 @@ export default class Modal extends SvelteComponentTyped<
ModalProps, ModalProps,
{ {
transitionend: CustomEvent<{ open: boolean }>; transitionend: CustomEvent<{ open: boolean }>;
["click:button--secondary"]: CustomEvent<{ text: string }>;
keydown: WindowEventMap["keydown"]; keydown: WindowEventMap["keydown"];
click: WindowEventMap["click"]; click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"]; mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"]; mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"]; mouseleave: WindowEventMap["mouseleave"];
submit: CustomEvent<any>; submit: CustomEvent<any>;
["click:button--secondary"]: CustomEvent<any>;
close: CustomEvent<any>; close: CustomEvent<any>;
open: CustomEvent<any>; open: CustomEvent<any>;
}, },