Skip to content

Commit 982b4c7

Browse files
authored
Merge pull request #462 from mashmatrix/support-slds-2-modal
Update `Modal` for SLDS2
2 parents 129c918 + c2e2d78 commit 982b4c7

File tree

2 files changed

+44
-56
lines changed

2 files changed

+44
-56
lines changed

src/scripts/Modal.tsx

Lines changed: 32 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,30 @@
1-
import React, {
2-
HTMLAttributes,
3-
CSSProperties,
4-
FC,
5-
createContext,
6-
useContext,
7-
useMemo,
8-
ReactNode,
9-
} from 'react';
1+
import React, { HTMLAttributes, CSSProperties, FC, ReactNode } from 'react';
102
import classnames from 'classnames';
113
import { Button } from './Button';
4+
import { Text } from './Text';
125
import { useEventCallback } from './hooks';
136

14-
/**
15-
*
16-
*/
17-
const ModalHandlersContext = createContext<{
18-
onHide?: () => void;
19-
}>({});
20-
217
/**
228
*
239
*/
2410
export type ModalHeaderProps = {
2511
className?: string;
2612
title?: string;
2713
tagline?: string;
28-
closeButton?: boolean;
29-
onClose?: () => void;
3014
};
3115

3216
/**
3317
*
3418
*/
3519
export const ModalHeader: FC<ModalHeaderProps> = (props) => {
36-
const {
37-
className,
38-
title,
39-
tagline,
40-
closeButton,
41-
onClose: onClose_,
42-
...rprops
43-
} = props;
44-
const { onHide: onHideModal } = useContext(ModalHandlersContext);
45-
const onClose = useEventCallback(() => {
46-
onClose_?.();
47-
onHideModal?.();
48-
});
20+
const { className, title, tagline, ...rprops } = props;
4921
const hdClassNames = classnames(className, 'slds-modal__header');
5022
return (
5123
<div className={hdClassNames} {...rprops}>
52-
<h2 className='slds-text-heading_medium'>{title}</h2>
24+
<Text tag='h2' category='heading' type='medium' tabIndex={-1}>
25+
{title}
26+
</Text>
5327
{tagline ? <p className='slds-m-top_x-small'>{tagline}</p> : null}
54-
{closeButton ? (
55-
<Button
56-
type='icon-inverse'
57-
className='slds-modal__close'
58-
icon='close'
59-
iconSize='large'
60-
alt='Close'
61-
inverse
62-
onClick={onClose}
63-
/>
64-
) : null}
6528
</div>
6629
);
6730
};
@@ -128,6 +91,8 @@ export type ModalProps = {
12891
opened?: boolean;
12992
containerStyle?: CSSProperties;
13093
onHide?: () => void;
94+
closeButton?: boolean;
95+
onClose?: () => void;
13196
} & HTMLAttributes<HTMLDivElement>;
13297

13398
/**
@@ -141,6 +106,8 @@ const Modal_: FC<ModalProps> = (props) => {
141106
size,
142107
containerStyle,
143108
onHide,
109+
closeButton,
110+
onClose: onClose_,
144111
...rprops
145112
} = props;
146113
const modalClassNames = classnames(className, 'slds-modal', {
@@ -150,21 +117,37 @@ const Modal_: FC<ModalProps> = (props) => {
150117
const backdropClassNames = classnames(className, 'slds-backdrop', {
151118
'slds-backdrop_open': opened,
152119
});
153-
const handlers = useMemo(() => ({ onHide }), [onHide]);
120+
const onClose = useEventCallback(() => {
121+
onClose_?.();
122+
onHide?.();
123+
});
154124
return (
155-
<ModalHandlersContext.Provider value={handlers}>
156-
<div
125+
<>
126+
<section
157127
className={modalClassNames}
158128
aria-hidden={!opened}
159129
role='dialog'
130+
tabIndex={-1}
131+
aria-modal='true'
160132
{...rprops}
161133
>
162134
<div className='slds-modal__container' style={containerStyle}>
135+
{closeButton ? (
136+
<Button
137+
type='icon'
138+
className='slds-modal__close'
139+
icon='close'
140+
iconSize='large'
141+
alt='Close'
142+
inverse
143+
onClick={onClose}
144+
/>
145+
) : null}
163146
{children}
164147
</div>
165-
</div>
166-
<div className={backdropClassNames} />
167-
</ModalHandlersContext.Provider>
148+
</section>
149+
<div className={backdropClassNames} role='presentation' />
150+
</>
168151
);
169152
};
170153

stories/Modal.stories.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const LOOKUP_DATA = [
5252
];
5353

5454
const modalContent = (
55-
<div className='slds-p-around_small'>
55+
<>
5656
<p>
5757
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco
5858
deserunt aute id consequat veniam incididunt duis in sint irure nisi.
@@ -68,7 +68,7 @@ const modalContent = (
6868
Labore esse esse cupidatat amet velit id elit consequat minim ullamco
6969
mollit enim excepteur ea.
7070
</p>
71-
</div>
71+
</>
7272
);
7373

7474
const footerButtons = (
@@ -116,6 +116,7 @@ export const ControlledWithKnobs: StoryObj<StoryProps> = {
116116
childProps: {
117117
header: {},
118118
content: {
119+
className: 'slds-p-around_small',
119120
children: modalContent,
120121
},
121122
footer: {
@@ -141,12 +142,13 @@ export const Default: StoryObj<StoryProps> = {
141142
name: 'Default',
142143
args: {
143144
opened: true,
145+
closeButton: true,
144146
childProps: {
145147
header: {
146148
title: 'Default Modal',
147-
closeButton: true,
148149
},
149150
content: {
151+
className: 'slds-p-around_small',
150152
children: modalContent,
151153
},
152154
footer: {
@@ -169,13 +171,14 @@ export const Large: StoryObj<StoryProps> = {
169171
name: 'Large',
170172
args: {
171173
opened: true,
174+
closeButton: true,
172175
size: 'large',
173176
childProps: {
174177
header: {
175178
title: 'Large Size Modal',
176-
closeButton: true,
177179
},
178180
content: {
181+
className: 'slds-p-around_small',
179182
children: modalContent,
180183
},
181184
footer: {
@@ -198,13 +201,14 @@ export const WithTagline: StoryObj<StoryProps> = {
198201
name: 'With tagline',
199202
args: {
200203
opened: true,
204+
closeButton: true,
201205
childProps: {
202206
header: {
203207
title: 'Modal with tagline',
204208
tagline: 'This is a tagline',
205-
closeButton: true,
206209
},
207210
content: {
211+
className: 'slds-p-around_small',
208212
children: modalContent,
209213
},
210214
footer: {
@@ -227,12 +231,13 @@ export const FooterDirectional: StoryObj<StoryProps> = {
227231
name: 'Footer directional',
228232
args: {
229233
opened: true,
234+
closeButton: true,
230235
childProps: {
231236
header: {
232237
title: 'Modal with directional footer',
233-
closeButton: true,
234238
},
235239
content: {
240+
className: 'slds-p-around_small',
236241
children: modalContent,
237242
},
238243
footer: {
@@ -256,10 +261,10 @@ export const FormElements: StoryObj<StoryProps> = {
256261
name: 'Form elements',
257262
args: {
258263
opened: true,
264+
closeButton: true,
259265
childProps: {
260266
header: {
261267
title: 'Modal Form',
262-
closeButton: true,
263268
},
264269
content: {
265270
className: 'slds-p-around_small',

0 commit comments

Comments
 (0)