I was wondering if we will have a guide for the new design patterns, similar to the documentation we had for Polaris React. This would help us not only understand how to adapt our apps to the new standard, but also grasp the methodology and rationale used by Shopify designers behind shifting these concepts from the old Polaris to the new one.
As a side note, I’d like to mention a critical point about app accessibility. When viewing my app with the latest stable version (v1.1), I’ve noticed that the reduced visual depth between elements creates scenarios with nesting like white-on-white-on-white. This lack of sufficient contrast makes reading data difficult and exhausting, which could negatively impact less technical merchants and users with low vision or light sensitivity. However, this accessibility impact seems to be reduced on 2.0-rc.
Thanks in advance!
Edit 1: I updated the focus of this post after running some new tests on the 2.0-rc version (addressed here). The visual depth and contrast issues I originally highlighted are much better in 2.0-rc, so I shifted the main topic here to focus primarily on the design pattern documentation.
Edit 2: Added a link to my follow-up comment detailing the 2.0-rc tests.
P.S. AI was used only to assist with the English translation of this message.
Some of my apps are using Polaris react components and some using Polaris web components 1.0. I would also like to know the rationale behind the push to Polaris web components 2.0 and from my limited testing over the weekend it seems my apps using Polaris web components 1.0 have no issues in terms of the UI with the new admin UI.. But it would be good to get documentation on what our compatiblity checks should entail.
I would like to add something important. While testing the polaris 2.0-rc, I noticed a massive UX difference compared to the latest version. The rounded corners, heading sizes, and shadows on the sections have greatly improved usability compared to the stable release we currently have.
These visual updates really help address the depth and contrast issues I mentioned earlier, making the interface much easier to read and navigate.
P.S. AI was used only to assist with the English translation of this message.
