search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.44k stars 1.08k forks source link

Dialog modal on mobile stack footer and button group #3029

Closed ktabors closed 3 days ago

ktabors commented 2 years ago

🙋 Feature Request

Improve the footer and buttongroup layout of modals on mobile devices.

🤔 Expected Behavior

Footer and button labels aren't squashed next to each other.

😯 Current Behavior

The footer and buttongroup sections of modals on mobile views are next to each other which squashes the footer and button labels can render outside of the button.

image

💁 Possible Solution

Do vertical stacking of footer and buttongroup like how all the parts of fullscreen and fullscreenTakeover are stacked in mobile.

💻 Examples

Open browser dev tools, select devices, and choose responsive view with width "320px." Goto the DialogTrigger "adjustable dialog" story and check "show footer" and "show long button labels". Open the modal by clicking the "Trigger" button.

https://reactspectrum.blob.core.windows.net/reactspectrum/65107923a26b8048d8704ab39f5247ed7816eb1f/storybook/index.html?path=/story/dialogtrigger--adjustable-dialog

🧢 Your Company/Team

RSP

AvidDabbler commented 2 years ago

I am seeing issues with combobox on modals as well image

snowystinger commented 2 years ago

Any chance you can reproduce in a codesandbox? Also, this looks unrelated to the states issue.

AvidDabbler commented 2 years ago

Any chance you can reproduce in a codesandbox? Also, this looks unrelated to the states issue.

Yup! I'm happy to open up another issue if this is not currently logged

https://codesandbox.io/s/laughing-pare-tyig0v?file=/src/index.js

snowystinger commented 2 years ago

Yeah, that's not related, here it is fixed https://codesandbox.io/s/damp-worker-rdzh9h?file=/src/App.js. The React-modal portalled everything to a new place in the dom where it couldn't get the CSS variables it expected. If you make a provider with a style, it'll render a new element. Or there are a few other ways to get that to happen. I suggest using our DialogTrigger https://react-spectrum.adobe.com/react-spectrum/DialogTrigger.html or DialogContainer instead though.

ktabors commented 4 months ago

Reverifying. There is still overlap, but the buttons no longer display with wrap.

image
ktabors commented 3 days ago

Current behavior does not overlap and the buttons text wrap. The wrapped text remains within the button. Closing as resolved.