Skip to content

Commit bdd9f4c

Browse files
ariellalgilmoreariellalgilmore
authored
fix(popover): rtl positioning web-components (#18244)
1 parent af555e0 commit bdd9f4c

File tree

1 file changed

+146
-0
lines changed

1 file changed

+146
-0
lines changed

‎packages/web-components/src/components/popover/popover.scss‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,17 @@ $popover-caret-height: custom-property.get-var(
109109
}
110110
}
111111

112+
// rtl
113+
:host(#{$prefix}-tooltip-content:dir(rtl)[align^='bottom']:not([autoalign])),
114+
:host(#{$prefix}-popover-content:dir(rtl)[align^='bottom']:not([autoalign])),
115+
:host(#{$prefix}-toggletip:dir(rtl)[alignment^='bottom']:not([autoalign])),
116+
:host(#{$prefix}-ai-label:dir(rtl)[alignment^='bottom']:not([autoalign])),
117+
:host(#{$prefix}-slug:dir(rtl)[alignment^='bottom']:not([autoalign])) {
118+
.#{$prefix}--popover-caret {
119+
transform: translate(50%, $popover-offset);
120+
}
121+
}
122+
112123
:host(#{$prefix}-ai-label[alignment^='bottom']:not([autoalign]))
113124
.#{$prefix}--popover-caret,
114125
:host(#{$prefix}-slug[alignment^='bottom']:not([autoalign]))
@@ -128,6 +139,17 @@ $popover-caret-height: custom-property.get-var(
128139
}
129140
}
130141

142+
// rtl
143+
:host(#{$prefix}-tooltip-content:dir(rtl)[align='bottom']:not([autoalign])),
144+
:host(#{$prefix}-popover-content:dir(rtl)[align='bottom']:not([autoalign])),
145+
:host(#{$prefix}-toggletip:dir(rtl)[alignment='bottom']:not([autoalign])),
146+
:host(#{$prefix}-ai-label:dir(rtl)[alignment='bottom']:not([autoalign])),
147+
:host(#{$prefix}-slug:dir(rtl)[alignment='bottom']:not([autoalign])) {
148+
.#{$prefix}--popover-content {
149+
transform: translate(50%, calc(100% + $popover-offset));
150+
}
151+
}
152+
131153
:host(#{$prefix}-tooltip-content[align='bottom-left']:not([autoalign])),
132154
:host(#{$prefix}-popover-content[align='bottom-left']:not([autoalign])),
133155
:host(#{$prefix}-toggletip[alignment='bottom-left']:not([autoalign])),
@@ -143,6 +165,22 @@ $popover-caret-height: custom-property.get-var(
143165
}
144166
}
145167

168+
// rtl
169+
:host(
170+
#{$prefix}-tooltip-content:dir(rtl)[align='bottom-left']:not([autoalign])
171+
),
172+
:host(
173+
#{$prefix}-popover-content:dir(rtl)[align='bottom-left']:not([autoalign])
174+
),
175+
:host(#{$prefix}-toggletip:dir(rtl)[alignment='bottom-left']:not([autoalign])),
176+
:host(#{$prefix}-ai-label:dir(rtl)[alignment='bottom-left']:not([autoalign])),
177+
:host(#{$prefix}-slug:dir(rtl)[alignment='bottom-left']:not([autoalign])) {
178+
.#{$prefix}--popover-content {
179+
inset-inline-end: 0;
180+
inset-inline-start: initial;
181+
}
182+
}
183+
146184
:host(#{$prefix}-tooltip-content[align='bottom-right']:not([autoalign])),
147185
:host(#{$prefix}-popover-content[align='bottom-right']:not([autoalign])),
148186
:host(#{$prefix}-toggletip[alignment='bottom-right']:not([autoalign])),
@@ -155,6 +193,21 @@ $popover-caret-height: custom-property.get-var(
155193
}
156194
}
157195

196+
// rtl
197+
:host(
198+
#{$prefix}-tooltip-content:dir(rtl)[align='bottom-right']:not([autoalign])
199+
),
200+
:host(
201+
#{$prefix}-popover-content:dir(rtl)[align='bottom-right']:not([autoalign])
202+
),
203+
:host(#{$prefix}-toggletip:dir(rtl)[alignment='bottom-right']:not([autoalign])),
204+
:host(#{$prefix}-ai-label:dir(rtl)[alignment='bottom-right']:not([autoalign])),
205+
:host(#{$prefix}-slug:dir(rtl)[alignment='bottom-right']:not([autoalign])) {
206+
.#{$prefix}--popover-content {
207+
inset-inline-start: 0;
208+
}
209+
}
210+
158211
:host(#{$prefix}-tooltip-content[align^='left']:not([autoalign])),
159212
:host(#{$prefix}-popover-content[align^='left']:not([autoalign])),
160213
:host(#{$prefix}-toggletip[alignment^='left']:not([autoalign])),
@@ -170,6 +223,18 @@ $popover-caret-height: custom-property.get-var(
170223
}
171224
}
172225

226+
// rtl
227+
:host(#{$prefix}-tooltip-content:dir(rtl)[align^='left']:not([autoalign])),
228+
:host(#{$prefix}-popover-content:dir(rtl)[align^='left']:not([autoalign])),
229+
:host(#{$prefix}-toggletip:dir(rtl)[alignment^='left']:not([autoalign])),
230+
:host(#{$prefix}-ai-label:dir(rtl)[alignment^='left']:not([autoalign])),
231+
:host(#{$prefix}-slug:dir(rtl)[alignment^='left']:not([autoalign])) {
232+
.#{$prefix}--popover-caret {
233+
inset-inline-end: initial;
234+
inset-inline-start: 100%;
235+
}
236+
}
237+
173238
:host(#{$prefix}-tooltip-content[align='left']:not([autoalign])),
174239
:host(#{$prefix}-popover-content[align='left']:not([autoalign])),
175240
:host(#{$prefix}-toggletip[alignment='left']:not([autoalign])),
@@ -218,6 +283,18 @@ $popover-caret-height: custom-property.get-var(
218283
}
219284
}
220285

286+
// rtl
287+
:host(#{$prefix}-tooltip-content:dir(rtl)[align^='left']:not([autoalign])),
288+
:host(#{$prefix}-popover-content:dir(rtl)[align^='left']:not([autoalign])),
289+
:host(#{$prefix}-toggletip:dir(rtl)[alignment^='left']:not([autoalign])),
290+
:host(#{$prefix}-ai-label:dir(rtl)[alignment^='left']:not([autoalign])),
291+
:host(#{$prefix}-slug:dir(rtl)[alignment^='left']:not([autoalign])) {
292+
.#{$prefix}--popover-content {
293+
inset-inline-end: initial;
294+
inset-inline-start: 100%;
295+
}
296+
}
297+
221298
:host(#{$prefix}-tooltip-content[align^='right']:not([autoalign])),
222299
:host(#{$prefix}-popover-content[align^='right']:not([autoalign])),
223300
:host(#{$prefix}-toggletip[alignment^='right']:not([autoalign])),
@@ -233,6 +310,18 @@ $popover-caret-height: custom-property.get-var(
233310
}
234311
}
235312

313+
// rtl
314+
:host(#{$prefix}-tooltip-content:dir(rtl)[align^='right']:not([autoalign])),
315+
:host(#{$prefix}-popover-content:dir(rtl)[align^='right']:not([autoalign])),
316+
:host(#{$prefix}-toggletip:dir(rtl)[alignment^='right']:not([autoalign])),
317+
:host(#{$prefix}-ai-label:dir(rtl)[alignment^='right']:not([autoalign])),
318+
:host(#{$prefix}-slug:dir(rtl)[alignment^='right']:not([autoalign])) {
319+
.#{$prefix}--popover-caret {
320+
inset-inline-end: 100%;
321+
inset-inline-start: initial;
322+
}
323+
}
324+
236325
:host(#{$prefix}-tooltip-content[align='right']:not([autoalign])),
237326
:host(#{$prefix}-popover-content[align='right']:not([autoalign])),
238327
:host(#{$prefix}-toggletip[alignment='right']:not([autoalign])),
@@ -274,6 +363,18 @@ $popover-caret-height: custom-property.get-var(
274363
}
275364
}
276365

366+
// rtl
367+
:host(#{$prefix}-tooltip-content:dir(rtl)[align^='right']:not([autoalign])),
368+
:host(#{$prefix}-popover-content:dir(rtl)[align^='right']:not([autoalign])),
369+
:host(#{$prefix}-toggletip:dir(rtl)[alignment^='right']:not([autoalign])),
370+
:host(#{$prefix}-ai-label:dir(rtl)[alignment^='right']:not([autoalign])),
371+
:host(#{$prefix}-slug:dir(rtl)[alignment^='right']:not([autoalign])) {
372+
.#{$prefix}--popover-content {
373+
inset-inline-end: 100%;
374+
inset-inline-start: initial;
375+
}
376+
}
377+
277378
:host(#{$prefix}-tooltip-content[align^='top']:not([autoalign])),
278379
:host(#{$prefix}-popover-content[align^='top']:not([autoalign])),
279380
:host(#{$prefix}-toggletip[alignment^='top']:not([autoalign])),
@@ -289,6 +390,17 @@ $popover-caret-height: custom-property.get-var(
289390
}
290391
}
291392

393+
// rtl
394+
:host(#{$prefix}-tooltip-content:dir(rtl)[align^='top']:not([autoalign])),
395+
:host(#{$prefix}-popover-content:dir(rtl)[align^='top']:not([autoalign])),
396+
:host(#{$prefix}-toggletip:dir(rtl)[alignment^='top']:not([autoalign])),
397+
:host(#{$prefix}-ai-label:dir(rtl)[alignment^='top']:not([autoalign])),
398+
:host(#{$prefix}-slug:dir(rtl)[alignment^='top']:not([autoalign])) {
399+
.#{$prefix}--popover-caret {
400+
transform: translate(50%, calc(-1 * $popover-offset));
401+
}
402+
}
403+
292404
:host(#{$prefix}-tooltip-content[align='top']:not([autoalign])),
293405
:host(#{$prefix}-popover-content[align='top']:not([autoalign])),
294406
:host(#{$prefix}-toggletip[alignment='top']:not([autoalign])),
@@ -301,6 +413,17 @@ $popover-caret-height: custom-property.get-var(
301413
}
302414
}
303415

416+
// rtl
417+
:host(#{$prefix}-tooltip-content:dir(rtl)[align='top']:not([autoalign])),
418+
:host(#{$prefix}-popover-content:dir(rtl)[align='top']:not([autoalign])),
419+
:host(#{$prefix}-toggletip:dir(rtl)[alignment='top']:not([autoalign])),
420+
:host(#{$prefix}-ai-label:dir(rtl)[alignment='top']:not([autoalign])),
421+
:host(#{$prefix}-slug[alignment='top']:not([autoalign])) {
422+
.#{$prefix}--popover-content {
423+
transform: translate(50%, calc(-100% - $popover-offset));
424+
}
425+
}
426+
304427
:host(#{$prefix}-tooltip-content[align='top-left']:not([autoalign])),
305428
:host(#{$prefix}-popover-content[align='top-left']:not([autoalign])),
306429
:host(#{$prefix}-toggletip[alignment='top-left']:not([autoalign])),
@@ -316,6 +439,18 @@ $popover-caret-height: custom-property.get-var(
316439
}
317440
}
318441

442+
// rtl
443+
:host(#{$prefix}-tooltip-content:dir(rtl)[align='top-left']:not([autoalign])),
444+
:host(#{$prefix}-popover-content:dir(rtl)[align='top-left']:not([autoalign])),
445+
:host(#{$prefix}-toggletip:dir(rtl)[alignment='top-left']:not([autoalign])),
446+
:host(#{$prefix}-ai-label:dir(rtl)[alignment='top-left']:not([autoalign])),
447+
:host(#{$prefix}-slug[alignment='top-left']:not([autoalign])) {
448+
.#{$prefix}--popover-content {
449+
inset-inline-end: 0;
450+
inset-inline-start: initial;
451+
}
452+
}
453+
319454
:host(#{$prefix}-tooltip-content[align='top-right']:not([autoalign])),
320455
:host(#{$prefix}-popover-content[align='top-right']:not([autoalign])),
321456
:host(#{$prefix}-toggletip[alignment='top-right']:not([autoalign])),
@@ -328,6 +463,17 @@ $popover-caret-height: custom-property.get-var(
328463
}
329464
}
330465

466+
// rtl
467+
:host(#{$prefix}-tooltip-content:dir(rtl)[align='top-right']:not([autoalign])),
468+
:host(#{$prefix}-popover-content:dir(rtl)[align='top-right']:not([autoalign])),
469+
:host(#{$prefix}-toggletip:dir(rtl)[alignment='top-right']:not([autoalign])),
470+
:host(#{$prefix}-ai-label:dir(rtl)[alignment='top-right']:not([autoalign])),
471+
:host(#{$prefix}-slug[alignment='top-right']:not([autoalign])) {
472+
.#{$prefix}--popover-content {
473+
inset-inline-start: 0;
474+
}
475+
}
476+
331477
:host(#{$prefix}-toggletip[autoalign]),
332478
:host(#{$prefix}-tooltip-content[autoalign]),
333479
:host(#{$prefix}-popover-content[autoalign]) {

0 commit comments

Comments
 (0)