Skip to content

Commit 05075e4

Browse files
shleewhiteshleewhite
authored
feat: update Modal and Alert Dialog styles (#3042)
1 parent d0d9991 commit 05075e4

File tree

11 files changed

+52
-99
lines changed

11 files changed

+52
-99
lines changed

‎.changeset/green-plants-relax.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@twilio-paste/modal': patch
3+
'@twilio-paste/core': patch
4+
---
5+
6+
[Modal] Update styles to align with new Paste Twilio theme

‎.changeset/warm-mice-sing.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@twilio-paste/alert-dialog': patch
3+
'@twilio-paste/core': patch
4+
---
5+
6+
[Alert Dialog] Update styles to align with new Paste Twilio theme

‎packages/paste-core/components/alert-dialog/src/AlertDialogBody.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as React from 'react';
22
import PropTypes from 'prop-types';
33
import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
44
import type {BoxProps} from '@twilio-paste/box';
5-
import {modalBodyStyles} from '@twilio-paste/modal';
65

76
export interface AlertDialogBodyProps extends React.HTMLAttributes<HTMLDivElement>, Pick<BoxProps, 'element'> {
87
bodyID: string;
@@ -12,7 +11,16 @@ export interface AlertDialogBodyProps extends React.HTMLAttributes<HTMLDivElemen
1211
export const AlertDialogBody = React.forwardRef<HTMLDivElement, AlertDialogBodyProps>(
1312
({bodyID, children, element = 'ALERT_DIALOG_BODY', ...props}, ref) => {
1413
return (
15-
<Box {...safelySpreadBoxProps(props)} as="div" {...modalBodyStyles} element={element} id={bodyID} ref={ref}>
14+
<Box
15+
{...safelySpreadBoxProps(props)}
16+
as="div"
17+
overflowY="auto"
18+
padding="space90"
19+
paddingTop="space0"
20+
element={element}
21+
id={bodyID}
22+
ref={ref}
23+
>
1624
{children}
1725
</Box>
1826
);

‎packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
44
import type {BoxProps} from '@twilio-paste/box';
55
import {Button} from '@twilio-paste/button';
66
import {Stack} from '@twilio-paste/stack';
7-
import {modalFooterStyles} from '@twilio-paste/modal';
87

98
export interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement>, Pick<BoxProps, 'element'> {
109
destructive?: boolean;
@@ -25,11 +24,13 @@ export const AlertDialogFooter = React.forwardRef<HTMLDivElement, AlertDialogFoo
2524
<Box
2625
{...safelySpreadBoxProps(props)}
2726
as="div"
28-
{...modalFooterStyles}
27+
flexShrink={0}
28+
display="flex"
29+
padding="space90"
30+
paddingTop="space0"
2931
border="none"
3032
element={element}
3133
justifyContent="flex-end"
32-
paddingTop="space0"
3334
ref={ref}
3435
>
3536
<Stack orientation="horizontal" spacing="space50">

‎packages/paste-core/components/alert-dialog/src/AlertDialogHeader.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
33
import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
44
import type {BoxProps} from '@twilio-paste/box';
55
import {Heading} from '@twilio-paste/heading';
6-
import {modalHeaderStyles} from '@twilio-paste/modal';
76

87
export interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLHeadElement>, Pick<BoxProps, 'element'> {
98
children: string;
@@ -16,10 +15,10 @@ export const AlertDialogHeader = React.forwardRef<HTMLHeadElement, AlertDialogHe
1615
<Box
1716
{...safelySpreadBoxProps(props)}
1817
as="div"
19-
{...modalHeaderStyles}
18+
padding="space90"
19+
flexShrink={0}
2020
border="none"
2121
element={`${element}_WRAPPER`}
22-
paddingBottom="space0"
2322
ref={ref}
2423
>
2524
<Heading as="h3" element={element} marginBottom="space0" variant="heading30" id={headingID}>

‎packages/paste-core/components/modal/src/Modal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ export const ModalDialogContent = animated(
5454
maxHeight: '90%',
5555
minHeight: '170px',
5656
backgroundColor: 'colorBackgroundBody',
57-
borderColor: 'colorBorderWeak',
58-
borderRadius: 'borderRadius20',
57+
borderColor: 'colorBorderWeaker',
58+
borderRadius: 'borderRadius30',
5959
borderStyle: 'solid',
6060
borderWidth: 'borderWidth10',
6161
boxShadow: 'shadow',

‎packages/paste-core/components/modal/src/ModalBody.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,23 @@ import PropTypes from 'prop-types';
33
import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
44
import type {BoxElementProps} from '@twilio-paste/box';
55

6-
import {modalBodyStyles} from './styles';
7-
86
export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
97
children: NonNullable<React.ReactNode>;
108
element?: BoxElementProps['element'];
119
}
10+
1211
const ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(
1312
({children, element = 'MODAL_BODY', ...props}, ref) => {
1413
return (
15-
<Box {...safelySpreadBoxProps(props)} {...modalBodyStyles} as="div" element={element} ref={ref}>
14+
<Box
15+
{...safelySpreadBoxProps(props)}
16+
overflowY="auto"
17+
padding="space90"
18+
paddingTop="space0"
19+
as="div"
20+
element={element}
21+
ref={ref}
22+
>
1623
{children}
1724
</Box>
1825
);

‎packages/paste-core/components/modal/src/ModalFooter.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,23 @@ import PropTypes from 'prop-types';
33
import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
44
import type {BoxElementProps} from '@twilio-paste/box';
55

6-
import {modalFooterStyles} from './styles';
7-
86
export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
97
children: NonNullable<React.ReactNode>;
108
element?: BoxElementProps['element'];
119
}
1210
const ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(
1311
({children, element = 'MODAL_FOOTER', ...props}, ref) => {
1412
return (
15-
<Box {...safelySpreadBoxProps(props)} {...modalFooterStyles} as="div" element={element} ref={ref}>
13+
<Box
14+
{...safelySpreadBoxProps(props)}
15+
flexShrink={0}
16+
display="flex"
17+
padding="space90"
18+
paddingTop="space0"
19+
as="div"
20+
element={element}
21+
ref={ref}
22+
>
1623
{children}
1724
</Box>
1825
);

‎packages/paste-core/components/modal/src/ModalHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@ import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only';
88
import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon';
99

1010
import {useModalContext} from './ModalContext';
11-
import {modalHeaderStyles} from './styles';
1211

1312
export interface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadElement> {
1413
children: NonNullable<React.ReactNode>;
1514
element?: BoxElementProps['element'];
1615
i18nDismissLabel?: string;
1716
}
17+
1818
const ModalHeader = React.forwardRef<HTMLHeadElement, ModalHeaderProps>(
1919
({children, element = 'MODAL_HEADER', i18nDismissLabel = 'Close modal', ...props}, ref) => {
2020
const {onDismiss} = useModalContext();
2121
return (
22-
<Box {...safelySpreadBoxProps(props)} as="div" {...modalHeaderStyles} element={element} ref={ref}>
22+
<Box {...safelySpreadBoxProps(props)} as="div" element={element} ref={ref} padding="space90" flexShrink={0}>
2323
<Flex hAlignContent="between">
2424
<Flex vAlignContent="center" grow={1} marginRight="space70">
2525
{children}

‎packages/paste-website/src/pages/components/alert-dialog/index.mdx‎

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -113,47 +113,6 @@ Users cannot interact with content outside an active Alert Dialog window until t
113113
{modalExample}
114114
</LivePreview>
115115

116-
## Anatomy
117-
118-
### General
119-
120-
| Property | Default token | Modifiable? |
121-
| ---------------- | ------------------------ | ----------- |
122-
| background-color | color-background-body | No |
123-
| border-color | color-border-weak | No |
124-
| border-radius | border-radius-20 | No |
125-
| drop-shadow | shadow | No |
126-
| width | size-40 | No |
127-
| overlay-color | color-background-overlay | No |
128-
129-
### Heading
130-
131-
| Property | Default token/child | Modifiable? |
132-
| ------------- | ------------------- | ----------- |
133-
| Heading | h3 | No |
134-
| marginBottom | space-0 | No |
135-
| paddingTop | space-50 | No |
136-
| paddingRight | space-50 | No |
137-
| paddingBottom | space-0 | No |
138-
| paddingLeft | space-50 | No |
139-
140-
### Body
141-
142-
| Property | Default token | Modifiable? |
143-
| -------- | ------------- | ----------- |
144-
| padding | space-50 | No |
145-
146-
### Footer
147-
148-
| Property | Default token | Modifiable? |
149-
| ------------- | ------------- | ----------- |
150-
| paddingTop | space-0 | No |
151-
| paddingRight | space-50 | No |
152-
| paddingBottom | space-50 | No |
153-
| paddingLeft | space-50 | No |
154-
155-
---
156-
157116
## Usage Guide
158117

159118
### API

0 commit comments

Comments
 (0)