v3.4.0

Enhancements

• Moved icons to a separate npm package (#686)
• Added oneHalf and oneThird props to Layout component (#724)
• Added helpText prop to ActionList items (#777)
• Updated Page header layout so actions take up less room on small screens (#707)
• Added alternateTool prop to ResourceList component (#812)
• Updated color of warning status ExceptionList items from dark orange to dark yellow for better differentiation from critical status items (#813)

Bug fixes

• Fixed TextField not showing the correct color while it has focus and an error (#806)
• Fixed ResourceList not rendering BulkActions on initial load when items were selected (#746)
• Fixed the new variant of the Badge component so that it is simpler and easier to read (#751)
• Reverted a change that set the autocomplete property on TextField to nope when it was false (#761)
• Added dismiss button for CalloutCard (#353)
• Removed an extra tab stop from ResourceList.Item and make it unactionable while loading (#745)
• Fixed Checkbox from losing focus when quickly toggled (#717)
• Fixed the console error in the PositionedOverlay test environment (#758)
• Fixed ResourceList not rendering a header after initial load (thanks to @andrewpye for the original issue)
• Fixed TextField not passing step to the input (#829)
• Renamed Option and Group types in Select to work around typedoc oddness (#830)

Documentation

• Modified image paths to fit the style guide’s new Markdown parsing rules (#753)

Development workflow

• Added a slight delay to the Percy screenshot script to give time for components to render fully (#704)
• Refactors to remove cyclical type imports (#759, #754, and #767)

Dependency upgrades

• Upgraded @shopify/polaris-tokens to v2.1.1 (#813)

v3.3.0

Enhancements

• Added support for ResourceList.Item opening a URL in new tab if command or control keys are pressed during click (#690)
• Added primaryAction prop to SkeletonPage (#488)
• Added support for press-and-hold to increment and decrement value in a type="number" TextField (#573) (thanks to @andrewpye for the original issue)
• Forced Avatar to fall back to initials when the image fails to load (#712)

Bug fixes

• Fixed Popover not opening in a small Scrollable container (#658)
• Fixed Page header component to only render actions wrapper when actions are present (#732)
• Fixed ContextualSaveBarProps type not being exported (#734)
• Fixed Avatar proportions when image is not square (#740)

Development workflow

• Upgraded to TypeScript 3.1.6 (#700)
• Moved some inconsistent prop types around for compatibility with the styleguide's Props Explorer (#727)

v3.2.1

Bug fixes

• Fixed ToastProps type not being exported (#722)
• Fixed Shopify App Bridge import issues in AppProvider and enzyme test utilities (#720)

v3.2.0

Enhancements

• Updated TextField to no longer use componentWillReceiveProps(#628)
• Updated EventListener to no longer use componentWillUpdate (#628)
• Allowed Icon to accept a React Node as a source (#635) (thanks to @mbriggs for the original issue)
• Added alignContentFlush prop to ContextualSaveBar (#654)

Bug fixes

• Fixed Pagination from calling onNext and onPrevious while hasNext and hasPrevious are false for key press events (#643)
• Removed min-width from FormLayout Items and applying it only to Items used inside a FormLayout.Group (#650)
• Removed added space in ChoiceList when choice has children on selection but is not selected (#665)
• Fixed errorOverlayText on Dropzone (#671)
• Updated the InlineError text color, the error border-color on form fields and the error Icon color to be the same red. (#676)
• Fixed AppProvider server side rendering support (#696) (thanks @sbstnmsch for the original issue)
• Fixed TextField autocomplete disabling by setting autocomplete="nope" when autoComplete prop is false (#708)

Documentation

• Updated documentation links to match the new style guide link structure (#478)

Development workflow

• yarn run tophat has been removed and its functionality has been moved into the yarn run dev server. Example editing now supports hot-reloading so you don’t need restart the server anymore.

Dependency upgrades

• Bumped @shopify/polaris-tokens to v2.0.0. This is a breaking change for consumers of color design tokens in languages such as JavaScript and Sass (full release notes)

v3.1.1

Bug fixes

• Fixed selector import in DataTable and Cell (#638)

v3.1.0

Enhancements

• Added onScrolledToBottom prop to Scrollable (#568)

Bug fixes

• Fixed Action's selector in Page's Header component (#523)
• Fixed Card spacing in small devices (#608)
• Fixed ResourceList BulkActions that were remaining in fixed position outside the boundingElement (#627)
• Improved readability of Badge with size small and status new for navigation (#633)

3.0.1

Bug fixes

• Fixed Datepicker ranges when start and end dates are similar but have different references (#601)
• Fixed DataTable column visibility calculation in production environments by using a data-polaris-header-cell attribute instead of class-based targeting (#615)
• Fixed Navigation.Item not calling onClick on small screens when onNavigationDismiss is undefined (#603)
• Fixed Autocomplete empty state example Markdown not parsing correctly (#592)
• Fixed TopBar’s UserMenu alignment to be right-aligned when TopBar isn't passed a searchField prop (#597)
• Removed erroneous SCSS file import that rendered Polaris unable to be used in typescript projects without scss support (#609)
• Fixed Popover inconsistent border-radius values (#605)
• TextStyle strong variant now uses a span tag instead of b (#606)
• Fixed non-blocking context errors when using Toast or Loading in an embedded app (#613)

v3.0.0

Breaking changes

• Added padding top and bottom on Card.Section when set to full width
• Fixed Portal rendering by using componentDidMount lifecycle hook as opposed to componentWillMount
• Fixed an issue where clicking a Link without a url in a form would implicitly submit the form. Link can no longer submit forms. Use <Button submit> instead.
• Renamed the Keys enum to align with Shopify naming standards. It is now singular and the properties are in PascalCase. Replace import {Keys} from '@shopify/polaris' with import {Key} from '@shopify/polaris' and change the casing of the properties, e.g. replace Keys.DOWN_ARROW with Key.DownArrow.
• Added !important to display: none in @print-hidden mixin

Embedded apps

• Use the Shopify App Bridge in favor of the EASDK. The EASDK has been removed.
• Added Shopify App Bridge support to new components Toast and Loading
• Added target prop to all actions which get passed to the Shopify App Bridge
• Added new size and message props to Modal which aligns with the Shopify App Bridge API
• Added new resourceType, initialQuery, and showVariants props to ResourcePicker which aligns with the Shopify App Bridge API
• Moved embedded ResourcePicker, Modal, and Page to the main bundle and removed the embedded bundle. Imports from '@shopify/polaris/embedded' will no longer work, use '@shopify/polaris' instead.
• Made the shopOrigin prop on AppProvider optional. It’s now provided by default. If you do provide a shopOrigin it now needs to be given without the 'https://' per the Shopify App Bridge API.
• Updated onSelection prop on ResourcePicker. The shape of the selectPayload data has changed and the product id is now a gid. For example, /9019381572 is now gid://shopify/Product/9019381572. We offer @shopify/admin-graphql-api-utilities to help compose and parse gid from Shopify admin.
• Updated default values for ResourcePicker props to align with the Shopify App Bridge. Set the props showHidden, allowMultiple={false}, and showVariants={false} to get the previous default behavior.
• Updated target prop type related to embedded apps, use 'APP', 'ADMIN_PATH', or 'REMOTE'
• Removed icon prop from Page. Upload your app’s icon in the Shopify Partners dashboard “App setup” section instead.
• Removed title prop from ResourcePicker as setting a title is no longer supported by the Shopify App Bridge
• Removed products prop from ResourcePicker, use resourceType="Product" instead
• Removed collections prop from ResourcePicker, use resourceType="Collection" instead
• Removed width and height props from Modal, use size instead
• Removed debug prop from AppProvider, use Redux DevTools instead. Redux DevTools also has browser extensions.
• Removed the Alert component, use Modal with message prop instead
• Replaced easdk on React context with appBridge. Access it via this.context.polaris.appBridge.
• Removed this.context.easdk.startLoading() and this.context.easdk.stopLoading(), use the Loading component instead
• Removed this.context.easdk.showFlashNotice(), use the Toast component instead
• Removed this.context.easdk.pushState(), use the Shopify App Bridge History action instead. The History action requires passing the appBridge instance which is accessible via this.context.polaris.appBridge.
• Removed this.context.easdk.redirect(), use the Shopify App Bridge Redirect action instead. The Redirect action requires passing the appBridge instance which is accessible via this.context.polaris.appBridge.

License

• Updated the license from MIT to a custom license based on MIT. The new license restricts Polaris usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications.

New components

We’ve released a suite of new components that, when combined, form the application frame of a stand-alone (or non-embedded) Polaris app.

Frame

The frame component, while not visible in the user interface itself, provides the structure for any non-embedded application. It wraps the main elements and houses the following components:

• primary navigation
• top bar
• toast
• loading
• contextual save bar

Navigation

The navigation component is used to display the primary navigation in the sidebar of the frame of any non-embedded application. Navigation includes a list of links that merchants use to move between sections of the application.

TopBar

The top bar component is always visible at the top of a non-embedded application. Its logo and color can be customized using the app provider component to reflect an application’s brand. Merchants can use it to search an application, access menus, and navigate by clicking on the logo.

Toast

The toast component is a non-disruptive message that appears at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action.

Loading

The loading component is used to indicate to merchants that a page is loading or an upload is processing.

ContextualSaveBar

The contextual save bar tells merchants their options once they have made changes to a form on the page. This component is also shown while creating a new object like a product or customer. Merchants can use this component to save or discard their work.

Autocomplete

The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options.

Enhancements

• Changed Form to default the method to post in order to prevent accidental leaking of form details
• Added support for boolean type on Choice error prop
• Changed the esnext folder to contain individual, minimally transpiled JavaScript component files, as well as raw style and image assets
• Added onPortalCreated prop to Portal
• Improved consistency of Badge styling
• Explicitly specifying list-style on List

Bug fixes

• Fixed console error and used new ref syntax in DataTable (thanks to @duythien0912 for the original issue)
• Fixed the ability to upload multiple files even when allowedMultiple prop is false
• Fixed Datatable so it resizes with new content (thanks @andrewpye for the original issue)
• Fixed RangeSlider linear-gradient so it doesn't break the css build (thanks @Ankitjasoliya and @nerfologist for the original issue)
• Fixed issue in Page, where styling wasn't being applied correctly to Page Actions
• Removed unnecessary bindings on the Modal’s onClose prop
• Rearranged primaryFooterAction and secondaryFooterAction in Card (thanks @sivakumar-kailasam for the original issue)

Documentation

• Updated banner guidelines to make it clearer when success banners should be used vs success toasts.
• Added examples for iOS and Android section header
• Added examples for iOS and Android thumbnail
• Added examples for iOS and Android empty state
• Added examples for iOS and Android text field
• Added examples for iOS and Android select
• Added examples for iOS and Android keyboard accessories
• Added examples for iOS and Android collapsible
• Added examples for iOS and Android list
• Clarified placement and usage of Banner
• Added an explanation to Modal about why it can't be closed by clicking outside the modal and should only be closed by clicking X or Cancel

Development workflow

• Moved sub-sub-components within ResourceList into components folders
• Removed empty state from ResourceList if there are no items and loading is true
• Move to use sewing-kit for test running, updating to Jest 23 in the process. This gives us working sourcemaps for code coverage
• Improved accessibility testing checklist
• Updated development node environment to 10.13.0
• Added shopify/jest plugin to eslint config

Open development

• Added contribution guidelines
• Added [tophatting documentation](https://github.com/Shopify/polaris...

2.12.1

Bug fixes

• Fixes type imports in the build

2.12.0

2.12.0 - 2018-10-11

Enhancements

• Removed tip from Popover
• Increased speed of Popover transition from 500ms to 100ms
• Improved text contrast in Badge.
• Added named medium size to Button that renders the same as omiting the size attribute

Bug fixes

• Fixed typo in Collapsible example
• Fixed padding and margins on SkeletonPage to match Page
• Fixed spacing between Page title and metadata

Documentation

• Made ActionList, OptionList and Popover examples active by default so previews are visible without interacting
• Improved the manual accessibility checklist

Development workflow

• Batched Percy snapshots per component