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.

Sign up for GitHub

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): adjust popover content placement #10539

Merged
merged 11 commits into from
Feb 16, 2022
Merged

fix(Popover): adjust popover content placement #10539

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6d72012
fix(Popover): adjust popover content placement
dakahn Jan 27, 2022
d8a0faf
fix(popover): revert changes
dakahn Feb 2, 2022
6630f99
Merge branch 'main' into 10286-fix-popover-caret-styling
dakahn Feb 5, 2022
1d7fb03
fix(Popover): add right and left popover caret offset stlyling
dakahn Feb 8, 2022
d026121
fix(popover): update offset styling
dakahn Feb 8, 2022
ef1ea12
Merge branch '10286-fix-popover-caret-styling' of github.com:dakahn/c…
dakahn Feb 8, 2022
96131c8
Merge branch 'main' into 10286-fix-popover-caret-styling
dakahn Feb 8, 2022
5e6d62e
fix(popover): adjust left/right top and bottom calc
dakahn Feb 11, 2022
72e29e4
Merge branch 'main' into 10286-fix-popover-caret-styling
dakahn Feb 11, 2022
f8affac
Merge branch 'main' into 10286-fix-popover-caret-styling
dakahn Feb 11, 2022
9ffc2f0
Merge branch 'main' into 10286-fix-popover-caret-styling
kodiakhq[bot] Feb 16, 2022
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
39 changes: 27 additions & 12 deletions packages/styles/scss/components/popover/_popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,13 +185,16 @@ $popover-caret-height: custom-property.get-var(
.#{$prefix}--popover--bottom-left .#{$prefix}--popover-content {
bottom: 0;
left: 0;
transform: translate(0, calc(100% + $popover-offset));
transform: translate(
calc(-1 * $popover-offset),
calc(100% + $popover-offset)
);
}

.#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
right: 0;
bottom: 0;
transform: translate(0, calc(100% + $popover-offset));
transform: translate($popover-offset, calc(100% + $popover-offset));
}

// Popover hover area placement
Expand Down Expand Up @@ -231,13 +234,16 @@ $popover-caret-height: custom-property.get-var(
.#{$prefix}--popover--top-left .#{$prefix}--popover-content {
top: 0;
left: 0;
transform: translate(0, calc(-100% - $popover-offset));
transform: translate(
calc(-1 * $popover-offset),
calc(-100% - $popover-offset)
);
}

.#{$prefix}--popover--top-right .#{$prefix}--popover-content {
top: 0;
right: 0;
transform: translate(0, calc(-100% - $popover-offset));
transform: translate($popover-offset, calc(-100% - $popover-offset));
}

// Popover hover area placement
Expand Down Expand Up @@ -277,15 +283,18 @@ $popover-caret-height: custom-property.get-var(
}

.#{$prefix}--popover--right-top .#{$prefix}--popover-content {
top: 0;
top: 50%;
left: 100%;
transform: translate($popover-offset, 0);
transform: translate(
$popover-offset,
calc(0.5 * $popover-offset * -1 - 16px)
);
}

.#{$prefix}--popover--right-bottom .#{$prefix}--popover-content {
bottom: 0;
bottom: 50%;
left: 100%;
transform: translate($popover-offset, 0);
transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
}

// Popover hover area placement
Expand Down Expand Up @@ -325,19 +334,25 @@ $popover-caret-height: custom-property.get-var(
}

.#{$prefix}--popover--left-top .#{$prefix}--popover-content {
top: 0;
top: -50%;
right: 100%;
// Add in 0.1px to prevent rounding errors where the content is
// moved farther than the caret
transform: translate(calc(-1 * $popover-offset + 0.1px), 0);
transform: translate(
calc(-1 * $popover-offset),
calc(-1 * 0.5 * $popover-offset + 16px)
);
}

.#{$prefix}--popover--left-bottom .#{$prefix}--popover-content {
right: 100%;
bottom: 0;
bottom: -50%;
// Add in 0.1px to prevent rounding errors where the content is
// moved farther than the caret
transform: translate(calc(-1 * $popover-offset + 0.1px), 0);
transform: translate(
calc(-1 * $popover-offset),
calc(0.5 * $popover-offset - 16px)
);
}

// Popover hover area placement
Expand Down