Skip to content

chore: update dependency @spectrum-css/popover to v8.2.0 #5341

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

Merged
caseyisonit merged 5 commits into from
Apr 21, 2025
Merged

chore: update dependency @spectrum-css/popover to v8.2.0 #5341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b674f2c
chore: update dependency @spectrum-css/popover to v8.2.0
renovate[bot] Apr 4, 2025
cb2649b
fix(popover): update to latest css
castastrophe Apr 5, 2025
45240d1
Merge branch 'main' into renovate/spectrum-css-popover-8.x
caseyisonit Apr 21, 2025
d438e5d
Merge branch 'main' into renovate/spectrum-css-popover-8.x
caseyisonit Apr 21, 2025
220baeb
chore: update golden hash
caseyisonit Apr 21, 2025
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
10 changes: 10 additions & 0 deletions .changeset/chilly-humans-sell.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
'@spectrum-web-components/popover': patch
---

📝 #[​3566](https://github.com/adobe/spectrum-css/pull/3566) Thanks [@​aramos-adobe](https://github.com/aramos-adobe)!

Popover overflow bug on Safari

- `translateZ` has been added to the open popover to prevent clipping of the `filter: drop-shadow` when overflow is applied. `translateZ` or `translate3d` on the open state accelerates the component to the GPU layer maintaining any transformations and animations.
- `overflow: visible` applied to CSS `*--withTip` so the tip is still visible if overflow is applied to the component.
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ parameters:
# 3. Commit this change to the PR branch where the changes exist.
current_golden_images_hash:
type: string
default: b0d2aeac6eaa2bcac5e665c59817edf2d52c7b13
default: 45240d1c037e4a992a9bb6269194d30d4724cce5
wireit_cache_name:
type: string
default: wireit
Expand Down
2 changes: 1 addition & 1 deletion packages/popover/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"@spectrum-web-components/overlay": "1.5.0"
},
"devDependencies": {
"@spectrum-css/popover": "8.0.0-s2-foundations.17"
"@spectrum-css/popover": "8.2.0"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
Expand Down
20 changes: 12 additions & 8 deletions packages/popover/src/spectrum-popover.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@ governing permissions and limitations under the License.
position: absolute;
}

:host([tip]) {
overflow: visible;
}

:host([tip]) #tip .triangle {
stroke-linecap: square;
stroke-linejoin: miter;
Expand All @@ -96,7 +100,7 @@ governing permissions and limitations under the License.
:host([open]) .spectrum-Popover--top-right,
:host([open]) .spectrum-Popover--top-start,
:host([placement*='top'][open]) {
transform: translateY(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1));
transform: translateY(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)) translateZ(0);
}

:host([tip]) .spectrum-Popover--bottom-end,
Expand All @@ -112,7 +116,7 @@ governing permissions and limitations under the License.
:host([open]) .spectrum-Popover--bottom-right,
:host([open]) .spectrum-Popover--bottom-start,
:host([placement*='bottom'][open]) {
transform: translateY(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)));
transform: translateY(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
}

:host([tip]) .spectrum-Popover--right-bottom,
Expand All @@ -124,7 +128,7 @@ governing permissions and limitations under the License.
:host([open]) .spectrum-Popover--right-bottom,
:host([open]) .spectrum-Popover--right-top,
:host([placement*='right'][open]) {
transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)));
transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
}

:host([tip]) .spectrum-Popover--left-bottom,
Expand All @@ -136,7 +140,7 @@ governing permissions and limitations under the License.
:host([open]) .spectrum-Popover--left-bottom,
:host([open]) .spectrum-Popover--left-top,
:host([placement*='left'][open]) {
transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1));
transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)) translateZ(0);
}

:host([tip]) .spectrum-Popover--start-bottom,
Expand All @@ -148,7 +152,7 @@ governing permissions and limitations under the License.
:host([open]) .spectrum-Popover--start-bottom,
:host([open]) .spectrum-Popover--start-top,
:host([open]) .spectrum-Popover--start {
transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1));
transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)) translateZ(0);
}

:host([open]) .spectrum-Popover--start-bottom:dir(rtl),
Expand All @@ -157,7 +161,7 @@ governing permissions and limitations under the License.
:host([dir='rtl'][open]) .spectrum-Popover--start-bottom,
:host([dir='rtl'][open]) .spectrum-Popover--start-top,
:host([dir='rtl'][open]) .spectrum-Popover--start {
transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)));
transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
}

:host([tip]) .spectrum-Popover--end-bottom,
Expand All @@ -169,7 +173,7 @@ governing permissions and limitations under the License.
:host([open]) .spectrum-Popover--end-bottom,
:host([open]) .spectrum-Popover--end-top,
:host([open]) .spectrum-Popover--end {
transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)));
transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
}

:host([open]) .spectrum-Popover--end-bottom:dir(rtl),
Expand All @@ -178,7 +182,7 @@ governing permissions and limitations under the License.
:host([dir='rtl'][open]) .spectrum-Popover--end-bottom,
:host([dir='rtl'][open]) .spectrum-Popover--end-top,
:host([dir='rtl'][open]) .spectrum-Popover--end {
transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1));
transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)) translateZ(0);
}

:host([tip]) #tip,
Expand Down
26 changes: 16 additions & 10 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7506,21 +7506,27 @@ __metadata:
languageName: node
linkType: hard

"@spectrum-css/popover@npm:8.0.0-s2-foundations.17":
version: 8.0.0-s2-foundations.17
resolution: "@spectrum-css/popover@npm:8.0.0-s2-foundations.17"
"@spectrum-css/popover@npm:8.2.0":
version: 8.2.0
resolution: "@spectrum-css/popover@npm:8.2.0"
peerDependencies:
"@spectrum-css/alertdialog": ">=2"
"@spectrum-css/dialog": ">=10"
"@spectrum-css/divider": ">=3"
"@spectrum-css/menu": ">=7"
"@spectrum-css/tokens": ">=14"
"@spectrum-css/alertdialog": ">=4.0.0 <5.0.0"
"@spectrum-css/dialog": ">=12.0.0 <13.0.0"
"@spectrum-css/divider": ">=5.0.0 <6.0.0"
"@spectrum-css/menu": ">=9.0.0 <10.0.0"
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
peerDependenciesMeta:
"@spectrum-css/alertdialog":
optional: true
"@spectrum-css/dialog":
optional: true
"@spectrum-css/divider":
optional: true
"@spectrum-css/menu":
optional: true
checksum: 10c0/03fb044f82627d69262a80e3413f3852994343ee7b7a4aa37a22618b73171dbdc4c68dc9260de217d5d0dab48cfe48e0f9a7934cff047b424672e72d03a6f0cc
"@spectrum-css/tokens":
optional: true
checksum: 10c0/bc271d9fdd19016b6f288949f1d4e33f384ee4692698bf4ab64d51f64f264a14b22b616051a8c94320091d2510d84b952e4a9c0b9b239a241d2bd8791086e44a
languageName: node
linkType: hard

Expand Down Expand Up @@ -8669,7 +8675,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@spectrum-web-components/popover@workspace:packages/popover"
dependencies:
"@spectrum-css/popover": "npm:8.0.0-s2-foundations.17"
"@spectrum-css/popover": "npm:8.2.0"
"@spectrum-web-components/base": "npm:1.5.0"
"@spectrum-web-components/overlay": "npm:1.5.0"
languageName: unknown
Expand Down
Loading