Modal
A Modal is a page overlay that displays information and blocks interaction with the page until an action is taken or the Modal is dismissed.
const ModalTrigger = () => {// Modal propertiesconst [isOpen, setIsOpen] = React.useState(false);const handleOpen = () => setIsOpen(true);const handleClose = () => setIsOpen(false);const modalHeadingID = useUID();return (<div><Button variant="primary" onClick={handleOpen}>Open modal</Button><Modal ariaLabelledby={modalHeadingID} isOpen={isOpen} onDismiss={handleClose} size="default"><ModalHeader><ModalHeading as="h3" id={modalHeadingID}>Choose an author</ModalHeading></ModalHeader><ModalBody><Paragraph>“If there’s a book that you want to read, but it hasn’t been written yet, then you must write it.”— Toni Morrison</Paragraph><Label htmlFor="author">Choose an author</Label><Select id="author"><Option value="baldwin">James Baldwin</Option><Option value="brown">adrienne maree brown</Option><Option value="butler">Octavia Butler</Option><Option value="coates">Ta-Nehisi Coates</Option><Option value="lorde">Audre Lorde</Option><Option value="nnedi">Nnedi Okorafor</Option></Select></ModalBody><ModalFooter><ModalFooterActions><Button variant="secondary" onClick={handleClose}>Cancel</Button><Button variant="primary">Done</Button></ModalFooterActions></ModalFooter></Modal></div>);};render(<ModalTrigger />)
A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction. Modals are typically used to focus a user's attention for any of these scenarios:
- When you want to capture information from the user without having them leave the parent page.
- When you want to show additional information to the user without losing context of the parent page.
If you need to to guarantee a user acknowledges a critical piece of information, use an Alert Dialog instead.
Users cannot interact with content outside an active modal window until the user explicitly closes it. When the modal opens, focus moves to an element contained in it (by default, the first element that can be focused) in the modal, and the focus should stay in and cycle through the modal's content. Focus shouldn't return to the underlying page until the user closes the modal. This can happen in any of the following ways:
- Presses the Esc key
- Presses the close "x" button in the Modal header
- Presses a "Cancel" button in the Modal footer
- Clicks outside of the Modal
- Performs another action that closes the Modal
You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.
- All elements required to interact with the modal, including closing or acknowledging it, are contained in the modal since they trap focus, and users can't interact with the underlying page.
- Tabbing through a Modal will cycle through its content in the same way it does on a page. A Modal also supports pressing the Escape key to close the Modal.
- The element that serves as the modal container has a role of dialog.
- The modal must be labelled. It can be labelled either by:
- Setting a value for the
aria-labelledby
property that refers to a visibleModalHeading
. - Providing a label directly specifing by
aria-label
attribute on the Modal container.
- Setting a value for the
A modal is composed of:
- Header — Headers include a Heading and close button. Heading text should be concise (2-4 words and no more than one line) and describe the information or action the modal is presenting.
- Body — This container has no content requirements and allows you to compose a Modal as you need. Common components you might use include supporting body copy (with Paragraph) and form elements.
- Footer — This contains all possible modal actions aligned to the right side of the modal (by default) to show users they're progressing through their task, whether that's on the parent page, on a new page, or in another step in the modal.
Provide an accessible label
Be sure to assign the aria-labelledby
property on the modal container to the id of the modal heading.
A Modal has a default width of 608 px to allow for an optimal reading length at 70-75 characters per line at default Paragraph size at 100% magnification. At viewports smaller than 608 px, the Modal will fill the width of the viewport and pin to the bottom. The Modal will grow in height with the amount of content in it. Once the modal reaches 90% of the height of the viewport, the body will begin to scroll.
const ModalTrigger = () => {// Modal propertiesconst [isOpen, setIsOpen] = React.useState(false);const handleOpen = () => setIsOpen(true);const handleClose = () => setIsOpen(false);const modalHeadingID = useUID();return (<div><Button variant="primary" onClick={handleOpen}>Open modal</Button><Modal ariaLabelledby={modalHeadingID} isOpen={isOpen} onDismiss={handleClose} size="default"><ModalHeader><ModalHeading as="h3" id={modalHeadingID}>Choose an author</ModalHeading></ModalHeader><ModalBody><Paragraph>“If there’s a book that you want to read, but it hasn’t been written yet, then you must write it.”— Toni Morrison</Paragraph><Label htmlFor="author">Choose an author</Label><Select id="author"><Option value="baldwin">James Baldwin</Option><Option value="brown">adrienne maree brown</Option><Option value="butler">Octavia Butler</Option><Option value="coates">Ta-Nehisi Coates</Option><Option value="lorde">Audre Lorde</Option><Option value="nnedi">Nnedi Okorafor</Option></Select></ModalBody><ModalFooter><ModalFooterActions><Button variant="secondary" onClick={handleClose}>Cancel</Button><Button variant="primary">Done</Button></ModalFooterActions></ModalFooter></Modal></div>);};render(<ModalTrigger />)
Use a wide modal (816px) when your content requires it. For example, you may need to place a two-column Grid layout or video player in a wide modal.
At viewports smaller than 816 px, the Modal will shift to the default width (608px). The wide Modal follows all other sizing behavior as the default Modal.
const ModalTrigger = () => {// Modal propertiesconst [isOpen, setIsOpen] = React.useState(false);const handleOpen = () => setIsOpen(true);const handleClose = () => setIsOpen(false);const modalHeadingID = useUID();// Content propertiesconst [documentName, setDocumentName] = React.useState('');const [address1, setAddress1Name] = React.useState('');const [address2, setAddress2Name] = React.useState('');const documentNameInputID = useUID();const address1InputID = useUID();const address2InputID = useUID();return (<div><Button variant="primary" onClick={handleOpen}>Add supporting document</Button><Modal ariaLabelledby={modalHeadingID} isOpen={isOpen} onDismiss={handleClose} size="wide"><ModalHeader><ModalHeading as="h3" id={modalHeadingID}>Add supporting document</ModalHeading></ModalHeader><ModalBody><Grid gutter="space50"><Column><Box marginBottom="space50"><Label htmlFor={documentNameInputID}>Supporting document name</Label><Input onChange={(e) => setDocumentName(e.currentTarget.value)} id={documentNameInputID} type="text" value={documentName} /></Box><Box marginBottom="space50"><Label htmlFor={address1InputID}>Address 1</Label><Input onChange={(e) => setAddress1Name(e.currentTarget.value)} id={address1InputID} type="text" value={address1} /></Box><Box><Label htmlFor={address2InputID}>Address 2</Label><Input onChange={(e) => setAddress2Name(e.currentTarget.value)} id={address2InputID} type="text" value={address2} /></Box></Column><Column><Box backgroundColor="colorBackground" height="size20" display="flex" alignItems="center" justifyContent="center"><Text as="p" textAlign="center">Upload supporting document</Text></Box></Column></Grid></ModalBody><ModalFooter><ModalFooterActions><Button variant="secondary" onClick={handleClose}>Cancel</Button><Button variant="primary">Add document</Button></ModalFooterActions></ModalFooter></Modal></div>);};render(<ModalTrigger />)
When a Modal opens user focus is set inside the Modal. By default, user focus will be set on the first focusable element which is the close button. You can choose to explicitly set focus to any focusable UI control inside the modal.
To set a different initial focus target, set the initialFocusRef
prop on the Modal
container to a ref
of a focusable element inside the Modal.
const ModalTrigger = () => {// Modal propertiesconst [isOpen, setIsOpen] = React.useState(false);const handleOpen = () => setIsOpen(true);const handleClose = () => setIsOpen(false);const modalHeadingID = useUID();// ref of target intial focus elementconst nameInputRef = React.createRef();// Content propertiesconst [name, setName] = React.useState('');const inputID = useUID();return (<div><Button variant="primary" onClick={handleOpen}>New project</Button><ModalariaLabelledby={modalHeadingID}isOpen={isOpen}onDismiss={handleClose}// set inital focus hereinitialFocusRef={nameInputRef}size="default"><ModalHeader><ModalHeading as="h3" id={modalHeadingID}>Create a new project</ModalHeading></ModalHeader><ModalBody><Box as="form"><Label htmlFor={inputID}>Project Name</Label><Inputid={inputID}value={name}// assign the target ref hereref={nameInputRef}onChange={e => setName(e.currentTarget.value)}type="text"/></Box></ModalBody><ModalFooter><ModalFooterActions><Button variant="secondary" onClick={handleClose}>Cancel</Button><Button variant="primary">Submit</Button></ModalFooterActions></ModalFooter></Modal></div>);};render(<ModalTrigger />)
To internationalize the modal, simply pass different text as children to the Modal components. The only exception is the dismiss button in the ModalHeader
component–to change the button’s text, use the i18nDismissLabel
prop.
const ModalTrigger = () => {// Modal propertiesconst [isOpen, setIsOpen] = React.useState(false);const handleOpen = () => setIsOpen(true);const handleClose = () => setIsOpen(false);const modalHeadingID = useUID();return (<div><Button variant="primary" onClick={handleOpen}>Abrir modal</Button><Modal ariaLabelledby={modalHeadingID} isOpen={isOpen} onDismiss={handleClose} size="default"><ModalHeader i18nDismissLabel='Cerrar modal'><ModalHeading as="h3" id={modalHeadingID}>Escoja una autora</ModalHeading></ModalHeader><ModalBody><Paragraph>"Vivir en las fronteras y en los márgenes, mantener intacta la identidad múltiple y la integridad, es como tratar de nadar en un nuevo elemento, un elemento 'extranjero'"— Gloria E. Anzaldúa</Paragraph><Label htmlFor="author">Escoja una autora</Label><Select id="author"><Option value="allende">Isabel Allende</Option><Option value="cisneros">Sandra Cisneros</Option><Option value="santiago">Esmeralda Santiago</Option><Option value="anzaldúa">Gloria E. Anzaldúa</Option></Select></ModalBody><ModalFooter><ModalFooterActions><Button variant="secondary" onClick={handleClose}>Cancelar</Button><Button variant="primary">Confirmar</Button></ModalFooterActions></ModalFooter></Modal></div>);};render(<ModalTrigger />)
Include a header, body, and footer in your modal.
- The header should be concise (2-4 words), start with a verb, and clearly describe the information or action the modal presents.
- The body should expand on the topic in the header. If you need multiple sections of content with Headings in the body, use a Heading with the
heading40
variant. - The footers should include 1–2 actions aligned to the right side of the modal. Place the primary action farthest on the right to indicate to users they're progressing through their task.
By default the footer actions are aligned to the right of the modal using the Flexbox property justify-content
. This should be the most common configuration you should choose.
<ModalFooter><ModalFooterActions><Button variant="secondary">Cancel</Button><Button variant="primary">Save</Button></ModalFooterActions></ModalFooter>
Sometimes you may need to do left alignment of buttons. This is less common. To do so use the justify
property on the ModalFooterActions
component and set it to start
.
<ModalFooter><ModalFooterActions justify="start"><Button variant="secondary">Cancel</Button><Button variant="primary">Save</Button></ModalFooterActions></ModalFooter>
By using both alignment types, you are able to create directional alignments of footer actions.
<ModalFooter><ModalFooterActions justify="start"><Button variant="secondary">Back</Button></ModalFooterActions><ModalFooterActions><Button variant="secondary">Cancel</Button><Button variant="primary">Save</Button></ModalFooterActions></ModalFooter>
Use a Modal to:
- Request the user enter information to continue the current process.
- Guide the user through a complex workflow with a series of steps, while still maintaining context of the task that initiated the modal.
Do not use modals to show important warnings, since they can be dismissed without the user acknowledging the information. Instead, use an Alert Dialog.
Do not use modals to show error messages. Refer to the error state pattern for additional guidance on components.
Do
Use a clear and concise heading to describe the purpose of the Modal.
Don't
Don't go into unnecessary detail in the heading about the purpose of the Modal.
Do
Keep the main call to action in the footer. If you're asking the user to perform an action, use a primary action (primary button or destructive button). If you need only to give the user a way to close the Modal, use a secondary button or rely on the close 'x' button.
Don't
Don't put buttons that close the Modal, or confirm and submit content, in the body.
Do
Use at most one primary and one secondary action in a Modal. Make the secondary action a 'Cancel' button, especially when you want to give users an explicit choice to decline the primary action. This is especially useful when the primary action is a destructive action.
Don't
Don't put more than one primary action in the footer. Avoid using the secondary button for an action that isn't 'Close' or 'Cancel' since users will be used to pressing a secondary button that escapes the Modal. If you need to provide another action, add a third button to the footer, or consider showing it elsewhere.
yarn add @twilio-paste/modal - or - yarn add @twilio-paste/core
import {useUID} from '@twilio-paste/core/uid-library';
import {Button} from '@twilio-paste/core/button';
import {Modal, ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading} from '@twilio-paste/core/modal';
const ModalTrigger = () => {
const [isOpen, setIsOpen] = React.useState(false);
const handleOpen = () => setIsOpen(true);
const handleClose = () => setIsOpen(false);
const modalHeadingID = useUID();
return (
<div>
<Button variant="primary" onClick={handleOpen}>
New Project
</Button>
<Modal ariaLabelledby={modalHeadingID} isOpen={isOpen} onDismiss={handleClose} size="default">
<ModalHeader>
<ModalHeading as="h3" id={modalHeadingID}>
Create new project
</ModalHeading>
</ModalHeader>
<ModalBody></ModalBody>
<ModalFooter>
<ModalFooterActions>
<Button variant="secondary" onClick={handleClose}>
Cancel
</Button>
<Button variant="primary">Submit</Button>
</ModalFooterActions>
</ModalFooter>
</Modal>
</div>
);
};
Prop | Type | Description | Default |
---|---|---|---|
children | ReactNode | null | |
isOpen | boolean | null | |
onDismiss | Function() => void | null | |
allowPinchZoom? | boolean | true | |
size | oneOf(['default', 'wide']) | null | |
initialFocusRef? | RefObject | null | |
ariaLabelledby | string | null | |
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'MODAL' |
Prop | Type | Description | Default |
---|---|---|---|
children | ReactNode | null | |
i18nDismissLabel? | string | 'Close modal' | |
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'MODAL_HEADER' |
Prop | Type | Description | Default |
---|---|---|---|
children | ReactNode | null | |
as | oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']) | null | |
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'MODAL_HEADING' |
Prop | Type | Description | Default |
---|---|---|---|
children | ReactNode | null | |
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'MODAL_BODY' |
Prop | Type | Description | Default |
---|---|---|---|
children | ReactNode | null | |
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'MODAL_FOOTER' |
Prop | Type | Description | Default |
---|---|---|---|
children | ReactNode | null | |
justify? | oneOf(['start', 'end']) | null | |
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'MODAL_FOOTER_ACTIONS' |
Changelog
733709127
#3395 Thanks @SiTaggart! - Modified the compile target of our JavaScript bundles fromnode
tobrowser
to minimize the risk of clashing with RequireJS. This is marked as a major out of an abundance of caution. You shouldn't need to do anything but we wanted you to be aware of the change on the off chance it has unintended consequences
- Updated dependencies [
733709127
]:- @twilio-paste/uid-library@2.0.0
- @twilio-paste/color-contrast-utils@5.0.0
- @twilio-paste/anchor@12.0.0
- @twilio-paste/button@14.0.0
- @twilio-paste/heading@11.0.0
- @twilio-paste/screen-reader-only@13.0.0
- @twilio-paste/spinner@14.0.0
- @twilio-paste/flex@8.0.0
- @twilio-paste/stack@8.0.0
- @twilio-paste/box@10.0.0
- @twilio-paste/modal-dialog-primitive@2.0.0
- @twilio-paste/text@10.0.0
- @twilio-paste/customization@8.0.0
- @twilio-paste/design-tokens@10.0.0
- @twilio-paste/icons@12.0.0
- @twilio-paste/animation-library@2.0.0
- @twilio-paste/styling-library@3.0.0
- @twilio-paste/style-props@9.0.0
- @twilio-paste/theme@11.0.0
- @twilio-paste/types@6.0.0
4d1f7c65e
#3360 Thanks @SiTaggart! - Improved types where Paste extends the base HTML element that a component is based on, so that the existing blocked styling properties are not exposed as valid properties for the component via Typescript. This leads to less confusion around what is supported by a Paste component.Existing blocked component properties include:
className
style
color
3ab2bb6f4
#3114 Thanks @SiTaggart! - ### Breaking changeWe have moved
@types/react
and@types/react-dom
to peer dependencies of the library. This should allow for greater control and backwards compatibility with older versions of React as Paste is no longer bundling the type libraries.Your application likely has both of these as dependencies anyway, but it is now up to you to manage that version number.
Action needed
Ensure
@types/react
and@types/react-dom
are installed as dependencies of your application.
- Updated dependencies [
6730aac19
,1d75f223e
,3ab2bb6f4
,50cde4668
,bce889344
,3ab2bb6f4
,3ab2bb6f4
,3ab2bb6f4
]:- @twilio-paste/button@13.0.0
- @twilio-paste/icons@11.0.0
- @twilio-paste/anchor@11.0.0
- @twilio-paste/theme@10.0.0
- @twilio-paste/box@9.0.0
- @twilio-paste/text@9.0.0
- @twilio-paste/heading@10.0.0
- @twilio-paste/screen-reader-only@12.0.0
- @twilio-paste/spinner@13.0.0
- @twilio-paste/flex@7.0.0
- @twilio-paste/stack@7.0.0
- @twilio-paste/customization@7.0.0
- @twilio-paste/style-props@8.0.0
- @twilio-paste/types@5.0.0
d97098846
#3020 Thanks @SiTaggart! - This major version included listing all the missing peer dependencies for each Paste package.If you are using a package from Paste in isolation from Core, when upgrading to this latest version, be sure to correctly install all the missing peer dependencies.
05075e4c7
#3042 Thanks @shleewhite! - [Modal] Update styles to align with new Paste Twilio themeUpdated dependencies [
154b02c06
,dbd9bf992
,3c89fd83d
,d97098846
,0acdf3486
,ef094db4a
,0acdf3486
,154b02c06
]:- @twilio-paste/anchor@10.0.0
- @twilio-paste/design-tokens@9.0.0
- @twilio-paste/button@12.0.0
- @twilio-paste/heading@9.0.0
- @twilio-paste/screen-reader-only@11.0.0
- @twilio-paste/spinner@12.0.0
- @twilio-paste/flex@6.0.0
- @twilio-paste/stack@6.0.0
- @twilio-paste/box@8.0.0
- @twilio-paste/modal-dialog-primitive@1.0.0
- @twilio-paste/text@8.0.0
- @twilio-paste/customization@6.0.0
- @twilio-paste/icons@10.0.0
- @twilio-paste/animation-library@1.0.0
- @twilio-paste/styling-library@2.0.0
- @twilio-paste/uid-library@1.0.0
- @twilio-paste/style-props@7.0.0
- @twilio-paste/theme@9.0.0
- @twilio-paste/types@4.0.0
- @twilio-paste/color-contrast-utils@4.0.0
a4c9e70b0
#2763 Thanks @shleewhite! - Update ESLint rules, which changed some formatting.
56186cb51
#2697 Thanks @nkrantz! - [Modal] remove__console_patch
prop because it is no longer necessary
fcd2de38a
#2676 Thanks @shleewhite! - [Modal] spread props onto ModalFooterActions component
- Updated dependencies [
12c4ba22a
,364083627
,364083627
,364083627
,ee2e535e9
,364083627
]:- @twilio-paste/box@7.0.0
- @twilio-paste/style-props@6.0.0
- @twilio-paste/design-tokens@8.0.0
- @twilio-paste/theme@8.0.0
- @twilio-paste/button@11.0.0
- @twilio-paste/heading@8.0.0
- @twilio-paste/spinner@11.0.0
- @twilio-paste/flex@5.0.0
- @twilio-paste/text@7.0.0
- @twilio-paste/icons@9.0.0
f510fea8
#2506 Thanks @SiTaggart! - [Alert Dialog, Modal]: changing header and footer elements to be more generic HTML elements to prevent global banner and contentinfo landmarks being placed in the DOM when using just a Dialog
ae9dd50f
#2466 Thanks @TheSisb! - [All packages] Update our ESBuild version and remove minification of identifiers in our production builds.
12a5e83e
#2449 Thanks @shleewhite! - Made a slight improvement to the TypeScript typings of several packages for better interoperability.
09762f0f1
#2376 Thanks @andipants12! - [Modal] Remove comment for obsolete ESLint rule.Updated dependencies [
09762f0f
,09762f0f
,09762f0f1
,09762f0f1
]:- @twilio-paste/text@6.0.0
- @twilio-paste/box@6.0.0
- @twilio-paste/styling-library@1.0.0
- @twilio-paste/theme@7.0.0
- @twilio-paste/button@10.0.0
- @twilio-paste/heading@7.0.0
- @twilio-paste/spinner@10.0.0
- @twilio-paste/flex@4.0.0
- @twilio-paste/icons@8.0.0
- @twilio-paste/style-props@5.0.0
f7e6ac1f0
#2233 Thanks @SiTaggart! - [Modal] export ModalDialogContentProps interface
- Updated dependencies [
10178f39d
]:- @twilio-paste/icons@7.0.0
- @twilio-paste/button@9.0.0
- @twilio-paste/spinner@9.0.0
b6ccaa266
#2347 Thanks @gloriliale! - [Alert, Modal, Popover, Toast] Adjust close icon's hover state color, which was previously being overwritten.
cf5878d82
#2285 Thanks @SiTaggart! - [Modal] Switch modal overlay to using a pure styled component and not BoxUpdated dependencies [
cf5878d82
]:- @twilio-paste/modal-dialog-primitive@0.3.0
73c596919
#2269 Thanks @SiTaggart! - Fixed a regression with the compilation script that caused incompatible ESM module importing of JSON files.
c867e3f48
#2237 Thanks @SiTaggart! - Updated a build dependency (esbuild) which changes the output of our builds slightly, without materially changing anything about the code.
9b0579415
#2218 Thanks @shleewhite! - [Modal] add i18nDismissLabel prop to ModalHeader to support i18n
563a76ba3
#2249 Thanks @nkrantz! - [modal]- Update modal header border bottom color to
colorBorderWeak
- Update modal footer border top color to
colorBorderWeak
- Update modal header border bottom color to
- Updated dependencies [
0a52eeee
,39ab32c2
,0a52eeee
,04de0d1d
,04de0d1d
,04de0d1d
]:- @twilio-paste/design-tokens@7.0.0
- @twilio-paste/icons@6.0.0
- @twilio-paste/theme@6.0.0
- @twilio-paste/style-props@4.0.0
- @twilio-paste/button@8.0.0
- @twilio-paste/form@7.0.0
- @twilio-paste/heading@6.0.0
- @twilio-paste/spinner@8.0.0
- @twilio-paste/flex@3.0.0
- @twilio-paste/box@5.0.0
- @twilio-paste/text@5.0.0
5d4515ea
#2083 Thanks @nkrantz! - [Alert, Modal, Popover, Toast] Update close button to usesecondary_icon
button variant
b7675915
#1985 Thanks @TheSisb! - For debugging purposes we now ship afilename.debug.js
unminified version of each component or library in Paste.
ed5c0a49c
#1965 Thanks @shleewhite! - Upgrade Paste to use React 17 by default, but maintain React 16 support for consumers.
01baddcd
#1925 Thanks @shleewhite! - Add displayNames to all components
a8ba78e4
#1903 Thanks @andipants12! - [Modal] Enable Component to respect element customizations set on the customization provider. Component now enables setting an element name on the underlying HTML element and checks the emotion theme object to determine whether it should merge in custom styles to the ones set by the component author.
f640550a
#1489 Thanks @richbachman! - Changed box-shadow for ModalDialogContent to use shadow token instead of shadow-card.
f6f26815
#1484 Thanks @gloriliale! - Created style file for stylings of the Modal so they can be used in other components, like Alert Dialog.
25a1f632
#1404 Thanks @SiTaggart! - update internal usage of design tokens to reflect new strong / weak nomenclature
0eded1fd
#1319 Thanks @SiTaggart! - Change internal dependencies to have minor range matching on version numbersUpdated dependencies [
0eded1fd
,1bcb8b30
]:- @twilio-paste/button@7.0.0
- Updated dependencies [
514bd5aa
,514bd5aa
]:- @twilio-paste/theme@5.0.1
- @twilio-paste/icons@5.1.1
- @twilio-paste/button@6.0.1
- @twilio-paste/heading@5.0.1
- @twilio-paste/spinner@7.0.1
- @twilio-paste/flex@2.0.2
- @twilio-paste/box@4.0.2
- @twilio-paste/text@4.0.1
- @twilio-paste/style-props@3.0.1
- Updated dependencies [
8b5a8592
]:- @twilio-paste/icons@5.1.0
- @twilio-paste/button@6.0.0
- @twilio-paste/spinner@7.0.0
- Updated dependencies [
509eba7a
]:- @twilio-paste/box@4.0.1
- @twilio-paste/button@5.0.1
- @twilio-paste/spinner@6.0.1
- @twilio-paste/flex@2.0.1
- @twilio-paste/icons@5.0.1
- Updated dependencies [
4c9ed5ca
,26c828d8
]:- @twilio-paste/design-tokens@6.6.0
- @twilio-paste/theme@5.0.0
- @twilio-paste/button@5.0.0
- @twilio-paste/heading@5.0.0
- @twilio-paste/spinner@6.0.0
- @twilio-paste/flex@2.0.0
- @twilio-paste/box@4.0.0
- @twilio-paste/text@4.0.0
- @twilio-paste/icons@5.0.0
- @twilio-paste/style-props@3.0.0
ac38757f
#1228 Thanks @SiTaggart! - Bump status of the component to productionUpdated dependencies [
ac38757f
]:- @twilio-paste/flex@1.0.2
- @twilio-paste/modal-dialog-primitive@0.2.2
- @twilio-paste/button@4.0.3
- Updated dependencies [
944c3407
,af779398
]:- @twilio-paste/design-tokens@6.5.2
- @twilio-paste/icons@4.0.2
- @twilio-paste/button@4.0.2
- @twilio-paste/heading@4.0.1
- @twilio-paste/spinner@5.0.2
- @twilio-paste/flex@1.0.1
- @twilio-paste/box@3.0.1
- @twilio-paste/text@3.0.1
- @twilio-paste/style-props@2.0.1
- @twilio-paste/theme@4.3.1
- Updated dependencies [
7340a6a5
]:- @twilio-paste/icons@4.0.1
- @twilio-paste/button@4.0.1
- @twilio-paste/spinner@5.0.1
- Updated dependencies [
f1675586
]:- @twilio-paste/theme@4.3.0
- @twilio-paste/button@4.0.0
- @twilio-paste/heading@4.0.0
- @twilio-paste/spinner@5.0.0
- @twilio-paste/flex@1.0.0
- @twilio-paste/box@3.0.0
- @twilio-paste/text@3.0.0
- @twilio-paste/icons@4.0.0
- @twilio-paste/style-props@2.0.0
a12acb61
#1158 Thanks @richbachman! - Pinned all twilio-paste package versions in order to keep them in sync with core when they are updated by changesets.Updated dependencies [
a12acb61
,a12acb61
,a12acb61
,a12acb61
,a12acb61
,a12acb61
,a12acb61
,a12acb61
,a12acb61
]:- @twilio-paste/theme@4.2.2
- @twilio-paste/button@3.0.1
- @twilio-paste/flex@0.5.2
- @twilio-paste/heading@3.1.2
- @twilio-paste/style-props@1.9.2
- @twilio-paste/box@2.13.2
- @twilio-paste/icons@3.13.1
- @twilio-paste/text@2.5.2
- @twilio-paste/spinner@4.0.1
- Updated dependencies [
4114dac2
]:- @twilio-paste/icons@3.13.0
- @twilio-paste/button@3.0.0
- @twilio-paste/spinner@4.0.0
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
2.1.1 (2021-01-25)
Note: Version bump only for package @twilio-paste/modal
2.0.5 (2021-01-15)
Note: Version bump only for package @twilio-paste/modal
2.0.4 (2021-01-14)
Note: Version bump only for package @twilio-paste/modal
2.0.3 (2021-01-13)
Note: Version bump only for package @twilio-paste/modal
2.0.2 (2021-01-07)
Note: Version bump only for package @twilio-paste/modal
2.0.1 (2020-12-17)
Note: Version bump only for package @twilio-paste/modal
- modal: add forwardRef (6061bfe)
- modal: component is now using fowardRef
1.0.55 (2020-12-15)
Note: Version bump only for package @twilio-paste/modal
1.0.54 (2020-12-11)
Note: Version bump only for package @twilio-paste/modal
1.0.53 (2020-12-11)
Note: Version bump only for package @twilio-paste/modal
1.0.52 (2020-12-09)
Note: Version bump only for package @twilio-paste/modal
1.0.51 (2020-12-03)
Note: Version bump only for package @twilio-paste/modal
1.0.50 (2020-12-02)
Note: Version bump only for package @twilio-paste/modal
1.0.49 (2020-11-25)
Note: Version bump only for package @twilio-paste/modal
1.0.48 (2020-11-16)
Note: Version bump only for package @twilio-paste/modal
1.0.47 (2020-11-11)
Note: Version bump only for package @twilio-paste/modal
1.0.46 (2020-11-11)
Note: Version bump only for package @twilio-paste/modal
1.0.45 (2020-11-10)
Note: Version bump only for package @twilio-paste/modal
1.0.44 (2020-11-09)
Note: Version bump only for package @twilio-paste/modal
1.0.43 (2020-11-06)
Note: Version bump only for package @twilio-paste/modal
1.0.42 (2020-11-05)
Note: Version bump only for package @twilio-paste/modal
1.0.41 (2020-11-02)
Note: Version bump only for package @twilio-paste/modal
1.0.40 (2020-10-30)
Note: Version bump only for package @twilio-paste/modal
1.0.39 (2020-10-29)
Note: Version bump only for package @twilio-paste/modal
1.0.38 (2020-10-23)
Note: Version bump only for package @twilio-paste/modal
1.0.37 (2020-10-22)
Note: Version bump only for package @twilio-paste/modal
1.0.36 (2020-10-21)
Note: Version bump only for package @twilio-paste/modal
1.0.35 (2020-10-19)
Note: Version bump only for package @twilio-paste/modal
1.0.34 (2020-10-15)
Note: Version bump only for package @twilio-paste/modal
1.0.33 (2020-10-13)
Note: Version bump only for package @twilio-paste/modal
1.0.32 (2020-10-09)
1.0.31 (2020-10-09)
Note: Version bump only for package @twilio-paste/modal
1.0.30 (2020-10-07)
Note: Version bump only for package @twilio-paste/modal
1.0.29 (2020-10-07)
Note: Version bump only for package @twilio-paste/modal
1.0.28 (2020-10-07)
1.0.27 (2020-10-07)
Note: Version bump only for package @twilio-paste/modal
1.0.26 (2020-10-07)
Note: Version bump only for package @twilio-paste/modal
1.0.25 (2020-09-28)
Note: Version bump only for package @twilio-paste/modal
1.0.24 (2020-09-22)
Note: Version bump only for package @twilio-paste/modal
1.0.23 (2020-09-21)
Note: Version bump only for package @twilio-paste/modal
1.0.22 (2020-09-15)
Note: Version bump only for package @twilio-paste/modal
1.0.21 (2020-09-15)
- modal: adjust zIndex for popovers and tooltips (7b62d58)
1.0.20 (2020-09-14)
Note: Version bump only for package @twilio-paste/modal
1.0.19 (2020-09-10)
Note: Version bump only for package @twilio-paste/modal
1.0.18 (2020-09-09)
Note: Version bump only for package @twilio-paste/modal
1.0.17 (2020-09-09)
Note: Version bump only for package @twilio-paste/modal
1.0.16 (2020-09-08)
Note: Version bump only for package @twilio-paste/modal
1.0.15 (2020-09-08)
Note: Version bump only for package @twilio-paste/modal
1.0.14 (2020-09-03)
Note: Version bump only for package @twilio-paste/modal
1.0.13 (2020-09-03)
Note: Version bump only for package @twilio-paste/modal
1.0.12 (2020-09-02)
Note: Version bump only for package @twilio-paste/modal
1.0.11 (2020-08-31)
Note: Version bump only for package @twilio-paste/modal
1.0.10 (2020-08-31)
Note: Version bump only for package @twilio-paste/modal
1.0.9 (2020-08-31)
Note: Version bump only for package @twilio-paste/modal
1.0.8 (2020-08-27)
Note: Version bump only for package @twilio-paste/modal
1.0.7 (2020-08-24)
Note: Version bump only for package @twilio-paste/modal
1.0.6 (2020-08-19)
Note: Version bump only for package @twilio-paste/modal
1.0.5 (2020-08-12)
Note: Version bump only for package @twilio-paste/modal
1.0.4 (2020-08-12)
Note: Version bump only for package @twilio-paste/modal