Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update ActionList mobile styles #11953

Conversation

lgriffee
Copy link
Member

@lgriffee lgriffee commented Apr 26, 2024

WHY are these changes introduced?

Refactor of #11943
Closes https://github.com/Shopify/mobile/issues/32988
Closes https://github.com/Shopify/mobile/issues/33782

Caution

Basing this PR off of #11837 and will not merge until that ships.

WHAT is this pull request doing?

Updates ActionList sizing and styling to improve UX on mobile devices.

ActionList

Note

The following "Before" screenshots are not based on the changes from #11837 please see the Chromatic diffs instead to see the changes from that PR included. The screenshots are still useful in illustrating the main updates being made however as part of this work.

Single Section
Before (below md breakpoint) After (below md breakpoint)
Screenshot 2024-04-26 at 2 01 19鈥疨M Screenshot 2024-04-26 at 2 01 24鈥疨M
Screenshot 2024-04-26 at 2 02 33鈥疨M Screenshot 2024-04-26 at 2 02 38鈥疨M
Screenshot 2024-04-26 at 2 01 30鈥疨M Screenshot 2024-04-26 at 2 01 36鈥疨M
Screenshot 2024-04-26 at 2 10 01鈥疨M Screenshot 2024-04-26 at 2 09 53鈥疨M
Screenshot 2024-04-26 at 2 01 41鈥疨M Screenshot 2024-04-26 at 2 01 45鈥疨M
Screenshot 2024-04-26 at 2 01 52鈥疨M Screenshot 2024-04-26 at 2 02 03鈥疨M
Screenshot 2024-04-26 at 2 17 03鈥疨M Screenshot 2024-04-26 at 2 16 56鈥疨M
Screenshot 2024-04-26 at 2 28 24鈥疨M Screenshot 2024-04-26 at 2 28 18鈥疨M
Multi Section
Before (below md breakpoint) After (below md breakpoint)
Screenshot 2024-04-26 at 2 19 57鈥疨M Screenshot 2024-04-26 at 2 19 51鈥疨M
Screenshot 2024-04-26 at 2 20 28鈥疨M Screenshot 2024-04-26 at 2 20 23鈥疨M
Screenshot 2024-04-26 at 2 20 36鈥疨M Screenshot 2024-04-26 at 2 20 32鈥疨M
Screenshot 2024-04-26 at 2 20 48鈥疨M Screenshot 2024-04-26 at 2 20 43鈥疨M
Screenshot 2024-04-26 at 2 21 54鈥疨M Screenshot 2024-04-26 at 2 21 48鈥疨M
Screenshot 2024-04-26 at 2 22 04鈥疨M Screenshot 2024-04-26 at 2 21 59鈥疨M
Screenshot 2024-04-26 at 2 22 14鈥疨M Screenshot 2024-04-26 at 2 22 09鈥疨M
Screenshot 2024-04-26 at 2 22 26鈥疨M Screenshot 2024-04-26 at 2 22 21鈥疨M
Screenshot 2024-04-26 at 2 22 37鈥疨M Screenshot 2024-04-26 at 2 22 32鈥疨M
Screenshot 2024-04-26 at 2 30 42鈥疨M Screenshot 2024-04-26 at 2 30 29鈥疨M

How to 馃帺

Tip

Make sure you adjust the breakpoint to either sm or xs to see the correct changes!

ActionList

Page

BulkActions

Filters

LegacyCard

MediaCard

ResourceItem

Tabs

Only uses ActionList md breakpoint and above.

TopBar

@lgriffee lgriffee added the #gsd:40396 WebView infrastructure - Forms and Polaris label Apr 26, 2024
@lgriffee lgriffee self-assigned this Apr 26, 2024
@lgriffee lgriffee mentioned this pull request Apr 26, 2024
@lgriffee lgriffee requested a review from aveline May 6, 2024 21:18
@lgriffee lgriffee force-pushed the actionlist-mobile-alignment2 branch from 9ebcf93 to a319b3a Compare May 6, 2024 21:18
@lgriffee lgriffee changed the base branch from main to revert-11833-revert-11724-theme-to-responsive May 6, 2024 21:19
@lgriffee lgriffee changed the title [Prototype] Update ActionList mobile styles Update ActionList mobile styles May 6, 2024
@lgriffee lgriffee force-pushed the actionlist-mobile-alignment2 branch from a319b3a to 0c5ad6d Compare May 6, 2024 21:43
@lgriffee lgriffee marked this pull request as ready for review May 6, 2024 22:15
@lgriffee lgriffee closed this May 9, 2024
@lgriffee
Copy link
Member Author

lgriffee commented May 9, 2024

Closing in favor of build phase PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
#gsd:40396 WebView infrastructure - Forms and Polaris
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant