polaris

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)

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
• Updated the project README
• Moved active development to the public repository

Bug fixes

• Fixes type imports in the build

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

Enhancements

• Tab.Item with a url prop now renders an UnstyledLink instead of a Button when displayed in Popover and you can now keyboard navigate the disclosure in Tabs
• Refs can be placed on DropZone.FileUpload
• Use the new context API in ResourceList
• Use the new context API in DropZone
• Update example description in ExceptionList documentation
• Move Modal CloseButton into its own subcomponent, instead of being part of the Header subcomponent. This is an internal implementation detail if you are using the React component. If you are using (s)css and are defining class names manually you will need to update references to Polaris-Modal-Header__CloseButton and Polaris-Modal-Header--withoutTitle to Polaris-Modal-CloseButton and Polaris-Modal-CloseButton--withoutTitle respectively.

Development workflow

• Added d.ts files to test coverage ignore
• Page is no longer self-closing in the playground

Bug fixes

• Fixed Button alignment issue caused by unnecessary icon markup rendering (thanks to @mbaumbach for the original issue)
• Fixed console error and used new ref syntax in DataTable (thanks to @duythien0912 for the original issue)
• Fixed margin of InlineError text to align with the ChoiceList labels
• Replaced hardcoded rem values with globally scalable ones on DataTable’s collapsed shadow, and TextStyle code blocks
• Fixed spacing of numbered List for double digits
• Fixed ProgressBar not showing up in Windows high contrast mode
• Top aligned all cells in DataTable
• Fixed stacking order of loading overlay in ResourceList
• Fixed form inputs in Popover that were disappearing instead of top aligning (thanks to @mbaumbach for the original issue)
• Removed a redundant class on OptionList list items

Documentation

• Made Modal examples show the modal dialog by default
• Changed fitted Tabs to have equal width when enough space is present

New components

withContext

Use withContext to pass consumer context to a component.

withRef

Use withRef with compose to forwardRefs to a component.

Enhancements

• Updated Button to accept a React.ReactNode for its icon prop

Documentation

• Refined accessibility checklist

Bug Fixes

• Added truncation to Tag

Enhancements

• Updated date filter labels in resource list
• Changed placeholder prop in Select to be the default selection
• Added a loading prop to ResourceList that places a spinner overtop items and disables bulk actions

Documentation

• Clarified when and how to use icons in the banner component
• Updated footer help component guidelines to include content instructions for app developers

Bug fixes

• Fixed resource list component to correctly handle inclusive filter keys
• Fixed date field in DateSelector to not render an error when date is added by the date picker and field is blurred
• Fixed pagination from firing keypress events while focus is inside inputs or contenteditables
• Fixed EmptyState horizontally scrolling when fully condensed
• Fixed the bottom margin of elements inside Page being ignored in some browsers
• Added required url prop to breadcrumbs in Page component examples
• Fixed ActionList wrapping text within a Popover
• Fixed Banner spacing when inside of a section
• Fixed Stack so it doesn't add extra spacing between items in Safari

Bug fixes

• Reverted a change that caused the built embedded.js bundle to be way larger than it should be due to broad imports

Enhancements

• Added support for boolean type on Choice error prop

Documentation

• Updated banner guidelines to make it clearer when success banners should be used vs success toasts.
• Updated display text documentation to have a separate example for medium and large display

Bug fixes

• Reverted a change adding Windows high contrast support to popover components that caused items in a popover not to be clickable

Documentation

• Fixed paths to images in the “Attention badge” example

Bug fixes

• Fixed the page component's primary action to support LoadableActions and DisableableActions

Enhancements

• Adjusted spacing for ChoiceChildren in choice list for readability
• Made Card.Header a seperate publically accessible component
• Added support for complex operators in ResourceList component
• Updated the page component's primary action to support Button props.
• Added validation for non-numeric input in a type="number" TextField
• Added support for Windows High Contrast mode in the popover component
• Added circle information icon

Documentation

• Updated banner guidelines to make it clearer when success banners should be used vs success toasts.
• Added documentation for iOS and Android section header

2.6.1 - 2018-08-21

Development workflow

• Moved pa11y and object-hash from dependencies to devDependencies

Bug fixes

• Fixed inconsistent drop zone error styling

2.6.0 - 2018-08-21

Development workflow

• Added a test:coverage script to gather and display test coverage results
• Added Codecov test coverage checks to pull requests
• Added automated a11y testing to CI

Enhancements

• Added support for FilterType.DateSelector in ResourceList component
• Added code as an accepted variation of the text style component to provide support for accessible markup and styling of inline code snippets and code-like text
• Added new border-width SCSS function
• Added support for fullWidth and connectedTop props on ButtonGroup
• Added label prop to DropZone for better accessibility
• Added support for radio buttons to accept a block as a label
• Added a singleColumn prop to the skeleton page component
• Updated the transition on large modals to match the default transition
• Added nextKeys, previousKeys, nextTooltip, and previousTooltip props to the pagination component to support keypress handling and tooltips in pagination buttons.
• Added examples to the layout component documentation for two and three column grid layouts
• Added an export for the Progress type to support downstream typechecking of the badge component progress prop
• Added an iFrameName prop to the modal component to support named iframe children
• Added a ScrollTo subcomponent to the scrollable component to support scrolling to a child node programmatically
• Added support for the button component to accept an array of strings as children
• Changed the primary focus target of an activated popover from the first focusable child to the popover itself
• Added an improved error message when the child of an embedded alert component is not a string(thanks @superwhykz for the original issue)
• Added a minimum width to tab items to improve touch target sizing and account for smaller tab titles
• Added support for additional accessibility attributes to the text field and option list components
• Added support for option list with avatars, icons, and thumbnails when options descriptors have a media property
• Added support for destructive action list items
• Added support for option list options descriptors to accept a block for the label property
• Added $page-max-width variable to capture page calculated max-width value and page-when-not-max-width mixin to trigger when page is resized horizontally
• Added support for select error messages to be optional
• Updated the breadcrumbs component to support the CallbackAction type as a prop(thanks @dylan for the current issue and everyone who identified this.)
• Added support for text field error messages to be optional
• Added a disabled prop to the choice component. Checkbox and radio labels are now styled to reflect their disabled state
• Added support for Windows High Contrast mode in the select, checkbox and radio components

Bug fixes

• Fixed text field resizer rendering when multiline was false
• Fixed modal header condensing
• Fixed tooltip so active prop activates on initial render
• Fixed popover border radius and left and right alignment
• Fixed visibility of the hidden implicit submit button in form (thanks @cgenevier for the original issue)
• Fixed alignment of wrapped empty state actions
• Swapped the import and export icons
• Fixed incorrect data table column count and content skipping in assistive technologies
• Fixed unintended form submittal by action list items enclosed in a form
• Fixed text alignment of multiline option list option text
• Fixed an issue where the stack component would render incorrectly nested items
• Fixed spacing above annotated sections on smaller screens
• Fixed an issue that cause problems for some build tools
• Fixed the word-break of long text in labels and banners on small screens

Documentation

• Added examples for iOS and Android radio buttons
• Added examples for iOS and Android banners
• Added toast component
• Added examples for iOS and Android buttons
• Added examples for iOS and Android button groups
• Added examples for iOS and Android badge
• Added stepper component

New components

InlineError

Use inline errors to describe custom form inputs or form groups when invalid.

Enhancements

• Added weekStartsOn prop to Datepicker

Bug fixes

• Remove stickyManager from app provider props interface

Documentation

• Added iOS and Android examples for the card component

Development workflow

• Renamed yarn start:vrt to yarn tophat and updated the folder name to match
• Improved yarn tophat’s design, and added a /all-components route

Enhancements

• Changed Form to submit a form by default when the Enter key is pressed, and added the prop implicitSubmit to disable this default

Bug fixes

• Fixed text field padding when a prefix or suffix is included

2.3.1 - 2018-07-05

Enhancements

• Removed the min-width of 320px from Resource list

Bug fixes

• Resolve issue with RangeSlider not accepting 0 as a max 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

UI Kit

• Added OptionList component

2.3.0 - 2018-07-03

New components

Option list

Use Option list to present a group of selectable items outside of the context of a form.

Documentation

• Fixed Form examples

Enhancements

• Added prefix and suffix props to RangeSlider for 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

Bug fixes

• 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)

Dependency updates

• Updated @shopify/polaris-tokens, the single source of truth for colors

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

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

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

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