Be notified of new releases
Create your free GitHub account today to subscribe to this repository for new releases and build software alongside 28 million developers.Sign up
weekStartsOnprop to Datepicker
- Remove stickyManager from app provider props interface
- Added iOS and Android examples for the card component
yarn tophatand updated the folder name to match
yarn tophat’s design, and added a
- Changed Form to submit a form by default when the Enter key is pressed, and added the prop
implicitSubmitto disable this default
- Fixed text field padding when a prefix or suffix is included
2.3.1 - 2018-07-05
- Removed the min-width of 320px from Resource list
- Resolve issue with RangeSlider not accepting
- Slightly reduce RangeSlider's
- Fixed spacing for prefix and suffix on the text field component
- Fixed a bug which caused data tables not rendered on first page load to have skewed cell heights (thanks @flewid for the original issue)
- Fixed DatePicker month styling for previous years
- Added OptionList component
2.3.0 - 2018-07-03
Use Option list to present a group of selectable items outside of the context of a form.
RangeSliderfor better layout control
- Added testing documentation and examples in AppProvider
- Performance: optimized avatar SVG files
- Updated yarn optimize to add new line at the end of SVG files
- Adjusted padding on text field to work with Chrome’s autofill
- Fixed a regression where the version of Polaris wasn’t globally available anymore
- Updated the interaction state visuals for ActionList
- Fixed z-index on resource list header with sorting options (thanks @janklimo for the original issue)
- Fixed an issue where Radio Buttons were not focusable in Safari
- Fixed spacing for annotated section descriptions
- Fixed a bug in EASDK action transforms that prevented external urls in embedded apps from opening (thanks @dansundy for the original issue)
@shopify/polaris-tokens, the single source of truth for colors
Use range slider to select a number value between a min and max range.
- Added a fixed prop to popover allowing for a fixed position
- Added badge prop to the item descriptor type and action group
text-breakwordmixin for easier word breaking when dealing with long unspaced strings
- 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
- Added support for cards to accept a block for a title
- Added an intermediate prop typing for
Linkto allow redefinition of prop definitions
- DropZone: fixed a bug where it would kick into small-size too soon
- Various content and markdown fixes
Sketch Web UIKit
- Banner: added "in card" and "in modal" specific styles
- Added ExceptionList
- Added DescriptionList
Use Exception lists to draw the merchant’s attention to important information that adds extra context to a task.
- Added an
ellipsisprop to ActionList.Item allowing for an ellipsis suffix after the content
- Added a
preferredAlignmentprop 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
- Removed padding from DropZone and applied it to FileUpload instead
- 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
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
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 your app to the latest version of React.
AppProvider component is now required in your app for Polaris components to function properly.
Wrap your app in the
Collapsible component requires an
For accessibility reasons, the
id prop is now required on the Collapsible component.
Pass a unique value as an
id to all
<Collapsible> components. For example,
EmbeddedApp component has been removed
EmbeddedApp component has been removed. The
AppProvider component now accepts the configuration needed to initialize an embedded app.
AppProvider component with the
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
To be more consistent with our other component APIs, the
Tabs component now uses
content instead of
Change all instances of
title to be
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.
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.
color prop on all instances of
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
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
$value as advertised in the color function documentation.
If you’re using VS Code, here are the exact search / replace instructions to follow (toggle “Use Regular Expression”):
\bcolor\(([a-z-]+), ([a-z-]+), (.*)\)with
color('$1', '$2', $3)
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.
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.
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.
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.
errorprop to ChoiceList
Checkboxnow accept the types
- Added optional
idprops to more components, and restructured the prop definitions to allow projects to make
Popoverto override max-height
allowRangeas a property for
- Added the
externaloption to the
secondaryAction.actionprop on the
Bannercomponent. Thank you to (Andrew Cargill) for the issue (#236)
- Enforced subdued description text style in
- Fixed an overflow bug causing the border of
TextFieldto be cut off
- Allowed specific props in the
TextFieldcomponent to pass through properties to the input child
ActionListcomponent to provide section dividers when a
titlewas not provided
- Fixed an issue in the
Selectcomponent where placeholder didn’t properly appear on Firefox and appeared disabled on all browsers