Skip to content

Commit

Permalink
fix(overlay): correct overlay content sizing
Browse files Browse the repository at this point in the history
  • Loading branch information
@Westbrook
Westbrook committed Mar 3, 2021
1 parent 12ef8a9 commit d9bcd6f
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 7 deletions.
6 changes: 6 additions & 0 deletions packages/modal/src/modal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,9 @@ governing permissions and limitations under the License.

@import './spectrum-modal-wrapper.css';
@import './spectrum-modal.css';

:host {
/* 0 * 1px is a hack for the linter. It wants no units on 0, but units are needed for calc() */
width: calc(100vw - var(--swc-body-margins-inline, 0 * 1px));
height: calc(100vh - var(--swc-body-margins-block, 0 * 1px));
}
8 changes: 7 additions & 1 deletion packages/overlay/src/active-overlay.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,14 @@ governing permissions and limitations under the License.
outline: none;
}

:host([placement='none']) {
top: 0;
left: 0;
}

:host([placement='none']) ::slotted(*) {
height: 100vh;
/* 0 * 1px is a hack for the linter. It wants no units on 0, but units are needed for calc() */
height: calc(100vh - var(--swc-body-margins-block, 0 * 1px));
}

sp-theme,
Expand Down
25 changes: 20 additions & 5 deletions packages/overlay/src/overlay-stack.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ export class OverlayStack {
<style>
#actual {
position: relative;
height: 100%;
height: calc(100% - var(--swc-body-margins-block, 0px));
z-index: 0;
min-height: 100vh;
min-height: calc(100vh - var(--swc-body-margins-block, 0px));
}
#holder {
display: flex;
Expand Down Expand Up @@ -101,6 +101,17 @@ export class OverlayStack {
this.tabTrapper.tabIndex = -1;
this.tabTrapper.setAttribute('aria-hidden', 'true');
this.overlayHolder.hidden = false;
requestAnimationFrame(() => {
const bodyStyles = getComputedStyle(document.body);
this.tabTrapper.style.setProperty(
'--swc-body-margins-inline',
`calc(${bodyStyles.marginLeft} + ${bodyStyles.marginRight})`
);
this.tabTrapper.style.setProperty(
'--swc-body-margins-block',
`calc(${bodyStyles.marginTop} + ${bodyStyles.marginBottom})`
);
});
}

private stopTabTrapping(): void {
Expand Down Expand Up @@ -176,12 +187,13 @@ export class OverlayStack {
return true;
}

const activeOverlay = ActiveOverlay.create(details);

if (this.overlays.length) {
const topOverlay = this.overlays[this.overlays.length - 1];
topOverlay.obscure();
topOverlay.obscure(activeOverlay.interaction);
}

const activeOverlay = ActiveOverlay.create(details);
document.body.appendChild(activeOverlay);

/**
Expand Down Expand Up @@ -340,7 +352,10 @@ export class OverlayStack {
if (this.overlays.length) {
const topOverlay = this.overlays[this.overlays.length - 1];
topOverlay.feature();
if (topOverlay.interaction === 'modal') {
if (
topOverlay.interaction === 'modal' ||
topOverlay.hasModalRoot
) {
topOverlay.focus();
} else {
this.stopTabTrapping();
Expand Down
112 changes: 111 additions & 1 deletion packages/overlay/stories/overlay.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,15 @@ governing permissions and limitations under the License.
import { html, number, select, radios } from '@open-wc/demoing-storybook';
import { TemplateResult } from '@spectrum-web-components/base';

import { Placement } from '../';
import { OverlayTrigger, Placement } from '../';
import '@spectrum-web-components/action-button/sp-action-button.js';
import '@spectrum-web-components/button/sp-button.js';
import '@spectrum-web-components/dialog/sp-dialog-wrapper.js';
import { DialogWrapper } from '@spectrum-web-components/dialog';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
import '@spectrum-web-components/overlay/overlay-trigger.js';
import { Picker } from '@spectrum-web-components/picker';
import '@spectrum-web-components/picker/sp-picker.js';
import '@spectrum-web-components/popover/sp-popover.js';
import '@spectrum-web-components/slider/sp-slider.js';
import '@spectrum-web-components/radio/sp-radio.js';
Expand Down Expand Up @@ -486,3 +488,111 @@ export const longpress = (): TemplateResult => {
</overlay-trigger>
`;
};

export const complexModal = (): TemplateResult => {
requestAnimationFrame(async () => {
const overlay = document.querySelector(
`overlay-trigger`
) as OverlayTrigger;
const trigger = (overlay.shadowRoot as ShadowRoot).querySelector(
'#trigger'
) as HTMLElement;
trigger.addEventListener('sp-opened', () => {
requestAnimationFrame(() => {
const picker = document.querySelector('#test-picker') as Picker;
picker.open = true;
});
});
trigger.click();
});
return html`
<style>
body {
--swc-margin-test: 10px;
margin: var(--swc-margin-test);
}
sp-story-decorator::part(container) {
min-height: calc(100vh - (2 * var(--swc-margin-test)));
padding: 0;
display: grid;
place-content: center;
}
active-overlay > * {
--spectrum-global-animation-duration-100: 0ms;
--spectrum-global-animation-duration-200: 0ms;
--spectrum-global-animation-duration-300: 0ms;
--spectrum-global-animation-duration-400: 0ms;
--spectrum-global-animation-duration-500: 0ms;
--spectrum-global-animation-duration-600: 0ms;
--spectrum-global-animation-duration-700: 0ms;
--spectrum-global-animation-duration-800: 0ms;
--spectrum-global-animation-duration-900: 0ms;
--spectrum-global-animation-duration-1000: 0ms;
--spectrum-global-animation-duration-2000: 0ms;
--spectrum-global-animation-duration-4000: 0ms;
--spectrum-coachmark-animation-indicator-ring-duration: 0ms;
}
</style>
<overlay-trigger type="modal" placement="none">
<sp-dialog-wrapper
slot="click-content"
headline="Dialog title"
dismissable
underlay
footer="Content for footer"
>
<sp-picker id="test-picker">
<sp-menu>
<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-menu>
</sp-picker>
</sp-dialog-wrapper>
<sp-button slot="trigger" variant="primary">
Toggle Dialog
</sp-button>
</overlay-trigger>
`;
};

export const superComplexModal = (): TemplateResult => {
return html`
<overlay-trigger type="modal" placement="none">
<sp-button slot="trigger" variant="cta">Toggle Dialog</sp-button>
<sp-popover dialog slot="click-content">
<overlay-trigger>
<sp-button slot="trigger" variant="primary">
Toggle Dialog
</sp-button>
<sp-popover dialog slot="click-content">
<overlay-trigger type="modal">
<sp-button slot="trigger" variant="secondary">
Toggle Dialog
</sp-button>
<sp-popover dialog slot="click-content">
<p>
When you get this deep, this ActiveOverlay
should be the only one in [slot="open"].
</p>
<p>
All of the rest of the ActiveOverlay
elements should have had their [slot]
attribute removed.
</p>
<p>
Closing this ActiveOverlay should replace
them...
</p>
</sp-popover>
</overlay-trigger>
</sp-popover>
</overlay-trigger>
</sp-popover>
</overlay-trigger>
`;
};

0 comments on commit d9bcd6f

Please sign in to comment.