fix: correct max size calculation for overlays

adobe · Mar 25, 2021 · 0585f7f · 0585f7f
1 parent 697a29b
commit 0585f7f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 54 deletions.
diff --git a/packages/picker/stories/picker.stories.ts b/packages/picker/stories/picker.stories.ts
@@ -269,15 +269,13 @@ export const custom = (args: StoryArgs): TemplateResult => {
             label="Pick a state"
             ...=${spreadProps(args)}
         >
-            <sp-menu style="max-height: 400px;">
-                ${states.map(
-                    (state) => html`
-                        <sp-menu-item id=${state.id} value=${state.id}>
-                            ${state.label}
-                        </sp-menu-item>
-                    `
-                )}
-            </sp-menu>
+            ${states.map(
+                (state) => html`
+                    <sp-menu-item id=${state.id} value=${state.id}>
+                        ${state.label}
+                    </sp-menu-item>
+                `
+            )}
         </sp-picker>
         <p>This is some text.</p>
         <p>This is some text.</p>
@@ -288,3 +286,7 @@ export const custom = (args: StoryArgs): TemplateResult => {
         </p>
     `;
 };
+
+custom.args = {
+    open: true,
+};
diff --git a/packages/popover/src/popover.css b/packages/popover/src/popover.css
@@ -15,53 +15,18 @@ governing permissions and limitations under the License.
     --sp-popover-tip-size: 24px;
 }
 
-:host([placement*='bottom'][open]) {
-    /* .spectrum-Popover--bottom.is-open */
-    max-height: calc(
-        100vh -
-            var(
-                --spectrum-dropdown-flyout-menu-offset-y,
-                var(--spectrum-global-dimension-size-75)
-            )
-    );
+:host([placement*='top']),
+:host([placement*='bottom']) {
+    max-height: calc(100% - var(--spectrum-overlay-animation-distance));
 }
-:host([placement*='top'][open]) {
-    /* .spectrum-Popover--top.is-open */
-    margin-top: var(
-        --spectrum-dropdown-flyout-menu-offset-y,
-        var(--spectrum-global-dimension-size-75)
-    );
-    max-height: calc(
-        100vh -
-            var(
-                --spectrum-dropdown-flyout-menu-offset-y,
-                var(--spectrum-global-dimension-size-75)
-            )
-    );
-}
-:host([placement*='right'][open]) {
-    /* .spectrum-Popover--right.is-open */
-    max-width: calc(
-        100vw -
-            var(
-                --spectrum-dropdown-flyout-menu-offset-y,
-                var(--spectrum-global-dimension-size-75)
-            )
-    );
+
+:host([placement*='left']),
+:host([placement*='right']) {
+    max-width: calc(100% - var(--spectrum-overlay-animation-distance));
 }
-:host([placement*='left'][open]) {
-    /* .spectrum-Popover--left.is-open */
-    margin-left: var(
-        --spectrum-dropdown-flyout-menu-offset-y,
-        var(--spectrum-global-dimension-size-75)
-    );
-    max-width: calc(
-        100vw -
-            var(
-                --spectrum-dropdown-flyout-menu-offset-y,
-                var(--spectrum-global-dimension-size-75)
-            )
-    );
+
+::slotted(*) {
+    overscroll-behavior: contain;
 }
 
 /* provide dimensions */