Shopify’s design system to help us work together to build a great experience for all of our merchants.
OTHER License
Bot releases are visible (Hide)
Published by tmlayton over 6 years ago
Use range slider to select a number value between a min and max range.
text-breakword
mixin for easier word breaking when dealing with long unspaced strings'Shopify.API.setWindowLocation'
message handler to the EASDKPublished by chloerice over 6 years ago
Link
to allow redefinition of prop definitionsPublished by kaelig over 6 years ago
Use Exception lists to draw the merchant’s attention to important information that adds extra context to a task.
ellipsis
prop to ActionList.Item allowing for an ellipsis suffix after the contentpreferredAlignment
prop to Popover allowing it to be aligned to the left, center, or right of its activatorplain-list
mixin to unstyled-list
Published by kaelig over 6 years ago
Summary: this is the first major version of Polaris React since launch. Included in this release are:
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.
The AppProvider
component is now required in your app for Polaris components to function properly.
Wrap your app in the AppProvider
component.
id
propFor 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, <Collapsible id="my-unique-id">
.
The EmbeddedApp
component has been removed. The AppProvider
component now accepts the configuration needed to initialize an embedded app.
Use the AppProvider
component with the apiKey
and shopOrigin
props.
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:
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.
title
propTo be more consistent with our other component APIs, the Tabs
component now uses content
instead of title
.
Change all instances of title
to be content
instead.
Because we require you to manage state for your inputs, we decided to make onChange
required for TextField
to avoid confusion.
Add an onChange
callback to each use of TextField
that is not disabled or readonly.
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.
Use color
prop on all instances of Icon
component.
To avoid conflicts with other styling or frameworks, we’re removing the styling we globally applied to all a
elements.
Use the Link
component instead.
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.
If you’re using VS Code, here are the exact search / replace instructions to follow (toggle “Use Regular Expression”):
\bcolor\(([a-z-]+)\)
with color('$1')
\bcolor\(([a-z-]+), ([a-z-]+)\)
with color('$1', '$2')
\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.
error
prop to ChoiceListTextField
, Select
, and Checkbox
now accept the types string
or ReactElement
for the error
propid
props to more components, and restructured the prop definitions to allow projects to make id
props mandatoryfullWidth
prop to Card.Section
fullHeight
prop to Popover
to override max-heightallowRange
as a property for DatePicker
external
option to the secondaryAction.action
prop on the Banner
component. Thank you to (Andrew Cargill) for the issue (#236)AnnotatedSection
TextField
to be cut offTextField
component to pass through properties to the input childActionList
component to provide section dividers when a title
was not providedSelect
component where placeholder didn’t properly appear on Firefox and appeared disabled on all browsersPublished by kaelig over 6 years ago
Published by kaelig over 6 years ago
Various documentation improvements and fixes
Published by dfmcphee over 6 years ago
Published by dfmcphee over 6 years ago
This will be the last v1.x release outside of critical security fixes.
Published by chloerice over 6 years ago
AnnotatedSection
Published by dfmcphee over 6 years ago
term
in DescriptionList
component to accept React.ReactNode
to allow for more than just string
typePublished by kaelig over 6 years ago
Embarrassingly enough, publishing v1.13.0 failed, meaning this shiny v1.13.1 patch also contains all changes from v1.13.0:
id
prop to Collapsible to be referenced by the aria-controls
attribute of the component triggering the collapsepublishConfig.access
setting in package.json
, in accordance with the new Shipit requirements for public npm packagesPublished by amrocha over 6 years ago
Published by kaelig over 6 years ago
Published by dfmcphee over 6 years ago
Published by dfmcphee over 6 years ago
Published by alyseadlard over 6 years ago
TextField
type with currencyariaControls
, ariaExpanded
prop to ButtonPublished by dleroux over 6 years ago
renderChildren
prop to choice list componentPublished by kaelig almost 7 years ago
Published by dfmcphee almost 7 years ago