Portal

src/components/Button/Button.tsx

@@ -147,7 +147,8 @@ export function Button({
 
     const {segmented, fullWidth, connectedTop} = buttonGroupContext;
     const lastInGroup = buttonGroupContext.buttons[0] === id;
-    const firstInGroup = [...buttonGroupContext.buttons].pop() === id;
+    const firstInGroup =
+      buttonGroupContext.buttons[buttonGroupContext.buttons.length - 1] === id;
 
     buttonGroupClassName = classNames(
       segmented && styles.inSegmentedGroup,

src/components/Portal/Portal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {createPortal} from 'react-dom';
 import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
+import {ButtonGroupContext} from '../../utilities/button-group';
 import {ThemeContext} from '../../utilities/theme';
 import {portal} from '../shared';
 
@@ -67,8 +68,14 @@ export class Portal extends React.PureComponent<PortalProps, State> {
   }
 
   render() {
+    const childrenMarkup = (
+      <ButtonGroupContext.Provider value={undefined}>
+        {this.props.children}
+      </ButtonGroupContext.Provider>
+    );
+
     return this.state.isMounted
-      ? createPortal(this.props.children, this.portalNode)
+      ? createPortal(childrenMarkup, this.portalNode)
       : null;
   }
 }

src/components/Portal/tests/Portal.test.tsx

@@ -3,6 +3,8 @@ import {mount} from 'enzyme';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Portal} from '../Portal';
 import {portal} from '../../shared';
+import {ButtonGroup} from '../../ButtonGroup';
+import {ButtonGroupContext} from '../../../utilities/button-group';
 
 jest.mock('react-dom', () => ({
   ...require.requireActual('react-dom'),
@@ -26,7 +28,7 @@ describe('<Portal />', () => {
     it('get passed into the portal creation method', () => {
       const children = <div />;
       mountWithAppProvider(<Portal>{children}</Portal>);
-      expect(createPortalSpy).toHaveBeenCalledWith(children, expect.anything());
+      expect(createPortalSpy.mock.calls[0][0].props.children).toBe(children);
     });
   });
 
@@ -116,4 +118,28 @@ describe('<Portal />', () => {
     mountWithAppProvider(<Portal />);
     expect(removeSpy).toHaveBeenCalledWith('style');
   });
+
+  it('sets the ButtonGroup context as undefined', () => {
+    createPortalSpy.mockImplementation(
+      require.requireActual('react-dom').createPortal,
+    );
+
+    function TestComponent(_: {value: any}) {
+      return null;
+    }
+
+    const buttonGroup = mountWithAppProvider(
+      <ButtonGroup>
+        <Portal>
+          <ButtonGroupContext.Consumer>
+            {(ButtonGroupContext) => {
+              return <TestComponent value={ButtonGroupContext} />;
+            }}
+          </ButtonGroupContext.Consumer>
+        </Portal>
+      </ButtonGroup>,
+    );
+
+    expect(buttonGroup.find(TestComponent).prop('value')).toBeUndefined();
+  });
 });