All notable changes to this project will be documented in this file.
The format is based on these versioning and changelog guidelines.
- Added
weekStartsOn
prop to Datepicker
- Remove stickyManager from app provider props interface
- Added iOS and Android examples for the card component
- Renamed
yarn start:vrt
toyarn tophat
and updated the folder name to match - Improved
yarn tophat
’s design, and added a/all-components
route
- Changed Form to submit a form by default when the Enter key is pressed, and added the prop
implicitSubmit
to disable this default
- Fixed text field padding when a prefix or suffix is included
- Removed the min-width of 320px from Resource list
- Resolve issue with RangeSlider not accepting
0
as amax
value - Slightly reduce RangeSlider's
prefix/suffix
spacing - 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
Use Option list to present a group of selectable items outside of the context of a form.
- Fixed
Form
examples
- Added
prefix
andsuffix
props toRangeSlider
for better layout control - Added testing documentation and examples in AppProvider
- Performance: optimized avatar SVG files
- Updated
yarn run 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)
- Updated
@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
- Added
text-breakword
mixin 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
- Added support for cards to accept a block for a title
- Added an intermediate prop typing for
Link
to allow redefinition of prop definitions
- 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
- DropZone: fixed a bug where it would kick into small-size too soon
- Various content and markdown fixes
Use Exception lists to draw the merchant’s attention to important information that adds extra context to a task.
- 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 tounstyled-list
- 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
- Fixed ResourceList reverse tabbing focus interaction on Action Buttons
- Fixed padding in the case where a Resource list had no filters
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.
The AppProvider
component is now required in your app for Polaris components to function properly.
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.
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:
- 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.
To 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”):
- replace
\bcolor\(([a-z-]+)\)
withcolor('$1')
- replace
\bcolor\(([a-z-]+), ([a-z-]+)\)
withcolor('$1', '$2')
- replace
\bcolor\(([a-z-]+), ([a-z-]+), (.*)\)
withcolor('$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.
- Added
error
prop to ChoiceList TextField
,Select
, andCheckbox
now accept the typesstring
orReactElement
for theerror
prop- Added optional
id
props to more components, and restructured the prop definitions to allow projects to makeid
props mandatory - Added
fullWidth
prop toCard.Section
- Added
fullHeight
prop toPopover
to override max-height - Added
allowRange
as a property forDatePicker
- Added the
external
option to thesecondaryAction.action
prop on theBanner
component. Thank you to (Andrew Cargill) for the issue (#236)
- 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 atitle
was not provided - Fixed an issue in the
Select
component where placeholder didn’t properly appear on Firefox and appeared disabled on all browsers
This will be the last v1.x release outside of critical security 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
- Fixing an error with the release process
- Changed
term
inDescriptionList
component to acceptReact.ReactNode
to allow for more than juststring
type
- Added missing
publishConfig.access
setting inpackage.json
, in accordance with the new Shipit requirements for public npm packages
- Added an
id
prop to Collapsible to be referenced by thearia-controls
attribute of the component triggering the collapse
- Fixed external prop not working within ActionList component
- Fixed a syntax error in one of the Card component examples (thanks meecrobe for the original issue)
- Enhanced Avatar to work better when provided non-square images
- Move documentation file so it’s picked up by the styleguide
- Fixed disclosure centering on the tab component
- Fixed an issue where a style void would appear between breakpoints at high text zoom levels
- Removed purpose section from component READMEs
- Added Embedded page under the Embedded section
- Added “Using embedded components” section
- Added screenshots to the embedded components
- Clarified usage of card header and footer actions
- Moving property descriptions out of READMEs and into source files
- Fixed server-side environments
- Updated component examples that use state to use an es6 class
- Fixed TextField overflow issues when inside Scrollable
- Fixed Select focus state bug occuring in Firefox
- Fixed vertical alignment of text within full width variant of the button component
- Changed Checkbox label to allow string or React.ReactNode
- Update
TextField
type with currency - Added
ariaControls
,ariaExpanded
prop to Button - Updated the base red color to improve contrast
- Added a notification icon to the bundled icons available to use in the icon component’s source prop
- Exposed Status from the Banner component
- Added
titleHidden
prop to Page
- Clarified intended usage for EmptyState
- Added version number to source
- Changed Action to Disableable Action in Card
- Added
renderChildren
prop to choice list component
- Fixed an issue with footer help links not expanding to full-width on mobile devices
- Added breadcrumbs to SkeletonPage
- Added max-width and auto margin to EmptyState
- Fixed outline button disabled state styles
- Fixed Tag so the onRemove function is not imporperly called (thanks chaddjohnson for the original issue )
- Fixed border on inputs disabled state
- Fixed an issue in TextInput, when you increment or decrement with a float value, and the digits after the decimal point where wrong
- Added top alignment to FormLayout.Group #876
- Fixed capitalization of prop names in Pagination component’s documentation (thanks donnguyen for the original issue)
- Exposed Option from the Select component
- Fixed the public repository’s build (which was missing the new CircleCI configuration files)
- Fixed CSS only checkbox (thanks daddy88 for the original issue)
-
Restored the correct
latest
version to the CDN -
Fixed rgbToHsb function when red is the largest number and added tests (thanks emcmanus for the original issue)
-
Fixed an issue where a hard-coded path would cause the build to fail on Windows (thanks to @Invader444 for the original issue and pull request)
-
Added
onClick
toUnstyledLink
-
Added tests to
Link
-
Added tests for ColorPicker color utilities
- Ammending changelog
- Added
onActionAnyItem
prop to action list and used to close pageactionGroups
on click or keypress of any item - Added
content
prop to tabs and deprecated use oftitle
- Added text container component
- Added
idForItem
prop to resource list - Added
fullWidth
prop to layout section - Added
indeterminate
as option for checkboxchecked
prop value - Added
singleColumn
prop to page - Added
focused
prop to text field 813
- Fixed positioned overlay not responding to scrollable container events
- Fixed first focusable item focus in popovers
- Fixed typos in the select component documentation (thanks mattchidley for the original issue)
- Moved react-transition-group from a dev dependency to a dependency
- Fixed stack not returning children
- Added missing yarn config file which was causing the build to fail
- Updated README to consistently use contractions (thanks stefanmiodrag for the original pull request)
- Improved example description for Layout component
- Updated Spinner documentation
- Improved component purpose documentation across components
- Improved documentation for Text style component
- Added support for React 16
- Added an option to show or hide unpublished products from the resource picker
- Changed Popover component to use
react-transition-group
instead of our deprecated custom version in@shopify/react-utilities
- Added new Progress bar component
- Changed today’s date to be tabbable and clearly indicated in DatePicker
- Added support for disabled choices in Choice list component
- Added support for disabled secondary Page actions
- Changed TextField and Select to now focus on clicking only within the area from the input to the end of its label text
- Fixed Layout component example description
- Fixed SkeletonPage header appearing in embedded apps (thanks rkbhochalya for the original issue))
- Fixed border-radius on Action list component in Chrome
- Added SkeletonPage, SkeletonBodyText and SkeletonDisplayText components
- Added Spinner component
- Added hint prop to Scrollable and use in Popover
- Updated Button component to use new Spinner component
- Added external link support for Page secondaryActions
- Enabled the primaryAction of PageActions to be loading
- Stack now supports non-wrapping layouts on small screens
- Updated text field min and max documentation
- Breadcrumbs now accept a callback through onAction (thanks arypbatista for the original issue)
- Fixed issue with embedded app breadcrumb linking to Shopify settings page (thanks cargix1 for the original issue)
- Fixed Avatar to display image and initials simultaneously
- Fixed various links to embedded components
- Fixed left and right ends of TextField not responding to clicks
- RadioButton & Checkbox now focus on clicking only within the area from the input to the end of its label text
- Fixed plain and fullWidth Button alignment
- Add a minor delay to tooltip display
- Documented disabled prop for Checkbox and RadioButton (thanks LeoAref for the original issue)
- Documented progress prop for Badge (thanks sp4cecat for the original issue)
- Added loading prop to Button (thanks bakura10 for the original issue)
- Documented complex Select option (thanks sp4cecat for the original issue)
- Documented TextStyle component
- Improved avatar typography spacing
- Added subtract icon
- Improved acessibility for Pagination
- Fixed failed dependency installation for unauthenticated GitHub users (thanks mikeyhew for the original issue)
- Fixed Page header spacing
- Fixed TextField focus ring transition
- Fixed Popover not resizing on content updates
- Fixes alignment of page action links
- Fixed disabled buttons when using local class names
- Fixed Scrollable resize listener not autobinding
- Updated scrollable component to remember scroll position on re-render
- Added checkmark icon to the
Icon
component - Added an example for a disabled
TextField
- Fixed typo in
Icon
code example
Various documentation fixes.
- Updated import, export, and view icons
- Improved documentation of various components
- Improved how ActionList handles images and groups
- Exposed PopoverCloseSource from Popover component
- Fixed PageActions spacing in IE11
- Fixed ID inconsistency on TextFields
- Fixed spacing on Page component with no header (thanks bakura10 for the original issue)
- Fixed disabled state on primary and destructive buttons
- Upgraded javascript-utilities to the latest version
- Fixed classnames in built *.scss files
- Fixed broken link in description list README
- Added an
esnext
build (allows production builds to perform class/method tree shaking) - Changed KeyboardKey component to use
kbd
tag - Added publishing
docs
folder to npm package - Added
fullWidth
option to Popover component
- Updated Static HTML page examples to correct markup (thanks bartcoppens for the original issue)
- Hide increment and decrement buttons on number input when disabled (thanks kguller for the original issue)
- Fixed link to product content documentation
- Fixed documented type for error prop on Checkbox component
- Fixed Popover reopening when clicking around during transition
- Fixed Popover resizing on content updates
- Fixed vertical alignment of Button content
- Added Sketch color palette file
- Fixed a repo issue that caused the public repo release not to happen
- Added helpText to ChoiceList choices (thanks cgenevier for the original issue)
- Added save icon
- Added accessibilityLabel to Tabs
- Updated icons for Banner
- Improved Page component by fixing up spacing, addin a prop to show a separator below the page title, and changing the secondary actions to roll up into a dropdown menu on small screens
- Improved default stacking behavior for Tooltip and Popover (thanks Taphood for the original issue)
- Added extraTight spacing option to Stack
- Use default subheading type styles for ActionList
- Improved large Button styles
- Updated font-weight for text emphasis (thanks bakura10 for the original issue)
- Removed the focus state for Banner on click
- Fixed disabled Pagination button looking active
- Fixed alignment on Button
- Fixed min-width on TextField (thanks Asa for the original issue)
- Removed the border-top on EmptyState (thanks Alex for the original issue #408)
- Fixed Select placeholder value warnings (thanks cgenevier for the original issue)
- Fixed disabled text on iOS
- Fixed type for onChange event (thanks Michaël for the original issue
- Added color palette page to “Getting started”
- Button typography updated. More changes to come soon.
- Changed typeface from
San Francisco UI
toSan Francisco Pro
. You will need to download the updated typeface here. https://developer.apple.com/fonts/ - Updated to Sketch version 45.2
- Updated layer styles and fonts styles to take advantage of Sketch’s new organizational features.
- Fixed disabled Button documentation (thanks Michael for the original issue)
- Fixed project URL in CircleCI badge
- Fixed Stack documentation (thanks Marco for the original issue )
- Added embedded Alert documentation and updated other embedded documentation
- Updated React TypeScript definitions
- Updated EASDK metadata structure for generic interfaces
- Removed postinstall hook
- Fixed a repo issue that caused the public repo release not to happen
- Added automatic inference of the
target
property of EASDK buttons inPage
’sprimaryAction
andsecondaryActions
based on their URL (thanks Dmitriy for the original issue) - Added automatic inference of the
target
property of EASDK breadcrumbs inPage
'sbreadcrumbs
prop based on the URL Select
option descriptors now accept adiabled
attribute to disabled the generatedoption
(thanks to Hafiz for the original issue)easdk.showFlashNotice
now accepts an optional options object as its second parameter. Passing{error: true}
will cause the flash to appear as an error, matching the behaviour ofShopifyApp.flashError
Checkbox
,RadioButton
,ChoiceList
,Select
, andTextField
now pass the ID of the changed input as the second argument to theironChange
callback (thanks to Miika for the original issue)Popover
now respects thez-index
of the activator if it exists- When putting content as children of
Tabs
, the default panel that is generated now respects thepanelID
of the selected tab, and uses a sensible default based on the tab’sid
if nopanelID
exists - When selecting a tab in
Tabs
, the matching panel is now focused by default easdk
methods are bound to the object so they can be freely passed as callbacks
- Avatar now renders as a
span
instead of adiv
- Fixed contents in
Layout.AnnotatedSection
breaking out of their container (thanks Andrew for the original issue) - Fixed spacing above a primary action in
CalloutCard
when there is no secondary action - Aria attributes are now on the actionable elements of
Tabs
instead of in the list items - Exposed
Panel
asTabs.Panel
instead ofTabs.panel
- Fixed the alignment of
prefix
andsuffix
content ofTextField
(thanks bdillon3 for the original issue) - Fixed the disabled text color in
TextField
Checkbox
s andRadioButton
s no longer generate invalid HTML in their labels (thanks Ernesto for the original issue)Tabs
no longer steals focus from contained elements (thanks Alex for the original issue)
- Reduced horizontal padding on
Breadcrumbs
- Updated icon and internal padding of
FooterHelp
- Updated the
EmptyState
layout and typographic styles
- Fixed the code examples o n the embedded app documentation
- Added a simple embedded app example
- Renamed the “Tables and lists” category to “Lists”
- A variety of other documentation updates (thanks to Pablo, Asa, and David for raising issues)
- Updated all dependencies
- Added a script to automatically match the published version number to the one referenced in the README
- Added the correct viewport tag to the Playground
- Hid deprecation errors during tests
- Fixed an issue where the embedded components would not reload the page within the Shopify admin (thanks Rich for the original issue)
- Fixed the
spacing="none"
variation onStack
not working correctly, and added the missingextraLarge
enum value forspacing
- Fixed
Banner
’sonDismiss
callback not being called when the dismiss button was clicked (thanks to Taylor for the original issue)
- Updated Badge text colors
- Updated line height for the small
DisplayText
variation - Updated the default icon for error
Banner
s (thanks to Michael for the original issue)
- Added app examples (thanks to lukepxu for the original issue)
- Removed references to the Graphik typeface (thanks to Adam for the original issue)
- Left-aligned button text for better resizing
- Added Messenger link to navigation to better communicate that the channel nav collapses after 3 items
- Fixed alignment of table headers
- Minor updates to Dataviz and Reports examples
- Added indicators to Home notifications
- Synchronized component documentation with the style guide
- Fixed an issue that prevented the public CHANGELOG from being generated correctly
- Added a hot-reloading Playground to easily try out different components
- Removed the references to Babel presets from
package.json
(thanks to Massimo for digging into this with us) - Removed the
@import
statements at the top of source Sass files - Updated TSLint and related linting dependencies
- Fixed an issue where subcomponents with variations would use a single
-
instead of--
(thanks johnsonab for the original issue) - Fixed a missing typing dependency and a missing
embedded
types entry point that were causing issues using this package with TypeScript (thanks to Rich for the original issues) - Fixed an issue where the anchor tag for
ResourceList.Item
s would not span the full width of the item (thanks to Steven for the original issue)
- Started using the
prop-types
package instead of gettingPropTypes
fromreact
, as the latter is deprecated as of React 15.5.0
- Corrected the name of
documentation/Embeddded apps.md
todocumentation/Embedded apps.md
(thanks to Chris for the original issue) - Fixed the
ColorPicker
documentation to show valid values forsaturation
,brightness
, andalpha
(thanks to Allan for the original issue)
- Added a description to
package.json
- Added license to
package.json
and to the root of the repo (thanks to Daniel for the original issue) - Fixed an issue where the Webpack example would complain about a missing dependency (thanks to Rafael for the original issue)
- Switch repo to public access
- Initial release