Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(popover): rtl positioning web-components #18244

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 146 additions & 0 deletions packages/web-components/src/components/popover/popover.scss
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
Loading