stripe / stripe-apps

Stripe Apps lets you embed custom user experiences directly in the Stripe Dashboard and orchestrate the Stripe API.
https://stripe.com/docs/stripe-apps
MIT License
148 stars 73 forks source link

Bug Report: ButtonGroup overflow popup menu moves on scroll and is not positioned correctly. #945

Open bensontrent opened 9 months ago

bensontrent commented 9 months ago

When a ButtonGroup is in overflow mode, the popup menu should be absolutely-positioned to the right, relative of the button group.

image

You can see the problem in the animation: The popup menu is cut off by the end of the screen and when a user scrolls their window, the pop up menu follows the scroll, not the button group:

popup-menu

(The framerate of my animated gif is not sufficient to show the scrolling motion but the menu scrolls off-screen on scroll)

<ButtonGroup>
    <Button css={{ width: "fill" }} onPress={() => { saveShipmentAndNavigate(`/shipping-options/${id}`) }}>
         Edit options</Button>
    <Button type="primary" css={{ width: "fill" }} disabled={isBuying || context.environment.mode === "test"} 
         onPress={() => handleBuyOrTest("production")} > Buy label</Button>
    <Button type="secondary" css={{ alignX: "end", }} disabled={isBuying} 
        onPress={() => handleBuyOrTest("test")} > Print test label</Button>
</ButtonGroup>
gabrielhurley-stripe commented 9 months ago

Yep, that doesn't look right! I've flagged this internally and we'll check it out. Thanks!