fix: address margin effected positioning

adobe · Aug 18, 2023 · 38c8cf2 · 38c8cf2
1 parent 74d120f
commit 38c8cf2
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 1 deletion.
diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts
@@ -931,6 +931,11 @@ export class Overlay extends OverlayFeatures {
             <dialog
                 class="dialog"
                 part="dialog"
+                placement=${ifDefined(
+                    this.requiresPosition
+                        ? this.placement || 'right'
+                        : undefined
+                )}
                 @close=${this.handleBrowserClose}
                 @cancel=${this.handleBrowserClose}
                 @beforetoggle=${this.handleBeforetoggle}
@@ -955,6 +960,11 @@ export class Overlay extends OverlayFeatures {
             <div
                 class="dialog"
                 part="dialog"
+                placement=${ifDefined(
+                    this.requiresPosition
+                        ? this.placement || 'right'
+                        : undefined
+                )}
                 popover=${ifDefined(this.popoverValue)}
                 @beforetoggle=${this.handleBeforetoggle}
                 @close=${this.handleBrowserClose}

diff --git a/packages/overlay/src/overlay.css b/packages/overlay/src/overlay.css
@@ -93,6 +93,10 @@ governing permissions and limitations under the License.
     );
 }
 
+::slotted(sp-tooltip) {
+    --swc-tooltip-margin: 0;
+}
+
 /**
  * Offset the transition displacement from the trigger edge by
  * padding the equivelent distance off of the opposite edge.
@@ -102,6 +106,26 @@ governing permissions and limitations under the License.
  * that _should_ still be under the pointer when `pointerup` is dispatched.
  * </HACK>
  **/
+.dialog:not([actual-placement])[placement*='top'] {
+    padding-block: var(--swc-overlay-animation-distance);
+    margin-top: var(--swc-overlay-animation-distance);
+}
+
+.dialog:not([actual-placement])[placement*='right'] {
+    padding-inline: var(--swc-overlay-animation-distance);
+    margin-left: calc(-1 * var(--swc-overlay-animation-distance));
+}
+
+.dialog:not([actual-placement])[placement*='bottom'] {
+    padding-block: var(--swc-overlay-animation-distance);
+    margin-top: calc(-1 * var(--swc-overlay-animation-distance));
+}
+
+.dialog:not([actual-placement])[placement*='left'] {
+    padding-inline: var(--swc-overlay-animation-distance);
+    margin-left: var(--swc-overlay-animation-distance);
+}
+
 .dialog[actual-placement*='top'] {
     padding-block: var(--swc-overlay-animation-distance);
     margin-top: var(--swc-overlay-animation-distance);

diff --git a/packages/overlay/stories/overlay-element.stories.ts b/packages/overlay/stories/overlay-element.stories.ts
@@ -243,7 +243,7 @@ export const actionGroup = ({ delayed }: Properties): TemplateResult => {
                 </sp-action-group>
             </sp-popover>
         </sp-overlay>
-        <sp-overlay ?delayed=${delayed} trigger="trigger-3@hover">
+        <sp-overlay ?delayed=${delayed} trigger="trigger-3@hover" open>
             <sp-tooltip>Hover</sp-tooltip>
         </sp-overlay>
         <sp-overlay

diff --git a/packages/tooltip/src/tooltip.css b/packages/tooltip/src/tooltip.css
@@ -17,6 +17,10 @@ governing permissions and limitations under the License.
     white-space: initial;
 }
 
+:host([placement]) #tooltip {
+    margin: var(--swc-tooltip-margin);
+}
+
 #tip {
     clip-path: polygon(0 -5%, 50% 50%, 100% -5%);
     width: var(--spectrum-tooltip-tip-inline-size) !important;