Skip to content

Commit 734a3be

Browse files
tw15egantw15egan
authored
fix(Popover): scope popover styles to only influence direct children (#14200)
* fix(Popover): scope popover styles to only influence direct children * chore(storybook): remove test stories
1 parent 1b83b44 commit 734a3be

2 files changed

Lines changed: 107 additions & 39 deletions

File tree

‎packages/react/src/components/Popover/story.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
flex-direction: column;
103103
}
104104

105-
.popover-tabtip-story .cds--popover-content {
105+
.popover-tabtip-story .cds--popover-content.p-3 {
106106
width: 16rem;
107107
}
108108

‎packages/styles/scss/components/popover/_popover.scss‎

Lines changed: 106 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ $popover-caret-height: custom-property.get-var(
173173
}
174174

175175
.#{$prefix}--popover--tab-tip
176-
.#{$prefix}--popover
176+
> .#{$prefix}--popover
177177
.#{$prefix}--popover-caret {
178178
display: none;
179179
}
@@ -183,13 +183,17 @@ $popover-caret-height: custom-property.get-var(
183183
//-----------------------------------------------------------------------------
184184

185185
// Popover content placement
186-
.#{$prefix}--popover--bottom .#{$prefix}--popover-content {
186+
.#{$prefix}--popover--bottom
187+
> .#{$prefix}--popover
188+
.#{$prefix}--popover-content {
187189
bottom: 0;
188190
left: 50%;
189191
transform: translate(-50%, calc(100% + $popover-offset));
190192
}
191193

192-
.#{$prefix}--popover--bottom-left .#{$prefix}--popover-content {
194+
.#{$prefix}--popover--bottom-left
195+
> .#{$prefix}--popover
196+
.#{$prefix}--popover-content {
193197
bottom: 0;
194198
left: 0;
195199
transform: translate(
@@ -198,16 +202,24 @@ $popover-caret-height: custom-property.get-var(
198202
);
199203
}
200204

201-
.#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
205+
.#{$prefix}--popover--bottom-right
206+
> .#{$prefix}--popover
207+
.#{$prefix}--popover-content {
202208
right: 0;
203209
bottom: 0;
204210
transform: translate($popover-offset, calc(100% + $popover-offset));
205211
}
206212

207213
// Popover hover area placement
208-
.#{$prefix}--popover--bottom .#{$prefix}--popover-content::before,
209-
.#{$prefix}--popover--bottom-left .#{$prefix}--popover-content::before,
210-
.#{$prefix}--popover--bottom-right .#{$prefix}--popover-content::before {
214+
.#{$prefix}--popover--bottom
215+
> .#{$prefix}--popover
216+
.#{$prefix}--popover-content::before,
217+
.#{$prefix}--popover--bottom-left
218+
> .#{$prefix}--popover
219+
.#{$prefix}--popover-content::before,
220+
.#{$prefix}--popover--bottom-right
221+
> .#{$prefix}--popover
222+
.#{$prefix}--popover-content::before {
211223
top: 0;
212224
right: 0;
213225
left: 0;
@@ -216,9 +228,15 @@ $popover-caret-height: custom-property.get-var(
216228
}
217229

218230
// Caret placement
219-
.#{$prefix}--popover--bottom .#{$prefix}--popover-caret,
220-
.#{$prefix}--popover--bottom-left .#{$prefix}--popover-caret,
221-
.#{$prefix}--popover--bottom-right .#{$prefix}--popover-caret {
231+
.#{$prefix}--popover--bottom
232+
> .#{$prefix}--popover
233+
.#{$prefix}--popover-caret,
234+
.#{$prefix}--popover--bottom-left
235+
> .#{$prefix}--popover
236+
.#{$prefix}--popover-caret,
237+
.#{$prefix}--popover--bottom-right
238+
> .#{$prefix}--popover
239+
.#{$prefix}--popover-caret {
222240
bottom: 0;
223241
left: 50%;
224242
width: $popover-caret-width;
@@ -232,13 +250,17 @@ $popover-caret-height: custom-property.get-var(
232250
//-----------------------------------------------------------------------------
233251

234252
// Popover content placement
235-
.#{$prefix}--popover--top .#{$prefix}--popover-content {
253+
.#{$prefix}--popover--top
254+
> .#{$prefix}--popover
255+
.#{$prefix}--popover-content {
236256
top: 0;
237257
left: 50%;
238258
transform: translate(-50%, calc(-100% - $popover-offset));
239259
}
240260

241-
.#{$prefix}--popover--top-left .#{$prefix}--popover-content {
261+
.#{$prefix}--popover--top-left
262+
> .#{$prefix}--popover
263+
.#{$prefix}--popover-content {
242264
top: 0;
243265
left: 0;
244266
transform: translate(
@@ -247,16 +269,24 @@ $popover-caret-height: custom-property.get-var(
247269
);
248270
}
249271

250-
.#{$prefix}--popover--top-right .#{$prefix}--popover-content {
272+
.#{$prefix}--popover--top-right
273+
> .#{$prefix}--popover
274+
.#{$prefix}--popover-content {
251275
top: 0;
252276
right: 0;
253277
transform: translate($popover-offset, calc(-100% - $popover-offset));
254278
}
255279

256280
// Popover hover area placement
257-
.#{$prefix}--popover--top .#{$prefix}--popover-content::before,
258-
.#{$prefix}--popover--top-left .#{$prefix}--popover-content::before,
259-
.#{$prefix}--popover--top-right .#{$prefix}--popover-content::before {
281+
.#{$prefix}--popover--top
282+
> .#{$prefix}--popover
283+
.#{$prefix}--popover-content::before,
284+
.#{$prefix}--popover--top-left
285+
> .#{$prefix}--popover
286+
.#{$prefix}--popover-content::before,
287+
.#{$prefix}--popover--top-right
288+
> .#{$prefix}--popover
289+
.#{$prefix}--popover-content::before {
260290
right: 0;
261291
bottom: 0;
262292
left: 0;
@@ -265,9 +295,13 @@ $popover-caret-height: custom-property.get-var(
265295
}
266296

267297
// Caret placement
268-
.#{$prefix}--popover--top .#{$prefix}--popover-caret,
269-
.#{$prefix}--popover--top-left .#{$prefix}--popover-caret,
270-
.#{$prefix}--popover--top-right .#{$prefix}--popover-caret {
298+
.#{$prefix}--popover--top > .#{$prefix}--popover .#{$prefix}--popover-caret,
299+
.#{$prefix}--popover--top-left
300+
> .#{$prefix}--popover
301+
.#{$prefix}--popover-caret,
302+
.#{$prefix}--popover--top-right
303+
> .#{$prefix}--popover
304+
.#{$prefix}--popover-caret {
271305
top: 0;
272306
left: 50%;
273307
width: $popover-caret-width;
@@ -281,15 +315,19 @@ $popover-caret-height: custom-property.get-var(
281315
//-----------------------------------------------------------------------------
282316

283317
// Popover content placement
284-
.#{$prefix}--popover--right .#{$prefix}--popover-content {
318+
.#{$prefix}--popover--right
319+
> .#{$prefix}--popover
320+
.#{$prefix}--popover-content {
285321
top: 50%;
286322
left: 100%;
287323
// Add in 0.1px to prevent rounding errors where the content is
288324
// moved farther than the caret
289325
transform: translate($popover-offset, -50%);
290326
}
291327

292-
.#{$prefix}--popover--right-top .#{$prefix}--popover-content {
328+
.#{$prefix}--popover--right-top
329+
> .#{$prefix}--popover
330+
.#{$prefix}--popover-content {
293331
top: 50%;
294332
left: 100%;
295333
transform: translate(
@@ -298,16 +336,24 @@ $popover-caret-height: custom-property.get-var(
298336
);
299337
}
300338

301-
.#{$prefix}--popover--right-bottom .#{$prefix}--popover-content {
339+
.#{$prefix}--popover--right-bottom
340+
> .#{$prefix}--popover
341+
.#{$prefix}--popover-content {
302342
bottom: 50%;
303343
left: 100%;
304344
transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
305345
}
306346

307347
// Popover hover area placement
308-
.#{$prefix}--popover--right .#{$prefix}--popover-content::before,
309-
.#{$prefix}--popover--right-top .#{$prefix}--popover-content::before,
310-
.#{$prefix}--popover--right-bottom .#{$prefix}--popover-content::before {
348+
.#{$prefix}--popover--right
349+
> .#{$prefix}--popover
350+
.#{$prefix}--popover-content::before,
351+
.#{$prefix}--popover--right-top
352+
> .#{$prefix}--popover
353+
.#{$prefix}--popover-content::before,
354+
.#{$prefix}--popover--right-bottom
355+
> .#{$prefix}--popover
356+
.#{$prefix}--popover-content::before {
311357
top: 0;
312358
bottom: 0;
313359
left: 0;
@@ -316,9 +362,13 @@ $popover-caret-height: custom-property.get-var(
316362
}
317363

318364
// Caret placement
319-
.#{$prefix}--popover--right .#{$prefix}--popover-caret,
320-
.#{$prefix}--popover--right-top .#{$prefix}--popover-caret,
321-
.#{$prefix}--popover--right-bottom .#{$prefix}--popover-caret {
365+
.#{$prefix}--popover--right > .#{$prefix}--popover .#{$prefix}--popover-caret,
366+
.#{$prefix}--popover--right-top
367+
> .#{$prefix}--popover
368+
.#{$prefix}--popover-caret,
369+
.#{$prefix}--popover--right-bottom
370+
> .#{$prefix}--popover
371+
.#{$prefix}--popover-caret {
322372
top: 50%;
323373
left: 100%;
324374
width: $popover-caret-height;
@@ -332,15 +382,19 @@ $popover-caret-height: custom-property.get-var(
332382
//-----------------------------------------------------------------------------
333383

334384
// Popover content placement
335-
.#{$prefix}--popover--left .#{$prefix}--popover-content {
385+
.#{$prefix}--popover--left
386+
> .#{$prefix}--popover
387+
.#{$prefix}--popover-content {
336388
top: 50%;
337389
right: 100%;
338390
// Add in 0.1px to prevent rounding errors where the content is
339391
// moved farther than the caret
340392
transform: translate(calc(-1 * $popover-offset + 0.1px), -50%);
341393
}
342394

343-
.#{$prefix}--popover--left-top .#{$prefix}--popover-content {
395+
.#{$prefix}--popover--left-top
396+
> .#{$prefix}--popover
397+
.#{$prefix}--popover-content {
344398
top: -50%;
345399
right: 100%;
346400
// Add in 0.1px to prevent rounding errors where the content is
@@ -351,7 +405,9 @@ $popover-caret-height: custom-property.get-var(
351405
);
352406
}
353407

354-
.#{$prefix}--popover--left-bottom .#{$prefix}--popover-content {
408+
.#{$prefix}--popover--left-bottom
409+
> .#{$prefix}--popover
410+
.#{$prefix}--popover-content {
355411
right: 100%;
356412
bottom: -50%;
357413
// Add in 0.1px to prevent rounding errors where the content is
@@ -363,9 +419,15 @@ $popover-caret-height: custom-property.get-var(
363419
}
364420

365421
// Popover hover area placement
366-
.#{$prefix}--popover--left .#{$prefix}--popover-content::before,
367-
.#{$prefix}--popover--left-top .#{$prefix}--popover-content::before,
368-
.#{$prefix}--popover--left-bottom .#{$prefix}--popover-content::before {
422+
.#{$prefix}--popover--left
423+
> .#{$prefix}--popover
424+
.#{$prefix}--popover-content::before,
425+
.#{$prefix}--popover--left-top
426+
> .#{$prefix}--popover
427+
.#{$prefix}--popover-content::before,
428+
.#{$prefix}--popover--left-bottom
429+
> .#{$prefix}--popover
430+
.#{$prefix}--popover-content::before {
369431
top: 0;
370432
right: 0;
371433
bottom: 0;
@@ -374,9 +436,13 @@ $popover-caret-height: custom-property.get-var(
374436
}
375437

376438
// Caret placement
377-
.#{$prefix}--popover--left .#{$prefix}--popover-caret,
378-
.#{$prefix}--popover--left-top .#{$prefix}--popover-caret,
379-
.#{$prefix}--popover--left-bottom .#{$prefix}--popover-caret {
439+
.#{$prefix}--popover--left > .#{$prefix}--popover .#{$prefix}--popover-caret,
440+
.#{$prefix}--popover--left-top
441+
> .#{$prefix}--popover
442+
.#{$prefix}--popover-caret,
443+
.#{$prefix}--popover--left-bottom
444+
> .#{$prefix}--popover
445+
.#{$prefix}--popover-caret {
380446
top: 50%;
381447
right: 100%;
382448
width: $popover-caret-height;
@@ -388,7 +454,9 @@ $popover-caret-height: custom-property.get-var(
388454
//-----------------------------------------------------------------------------
389455
// Tab Tip Variant
390456
//-----------------------------------------------------------------------------
391-
.#{$prefix}--popover--tab-tip .#{$prefix}--popover-content {
457+
.#{$prefix}--popover--tab-tip
458+
> .#{$prefix}--popover
459+
.#{$prefix}--popover-content {
392460
border-radius: 0;
393461
}
394462

0 commit comments

Comments
 (0)