Skip to content

Commit

Permalink
fix(overlay): calculate more transforms
Browse files Browse the repository at this point in the history
  • Loading branch information
@Westbrook
Westbrook committed Oct 27, 2023
1 parent e0d1f73 commit 6538a45
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 33 deletions.
4 changes: 2 additions & 2 deletions packages/overlay/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,8 @@
"lit-html"
],
"dependencies": {
"@floating-ui/dom": "^1.5.1",
"@floating-ui/utils": "^0.1.1",
"@floating-ui/dom": "^1.5.3",
"@floating-ui/utils": "^0.1.6",
"@spectrum-web-components/action-button": "^0.39.3",
"@spectrum-web-components/base": "^0.39.3",
"@spectrum-web-components/reactive-controllers": "^0.39.3",
Expand Down
24 changes: 20 additions & 4 deletions packages/overlay/src/topLayerOverTransforms.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,29 +72,45 @@ export const topLayerOverTransforms = (): Middleware => ({
const containingBlock = isContainingBlock(root)
? root
: getContainingBlock(root);
let css: CSSStyleDeclaration | Record<string, string> = {};
if (
containingBlock !== null &&
getWindow(containingBlock) !==
(containingBlock as unknown as Window)
) {
const css = getComputedStyle(containingBlock);
css = getComputedStyle(containingBlock);
// The overlay is "over transforms" when the containing block uses specific CSS...
overTransforms =
// the `transform` property
css.transform !== 'none' ||
// the `translate` property
css.translate !== 'none' ||
// the `backdropFilter` property
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
(css.backdropFilter
? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
css.backdropFilter !== 'none'
: false) ||
// the `filter` property for anything other than "none"
(css.filter ? css.filter !== 'none' : false) ||
// the `transform` property "will-change"
css.willChange.search('transform') > -1 ||
// the `transform` property "will-change"
css.willChange.search('translate') > -1 ||
// a value of "paint", "layout", "strict", or "content" for `contain`
['paint', 'layout', 'strict', 'content'].some((value) =>
(css.contain || '').includes(value)
);
// overTransforms = true;
}

if (onTopLayer && overTransforms && containingBlock) {
const rect = containingBlock.getBoundingClientRect();
diffCoords.x = rect.x;
diffCoords.y = rect.y;
// Margins are not included in the bounding client rect and need to be handled separately.
const { marginInlineStart = '0', marginBlockStart = '0' } = css;
diffCoords.x = rect.x + parseFloat(marginInlineStart);
diffCoords.y = rect.y + parseFloat(marginBlockStart);
}
}

Expand Down
57 changes: 32 additions & 25 deletions packages/overlay/stories/overlay-element.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,31 +77,38 @@ const Template = ({
placement,
type,
}: Properties): TemplateResult => html`
<sp-action-button id="trigger">Open the overlay</sp-action-button>
<sp-overlay
?open=${open}
trigger="trigger@${interaction}"
type=${ifDefined(type)}
placement=${ifDefined(placement)}
offset="-10"
>
<sp-popover dialog>
<p>
Content goes here.
${type === 'modal' || type === 'page'
? html`
Or, a link,
<sp-link
href="https://opensource.adobe.com/spectrum-web-components"
>
Spectrum Web Components
</sp-link>
.
`
: ''}
</p>
</sp-popover>
</sp-overlay>
<style>
.wrapper {
will-change: transform;
}
</style>
<div class="wrapper">
<sp-action-button id="trigger">Open the overlay</sp-action-button>
<sp-overlay
?open=${open}
trigger="trigger@${interaction}"
type=${ifDefined(type)}
placement=${ifDefined(placement)}
offset="-10"
>
<sp-popover dialog>
<p>
Content goes here.
${type === 'modal' || type === 'page'
? html`
Or, a link,
<sp-link
href="https://opensource.adobe.com/spectrum-web-components"
>
Spectrum Web Components
</sp-link>
.
`
: ''}
</p>
</sp-popover>
</sp-overlay>
</div>
`;

export const modal = (args: Properties): TemplateResult => Template(args);
Expand Down
5 changes: 4 additions & 1 deletion packages/picker/stories/picker.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,8 +370,11 @@ export const Open = (args: StoryArgs): TemplateResult => {
clear: left;
margin-bottom: 15px;
}
.backdrop-filer-test {
backdrop-filter: saturate(80%);
}
</style>
<fieldset>
<fieldset class="backdrop-filer-test">
<sp-field-label for="picker-open">
Where do you live?
</sp-field-label>
Expand Down
18 changes: 17 additions & 1 deletion tools/grid/stories/grid.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ import {
import '@spectrum-web-components/grid/sp-grid.js';
import '@spectrum-web-components/action-bar/sp-action-bar.js';
import '@spectrum-web-components/card/sp-card.js';
import '@spectrum-web-components/action-menu/sp-action-menu.js';
import '@spectrum-web-components/menu/sp-menu-item.js';
import '@spectrum-web-components/tooltip/sp-tooltip.js';
import '@spectrum-web-components/checkbox/sp-checkbox.js';
import '@spectrum-web-components/action-button/sp-action-button.js';
import '@spectrum-web-components/action-group/sp-action-group.js';
Expand Down Expand Up @@ -61,6 +64,7 @@ const renderItem = (
value="card-${item.id}"
.selected=${selected}
key=${index}
draggable="true"
>
<img
alt=""
Expand All @@ -70,6 +74,18 @@ const renderItem = (
/>
<div slot="description">10/15/18</div>
<div slot="footer">Footer</div>
<sp-action-menu slot="actions" placement="bottom-end" quiet>
<sp-tooltip slot="tooltip" self-managed placement="top">
Do stuff
</sp-tooltip>
<sp-menu-item>Deselect</sp-menu-item>
<sp-menu-item>Select Inverse</sp-menu-item>
<sp-menu-item>Feather...</sp-menu-item>
<sp-menu-item>Select and Mask...</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>Save Selection</sp-menu-item>
<sp-menu-item disabled>Make Work Path</sp-menu-item>
</sp-action-menu>
</sp-card>
`;
};
Expand Down Expand Up @@ -111,7 +127,7 @@ export const Default = (): TemplateResult => {
.focusableSelector=${'sp-card'}
.renderItem=${renderItem}
></sp-grid>
<sp-action-bar variant="fixed" style="display: none">
<sp-action-bar variant="fixed">
<sp-checkbox @click=${handleActionBarChange} checked>
<span class="selected"></span>
Selected
Expand Down
20 changes: 20 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3385,6 +3385,13 @@
dependencies:
"@floating-ui/utils" "^0.1.1"

"@floating-ui/core@^1.4.2":
version "1.5.0"
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
dependencies:
"@floating-ui/utils" "^0.1.3"

"@floating-ui/dom@^1.5.1":
version "1.5.1"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
Expand All @@ -3393,6 +3400,14 @@
"@floating-ui/core" "^1.4.1"
"@floating-ui/utils" "^0.1.1"

"@floating-ui/dom@^1.5.3":
version "1.5.3"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
dependencies:
"@floating-ui/core" "^1.4.2"
"@floating-ui/utils" "^0.1.3"

"@floating-ui/react-dom@^2.0.0":
version "2.0.2"
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
Expand All @@ -3405,6 +3420,11 @@
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==

"@floating-ui/utils@^0.1.3", "@floating-ui/utils@^0.1.6":
version "0.1.6"
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==

"@formatjs/ecma402-abstract@1.14.3":
version "1.14.3"
resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.14.3.tgz#6428f243538a11126180d121ce8d4b2f17465738"
Expand Down

0 comments on commit 6538a45

Please sign in to comment.