Skip to content

Commit

Permalink
fix(popover): rtl positioning web-components (#18244)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ariellalgilmore
ariellalgilmore authored Dec 17, 2024
1 parent af555e0 commit bdd9f4c
Showing 1 changed file with 146 additions and 0 deletions.
146 changes: 146 additions & 0 deletions packages/web-components/src/components/popover/popover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,17 @@ $popover-caret-height: custom-property.get-var(
}
}

// rtl
:host(#{$prefix}-tooltip-content:dir(rtl)[align^='bottom']:not([autoalign])),
:host(#{$prefix}-popover-content:dir(rtl)[align^='bottom']:not([autoalign])),
:host(#{$prefix}-toggletip:dir(rtl)[alignment^='bottom']:not([autoalign])),
:host(#{$prefix}-ai-label:dir(rtl)[alignment^='bottom']:not([autoalign])),
:host(#{$prefix}-slug:dir(rtl)[alignment^='bottom']:not([autoalign])) {
.#{$prefix}--popover-caret {
transform: translate(50%, $popover-offset);
}
}

:host(#{$prefix}-ai-label[alignment^='bottom']:not([autoalign]))
.#{$prefix}--popover-caret,
:host(#{$prefix}-slug[alignment^='bottom']:not([autoalign]))
Expand All @@ -128,6 +139,17 @@ $popover-caret-height: custom-property.get-var(
}
}

// rtl
:host(#{$prefix}-tooltip-content:dir(rtl)[align='bottom']:not([autoalign])),
:host(#{$prefix}-popover-content:dir(rtl)[align='bottom']:not([autoalign])),
:host(#{$prefix}-toggletip:dir(rtl)[alignment='bottom']:not([autoalign])),
:host(#{$prefix}-ai-label:dir(rtl)[alignment='bottom']:not([autoalign])),
:host(#{$prefix}-slug:dir(rtl)[alignment='bottom']:not([autoalign])) {
.#{$prefix}--popover-content {
transform: translate(50%, calc(100% + $popover-offset));
}
}

:host(#{$prefix}-tooltip-content[align='bottom-left']:not([autoalign])),
:host(#{$prefix}-popover-content[align='bottom-left']:not([autoalign])),
:host(#{$prefix}-toggletip[alignment='bottom-left']:not([autoalign])),
Expand All @@ -143,6 +165,22 @@ $popover-caret-height: custom-property.get-var(
}
}

// rtl
:host(
#{$prefix}-tooltip-content:dir(rtl)[align='bottom-left']:not([autoalign])
),
:host(
#{$prefix}-popover-content:dir(rtl)[align='bottom-left']:not([autoalign])
),
:host(#{$prefix}-toggletip:dir(rtl)[alignment='bottom-left']:not([autoalign])),
:host(#{$prefix}-ai-label:dir(rtl)[alignment='bottom-left']:not([autoalign])),
:host(#{$prefix}-slug:dir(rtl)[alignment='bottom-left']:not([autoalign])) {
.#{$prefix}--popover-content {
inset-inline-end: 0;
inset-inline-start: initial;
}
}

:host(#{$prefix}-tooltip-content[align='bottom-right']:not([autoalign])),
:host(#{$prefix}-popover-content[align='bottom-right']:not([autoalign])),
:host(#{$prefix}-toggletip[alignment='bottom-right']:not([autoalign])),
Expand All @@ -155,6 +193,21 @@ $popover-caret-height: custom-property.get-var(
}
}

// rtl
:host(
#{$prefix}-tooltip-content:dir(rtl)[align='bottom-right']:not([autoalign])
),
:host(
#{$prefix}-popover-content:dir(rtl)[align='bottom-right']:not([autoalign])
),
:host(#{$prefix}-toggletip:dir(rtl)[alignment='bottom-right']:not([autoalign])),
:host(#{$prefix}-ai-label:dir(rtl)[alignment='bottom-right']:not([autoalign])),
:host(#{$prefix}-slug:dir(rtl)[alignment='bottom-right']:not([autoalign])) {
.#{$prefix}--popover-content {
inset-inline-start: 0;
}
}

:host(#{$prefix}-tooltip-content[align^='left']:not([autoalign])),
:host(#{$prefix}-popover-content[align^='left']:not([autoalign])),
:host(#{$prefix}-toggletip[alignment^='left']:not([autoalign])),
Expand All @@ -170,6 +223,18 @@ $popover-caret-height: custom-property.get-var(
}
}

// rtl
:host(#{$prefix}-tooltip-content:dir(rtl)[align^='left']:not([autoalign])),
:host(#{$prefix}-popover-content:dir(rtl)[align^='left']:not([autoalign])),
:host(#{$prefix}-toggletip:dir(rtl)[alignment^='left']:not([autoalign])),
:host(#{$prefix}-ai-label:dir(rtl)[alignment^='left']:not([autoalign])),
:host(#{$prefix}-slug:dir(rtl)[alignment^='left']:not([autoalign])) {
.#{$prefix}--popover-caret {
inset-inline-end: initial;
inset-inline-start: 100%;
}
}

:host(#{$prefix}-tooltip-content[align='left']:not([autoalign])),
:host(#{$prefix}-popover-content[align='left']:not([autoalign])),
:host(#{$prefix}-toggletip[alignment='left']:not([autoalign])),
Expand Down Expand Up @@ -218,6 +283,18 @@ $popover-caret-height: custom-property.get-var(
}
}

// rtl
:host(#{$prefix}-tooltip-content:dir(rtl)[align^='left']:not([autoalign])),
:host(#{$prefix}-popover-content:dir(rtl)[align^='left']:not([autoalign])),
:host(#{$prefix}-toggletip:dir(rtl)[alignment^='left']:not([autoalign])),
:host(#{$prefix}-ai-label:dir(rtl)[alignment^='left']:not([autoalign])),
:host(#{$prefix}-slug:dir(rtl)[alignment^='left']:not([autoalign])) {
.#{$prefix}--popover-content {
inset-inline-end: initial;
inset-inline-start: 100%;
}
}

:host(#{$prefix}-tooltip-content[align^='right']:not([autoalign])),
:host(#{$prefix}-popover-content[align^='right']:not([autoalign])),
:host(#{$prefix}-toggletip[alignment^='right']:not([autoalign])),
Expand All @@ -233,6 +310,18 @@ $popover-caret-height: custom-property.get-var(
}
}

// rtl
:host(#{$prefix}-tooltip-content:dir(rtl)[align^='right']:not([autoalign])),
:host(#{$prefix}-popover-content:dir(rtl)[align^='right']:not([autoalign])),
:host(#{$prefix}-toggletip:dir(rtl)[alignment^='right']:not([autoalign])),
:host(#{$prefix}-ai-label:dir(rtl)[alignment^='right']:not([autoalign])),
:host(#{$prefix}-slug:dir(rtl)[alignment^='right']:not([autoalign])) {
.#{$prefix}--popover-caret {
inset-inline-end: 100%;
inset-inline-start: initial;
}
}

:host(#{$prefix}-tooltip-content[align='right']:not([autoalign])),
:host(#{$prefix}-popover-content[align='right']:not([autoalign])),
:host(#{$prefix}-toggletip[alignment='right']:not([autoalign])),
Expand Down Expand Up @@ -274,6 +363,18 @@ $popover-caret-height: custom-property.get-var(
}
}

// rtl
:host(#{$prefix}-tooltip-content:dir(rtl)[align^='right']:not([autoalign])),
:host(#{$prefix}-popover-content:dir(rtl)[align^='right']:not([autoalign])),
:host(#{$prefix}-toggletip:dir(rtl)[alignment^='right']:not([autoalign])),
:host(#{$prefix}-ai-label:dir(rtl)[alignment^='right']:not([autoalign])),
:host(#{$prefix}-slug:dir(rtl)[alignment^='right']:not([autoalign])) {
.#{$prefix}--popover-content {
inset-inline-end: 100%;
inset-inline-start: initial;
}
}

:host(#{$prefix}-tooltip-content[align^='top']:not([autoalign])),
:host(#{$prefix}-popover-content[align^='top']:not([autoalign])),
:host(#{$prefix}-toggletip[alignment^='top']:not([autoalign])),
Expand All @@ -289,6 +390,17 @@ $popover-caret-height: custom-property.get-var(
}
}

// rtl
:host(#{$prefix}-tooltip-content:dir(rtl)[align^='top']:not([autoalign])),
:host(#{$prefix}-popover-content:dir(rtl)[align^='top']:not([autoalign])),
:host(#{$prefix}-toggletip:dir(rtl)[alignment^='top']:not([autoalign])),
:host(#{$prefix}-ai-label:dir(rtl)[alignment^='top']:not([autoalign])),
:host(#{$prefix}-slug:dir(rtl)[alignment^='top']:not([autoalign])) {
.#{$prefix}--popover-caret {
transform: translate(50%, calc(-1 * $popover-offset));
}
}

:host(#{$prefix}-tooltip-content[align='top']:not([autoalign])),
:host(#{$prefix}-popover-content[align='top']:not([autoalign])),
:host(#{$prefix}-toggletip[alignment='top']:not([autoalign])),
Expand All @@ -301,6 +413,17 @@ $popover-caret-height: custom-property.get-var(
}
}

// rtl
:host(#{$prefix}-tooltip-content:dir(rtl)[align='top']:not([autoalign])),
:host(#{$prefix}-popover-content:dir(rtl)[align='top']:not([autoalign])),
:host(#{$prefix}-toggletip:dir(rtl)[alignment='top']:not([autoalign])),
:host(#{$prefix}-ai-label:dir(rtl)[alignment='top']:not([autoalign])),
:host(#{$prefix}-slug[alignment='top']:not([autoalign])) {
.#{$prefix}--popover-content {
transform: translate(50%, calc(-100% - $popover-offset));
}
}

:host(#{$prefix}-tooltip-content[align='top-left']:not([autoalign])),
:host(#{$prefix}-popover-content[align='top-left']:not([autoalign])),
:host(#{$prefix}-toggletip[alignment='top-left']:not([autoalign])),
Expand All @@ -316,6 +439,18 @@ $popover-caret-height: custom-property.get-var(
}
}

// rtl
:host(#{$prefix}-tooltip-content:dir(rtl)[align='top-left']:not([autoalign])),
:host(#{$prefix}-popover-content:dir(rtl)[align='top-left']:not([autoalign])),
:host(#{$prefix}-toggletip:dir(rtl)[alignment='top-left']:not([autoalign])),
:host(#{$prefix}-ai-label:dir(rtl)[alignment='top-left']:not([autoalign])),
:host(#{$prefix}-slug[alignment='top-left']:not([autoalign])) {
.#{$prefix}--popover-content {
inset-inline-end: 0;
inset-inline-start: initial;
}
}

:host(#{$prefix}-tooltip-content[align='top-right']:not([autoalign])),
:host(#{$prefix}-popover-content[align='top-right']:not([autoalign])),
:host(#{$prefix}-toggletip[alignment='top-right']:not([autoalign])),
Expand All @@ -328,6 +463,17 @@ $popover-caret-height: custom-property.get-var(
}
}

// rtl
:host(#{$prefix}-tooltip-content:dir(rtl)[align='top-right']:not([autoalign])),
:host(#{$prefix}-popover-content:dir(rtl)[align='top-right']:not([autoalign])),
:host(#{$prefix}-toggletip:dir(rtl)[alignment='top-right']:not([autoalign])),
:host(#{$prefix}-ai-label:dir(rtl)[alignment='top-right']:not([autoalign])),
:host(#{$prefix}-slug[alignment='top-right']:not([autoalign])) {
.#{$prefix}--popover-content {
inset-inline-start: 0;
}
}

:host(#{$prefix}-toggletip[autoalign]),
:host(#{$prefix}-tooltip-content[autoalign]),
:host(#{$prefix}-popover-content[autoalign]) {
Expand Down

0 comments on commit bdd9f4c

Please sign in to comment.