mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
feat(modal): support 3-button Modal, ComposedModal (#724)
* 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:
parent
a62e9c0c3c
commit
f4a3646cb4
12 changed files with 230 additions and 50 deletions
31
docs/src/pages/framed/Modal/3ButtonComposedModal.svelte
Normal file
31
docs/src/pages/framed/Modal/3ButtonComposedModal.svelte
Normal 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
23
docs/src/pages/framed/Modal/3ButtonModal.svelte
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue