[Popover][TopBar] Overlay width fix

.eslintignore

@@ -11,4 +11,3 @@ node_modules
 /styles.scss
 /styles
 /src/styles/polaris-tokens
-tests/shims/mutation-observer.ts

UNRELEASED.md

@@ -14,9 +14,12 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
-- Doesn't render `MenuActions` if no actions are passed to an `actionGroups` item inside `Page` ([2266](https://github.com/Shopify/polaris-react/pull/2266))### Documentation
+- Doesn't render `MenuActions` if no actions are passed to an `actionGroups` item inside `Page` ([2266](https://github.com/Shopify/polaris-react/pull/2266))
+- Fixed `PositionedOverlay` incorrectly calculating `Topbar.UserMenu` `Popover` width ([#1692](https://github.com/Shopify/polaris-react/pull/1692))
 - Fixed `recolor-icon` Sass mixin to properly scope `$secondary-color` to the child `svg` ([#2298](https://github.com/Shopify/polaris-react/pull/2298))
 
+### Documentation
+
 ### Development workflow
 
 ### Dependency upgrades

src/components/Popover/Popover.scss

@@ -11,6 +11,7 @@ $content-max-width: rem(400px);
   box-shadow: shadow(deep);
   border-radius: border-radius();
   will-change: left, top;
+  width: 100%;
 }
 
 .PopoverOverlay {
@@ -52,7 +53,7 @@ $content-max-width: rem(400px);
 }
 
 .positionedAbove {
-  margin: spacing() 0 $visible-portion-of-arrow spacing(tight);
+  margin: spacing() spacing(tight) $visible-portion-of-arrow;
 
   &.fullWidth {
     margin: 0 0 $visible-portion-of-arrow;

src/components/PositionedOverlay/PositionedOverlay.tsx

@@ -44,6 +44,7 @@ export interface PositionedOverlayProps {
 interface State {
   measuring: boolean;
   activatorRect: Rect;
+  right?: number;
   left: number;
   top: number;
   height: number;
@@ -118,20 +119,30 @@ export class PositionedOverlay extends React.PureComponent<
   }
 
   render() {
-    const {left, top, zIndex, width} = this.state;
-    const {render, fixed, classNames: propClassNames} = this.props;
+    const {top, zIndex, width} = this.state;
+    const {render, fixed} = this.props;
+
+    const right =
+      this.state.right == null || isNaN(this.state.right)
+        ? undefined
+        : this.state.right;
+
+    const left =
+      right != null || this.state.left == null || isNaN(this.state.left)
+        ? undefined
+        : this.state.left;
 
     const style = {
+      right,
+      left,
       top: top == null || isNaN(top) ? undefined : top,
-      left: left == null || isNaN(left) ? undefined : left,
       width: width == null || isNaN(width) ? undefined : width,
       zIndex: zIndex == null || isNaN(zIndex) ? undefined : zIndex,
     };
 
     const className = classNames(
       styles.PositionedOverlay,
       fixed && styles.fixed,
-      propClassNames,
     );
 
     return (
@@ -234,7 +245,9 @@ export class PositionedOverlay extends React.PureComponent<
           {
             measuring: false,
             activatorRect: getRectForNode(activator),
-            left: horizontalPosition,
+            right:
+              preferredAlignment === 'right' ? horizontalPosition : undefined,
+            left: preferredAlignment === 'right' ? 0 : horizontalPosition,
             top: lockPosition ? top : verticalPosition.top,
             lockPosition: Boolean(fixed),
             height: verticalPosition.height || 0,

src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx

@@ -64,7 +64,7 @@ describe('<PositionedOverlay />', () => {
   });
 
   describe('preferredAlignment', () => {
-    it('aligns left if preferredAlignment is given', () => {
+    it('aligns left if preferredAlignment left is given', () => {
       const positionedOverlay = mountWithAppProvider(
         <PositionedOverlay {...mockProps} preferredAlignment="left" />,
       );
@@ -73,6 +73,16 @@ describe('<PositionedOverlay />', () => {
         (positionedOverlay.find('div').prop('style') as any).left,
       ).toBeUndefined();
     });
+
+    it('aligns right if preferredAlignment right is given', () => {
+      const positionedOverlay = mountWithAppProvider(
+        <PositionedOverlay {...mockProps} preferredAlignment="right" />,
+      );
+
+      expect(
+        (positionedOverlay.find('div').prop('style') as any).right,
+      ).toBeUndefined();
+    });
   });
 
   describe('fullWidth', () => {

src/components/PositionedOverlay/utilities/math.ts

@@ -91,6 +91,7 @@ export function calculateHorizontalPosition(
   preferredAlignment: PreferredAlignment,
 ) {
   const maximum = containerRect.width - overlayRect.width;
+  const borderWidth = 2;
 
   if (preferredAlignment === 'left') {
     return Math.min(
@@ -99,18 +100,26 @@ export function calculateHorizontalPosition(
     );
   } else if (preferredAlignment === 'right') {
     const activatorRight = activatorRect.left + activatorRect.width;
-    return Math.min(
-      maximum,
+
+    return (
+      maximum -
       Math.max(
         0,
-        activatorRight - overlayRect.width + overlayMargins.horizontal,
-      ),
+        activatorRight -
+          (overlayRect.width - overlayMargins.horizontal) -
+          borderWidth,
+      )
     );
   }
 
   return Math.min(
     maximum,
-    Math.max(0, activatorRect.center.x - overlayRect.width / 2),
+    Math.max(
+      0,
+      activatorRect.center.x -
+        overlayRect.width / 2 -
+        overlayMargins.horizontal,
+    ),
   );
 }
 

src/components/TopBar/TopBar.scss

@@ -11,6 +11,7 @@ $context-control-expand-after: 1400px;
   display: flex;
   height: top-bar-height();
   background-color: var(--p-surface-background, var(--top-bar-background));
+
   &::after {
     content: '';
     position: absolute;

src/components/TopBar/components/Menu/Menu.scss

@@ -18,6 +18,11 @@ $activator-variables: (
   height: top-bar-height();
   display: flex;
   align-items: center;
+  margin-right: spacing(tight);
+
+  @include breakpoint-before(layout-width(page-with-nav), false) {
+    margin: 0 spacing(extra-tight);
+  }
 }
 
 .Activator {
@@ -32,7 +37,6 @@ $activator-variables: (
   border: 0;
   cursor: pointer;
   transition: menu(transition);
-  margin-right: spacing(tight);
   border-radius: border-radius();
 
   &:focus {
@@ -52,8 +56,6 @@ $activator-variables: (
   }
 
   @include breakpoint-before(layout-width(page-with-nav), false) {
-    margin: 0 spacing(extra-tight);
-
     &:focus,
     &:hover,
     &:active,

src/components/TopBar/components/Menu/Menu.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {ActionList, ActionListProps} from '../../../ActionList';
-import {Popover} from '../../../Popover';
+import {Popover, PopoverProps} from '../../../Popover';
 
 import {Message, MessageProps} from './components';
 import styles from './Menu.scss';
@@ -15,14 +15,24 @@ export interface MenuProps {
   message?: MessageProps;
   /** A boolean property indicating whether the menu is currently open */
   open: boolean;
+  /** The preferred alignment of the popover relative to its activator */
+  preferredAlignment?: PopoverProps['preferredAlignment'];
   /** A callback function to handle opening the menu popover */
   onOpen(): void;
   /** A callback function to handle closing the menu popover */
   onClose(): void;
 }
 
 export function Menu(props: MenuProps) {
-  const {actions, onOpen, onClose, open, activatorContent, message} = props;
+  const {
+    actions,
+    onOpen,
+    onClose,
+    open,
+    activatorContent,
+    message,
+    preferredAlignment,
+  } = props;
 
   const badgeProps = message &&
     message.badge && {
@@ -46,6 +56,7 @@ export function Menu(props: MenuProps) {
 
   return (
     <Popover
+      preferredAlignment={preferredAlignment}
       activator={
         <div className={styles.ActivatorWrapper}>
           <button type="button" className={styles.Activator} onClick={onOpen}>

src/components/TopBar/components/UserMenu/UserMenu.tsx

@@ -55,6 +55,7 @@ export function UserMenu({
 
   return (
     <Menu
+      preferredAlignment="right"
       activatorContent={activatorContentMarkup}
       open={open}
       onOpen={onToggle}