polaris

Deprecations

• Deprecated passing a string representing a "bundled icon" into <Icon source> Pass in an svg component imported from @shopify/polaris-icons instead (#1534).
• Deprecated all usage of the Shopify App Bridge in Polaris React (#1573)

Enhancements

• Made the action prop optional on EmptyState (#1583)
• Prevented Firefox from showing an extra dotted border on focused buttons (#1409)
• Added resolveItemId prop to ResourceList which is used in the new multiselect feature (#1261)
• Added actions prop to <Card.Section> to allow you to easily define header actions in a card section (#1598)
• Added <Card.Subsection> to allow you to further subdivide <Card.Section> in a consistent manner (#1611)
• Removed transition on tag button hover state #1337
• Added textAlign prop to Button (#1576)
• Made Button red when given both the plain and destructive props (#1603)
• Added support for disabled, destructive, and loading actions in Card and Card.Section (#1622)

Bug fixes

• Removed unnecessary border-radius from Modal body (#1584)
• Fixed accessibility issues in DropZone, Form, Modal, Section, Page, Tabs, TextField and TopBar (#1565,#1582).
• Fixed inconsistent width depending on your browser/version in Sheet (#1569)
• Fixed text and other elements from being selected in Safari when dragging the color picker (#1562)
• Fixed Banner title overflowing when set to a single long word (#1553)
• Remove export of CombinedProps and unneccessary export for Class based components (#1592)
• Fixed improper spacing and coloring on a TextField prefix (#1132)
• Fixed ResourcePicker not updating function references for onSelection and onCancel callbacks #1451
• Fixed TextField label being set as the value of the label node, as well as the aria-label aria-labelledby attributes, when only one method will suffice (#1615)
• Fixed accessibility issues for Windows High Contrast mode on Tabs and Popover (#1629)

Documentation

• Updated icon documentation to use imports from polaris-icons (#1561)
• Fixed an accessibility issue in the Collapsible component example (#1591)
• Added accessibility documentation for the RangeSlider component (#1630)
• Added accessibility documentation for the Collapsible component (#1631)
• Added accessibility documentation for the DescriptionList component (#1634)
• Added accessibility documentation for the Form component (#1636)
• Added accessibility documentation for the ExceptionList component (#1635)
• Added accessibility documentation for the KeyboardKey component (#1640)
• Added accessibility documentation for the Tag component (#1647)
• Added accessibility documentation for the Modal component (#1648)

Development workflow

• Made the a11y test that runs in CI fail if it finds any issues (#1564)
• Updated Storybook to v5.1.0-rc.4 (#1616)
• Fixed a visual regression testing issue with the Card component (#1618)
• Updated to sewing-kit v0.85.5 (#1633)

Dependency upgrades

• Upgraded TypeScript dependency to 3.5.1 (#1650)

Code quality

• Enabled the color contrast test in pa11y (#1645)
• Combined jsdocs in Icon for the untrusted prop (#1607)

Enhancements

• Added support for dual values to RangeSlider component (#1436)
• Updated type restrictions for AnnotatedSection to allow its title prop to accept React.ReactNode instead of string (#1431)

Bug fixes

• Fixed an issue where the JavaScript breakpoints incorrectly set the navigation bar collapsed breakpoint (#1475)
• Added a border to Toast messages to make them more visible in Windows high contrast mode (#1469)
• Added box-shadow to the Banner to make it more visible in Windows high contrast mode (#1481)
• Added box-shadow to the Card to make it more visible in Windows high contrast mode (#1524)
• Fixed UI regressions in Navigation component hover and active states (#1551)

Development workflow

• Updated Storybook to v5.1.0-alpha.39, improving component search-ability in the sidebar (#1488)

Dependency upgrades

• Removed runtime dependency on @shopify/images as we never needed it at runtime (#1474)
• Removed @shopify/react-utilities and replaced some of the functionality with @shopify/css-utilities or by moving the utilities into Polaris itself (#1473)

This release fixes an issue introduced in v3.14.0 that caused the esnext build not to succeed resulting in build errors for consumers (#1466)

Enhancements

• Enhanced NavigationItem's color accessibility for active, focus, hover and Selected states (1304)
• Added align prop to TextField (#1428)
• Added clearButton prop to TextField (#1226)

Bug fixes

• Fixed Checkbox from improperly toggling when disabled (#1467)
• Fixed Popover fade-in flutter on iOS by switching Transition component for CSSTransition (#1400)
• Improved the visibility of focus styles for the Link component. (#1425)

Documentation

• Updated accessibility testing documentation (#1449)
• Added guidelines for tertiary actions in modals to Modal component documentation (#1336)

Development workflow

• Updated the a11y shitlist and re-enabled the pa11y job in CI. The job always passes for now, as a way for us to judge whether it is stable and can be made a required check. (#1456)

Code quality

• Simplified logic in Checkbox component (#1453)

⚠️ This release contains an issue that caused the esnext build to fail, resulting in errors for consumers of this particular bundle (fixed in 3.15.0).

New components

• Added the Sheetcomponent (#1250)

Enhancements

• Added translations for all supported locales (#1358)
• Improved the performance of ResourceList (#1313)
• Added withinContentContainer context to Navigation (#1393)
• Added support forTooltip content to wrap nonbreaking strings #1395

Bug fixes

• Removed window call on server executed code #1427
• Fixed onClick from firing three times when using the enter key on a ResourceList item (#1188)
• Resolved console [Intervention] errors for touch interactions on ColorPicker (#1414)
• Fixed page scrolling while interacting with the color slider (#1414)
• Applied font-family to button elements which were being overridden by User Agent Stylesheet (#1397)
• Fixed Checkbox being toggled when disabled (#1369)
• Fixed DropZone.FileUpload from incorrectly displaying action hint and title when the default is used and removed (#1233)
• Fixed ResourceList.Item interaction states from being incorrectly applied (#1312
• Fixed selected state for date picker in Windows high contrast mode (#1342)
• Fixed accessibility of skeleton components for Windows high contrast mode (#1341)
• Fixed Loading visibility in Windows high contrast mode (#1389)
• Fixed the position calculation of the PositionedOverlay component after scroll (#1382)
• Fixed styling issue for Pagination when used with Tooltip (#1277)
• Fixed certain children of a TextContainer having no top margin (#1357)
• Added border to Tooltip in Windows high contrast mode (#1405)
• Fixed Navigation.Section rollup collapsing when Navigation.Item subNavigationItems expand (#1417)

Documentation

• Updated Link accessibility documentation for the external prop to reflect new behavior (#1347)
• Added accessibility documentation for VisuallyHidden (#1348)
• Added accessibility documentation for TextStyle (#1350)
• Added accessibility guidance for Heading and Subheading (#1351)
• Added accessibility documentation for List and Stack (#1353)
• Added accessibility guidance for DisplayText (#1354)
• Added guidance for updating component documentation and tophatting style guide changes (#1362)
• Added accessibility documentation and guidance for ActionList and OptionList (#1365)
• Added accessibility documentation for Card and CalloutCard (#1366)
• Added accessibility documentation for Badge (#1364)
• Added accessibility documentation for Icon (#1404)
• Added accessibility documentation for Popover (#1408)
• Fixed content example for ContextualSaveBar guidelines (#1423)

Dependency upgrades

• Updated most devDependencies (#1327)
• Bumped @shopify/react-utilites to remove a transitive dependency on core-js (#1343)
• Updated App Bridge to version 1.3.0 (#1349)
• Updated typescript to 3.2.4 (#1388)
• Updated sewing-kit to 0.83.1 and babel-preset-shopify to ^18.1.0 (#1344)

Code quality

• Updated Dropzone.FileUpload to no longer use componentWillReceiveProps and componentWillMount (#1233)
• Removed a window.open implementation error in ResourceList.Item (#1294)

Deprecations

• Deprecated Navigation Item’s iconBody prop. Pass a string into the icon prop instead. (#1299)

Enhancements

• Added an onChange handler to CheckableButton (#1326)
• Labelled now wraps its content, no longer causing a label + action to get unreasonably squished (#1309)
• Updated polaris-tokens from 2.3.0 to 2.5.0 and converted all use of duration values (#1268)
• More consistent use of text-breakword mixin (#1306)
• Added an icon and screen reader hint when Link opens a new tab (#1247)
• Updated open styleguide pr to create multiple pull requests to update polaris-react across multiple repos (#1069)
• Updated the pull request creation to retry when it fails (#1069)
• Exported overlay and layer data attributes for use in consumer components (#1266)
• Added new frame-with-nav-max-width variable and matching frame-with-nav-when-not-max-width mixin (#1311)
• Updated Resizer to schedule handleHeightCheck to run in next animation frame (#1301)

Bug fixes

• Fixed ResourceList actions from show at incorrect breakpoints or while in select mode (#1333)
• Fixed Search overlay stretching below the viewport (#1260)
• Added onChange and value to select AppProvider examples to remove console errors (#1320)
• Fixed promoted bulk actions in ResourceList not properly disabling (#1317) (thanks @jineshshah36 for the issue report)
• Fixed ResourceList header from displaying when EmptySearchResult exists (#1286)
• Stopped passing the polaris context into the div rendered by Scrollable (#1271)
• Fixed clickable area on sortable column headers on DataTable (#1273)

Development workflow

• Upgraded Storybook to v5 (#1140)

Dependency upgrades

• Remove core-js (#1328)
• Upgraded Polaris icons to include the full icon set (#1284)

Code quality

• Migrated the refs in DropZone to use the new createRef API (#1063)
• Updated ResourceList to no longer use componentWillReceiveProps(#1235)
• Updated Tabs to no longer use componentWillReceiveProps(#1221)
• Removed an unneeded media query from Modal's Header component (#1272)
• Replaced all instances where we pass a string representing a bundled icon into Button. Prefer passing in the React Component from @shopify/polaris-icons (#1297)

Enhancements

• Added a public focus method on Banner (#1219)
• Added an onScrollToBottom prop to Popover.Pane (#1248)
• Added a placeholder prop to FilterControl (#1257)
• Added support for setting string values on the TextField autoComplete prop (#1259)

Bug fixes

• Fixed disabled states while loading for ResourceList (#1237)
• Fixed Checkbox from losing focus and not receiving some modified events(#1112)
• Added translation for the cancel button on the ResourceList BulkActions (#1243)
• Fixed the Autocomplete onLoadMoreResults prop not being called on scrolling to the end of the option list (#1249)

Documentation

• Removed button group joined to the bottom of a component example (#1267)

Enhancements

• Updated Navigation badge prop to accept a react node (#1142)
• Changed max width on Search to 694px so that it is perfectly centered in the top bar (#1107)
• Added action prop to Toast (#919)
• Remove all usage of @shopify/javascript-utilities/decorators, namely autobind, debounce, and memoize (#1148)
• Added Empty State footerContent prop (#1200)
• Added viewport condition to TopBar to enlarge the contextControl wrapper on wider screens (#1231)

Bug fixes

• Fixed selectMode on ResourceList not toggling when items are selected programmatically (#1224)
• Fixed unnecessary height on TextField due to unhandled carriage returns (#901)
• Ensured server side rendering matches client side rendering for embedded app components (#976)
• Fixed rendering of the spinner on TextField when setting to readOnly (#1118)
• Fixed webpack example that does not compile (#1189)

Documentation

• Added accessibility documentation for Checkbox, RadioButton, and ChoiceList (#1145)

Dependency upgrades

• Regenerated the yarn.lock file in the browserify example to resolve security vulnerabilities (#1202)
• Updated browserify example dependencies and dev dependencies (#1191)
• Updated webpack example dependencies and dev dependencies (#1189)

Code quality

• Replaced all occurrences of _.merge with a custom merge function (#1018)
• Replaced all occurrences of _.pick with a custom pick function (#1020)
• Deleted the icons index file that would re-export icons, and replaced it with direct imports (#1195)
• Replaces all instances where we pass a string representing a bundled icon into Icon. Prefer passing in the React Component from @shopify/polaris-icons (#1196)

Enhancements

• Added Polaris version information tracking in App Bridge actions (#1087)
• Re-added the navigation’s border-right (#1096)
• Added onScrolledToBottom prop to Modal (#1117)
• Updated Navigation.Item to use Icon when iconBody prop is passed in. Renders these icons in an img tag now. (#1094)
• Added focus state outlines to be visible when using Windows High Contrast Mode for Button (#1101)

Bug fixes

• Reverted a change that constrained DropZone height based on inherited wrapper height #1129
• Fixed missing rounded corners on Tag button states (#1078)
• Removed reference to window.Polaris, which in some cases could be undefined (#1104)
• Added padding and margin to subdued sections for proper spacing between the header and footer (#1082)
• Removed left margin from vertical Stack to prevent overflow (#1024)
• Fixed the size differences between SkeletonThumbnail and Thumbnail (#1141) (thanks @mbaumbach for the issue report)
• Refactored ComboBox tests that were not running (#1137)

Documentation

• Updated related component documentation for Page, PageActions, and Pagination (#1103)
• Improved Modal documentation for properties only available in a stand-alone app context (#1065)
• Added accessibility documentation about Banner (#1071)
• Added accessibility documentation for InlineError (#1073)
• Added accessibility documentation for Loading (#1075)
• Fixed documentation about the ariaPressed prop for Button (#1097)
• Fixed examples using the selected prop for Autocomplete (#1053)

Development workflow

• Added viewport meta tag to Storybook frame (#1026)

Code quality

• Removed lodash decorators and replace all occurrences of _.throttle with debounce (#1009)
• Removed all occurrences of _.replace (#1012)
• Added lodash to create-react-app example (#1010)
• Updated create-react-app example dependencies (#1010)
• Replaced all occurrences of _.capitalize with a custom capitalize function (#1015)
• Replaced all occurrences of _.isObject with a custom isObject function (#1011)
• Replaced all occurrences of _.get with a custom get function (#1013)
• Moved icons specific to Banner, DropZone, and ResourceList to @shopify/polaris-icons (#1042)
• Updated spinner component to use the Image component instead of an SVG tag to render (#1042)

Deprecations

• Deprecated passing a React Element into the Icon component in favor of passing a React Component (#1042)
• Deprecated the untrusted prop in the Icon component (#1042)

Enhancements

• Used base-tight spacing value instead of rem(12px) (#1044)

Bug fixes

• Fixed the focused prop on TextField so it sets the focus state (#990)
• Resolved an unsupported React.Fragment syntax (#1080)
• Constrained DropZone height based on inherited wrapper height #908
• Reverted a change that adjusted padding in the Card component introduced in (#962)

New components

• SkeletonThumbnail for representing thumbnails in loading state

Enhancements

• Updates TopBar.UserMenu interaction states styling (#1006)
• Added download prop to Button and UnstyledLink components that enables setting the download attribute (#1027)
• Added support for internationalization of month and week names to DatePicker (#1005)
• Added untrusted prop to Icon to render SVG strings in an img tag (#926)
• Added a data-href to ResourceList.Items that have a url prop (#1054)

Bug fixes

• Fixed type="number" TextField to prevent conditions where press-and-hold could increment or decrement infinitely (#1029)
• Fixed the top border of DataTable overlapping its container’s border (#975)
• Fixed the DataTable sort direction not reversing on second sort of the initially sorted column (#918) (thanks @tabrez96 for the issue report)
• Changed the offset from 5px to 4px in Tooltip between activator and message to be consistent with Popover (#1019)
• Fixed Card header not showing when title empty or not set (#1031)
• Fixed an issue on Chrome when you use a TextField inside Collapsible which is inside a scrollable element, the text disappeared if you focused a fully hidden TextField (#1047)

Documentation

• Added accessibility documentation for the button and link components (#924)
• Added accessibility recommendations for the text field and autocomplete components (#968)

Development workflow

• Added a test that builds Polaris for web and polaris-styleguide. This test takes ~20 minutes to run so it’s only configured to run for master (931)
• Enabled no-vague-titles eslint rule (#1051)

Bug fixes

• Moved character counter to bottom of multiline text input (#992)
• Aligned TopBar search input and results with page content (#1008)

Documentation

• Added all props example of ResourceList in the style guide (#978)

Enhancements

• Removed TopBar logo background (#957)
• Updated TopBar search results width to adapt to search input and added a minimum width (#969)
• Updated Card.Section to accept React.ReactNode as title (#781)
• Added contextControl prop to TopBar and Navigation (#966)

Bug fixes

• Fixed Collapsible to use overflow: visible; once fully open (#951)
• Fixed the DataTable sort direction not reversing on second sort of the initially sorted column (#918) (thanks @tabrez96 for the issue report)
• Fixed TextField when passing null to value (#964) (thanks @mbaumbach for the original issue)
• Changed the default value for showHidden prop on ResourcePicker for backward compatibility with legacy EASDK (#981)
• Adjusted top and bottom padding to the header, footer and sections in Card to add space between action buttons in the header and footer and the card sections. (#962)

Documentation

• Added accessibility documentation for the account connection and setting toggle components (#970)
• Added accessibility documentation for the avatar component (#973)
• Updated docs about App Bridge usage in AppProvider (#945)
• Added all props example to DataTable in the style guide (#1003)

Development workflow

• Fixed links to Polaris component pages in story descriptions (#933)

Dependency upgrades

• Upgraded to @shopify/polaris-icons v2.0.0 (#982)

Code quality

• Updated import styles from './foo.scss'; from non-standard import * as styles from './foo.scss'; when importing scss files (#929)
• Removed internal ellipsis icon as it is deprecated, and horizontalDots should be used instead (#974)

Enhancements

• TextField accepts a showCharacterCount prop to enable the display of character count (#709)

Bug fixes

• Fixed vertical misalignment in Banner.Header(#870)
• Removed a duplicate activatorWrapper in Popover when destructuring props (#916)
• Fixed Banner secondaryAction content wrapping in Firefox (#719)
• Added onKeyPress, onKeyDown, and onKeyUp to Button (#860)
• Added monochrome prop to Button and Link component (#821)
• Updated Frame layout and made TopBar.UserMenu visible on mobile (#852)
• Added a forceRender prop to Page to not delegate to the app bridge TitleBar action (#695)
• Changed Tabs example to contain children so the Panel renders for accessibility (#893)
• Fixed timezone not being accounted for in ResourceList date filter control (#710)
• Removed unnecessary tooltip text in the TopBar component (#859)

Documentation

• Added Stack.Item properties and description to style guide’s (#772)
• Added accessibility documentation to the resource list and data table components (#927)
• Added accessibility recommendations for the caption component (#928)

Development workflow

• Improved build speed by adjusting our rollup workflow (#912) and not optimizing svgs in the node_modules folder (#920)
• Fixed an issue where deployments would use an old version of Yarn, and open a pull request to polaris-styleguide with thousands of deleted integrity hashes in yarn.lock (#856)

Dependency upgrades

• Updated App Bridge to version 1.0.3 (#844)

Deprecations

• Deprecated Navigation.UserMenu in favor of TopBar.UserMenu (#849)
• Deprecated Navigation’s userMenu prop (#930)

Enhancements

• Update build toolchain to use Babel v7, PostCSS v7 and Rollup v1. Update our build targets match our supported browsers, leading to a reduction in bundle size (#837)

Bug fixes

• Ensure disabled Button components with a url prop output valid HTML (#773)
• Fixed DropZone which was unable to add a duplicate file back to back or add a file again once removed #782. Thank you @jzsplk for the contribution #425 and @vladucu for the clear example.
• Added a fallback to the safeAreaFor sass mixin to handle browsers that don't support env and constant (#881)

Documentation

• Added deprecation guidelines (#853)

Development workflow

• Replaced our home-grown playground with Storybook (still accessed through yarn dev) (#768)
• Removed our usage of babel-node for build scripts - use plain node instead (#836)
• Ensure CSS builds are reproducible (#869)

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)

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)

Bug fixes

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

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)

Bug fixes

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

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)