[polaris.shopify.com] View HTML and CSS classes for components

[geongeorge]

In the earlier version of the Polaris website, it was possible to view the plain HTML version of the components.
Although we're using react for frontend, there were multiple occasions that made us use the HTML version to extend the features of existing components.

This is really useful for multiple use cases:

• Our being to use a component/icon where in the react component only string is accepted
• Use the Polaris design without react. Use plain html, vue, etc instead
• Extend the functionality. For instance, the button onClick currently won't give the event object to the callback. We had a use case where this was needed

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[martenbjork]

Hi! Thanks for this feedback and for the list of use cases. I'll add this to the back log and discuss it with the team.

We're mostly optimizing for React, but I think the points you bring up are valid so we'll carefully consider it in a few weeks when we've fixed some other, higher priority items in the backlog.

Cheers!

[mathildebuenerd]

Another use case for having the html on polaris.shopify.com is to get a quick view of what is the generated HTML for a component. For example, to see what are the generated aria attributes. There used to be a toggle on the top right of the component preview, here:

Screenshot

It can still be seen by inspecting the page, but it was easier to use when there was the toggle

[martenbjork]

You can now view the HTML output of any component 🎉 I hope this helps!

Example: https://polaris.shopify.com/components/badge

Don't hesitate to file new issues if you encounter any bugs or have suggestions for improvements.