v2.2.0

New components

Range slider

Use range slider to select a number value between a min and max range.

Enhancements

• Added a fixed prop to popover allowing for a fixed position
• Added badge prop to the item descriptor type and action group
• Added text-breakword mixin for easier word breaking when dealing with long unspaced strings

Bug fixes

• Fixed unexpected form submission when switching tabs in a tabs component wrapped in a form
• Added missing 'Shopify.API.setWindowLocation' message handler to the EASDK

Sketch Web UIKit

• Added the new range slider component

v2.1.2

Enhancements

• Added support for cards to accept a block for a title
• Added an intermediate prop typing for Link to allow redefinition of prop definitions

Bug fixes

• Fixed an issue where resource list filters lost padding (thanks to @BarryCarlyon for the original issue)
• Fixed unexpected focus jumps when date picker props are updated
• Fixed the spacing and text wrapping of exception list title and description

v2.1.1

Bug fixes

• DropZone: fixed a bug where it would kick into small-size too soon

Documentation

• Various content and markdown fixes

Sketch Web UIKit

• Banner: added "in card" and "in modal" specific styles
• Added ExceptionList
• Added DescriptionList

v2.1.0

New components

Exception list

Use Exception lists to draw the merchant’s attention to important information that adds extra context to a task.

Enhancements

• Added an ellipsis prop to ActionList.Item allowing for an ellipsis suffix after the content
• Added a preferredAlignment prop to Popover allowing it to be aligned to the left, center, or right of its activator
• Updated styling for Banners that appear in Cards or Modals
• Added new size to DropZone component
• Exposed Group interface from the Select component
• Renamed plain-list mixin to unstyled-list
• Removed padding from DropZone and applied it to FileUpload instead

Bug fixes

• Fixed unexpected window scroll on rendering data table (thanks to @mfurniss for the original issue)
• Fixed focused inner interaction state on resource list item for reverse tabbing
• Fixed border radius on card to match the padding on page
• Added target to the breadcrumb prop on page (thanks to @sdn90 for the original issue)
• Fixed visual representation of disabled bulk action buttons in ResourceList
• Fixed margins of a fullWidth Popover that appears above its activator
• Fixed rendering of Popover when activator rerenders (thanks to @nerfologist for the original issue)
• Fixed z-index calculation for PositionOverlay and Dialog
• Fixed an issue where selecting a date in DatePicker would submit its enclosing form

v2.0.0

Summary: 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

Breaking changes

React 16+

We’re removing support for React 15 in order to make full use of some of the new features in React 16, such as fragments, error boundaries, and improved server-side rendering.

Upgrade instructions

Upgrade your app to the latest version of React.

App provider

The AppProvider component is now required in your app for Polaris components to function properly.

Upgrade instructions

Wrap your app in the AppProvider component.

Collapsible component requires an id prop

For accessibility reasons, the id prop is now required on the Collapsible component.

Upgrade instructions

Pass a unique value as an id to all <Collapsible> components. For example, <Collapsible id="my-unique-id">.

EmbeddedApp component has been removed

The EmbeddedApp component has been removed. The AppProvider component now accepts the configuration needed to initialize an embedded app.

Upgrade instructions

Use the AppProvider component with the apiKey and shopOrigin props.

Resource list

Shopify is organized around objects that represent a merchant’s business, such as customers, products, and orders. Each individual order, for example, is given a dedicated page that can be linked to. In Shopify, we call these types of objects resources.

The resource list component functions as:

• A content format, presenting a set of individual resources in a compact form
• A system for taking action on one or more individual resources
• A way to navigate to the show page of an individual resource

Our current resource list component gave you some nice defaults out of the box, but didn’t take you much further than that. We recognized that each of these lists is unique and contains different information that is important to the merchant.

Our new resource list allow you to build custom items in the list, with their own layout, content, and styling. This gives you a powerful way to build these sorts of lists going forward.

We’ve also included in depth documentation and a tutorial on how to build your own custom resource list items.

Tabs no longer accept title prop

To be more consistent with our other component APIs, the Tabs component now uses content instead of title.

Upgrade instructions

Change all instances of title to be content instead.

TextField onChange is required

Because we require you to manage state for your inputs, we decided to make onChange required for TextField to avoid confusion.

Upgrade instructions

Add an onChange callback to each use of TextField that is not disabled or readonly.

Removed default white color from Icon CSS

The CSS for Icons will no longer apply a color to icons by default. You must use the color prop on the Icon component to specify the color.

Upgrade instructions

Use color prop on all instances of Icon component.

Anchor tags are no longer styled by Polaris components

To avoid conflicts with other styling or frameworks, we’re removing the styling we globally applied to all a elements.

Upgrade instructions

Use the Link component instead.

Changed Alert onCancel prop to onClose

This change only impacts users of the Sass version of Polaris, more specifically the color() function. The color($hue, $value: base, $for-background: null) function in Sass now accepts strings for $hue and $value as advertised in the color function documentation.

Upgrade instructions

If you’re using VS Code, here are the exact search / replace instructions to follow (toggle “Use Regular Expression”):

• replace \bcolor\(([a-z-]+)\) with color('$1')
• replace \bcolor\(([a-z-]+), ([a-z-]+)\) with color('$1', '$2')
• replace \bcolor\(([a-z-]+), ([a-z-]+), (.*)\) with color('$1', '$2', $3)

New components

Data table

Since launching Polaris components, we’ve had many people ask why we didn’t include tables. While we have been moving away from using tables for comparisons that aren’t tabular data (resource lists, for example), we recognize that there are still cases to use them.

The data table component is our answer to those cases. While data visualizations represents part of a data set, data tables are used to organize and display all the information from a data set, allowing merchants view details from the entire set. This helps merchants compare and analyze all the data in a unified way.

Drop zone

Currently we have several different interfaces for uploading files across Shopify, which leads to a lack of consistency and some missing features and capabilities. To solve this problem, we’re releasing a new drop zone component.

This new component allows merchants to upload files by dragging and dropping them into an area on a page. The component handles file type validation, dropping onto the window, and more, meaning more ease of use for merchants.

Modal

In the original Polaris React, the modal component was only available to embedded apps. No longer. Our new modal component is universal in that it can be used in either standalone or embedded apps, and will handle the correct behavior for you.

App provider

The app provider is a required component that enables sharing global app config with the components in Polaris. This is used for the internationalization of strings in Polaris components, as well as set other configuration such as a custom link component that all the Polaris components will use. This unlocks new ways for us to share configuration at an app level and have the components react to that configuration.

Enhancements

• Added error prop to ChoiceList
• TextField, Select, and Checkbox now accept the types string or ReactElement for the error prop
• Added optional id props to more components, and restructured the prop definitions to allow projects to make id props mandatory
• Added fullWidth prop to Card.Section
• Added fullHeight prop to Popover to override max-height
• Added allowRange as a property for DatePicker
• Added the external option to the secondaryAction.action prop on the Banner component. Thank you to (Andrew Cargill) for the issue (#236)

Bug fixes

• Enforced subdued description text style in AnnotatedSection
• Fixed an overflow bug causing the border of TextField to be cut off
• Allowed specific props in the TextField component to pass through properties to the input child
• Fixed ActionList component to provide section dividers when a title was not provided
• Fixed an issue in the Select component where placeholder didn’t properly appear on Firefox and appeared disabled on all browsers

v2.0.0-rc.4

Bug fixes

• Fixed an issue in the select component where placeholder didn’t properly appear on Firefox and appeared disabled on all browsers
• Fixed missing dependency for lodash-decorators (thanks to @paul-phan for the original issue)

v2.0.0-rc.3

Various documentation improvements and fixes

v2.0.0-rc.2

Enhancements

• Upgrade to TypeScript 2.8.3
• Added disabled interactive state to the state mixin

v1.14.2

This will be the last v1.x release outside of critical security fixes.

Bug fixes

• Add margin-left spacing to disclosure icon within Button component
• Remove margins on segmented ButtonGroup
• Fixed text alignment of link so that it inherits from its parent node

v2.0.0-beta.18

Breaking changes

• Moved persistActions from a prop on ResourceList to a prop on ResourceList.Item

Bug fixes

• Enforce subdued description text style in AnnotatedSection
• Fixed horizontal scrollbar and footer bottom alignment on Data Table
• Fixed Sass variable interpolation on ResourceList Item (thanks to @sdn90 for the original issue)
• Fixed data table sortable column heading alignment when content type is "text" (thanks @FelixTellmann for the original issue)