Skip to content

Latest commit

 

History

History
2129 lines (1427 loc) · 130 KB

CHANGELOG.md

File metadata and controls

2129 lines (1427 loc) · 130 KB
Raw

Changelog

All notable changes to this project will be documented in this file.

The format is based on these versioning and changelog guidelines.

4.2.1 - 2019-09-10

Bug fixes

  • Fixed TypeScript not generating correct types for functional components that have subcomponents (#2111)

4.2.0 - 2019-09-09

Enhancements

  • Added support for min/max dates in TextField by setting a string on min and max props (#1991)
  • Made the title prop on Page optional, supporting continued use of Page for structure in apps using the App Bridge React TitleBar (#2082)

Bug fixes

  • Fixed inconsistent padding of sections in Modal (#2072)
  • Fixed animation for Modal when being rendered asynchronously (#2076)
  • Fixed item content from overflowing past the container in Stack (#2071)
  • Fixed Dropzone hover, disabled, and focus states (#1994)
  • Added name prop to ResourceItem to fix accessibility labels (#2077)
  • Fixed misalignment of ResourceItem actions (#2051)

Documentation

  • Added Android/iOS images for Plain destructive button (#2081)
  • Removed mobile mention from right-aligned text component guidelines (#2081)
  • Added mobile example images error state of Single Choice List (#2007)

Dependency upgrades

  • Updated Prettier to v1.18.2 (#2070)

Development workflow

  • Added a displayName to the function generated by the withAppProvider HoC for a better devtools experience (#2093)

Code quality

  • Migrated ActionMenu.RollupAction, Autocomplete, Card, EmptySearchResult, Form, SkeletonPage and TopBar to use hooks instead of withAppProvider (#2065)
  • Added useUniqueId hook that can be used to get a unique id that remains consistent between rerenders and updated components to use it where appropriate (#2079)

4.1.0 - 2019-09-03

Enhancements

  • Moved ResourceItem to its own component (#1774)
  • Updated ResourceList sort to show an inline label (#1774)
  • Removed the tap-highlight-color for Buttons (#1545)

Bug fixes

  • Removed Tooltip on disabled Pagination buttons (#1963)
  • Fixed accessibility labels on ResourceList.Item persistent action disclosure icon (#1973)
  • Fixed accessibility issue with Autocomplete where keyboard navigation of options was laggy and skipped options (#1887)
  • Fixed bug where Autocomplete was bubbling up the Enter key event unexpectedly (#1887)
  • Fixed ContextualSaveBar actions overflowing on small screens (#1967)
  • Fixed Tabs rollup automatically opening from keyboard navigation of tab list (#1933)

Documentation

  • Updated example section to include new examples and remove old ones (#1979)
  • Updated example for the ResourceList.Item persistent actions accessibility labels (#1973)
  • Removed FilterControl documentation and case studies from ResourceList documentation (#1774)
  • Updated ResourceList examples to use Filters (#1774)
  • Added an example to Filters showing the use of children (#1774)
  • Added guidance for making animated gifs in PRs and issues more accessibility-friendly (#1998)
  • Added RadioButton guidance to make one option selected by default (#2005)

Development workflow

  • Update subcomponents to use named exports for components and better names props exports (#2058)

Code quality

  • Removed mocks in various tests suites that are now redundant (#1978)

Deprecations

  • Deprecated FilterControl. Use Filters instead (#1774)

4.0.0 - 2019-08-28

For instructions on updating from v3 to v4, see our migration guide.

Breaking changes

  • Removed groups prop on Select. Pass groups to the options prop instead. (#1831)
  • Removed Autocomplete.ComboBox.TextField and Autocomplete.ComboBox.OptionList. You should use the Autocomplete.TextField and OptionList components instead. (#1830)
  • Removed secondaryFooterAction prop on Card. Pass an array of secondary actions to the secondaryFooterActions prop instead. (#1831)
  • Removed iconBody prop on Navigation.Item. Pass a string to the icon prop instead. (#1831)
  • Removed the WithContext component, as it was an undocumented part of the public API meant for internal use only (#1641)
  • Removed the WithRef component, as it was an undocumented part of the public API meant for internal use only (#1610)
  • Removed support for passing a string into <Icon source> to load a bundled icon. You must load the required icon directly from @shopify/polaris-icons instead. (#1604)
  • Removed support for passing an SvgSource shaped object into <Icon source> to load an icon imported using Shopify’s legacy icon loader. You must update sewing-kit to at least v0.82.0 which replaced the legacy loader with using SVGR. (#1604)
  • Removed support for passing a React Element into <Icon source>. You must pass in a React Component that returns an SVG element instead. (#1604)
  • Removed support for <Icon untrusted>. Passing a string into source will now always load an untrusted icon, you don't need that additional property. (#1604).
  • Removed Navigation.UserMenu. Use TopBar.UserMenu instead. (#1599)
  • Made title a required prop on ChoiceList to improve accessibility. It can be hidden with titleHidden. (#1575)
  • Made i18n a required prop on AppProvider. Usage instructions are included in the AppProvider docs. (#1530)
  • Upgraded react and react-dom peer-dependencies to 16.8.6 to enable the use of hooks (#1525)
  • Changed the import method for React to use default imports. Applications consuming Polaris using TypeScript must enable esModuleInterop in tsconfig.json. (#1523)
  • Removed LinkLikeComponent type export. Use AppProviderProps['linkComponent'] instead. (#1864)
  • Removed the Modal.Dialog and Tabs.Panel subcomponents as they were undocumented parts of our public API meant for internal use only (#1899).

Enhancements

  • Added a new create-react-app example in TypeScript demonstrating use of Polaris with react-testing (#1937)
  • Exported AppliedFilterInterface and FilterInterface from Filters (#1924)
  • Improved color contrast of links inside Banner (#1651)
  • Add underline to Links and Plain button on hover, so it doesn't rely on color alone for accessibility (#1885)
  • Add onQueryFocus callback prop to the Filters component (#1948)

Bug fixes

  • Fixed types merge of ActionMenu MenuAction and MenuGroup.actions (#1895)
  • Fixed the activator buttons of Page actionGroups not toggling the Popover active state on click #1905
  • Fixed Windows high contrast support of Badge progress (#1928)
  • Fixed BulkActionButton from throwing an error in componentDidMount (#1913)
  • Fixed ToastManager from not working correctly in React.StrictMode (#1741)
  • Updated translation.yml with the new locales path (#1649)
  • Fixed accessibility issue with Tabs list item presentation role (#1958)
  • Fixed cross-origin error being thrown in Modal when loading an external app (#1992)
  • Fixed regression in PopoverOverlay causing onClose to be fired when Popover is opening and trigger was not the activator (#2000)
  • Fixed issue with ContextualSaveBar blocking search when hidden (#2044)

Documentation

  • Updated AppProvider app bridge example to use our AppBridgeContext (#1877)

Development workflow

  • Added support for React hooks in Storybook (#1665)
  • Created toBeDisabled, mountWithContext and added custom testing matchers (#1596)
  • Added PolarisTestProvider helper to ease configuration of required Polaris contexts in tests, see polaris examples for usage (#1810)
  • Enabled strict mode in TypeScript (#1883)
  • Moved to unpkg.com for our CDN CSS assets, instead of using sdks.shopifycdn.com. Existing URLs will continue to work but new versions will only be available at unpkg.com. (#1960)
  • Added ChromaUI integration for previewing Storybook builds, to potentially replace our self-hosted Heroku instance (#1975)

Dependency upgrades

  • Updated @shopify/polaris in all examples to 4.0.0-rc.2 (#1937)
  • Added @material-ui/react-transition-group and removed react-transition-group to support React.StrictMode (#1759)
  • Added @shopify/react-testing (#1596)
  • Removed@shopify/css-utilities (#1586)
  • Removed @types/prop-types and prop-types (#1505)
  • Updatedreact to 16.8.6 and enzyme to 3.9.1 (#1392)

Code quality

  • Bumped test coverage in Collapsible (#1929)
  • Bumped test coverage in DropZone, Frame, Icon, and Loading (#1927)
  • Removed unused type definitions (#1862)
  • Ignored deprecation warnings related to Shopify App Bridge in tests (#1852)
  • Updated withAppProvider to use a functional component rather than a class component (#1813)
  • Updated Link to use useI18n rather than withAppProvider (#1806)
  • Updated several components to use hooks instead of withAppProvider (#1797)
  • Removed CSSTransition from PopoverOverlay (#1756)
  • Updated exports in src/utilities and src/test-utilities to named exports (#1717)
  • Removed test errors and non-deprecation warnings (#1715)
  • Enabled React.StrictMode in test components and Storybook (#1709)
  • Removed all uses of ReactDOM.findDOMNode (#1696)
  • Enabled react/no-unsafe ESLint rule with checkAliases (#1695)
  • Alphabetized component export order and kebab-case files (#1674)
  • Updated Collapsible to no longer use componentWillReceiveProps(#1670)
  • Restructured context structure to be more modular (#1664)
  • Updated PositionedOverlay to no longer use componentWillReceiveProps(#1621)
  • Simplified WithinContentContainer context type (#1602)
  • Updated OptionList to no longer use componentWillReceiveProps (#1557)
  • Refactored RangeSlider DualThumb tests (#1548)
  • Converted Sheet to a functional component (#1548)
  • Removed withContext from ResourceList.Item (#1503)
  • Removed withContext from Navigation.Item (#1502)
  • Removed withRef from UnstyledLink (#1501)
  • Removed withContext from ResourceList.FilterControl (#1500)
  • Removed withContext from Scrollable.ScrollTo and added a test to boost coverage (#1499)
  • Removed withContext from Loading (#1497)
  • Removed withContext and withAppProvider from ContextualSaveBar (#1498)
  • Removed withContext from Toast (#1494)
  • Removed withRef and withContext from DropZone.FileUpload (#1491)
  • Created useAppBridge hook (#1482)
  • Removed testID warning in tests (#1447)
  • Updated AppProvider to use the new context API and refactored other instances to follow a new pattern and refactor test utilities (#1424)
  • Updated all context files to export react context rather than a provider and consumer (#1424)
  • Deleted withSticky (#1424)
  • Upgraded the Autocomplete component from legacy context API to use createContext (#1403)
  • Upgraded the Navigation component from legacy context API to use createContext (#1402)
  • Updated ThemeProvider to use the new context API (#1396)
  • Updated AppProvider to no longer use componentWillReceiveProps(#1255)
  • Removed unused context from Scrollable (#1253)
  • Updated ThemeProvider to no longer use componentWillReceiveProps (#1254)
  • Removed context from Collapsible (#1114)
  • Refactored Frame and its subcomponents to use the createContext API instead of legacy context (#803)
  • Upgraded the Banner, Card, and Modal components from legacy context API to use createContext (#786)

Deprecations

  • Renamed singleColumnonPagetonarrowWidth (#1606)

3.21.1 - 2019-08-12

Enhancements

  • Added onQueryFocus callback prop to the Filters component (#1948)

3.21.0 - 2019-07-31

Enhancements

  • Added a subtitle and thumbnail prop to Page (#1880)

Bug fixes

  • Fixed accessibility issue with ChoiceList errors not being correctly connected to the inputs (#1824)
  • Fixed Tab aria-controls pointing to a non-existent Panel id (#1869)
  • Fixed Toast accessibility issue by moving aria-live prop to ToastManager (#1873)

Code quality

  • Use @shopify/typescript-configs as the base of tsconfig.json for the project (#1829)

3.20.0 - 2019-07-16

Enhancements

  • Added a verticalAlign prop to DataTable (#1790)
  • Improved focus and hover states for Navigation (#1822)

Bug fixes

  • Fixed the SearchInput clear button which was overflowing the search bar in Firefox 65+ (#1795)
  • Fixed a bug preventing the display of Tooltip when cursor enters from a disabled element (#1783)
  • Fixed React imports in the Filters component to use import * as React for projects that don't use esModuleInterop (#1820)
  • Fixed tabIndex on main element causing event delegation issues (#1821)
  • Fixed icon color for destructive ActionList items (#1836)
  • Fixed not being able to explictly set autoComplete prop onAutocomplete.TextField (#1839)

Documentation

  • Added links to App Bridge React component documentation in deprecation notices for embedded components (#1765)
  • Improved link text for App Bridge deprecation notices #1802

Development workflow

  • Use explicit imports for our base sass mixins instead of having them implictly defined at build-time. This simplifes our build config and other tooling that wants to build us from source [#1680]

3.19.0 - 2019-07-09

New components

  • Filters: Use to filter the items of a list or table (#1718)

Enhancements

  • Added the rollover and Windows high contrast mode to Disclosure button on Tabs (#1755)
  • Added support for disabling all choices in ChoiceList (#1758)
  • Components in our sass build (the styles folder) are now precompiled to avoid the chance of accidentally overwriting any of our global variables, mixins and functions (#1764)
  • Changed Skip to content to render an anchor instead of a button to meet accessiblity level A guidelines (#1785)

Bug fixes

  • Fixed a regression introduced in #1247, where icons inside of Link would always be recolored to match the text color (#1729)
  • Fixed the DiscardConfirmationModal not closing when the discard button is clicked (#1784)
  • Fixed Navigation.Item secondaryAction wrapping when content wraps (#1678)

Documentation

  • Added links to App Bridge React component documentation in deprecation notices for embedded components (#1765)

Development workflow

  • Renamed yarn run ts to yarn run type-check to match most other Shopify projects (#1745)
  • Fixed deprecation notice in build (#1754)
  • Simplified our rollup plugin for sass compilation while retaining identical behaviour (#1753)

3.18.0 - 2019-06-26

New components

  • ActionMenu: Use for display of actions and action groups within the context of a header (#1653)

Enhancements

  • Added the stopAnnouncements prop to Banner, which disables screen reader announcements when content changes (#1719)
  • Add selectable prop to ResourceList component (thanks to @vict-shevchenko for the pull request)
  • Allow Link and Button interactions when rendered as prefix/suffix within <TextField /> (#1394)
  • Improve TextField so that character count is only announced on focus. (#1720)
  • ActionList can now pass a unique accessibilityLabel to each Item (#1653)
  • Greatly reduced complexity of Page > Header (#1653)
  • Long Page > Header breadcrumb labels will now truncate instead of breaking layout (#1653)
  • Improves performance of TabMeasure component (#1544)
  • Added secondaryFooterActions prop to Card which adds an action list of secondary actions to the footer #1625

Bug fixes

  • Fixes monochrome variant of Link and Button components to support multi-line link text (#1686)
  • Fixed the first column of DataTable not rendering in iOS Safari (#1605)
  • Fixed paint loss on scroll of TextField Spinner (#1740)

Documentation

  • Mentioned that the Contextual Save Bar is now available for embedded apps through App Bridge directly #1721
  • Mentioned Polaris icons in the Icon component documentation (#1693)
  • Added an example to Card for custom action layout with a secondary action and a plain button (thanks to @sharoonthomas for the pull request)

Development workflow

  • Updated Storybook to v5.1.9 (#1728)

Code quality

  • Updated PositionedOverlay to no longer use componentWillReceiveProps(#1621)

Deprecations

  • Card secondaryFooterAction is now deprecated. Set an array of secondary actions on the secondaryFooterActions prop instead #1625

3.17.0 - 2019-06-11

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)

3.16.0 - 2019-05-22

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

3.15.0 - 2019-05-14

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)

3.14.0 - 2019-05-08

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)

3.13.0 - 2019-04-22

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)

3.12.0 - 2019-03-29

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)

3.11.0 - 2019-03-21

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)

3.10.0 - 2019-03-07

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)

3.9.0 - 2019-02-21

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)

3.8.0 - 2019-02-20

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)

3.7.1 - 2019-02-12

Bug fixes

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

Documentation

3.7.0 - 2019-02-11

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)

3.6.0 - 2019-01-30

Enhancements

  • Updated TextField to accept a showCharacterCount prop enabling 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)

3.5.0 - 2019-01-16

Enhancements

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

Bug fixes

  • Ensured 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)
  • Ensured CSS builds are reproducible (#869)

3.4.0 - 2019-01-08

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)
  • Refactored to remove cyclical type imports (#759, #754, and #767)

Dependency upgrades

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

3.3.0 - 2018-12-12

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)

3.2.1 - 2018-12-04

Bug fixes

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

3.2.0 - 2018-12-04

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)

3.1.1 - 2018-11-19

Bug fixes

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

3.1.0 - 2018-11-16

Enhancements

  • Improved Avatar so it falls back to initials when the image fails to load (#557)
  • 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 - 2018-11-14

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)

3.0.0 - 2018-11-09

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:

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

2.12.1 - 2018-10-11

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

2.11.0 - 2018-10-03

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 ([#2339](Fixing button alignment #2339)) (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 (#121)
  • Fixed ProgressBar not showing up in Windows high contrast mode (#1708)
  • 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 (#2314)

New components

withContext

Use withContext to pass consumer context to a component.

withRef

Use withRef with compose to forwardRefs to a component.

2.10.0 - 2018-09-18

Enhancements

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

Documentation

  • Refined accessibility checklist

Bug Fixes

  • Added truncation to Tag

2.9.0 - 2018-09-10

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

2.8.0 - 2018-08-30

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

2.7.2 - 2018-08-27

Bug fixes

  • Reverted a change that caused items in a Popover component not to be clickable

2.7.1 - 2018-08-27

Documentation

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

Bug fixes

  • Fixed the Page component’s primaryAction to support LoadableActions and DisableableActions

2.7.0 - 2018-08-27

Enhancements

  • Adjusted spacing for ChoiceChildren in ChoiceList for readability
  • Made Card.Header a separate publicly accessible component
  • Added support for complex operators in ResourceList component
  • Updated the Page component’s primaryAction to support Button props.
  • Added validation for non-numeric input in a type="number" TextField
  • Added circle information icon

Documentation

  • Updated Banner guidelines to make it clearer when success banners should be used vs success toasts

2.6.1 - 2018-08-21

Development workflow

  • Moved pa11y and object-hash from dependencies to devDependencies

Bug fixes

  • Fixed inconsistent DropZone 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 titleMetadata in Page component
  • Added support for FilterType.DateSelector in ResourceList component
  • Added code as an accepted variation of the TextStyle 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 RadioButton to accept a block as a label
  • Added a singleColumn prop to the SkeletonPage component
  • Updated the transition on large Modal to match the default transition
  • Added nextKeys, previousKeys, nextTooltip, and previousTooltip props to the Pagination component to support keypress handling and Tooltip 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 TextField and OptionList components
  • Added support for OptionList with Avatar, Icon, and Thumbnail when options descriptors have a media property
  • Added support for destructive ActionList items
  • Added support for OptionList 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 TextField error messages to be optional
  • Added a disabled prop to the Choice component. Checkbox and RadioButton labels are now styled to reflect their disabled state
  • Added support for Windows High Contrast mode in the Select, Checkbox and RadioButton components

Bug fixes

  • Fixed TextField 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 DataTable column count and content skipping in assistive technologies
  • Fixed unintended form submittal by action list items enclosed in a form (thanks @andrewpye for the original issue)
  • Fixed text alignment of multiline OptionList 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 caused problems for some build tools
  • Fixed the word-break of long text in Label and Banner on small screens

Documentation

  • Added examples for iOS and Android RadioButton
  • Added examples for iOS and Android Banner
  • Added Toast component
  • Added examples for iOS and Android Button
  • Added examples for iOS and Android ButtonGroup
  • Added examples for iOS and Android Badge
  • Added examples for iOS and Android Avatar
  • Added Stepper component

New components

InlineError

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

2.5.0 - 2018-07-20

Enhancements

  • Updated sub component structure
  • Added weekStartsOn prop to DatePicker

Bug fixes

  • Remove stickyManager from AppProviderProps interface
  • Fixed a bug where Layout.AnnotatedSection would output a wrapper div for a description even when its contents were empty
  • Remove extra padding from annotated section

Documentation

  • Added iOS and Android examples to the Card component
  • Added iOS and Android examples to the ChoiceList 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

  • Added weekStartsOn prop to DatePicker

2.4.0 - 2018-07-12

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 TextField padding when a prefix or suffix is included

2.3.1 - 2018-07-05

Enhancements

  • Removed the min-width of 320px from ResourceList

Bug fixes

  • Resolve issue with RangeSlider component not accepting 0 as a max value
  • Slightly reduced spacing for prefix and suffix on the RangeSlider component
  • Fixed spacing for prefix and suffix on the TextField component
  • Fixed height of cells in DataTable that are rendered after initial page load (for example: in a Tab or a Popover) (thanks @flewid for the original issue)
  • Fixed DatePicker month styling for previous years

2.3.0 - 2018-07-03

New components

Option list

Use OptionList 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 run optimize to add new line at the end of SVG files
  • Added a more compact variant of Select, with the form label appearing inside the control)

Bug fixes

  • Adjusted padding on TextField 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 ResourceList header with sorting options (thanks @janklimo for the original issue)
  • Fixed an issue where RadioButton was 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

2.2.0 - 2018-06-12

New components

Range slider

Use RangeSlider 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 ItemDescriptor 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

2.1.2 - 2018-06-06

Enhancements

  • Added support for Card 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 ResourceList filters lost padding (thanks @BarryCarlyon for the original issue)
  • Fixed unexpected focus jumps when DatePicker props are updated
  • Fixed the spacing and text wrapping of ExceptionList title and description

2.1.1 - 2018-05-30

Bug fixes

  • Fixed DropZone to prevent it from kicking into small size too soon

Documentation

  • Various content and markdown fixes

2.1.0 - 2018-05-03

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 Banner that appear in a Card or a Modal
  • 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 DataTable (thanks @mfurniss for the original issue)
  • Fixed focused inner interaction state on ResourceList.Item for reverse tabbing
  • Fixed border radius on Card to match the padding on Page
  • Added target to the breadcrumb prop on Page (thanks @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 @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 ResourceList had no filters

2.0.0 - 2018-05-07

Summary: this is the first major version of Polaris React since launch. Included in this release are:

  • Several new components, including DataTable, DropZone, AppProvider, and Modal
  • Improvements to existing components, such as ResourceList, ChoiceList, and Card
  • A few breaking API changes

Breaking changes

React 16+

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 instructions

Upgrade your app to the latest version of React.

App provider

The AppProvider component is now required in your app for Polaris components to function properly.

Upgrade instructions

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.

Upgrade instructions

Pass a unique value as an id to all Collapsible components. For example, <Collapsible id="my-unique-id">.

EmbeddedApp component has been removed

The EmbeddedApp component has been removed. The AppProvider component now accepts the configuration needed to initialize an embedded app.

Upgrade instructions

Use the AppProvider component with the apiKey and shopOrigin props.

Resource list

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 details 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.

Tabs no longer accept title prop

To be more consistent with our other component APIs, the Tabs component now uses content instead of title.

Upgrade instructions

Change all instances of title to be content instead.

TextField onChange is required

Because we require you to manage state for your inputs, we decided to make onChange required for TextField to avoid confusion.

Upgrade instructions

Add an onChange callback to each use of TextField that is not disabled or readonly.

Removed default white color from Icon CSS

The CSS for Icon will no longer apply a color to icons by default. You must use the color prop on the Icon component to specify the color.

Upgrade instructions

Use color prop on all instances of Icon component.

Anchor tags are no longer styled by Polaris components

To avoid conflicts with other styling or frameworks, we’re removing the styling we globally applied to all a elements.

Upgrade instructions

Use the Link component instead.

Changed Alert onCancel prop to onClose

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.

Upgrade instructions

If you’re using VS Code, here are the exact search / replace instructions to follow (toggle “Use Regular Expression”):

  • replace \bcolor\(([a-z-]+)\) with color('$1')
  • replace \bcolor\(([a-z-]+), ([a-z-]+)\) with color('$1', '$2')
  • replace \bcolor\(([a-z-]+), ([a-z-]+), (.*)\) with color('$1', '$2', $3)

New components

Data table

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.

Drop zone

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.

Modal

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 stand-alone or embedded apps, and will handle the correct behavior for you.

App provider

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.

Enhancements

  • Added error prop to ChoiceList
  • TextField, Select, and Checkbox now accept the types string or ReactElement for the error prop
  • Added optional id props to more components, and restructured the prop definitions to allow projects to make id props mandatory
  • Added fullWidth prop to Card.Section
  • Added fullHeight prop to Popover to override max-height
  • Added allowRange as a property for DatePicker
  • Added the external option to the secondaryAction.action prop on the Banner component. Thank you to (Andrew Cargill) for the issue (#236)

Bug fixes

  • Enforced subdued description TextStyle in AnnotatedSection
  • Fixed overflow of TextField that caused the border 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 a title was not provided
  • Fixed an issue in the Select component where placeholder didn’t properly appear on Firefox and appeared disabled on all browsers

1.14.2 - 2018-05-02

This will be the last v1.x release outside of critical security fixes.

Bug 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

1.14.1 - 2018-04-10

Bug fixes

  • Fixing an error with the release process

1.14.0 - 2018-04-10

Enhancements

  • Changed term in DescriptionList component to accept React.ReactNode to allow for more than just string type

1.13.1 - 2018-03-29

  • Added missing publishConfig.access setting in package.json, in accordance with the new Shipit requirements for public npm packages

1.13.0 - 2018-03-29

Enhancements

  • Added an id prop to Collapsible to be referenced by the aria-controls attribute of the component triggering the collapse

Bug fixes

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

1.12.4 - 2018-03-19

  • Enhanced Avatar to work better when provided non-square images
  • Move documentation file so it’s picked up by the style guide

1.12.3 - 2018-03-16

Bug fixes

  • Fixed disclosure centering on the Tabs component
  • Fixed an issue where a style void would appear between breakpoints at high text zoom levels

Documentation

  • Removed purpose section from component READMEs
  • Added EmbeddedPage under the Embedded section
  • Added “Using embedded components” section
  • Added screenshots to the embedded components
  • Clarified usage of Card header and FooterActions

1.12.2 - 2018-03-08

Documentation

  • Moving property descriptions out of READMEs and into source files

1.12.1 - 2018-03-06

Bug fixes

  • Fixed server-side environments

Documentation

  • Updated component examples that use state to use an es6 class

1.12.0 - 2018-02-28

Bug fixes

  • 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

Enhancements

  • 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

Documentation

  • Clarified intended usage for EmptyState

Chores

  • Added version number to source

1.11.0 - 2018-02-13

  • Changed Action to Disableable Action in Card

Enhancements

  • Added renderChildren prop to ChoiceList component

Bug fixes

  • Fixed an issue with FooterHelp links not expanding to full-width on mobile devices (#759)
  • 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 improperly 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 (thanks @cgidzinski for the original issue)
  • Added top alignment to FormLayout.Group

Documentation

  • Fixed capitalization of prop names in Pagination component’s documentation (thanks @donnguyen for the original issue)
  • Exposed Option from the Select component

1.10.2 - 2018-01-22

Bug fixes

  • Fixed the public repository’s build (which was missing the new CircleCI configuration files)

1.10.1 - 2018-01-19

Bug fixes

1.10.0 - 2018-01-17

  • 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 @Invader444 for the original issue and pull request)

  • Added onClick to UnstyledLink

  • Added tests to Link

  • Added tests for ColorPicker color utilities

1.9.1 - 2017-12-21

Documentation

  • Ammending changelog

1.9.0 - 2017-12-21

Enhancements

  • Added onActionAnyItem prop to action list and used to close Page actionGroups on click or keypress of any item
  • Added content prop to Tabs and deprecated use of title
  • Added TextContainer component
  • Added idForItem prop to resource list
  • Added fullWidth prop to layout section
  • Added indeterminate as option for checkbox checked prop value
  • Added singleColumn prop to page
  • Added focused prop to TextField

Bug fixes

  • Fixed positioned overlay not responding to Scrollable container events
  • Fixed first focusable item focus in Popover
  • Fixed typos in the select component documentation (thanks @mattchidley for the original issue)

1.8.3 - 2017-10-26

Bug fixes

  • Moved react-transition-group from a dev dependency to a dependency

1.8.2 - 2017-10-24

Bug fixes

  • Fixed Stack not returning children

1.8.1 - 2017-10-24

Bug fixes

  • Added missing yarn config file which was causing the build to fail

1.8.0 - 2017-10-23

Documentation

  • 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 TextStyle component

Enhancements

  • Added support for React 16
  • Added an option to show or hide unpublished products from the ResourcePicker
  • Changed Popover component to use react-transition-group instead of our deprecated custom version in @shopify/react-utilities
  • Added new ProgressBar component
  • Changed today’s date to be tabbable and clearly indicated in DatePicker
  • Added support for disabled choices in ChoiceList 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

Bug fixes

  • Fixed Layout component example description
  • Fixed SkeletonPage header appearing in embedded apps (thanks @rkbhochalya for the original issue))
  • Fixed border-radius on ActionList component in Chrome

1.7.0 - 2017-10-06

Enhancements

  • 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 TextField min and max documentation
  • Breadcrumbs now accept a callback through onAction (thanks @arypbatista for the original issue)

Bug fixes

  • 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

1.6.0 - 2017-09-25

Enhancements

Bug fixes

  • 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

1.5.2 - 2017-09-18

Bug fixes

  • Fixes alignment of PageAction links

1.5.1 - 2017-08-30

Bug fixes

  • Fixed disabled Button when using local class names
  • Fixed Scrollable resize listener not autobinding

1.5.0 - 2017-08-30

Enhancements

  • Updated Scrollable component to remember scroll position on re-render
  • Added checkmark icon to the Icon component
  • Added an example for a disabled TextField

Bug fixes

  • Fixed typo in Icon code example

1.4.1 - 2017-08-24

Various documentation fixes.

1.4.0 - 2017-08-22

Enhancements

  • Updated import, export, and view icons
  • Improved documentation of various components
  • Improved how ActionList handles images and groups
  • Exposed PopoverCloseSource from Popover component

Bug fixes

  • Fixed PageActions spacing in IE11
  • Fixed ID inconsistency on TextField
  • Fixed spacing on Page component with no header (thanks @bakura10 for the original issue)
  • Fixed disabled state on primary and destructive Button

Chores

  • Upgraded javascript-utilities to the latest version

1.3.1 - 2017-08-10

Bug fixes

  • Fixed classnames in built *.scss files
  • Fixed broken link in description list README

1.3.0 - 2017-08-09

Enhancements

  • 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

Bug fixes

  • 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

Sketch UIKit

  • Added Sketch color palette file

1.2.1 (July 27, 2017)

Chores

  • Fixed a repo issue that caused the public repo release not to happen

1.2.0 (July 27, 2017)

Enhancements

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

Bug fixes

Sketch UIKit

  • Added color palette page to “Getting started”
  • Button typography updated. More changes to come soon.
  • Changed typeface from San Francisco UI to San 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.

Documentation

Dependency updates

  • Updated React TypeScript definitions

Chores

  • Updated EASDK metadata structure for generic interfaces
  • Removed postinstall hook

1.1.1 - 2017-06-19

Chores

  • Fixed a repo issue that caused the public repo release not to happen

1.1.0 - 2017-06-19

Enhancements

  • Added automatic inference of the target property of EASDK buttons in Page primaryAction and secondaryAction based on their URL (thanks @jimmyn for the original issue)
  • Added automatic inference of the target property of EASDK breadcrumbs in Page breadcrumbs prop based on the URL
  • Select option descriptors now accept a disabled attribute to disable the generated option (thanks @sogko 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 of ShopifyApp.flashError
  • Checkbox, RadioButton, ChoiceList, Select, and TextField now pass the ID of the changed input as the second argument to their onChange callback (thanks @milep for the original issue)
  • Popover now respects the z-index of the activator if it exists
  • When putting content as children of Tabs, the default panel that is generated now respects the panelID of the selected tab, and uses a sensible default based on the tab’s id if no panelID 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

Changes

  • Avatar now renders as a span instead of a div

Bug fixes

  • Fixed contents in Layout.AnnotatedSection breaking out of their container (thanks @cargix1 for the original issue)
  • Fixed spacing above a primaryAction in CalloutCard when there is no secondaryAction
  • Aria attributes are now on the actionable elements of Tabs instead of in the list items
  • Exposed Panel as Tabs.Panel instead of Tabs.panel
  • Fixed the alignment of prefix and suffix content of TextField (thanks @bdillon3 for the original issue)
  • Fixed the disabled text color in TextField
  • Checkbox and RadioButton no longer generate invalid HTML in their labels (thanks @ernestogutierrez for the original issue)
  • Tabs no longer steal focus from contained elements (thanks @alexdover for the original issue)

Design updates

  • Reduced horizontal padding on Breadcrumbs
  • Updated icon and internal padding of FooterHelp
  • Updated the EmptyState layout and typographic styles

Documentation

  • Fixed the code examples on the EmbeddedApp documentation
  • Added a simple EmbeddedApp example
  • Renamed the “Tables and lists” category to “Lists”
  • A variety of other documentation updates (thanks @sebnun, @asacarter, and @resistorsoftware for raising issues)

Dependency updates

  • Updated all dependencies

Chores

  • 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

1.0.3 - 2017-05-11

Big fixes

  • Fixed an issue where the embedded components would not reload the page within the Shopify admin (thanks @buggy for the original issue)
  • Fixed the spacing="none" variation on Stack not working correctly, and added the missing extraLarge enum value for spacing
  • Fixed Banner’s onDismiss callback not being called when the dismiss button was clicked (76ce13f) (thanks @tlwirtz for the original issue)

Design updates

  • Updated Badge text colors
  • Updated line height for the small DisplayText variation
  • Updated the default icon for error Banner (thanks @heyneff for the original issue)

Sketch UIKit

  • Added app examples (thanks @lukepxu for the original issue)
  • Removed references to the Graphik typeface (thanks @adamnel 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

Documentation

  • Synchronized component documentation with the style guide (1e89559)

Chores

  • 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 @macs91 for digging into this with us)
  • Removed the @import statements at the top of source Sass files
  • Updated TSLint and related linting dependencies

1.0.2 - 2017-04-25

Bug fixes

  • 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 @buggy for the original issues)
  • Fixed an issue where the anchor tag for ResourceList.Item would not span the full width of the item (0c11498) (thanks @sdn90 for the original issue)

Dependency updates

  • Started using the prop-types package instead of getting PropTypes from react, as the latter is deprecated as of React 15.5.0

Documentation

  • Corrected the name of documentation/Embeddded apps.md to documentation/Embedded apps.md (thanks @chrispappas for the original issue)
  • Fixed the ColorPicker documentation to show valid values for saturation, brightness, and alpha (thanks @allanarmstrong for the original issue)

Chores

  • Added a description to package.json
  • Added license to package.json and to the root of the repo (thanks @d2s for the original issue)
  • Fixed an issue where the Webpack example would complain about a missing dependency (thanks @rafaedez for the original issue)

1.0.1 - 2017-04-20

Chores

  • Switch repo to public access

1.0.0 - 2017-04-20

  • Initial release