Skip to content

Commit 2da12d0

Browse files
jnm2377kodiakhq[bot]
jnm2377
and
kodiakhq[bot]
authored
fix(Modal): updates content spacing (#9700)
* fix: modal content right spacing * feat: update modal props Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent be4e770 commit 2da12d0

3 files changed

Lines changed: 98 additions & 109 deletions

File tree

‎packages/components/src/components/modal/_modal.scss‎

Lines changed: 90 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@
6666
transition: transform $duration--moderate-02 motion(entrance, expressive);
6767
}
6868

69+
// -----------------------------
70+
// Modal container
71+
// -----------------------------
6972
.#{$prefix}--modal-container {
7073
position: fixed;
7174
top: 0;
@@ -89,17 +92,6 @@
8992
width: 84%;
9093
height: auto;
9194
max-height: 90%;
92-
93-
.#{$prefix}--modal-header,
94-
.#{$prefix}--modal-content,
95-
.#{$prefix}--modal-content__regular-content {
96-
padding-right: 20%;
97-
}
98-
99-
.#{$prefix}--modal-content--with-form {
100-
// Override for `.#{$prefix}--modal-content`
101-
padding-right: $spacing-05;
102-
}
10395
}
10496

10597
@include carbon--breakpoint(lg) {
@@ -112,30 +104,82 @@
112104
}
113105
}
114106

115-
.#{$prefix}--modal-header,
107+
// -----------------------------
108+
// Modal content
109+
// -----------------------------
116110
.#{$prefix}--modal-content {
111+
@include type-style('body-long-01');
112+
113+
position: relative;
114+
// Required to accommodate focus outline's negative offset:
115+
padding-top: $spacing-03;
116+
// anything besides text/p spans full width, with just 16px padding
117+
padding-right: $spacing-05;
117118
padding-left: $spacing-05;
119+
margin-bottom: $spacing-09;
120+
color: $text-01;
121+
122+
font-weight: 400;
123+
grid-column: 1/-1;
124+
grid-row: 2/-2;
125+
overflow-y: auto;
126+
127+
&:focus {
128+
@include focus-outline('outline');
129+
}
118130
}
119131

120-
.#{$prefix}--modal-header,
121-
.#{$prefix}--modal-content,
132+
//TO-DO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated
133+
// text/p gets 20% right padding
134+
.#{$prefix}--modal-content p,
122135
.#{$prefix}--modal-content__regular-content {
123-
padding-right: $spacing-05;
136+
padding-right: 20%;
137+
@include type-style('body-long-01');
124138
}
125139

140+
//TO-DO: remove .#{$prefix}--modal-content--with-form in v11 since hasForm has been deprecated\
141+
// anything besides text/p spans full width, with just 16px padding
126142
.#{$prefix}--modal-content--with-form {
127143
padding-right: $spacing-05;
128144
}
129145

146+
// -----------------------------
147+
// Modal header
148+
// -----------------------------
149+
.#{$prefix}--modal-header {
150+
padding-top: $spacing-05;
151+
padding-right: $spacing-09;
152+
padding-left: $spacing-05;
153+
margin-bottom: $spacing-03;
154+
grid-column: 1/-1;
155+
grid-row: 1/1;
156+
}
157+
158+
.#{$prefix}--modal-header__label {
159+
@include type-style('label-01');
160+
161+
margin-bottom: $spacing-02;
162+
color: $text-02;
163+
}
164+
165+
.#{$prefix}--modal-header__heading {
166+
@include type-style('productive-heading-03');
167+
168+
color: $text-01;
169+
}
170+
171+
// -----------------------------
172+
// XS Modal
173+
// -----------------------------
130174
.#{$prefix}--modal-container--xs {
131-
.#{$prefix}--modal-header {
132-
padding-right: $carbon--spacing-09;
175+
//text always spans full width in xs modals
176+
.#{$prefix}--modal-content__regular-content {
177+
padding-right: $spacing-05;
133178
}
134179

135-
.#{$prefix}--modal-content,
136-
.#{$prefix}--modal-content__regular-content,
137-
.#{$prefix}--modal-content--with-form {
138-
padding-right: $spacing-05;
180+
.#{$prefix}--modal-content p {
181+
//.#{$prefix}--modal-content already has 16px padding so this doesn't need any
182+
padding-right: 0;
139183
}
140184

141185
@include carbon--breakpoint(md) {
@@ -152,15 +196,18 @@
152196
}
153197
}
154198

199+
// -----------------------------
200+
// SM Modal
201+
// -----------------------------
155202
.#{$prefix}--modal-container--sm {
156-
.#{$prefix}--modal-header {
157-
padding-right: $carbon--spacing-09;
203+
//text spans full width in sm modals below 1056
204+
.#{$prefix}--modal-content__regular-content {
205+
padding-right: $spacing-05;
158206
}
159207

160-
.#{$prefix}--modal-content,
161-
.#{$prefix}--modal-content__regular-content,
162-
.#{$prefix}--modal-content--with-form {
163-
padding-right: $spacing-05;
208+
.#{$prefix}--modal-content p {
209+
//.#{$prefix}--modal-content already has 16px padding so this doesn't need any
210+
padding-right: 0;
164211
}
165212

166213
@include carbon--breakpoint(md) {
@@ -170,48 +217,24 @@
170217
@include carbon--breakpoint(lg) {
171218
width: 42%;
172219
max-height: 72%;
173-
}
174220

175-
@include carbon--breakpoint(xlg) {
176-
width: 36%;
177-
178-
.#{$prefix}--modal-header,
179-
.#{$prefix}--modal-content,
221+
.#{$prefix}--modal-content p,
180222
.#{$prefix}--modal-content__regular-content {
181223
padding-right: 20%;
182224
}
225+
}
183226

184-
.#{$prefix}--modal-content--with-form {
185-
// Override for `.#{$prefix}--modal-content`
186-
padding-right: $spacing-05;
187-
}
227+
@include carbon--breakpoint(xlg) {
228+
width: 36%;
188229
}
189230
}
190231

232+
// -----------------------------
233+
// LG Modal
234+
// -----------------------------
191235
.#{$prefix}--modal-container--lg {
192-
.#{$prefix}--modal-header {
193-
padding-right: $carbon--spacing-09;
194-
}
195-
196-
.#{$prefix}--modal-content,
197-
.#{$prefix}--modal-content__regular-content,
198-
.#{$prefix}--modal-content--with-form {
199-
padding-right: $spacing-05;
200-
}
201-
202236
@include carbon--breakpoint(md) {
203237
width: 96%;
204-
205-
.#{$prefix}--modal-header,
206-
.#{$prefix}--modal-content,
207-
.#{$prefix}--modal-content__regular-content {
208-
padding-right: 20%;
209-
}
210-
211-
.#{$prefix}--modal-content--with-form {
212-
// Override for `.#{$prefix}--modal-content`
213-
padding-right: $spacing-05;
214-
}
215238
}
216239

217240
@include carbon--breakpoint(lg) {
@@ -224,50 +247,9 @@
224247
}
225248
}
226249

227-
.#{$prefix}--modal-header {
228-
padding-top: $spacing-05;
229-
padding-right: $spacing-09;
230-
margin-bottom: $spacing-03;
231-
grid-column: 1/-1;
232-
grid-row: 1/1;
233-
}
234-
235-
.#{$prefix}--modal-header__label {
236-
@include type-style('label-01');
237-
238-
margin-bottom: $spacing-02;
239-
color: $text-02;
240-
}
241-
242-
.#{$prefix}--modal-header__heading {
243-
@include type-style('productive-heading-03');
244-
245-
color: $text-01;
246-
}
247-
248-
.#{$prefix}--modal-content {
249-
@include type-style('body-long-01');
250-
251-
position: relative;
252-
// Required to accommodate focus outline's negative offset:
253-
padding-top: $spacing-03;
254-
margin-bottom: $spacing-09;
255-
color: $text-01;
256-
257-
font-weight: 400;
258-
grid-column: 1/-1;
259-
grid-row: 2/-2;
260-
overflow-y: auto;
261-
262-
&:focus {
263-
@include focus-outline('outline');
264-
}
265-
}
266-
267-
.#{$prefix}--modal-content > p {
268-
@include type-style('body-long-01');
269-
}
270-
250+
// -----------------------------
251+
// Modal overflow
252+
// -----------------------------
271253
// Required so overflow-indicator disappears at end of content
272254
.#{$prefix}--modal-scroll-content > *:last-child {
273255
padding-bottom: $spacing-07;
@@ -314,6 +296,9 @@
314296
}
315297
}
316298

299+
// -----------------------------
300+
// Modal footer
301+
// -----------------------------
317302
.#{$prefix}--modal-footer {
318303
display: flex;
319304
height: rem(64px);
@@ -337,6 +322,9 @@
337322
align-items: flex-start;
338323
}
339324

325+
// -----------------------------
326+
// Modal close btn
327+
// -----------------------------
340328
.#{$prefix}--modal-close {
341329
position: absolute;
342330
z-index: 2;

‎packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3772,9 +3772,7 @@ Map {
37723772
"type": "bool",
37733773
},
37743774
"focusTrap": [Function],
3775-
"hasForm": Object {
3776-
"type": "bool",
3777-
},
3775+
"hasForm": [Function],
37783776
"hasScrollingContent": Object {
37793777
"type": "bool",
37803778
},

‎packages/react/src/components/Modal/Modal.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,13 @@ export default class Modal extends Component {
6464
),
6565

6666
/**
67-
* Provide whether the modal content has a form element.
68-
* If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
67+
* Deprecated: Used to determine whether the modal content has a form element to adjust spacing,
68+
* but now spacing styles account for all types of elements
6969
*/
70-
hasForm: PropTypes.bool,
70+
hasForm: deprecate(
71+
PropTypes.bool,
72+
`\nThe prop \`hasForm\` for Modal has been deprecated, as the feature of \`hasForm\` runs by default.`
73+
),
7174

7275
/**
7376
* Specify whether the modal contains scrolling content
@@ -400,7 +403,7 @@ export default class Modal extends Component {
400403
});
401404

402405
const contentClasses = classNames(`${prefix}--modal-content`, {
403-
[`${prefix}--modal-content--with-form`]: hasForm,
406+
[`${prefix}--modal-content--with-form`]: hasForm, //TO-DO: deprecate & remove this with v11
404407
[`${prefix}--modal-scroll-content`]: hasScrollingContent,
405408
});
406409

0 commit comments

Comments
 (0)