What’s new?

Content and guidelines

• We added new accessibility recommendations to the data visualizations page.

Content and guidelines

• The Patterns section and Guides section of the style guide were combined into one. See the combined Patterns and guides section.

Content and guidelines

• Polaris icons should be used purposefully. The updated icons guidelines include more detailed principles and guidelines with visual examples.

v3.0.0

Components

• Autocomplete is released with Polaris React v3.0.0.
• Contextual save bar is released with Polaris React v3.0.0.
• Frame is released with Polaris React v3.0.0.
• Loading is released with Polaris React v3.0.0.
• Toast is released with Polaris React v3.0.0.
• Top bar is released with Polaris React v3.0.0.

Embedded apps

• We updated Page, Modal, and Resource picker to use the new Shopify App Bridge (formerly EASDK).
• The new Toast and Loading components also provide a wrapper around the Shopify App Bridge.
• We removed the embedded bundle and there is no longer a distinction between embedded components and regular components. Just import the component needed and it will do the right thing based on its context.
• For more information see the embedded apps documentation and how to initialize the Shopify App Bridge.

Open development

• Polaris React now welcomes pull requests. See the contribution guidelines for more information.

License

• We updated our Polaris React license. The source code is now under a custom license based on MIT. The license restricts Polaris React usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications.
• We also added the Polaris Design Guidelines License Agreement. The license restricts Polaris Design Guidelines usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications and embedded applications.

Content and guidelines

• Using clear, consistent terminology in buttons helps merchants know what actions to take. The actionable language guidelines explain what to label buttons for different states in web, iOS, and Android.

Website updates

• We added new links to your favorite resources on the homepage
• Component status: added links to the GitHub issues related to components under consideration and in development
• Examples for iOS and Android are gradually being rolled out to components. We now have examples for:
  • Card
  • Radio button
  • Banner
  • Button
  • Button group
  • Badge
  • Caption
  • Collapsible
  • Display Text
  • Empty State
  • Heading
  • List
  • Pagination
  • Popover
  • Select
  • Subheading
  • Tabs
  • Tag
  • Text Container
  • Text Field
  • Text Style
  • Thumbnail

Content and guidelines

• Error messages can be scary… The new error message guidelines help make errors visible to merchants, easy to understand, and helpful.
• Apply consistent spacing to improve the quality of the user interface with the new spacing guidelines.
• Type scale: changed “Display regular” to “Display medium”.
• Struggling to come up with the right data viz? Take a look at the new “Five core traits” section in data visualizations to learn how to evaluate an effective viz.
• The new Keyboard accessories page describes how to handle the keyboard on mobile devices.

Components

• Inline error is released with Polaris React v2.6.1.

Content and guidelines

• Sounds are used to enhance the overall experience of our product. We’ve added new guidelines for designing sounds.

Components

• Option list is released with Polaris React v2.3.0

Website updates

• We’ve added a CodeSandbox integration on the component playground to make it easier to take code from the examples and continue prototyping with it in a React app.
• Scrolling should now feel more natural, and works a lot better on small screens.
• You can now search for terms such as “dropshipping” or “POS” to discover the meaning behind the vocabulary used at Shopify. Thanks to Lucas C. at Algolia for the help in making this happen.
• To improve the transparency of our roadmap, the component status page now features components in development and under consideration. It also shows a list of components that are not planned.

Components

• Range slider is released with Polaris React v2.2.0

Components

Polaris React v2.0.0. This is the first major version of Polaris React since launch. Included in this release are:

• Several new components, including data table, drop zone, app provider, and modal
• Improvements to existing components, such as resource list, choice list, and cards
• A few breaking API changes

Full v2.0.0 release notes

UI kit

We’ve also released a new version of the Sketch UI kit to reflect the new and updated components. The new UI kit includes more Polaris icons, as well as new layout templates for common page types. We’ve also revised how the kit is organized, so it’s now easier to use as a Sketch library.

We’ll keep updating the UI kit to ensure that the components in Sketch match the latest versions in React.

Download UI Kit

Content and guidelines

• Introduced the interaction states guide, here to help merchants understand what to expect while interacting with Shopify
• Added the all new internationalization guide. Learn how to build interfaces that work for Shopify merchants in every part of the world.
• Introduced the guide to crafting the Shopify admin. The Shopify admin is where merchants set up their store and manage their business. These guidelines have practical ideas to help people who work for Shopify create a better admin for merchants.
• Created the guide to designing apps for Shopify, to help you design apps that merchants trust, understand, and ultimately fall in love with.

Content and guidelines

• Added an all-new “What’s new” page (the one you’re currently reading 🙃)
• Added guidelines for timestamp formats in grammar and mechanics
• Added “pick up” (verb) and “pickup” (noun) to the vocabulary page

Resources

• The GraphQL API now surfaces design tokens (colors, spacing, and font stacks):

  {
    designTokens {
      name
      value
      originalValue
      comment
      type
      category
    }
  }

  Try this query in your browser

Content and guidelines

• Removed the “Purpose” sections on all component pages, as they often overlapped with existing content.
• Updated embedded component pages to feature more detailed usage guides. Also added some screenshots showing what embedded components look like in a Shopify app (in v2 and up, refer to the app provider component).

Component playground

• Improved the component playground to display more detailed information about props and their respective types
• Components with an icon prop (such as the Banner component) now show a list of all available icons in the playground
• We tamed the text editor’s cursor so it doesn’t jump around unexpectedly anymore

Resources

• Polaris.ase (Adobe Swatch Exchange) and Polaris.clr (macOS) color palettes are distributed alongside the Sketch UI Kit and Polaris.sketchpalette that you’ll find in the GitHub releases page – Download the UI Kit and palettes.
• The Polaris design tokens (colors, spacing, font stacks… for Sass, CSS, JavaScript) are available on npm and GitHub. Here’s the full list of available tokens.
• The GraphQL API powering this site was opened to the public at https://polaris.shopify.com/api – Read the API documentation.

We’re constantly updating the style guide and releasing new content for Polaris, but before March 2018, we didn’t have a place to share those updates. Here are a few you may have missed:

• Naming is hard: that’s why we documented the names we give our products, features, and icons in the new naming guidelines page
• Polaris Telescope: access Polaris from Sketch to speed up your design or development workflow