Version 4.0.0

.eslintrc

@@ -33,6 +33,7 @@
     "react/button-has-type": "off",
     "react/no-array-index-key": "off",
     "react/jsx-fragments": ["error", "element"],
+    "react/no-unsafe": ["error", {"checkAliases": true}],
     "shopify/jsx-no-complex-expressions": "off",
     "shopify/jsx-prefer-fragment-wrappers": "off",
     "shopify/no-ancestor-directory-import": "error",

.github/PULL_REQUEST_TEMPLATE.md

@@ -38,20 +38,17 @@ Fixes #0000 <!-- link to issue if one exists -->
 <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary>
 
 ```jsx
-import * as React from 'react';
-import {Page} from '@shopify/polaris';
-
-interface State {}
-
-export default class Playground extends React.Component<never, State> {
-  render() {
-    return (
-      <Page title="Playground">
-        {/* Add the code you want to test here */}
-      </Page>
-    );
-  }
+import React from 'react';
+import {Page} from '../src';
+
+export default function Playground() {
+  return (
+    <Page title="Playground">
+      {/* Add the code you want to test in here */}
+    </Page>
+  );
 }
+
 ```
 
 </details>

.storybook/config.js

@@ -1,4 +1,5 @@
-import {configure, addParameters} from '@storybook/react';
+import React from 'react';
+import {configure, addParameters, addDecorator} from '@storybook/react';
 import {setConsoleOptions} from '@storybook/addon-console';
 import {create} from '@storybook/theming';
 import tokens from '@shopify/polaris-tokens';
@@ -35,6 +36,11 @@ addParameters({
   },
 });
 
+const StrictModeDecorator = (story) => (
+  <React.StrictMode>{story()}</React.StrictMode>
+);
+addDecorator(StrictModeDecorator);
+
 // addon-console
 setConsoleOptions((opts) => {
   // When transpiling TS using isolatedModules, the compiler doesn't strip

.storybook/polaris-readme-loader.js

@@ -2,6 +2,9 @@
 const chalk = require('chalk');
 const grayMatter = require('gray-matter');
 const MdParser = require('./md-parser');
+const React = require('react');
+
+const HOOK_PREFIX = 'use';
 
 /**
  * A Webpack loader, that expects a Polaris README file, and returns metadata,
@@ -68,8 +71,12 @@ module.exports = function loader(source) {
     return eval(`(${fnString})`).apply(null, Object.values(scope));
   };
 
+  const hooks = Object.keys(React)
+    .filter((key) => key.startsWith(HOOK_PREFIX))
+    .join(', ');
+
   return `
-import React from 'react';
+import React, {${hooks}} from 'react';
 import * as Polaris from '@shopify/polaris';
 import {
   PlusMinor,
@@ -278,13 +285,15 @@ function filterMarkdownForPlatform(markdown, platform) {
 
 function wrapExample(code) {
   const classPattern = /class (\w+) extends React.Component/g;
-  const classMatch = classPattern.exec(code);
+  const functionPattern = /^function (\w+)/g;
+  const fullComponentDefinitionMatch =
+    classPattern.exec(code) || functionPattern.exec(code);
 
   let wrappedCode = '';
 
-  if (classMatch) {
+  if (fullComponentDefinitionMatch) {
     wrappedCode = `${code}
-return ${classMatch[1]};
+return ${fullComponentDefinitionMatch[1]};
 `;
   } else {
     wrappedCode = `return function() {

.storybook/stories-from-readme.js

@@ -1,8 +1,9 @@
-import * as React from 'react';
+import React from 'react';
 import {AppProvider, Heading} from '../src';
 import {withA11y} from '@storybook/addon-a11y';
 import {storiesOf} from '@storybook/react';
 import Playground from '../playground/Playground';
+import en from '../locales/en.json';
 
 /**
  * In most cases we want to test an "All Examples" page as fewer snapshots
@@ -65,7 +66,7 @@ export function addPlaygroundStory(playgroundModule) {
 function AppProviderDecorator(story) {
   return (
     <div style={{padding: '8px'}}>
-      <AppProvider>{story()}</AppProvider>
+      <AppProvider i18n={en}>{story()}</AppProvider>
     </div>
   );
 }

README.md

@@ -33,7 +33,7 @@ yarn add @shopify/polaris
 ```html
 <link
   rel="stylesheet"
-  href="https://sdks.shopifycdn.com/polaris/3.21.0/polaris.min.css"
+  href="https://sdks.shopifycdn.com/polaris/4.0.0-rc.2/polaris.min.css"
 />
 ```
 
@@ -53,7 +53,7 @@ import {AppProvider, Page, Card, Button} from '@shopify/polaris';
 
 ```javascript
 ReactDOM.render(
-  <AppProvider>
+  <AppProvider i18n={{}}>
     <Page title="Example app">
       <Card sectioned>
         <Button onClick={() => alert('Button clicked!')}>Example button</Button>
@@ -81,7 +81,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi
 ```html
 <link
   rel="stylesheet"
-  href="https://sdks.shopifycdn.com/polaris/3.21.0/polaris.min.css"
+  href="https://sdks.shopifycdn.com/polaris/4.0.0-rc.2/polaris.min.css"
 />
 ```
 

UNRELEASED-V4.md

@@ -0,0 +1,111 @@
+# Unreleased changes for version 4.0.0
+
+Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to format new entries. 💜
+
+---
+
+### Breaking changes
+
+- Removed `groups` prop on `Select`. Pass groups to the `options` prop instead. ([#1831](https://github.com/Shopify/polaris-react/pull/1831))
+- Removed `Autocomplete.ComboBox.TextField` and `Autocomplete.ComboBox.OptionList`. You should use the `Autocomplete.TextField` and `OptionList` components instead. ([#1830](https://github.com/Shopify/polaris-react/pull/1830))
+- Removed `secondaryFooterAction` prop on `Card`. Pass an array of secondary actions to the `secondaryFooterActions` prop instead. ([#1831](https://github.com/Shopify/polaris-react/pull/1831))
+- Removed `iconBody` prop on `Navigation`. Pass a string to the `icon` prop instead. ([#1831](https://github.com/Shopify/polaris-react/pull/1831))
+- Removed the `WithContext` component, as it was an undocumented part of the public API meant for internal use only ([#1641](https://github.com/Shopify/polaris-react/pull/1641))
+- Removed the `WithRef` component, as it was an undocumented part of the public API meant for internal use only ([#1610](https://github.com/Shopify/polaris-react/pull/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](https://github.com/Shopify/polaris-react/pull/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](https://github.com/Shopify/polaris-react/pull/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](https://github.com/Shopify/polaris-react/pull/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](https://github.com/Shopify/polaris-react/pull/1604)).
+- Removed `Navigation.UserMenu`. Use `TopBar.UserMenu` instead ([#1599](https://github.com/Shopify/polaris-react/pull/1599))
+- Made `ChoiceList`’s `title` prop required to improve accessibility. It can be hidden with `titleHidden`. ([#1575](https://github.com/Shopify/polaris-react/pull/1575))
+- Made `AppProvider`’s `i18n` prop required. [Usage instructions](https://polaris.shopify.com/components/structure/app-provider#using-translations) are included in the `AppProvider` docs ([#1530](https://github.com/Shopify/polaris-react/pull/1530))
+- Increased peer-dependencies on `react` and `react-dom` to 16.8.6 to enable the use of hooks ([#1525](https://github.com/Shopify/polaris-react/pull/1525))
+- Changed the import method for React to use default imports. Applications consuming Polaris using TypeScript must enable [`esModuleInterop`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#support-for-import-d-from-cjs-from-commonjs-modules-with---esmoduleinterop) in `tsconfig.json`. ([#1523](https://github.com/Shopify/polaris-react/pull/1523))
+- Removed `LinkLikeComponent` type export. Use `AppProviderProps['linkComponent']` instead. ([#1864](https://github.com/Shopify/polaris-react/pull/1864))
+- Removed the `Modal.Dialog` and `Tabs.Panel` subcomponents as they were undocumented parts of our public API meant for internal use only. ([#1899](https://github.com/Shopify/polaris-react/pull/1899)).
+
+### New components
+
+- `PolarisTestProvider`: Use for Polaris context in tests, see [polaris examples](https://github.com/Shopify/polaris-react/tree/master/examples) for usage ([#1810](https://github.com/Shopify/polaris-react/pull/1810))
+
+### Enhancements
+
+- Improved color contrast of links inside `Banner` ([#1651](https://github.com/Shopify/polaris-react/pull/1651))
+
+### Design updates
+
+### Bug fixes
+
+- Fixed `BulkActionButton` from throwing an error in `componentDidMount` ([#1913](https://github.com/Shopify/polaris-react/pull/1913))
+- Fixed `ToastManager` from not working correctly in `React.StrictMode` ([#1741](https://github.com/Shopify/polaris-react/pull/1741))
+- Updated translation.yml with the new locales path ([#1649](https://github.com/Shopify/polaris-react/pull/1649))
+
+### Documentation
+
+- Updated `AppProvider` app bridge example to use our `AppBridgeContext`([#1877](https://github.com/Shopify/polaris-react/pull/1877))
+
+### Development workflow
+
+- Added support for React hooks in Storybook ([#1665](https://github.com/Shopify/polaris-react/pull/1665))
+- Created `toBeDisabled`, `mountWithContext` and added custom testing matchers ([#1596](https://github.com/Shopify/polaris-react/pull/1596))
+- Enabled strict mode in TypeScript ([#1883](https://github.com/Shopify/polaris-react/pull/1883))
+
+### Dependency upgrades
+
+- Added `@material-ui/react-transition-group` and removed `react-transition-group` to support `React.StrictMode` ([#1759](https://github.com/Shopify/polaris-react/pull/1759))
+- Added `@shopify/react-testing` ([#1596](https://github.com/Shopify/polaris-react/pull/1596))
+- Removed`@shopify/css-utilities` ([#1586](https://github.com/Shopify/polaris-react/pull/1586))
+- Removed `@types/prop-types` and `prop-types` ([#1505](https://github.com/Shopify/polaris-react/pull/1505))
+- Updated`react` to 16.8.6 and `enzyme` to 3.9.1 ([#1392](https://github.com/Shopify/polaris-react/pull/1392))
+
+### Code quality
+
+- Bumped test coverage in `Collapsible` ([#1929](https://github.com/Shopify/polaris-react/pull/1929))
+- Bumped test coverage in `DropZone`, `Frame`, `Icon`, and `Loading` ([#1927](https://github.com/Shopify/polaris-react/pull/1927))
+- Removed unused type definitions ([#1862](https://github.com/Shopify/polaris-react/pull/1862))
+- Ignored deprecation warnings related to Shopify App Bridge in tests ([#1852](https://github.com/Shopify/polaris-react/pull/1852))
+- Updated `withAppProvider` to use a functional component rather than a class component ([#1813](https://github.com/Shopify/polaris-react/pull/1813))
+- Updated `Link` to use `useI18n` rather than `withAppProvider` ([#1806](https://github.com/Shopify/polaris-react/pull/1806))
+- Updated several components to use hooks instead of `withAppProvider` ([#1797](https://github.com/Shopify/polaris-react/pull/1797))
+- Removed `CSSTransition` from `PopoverOverlay` ([#1756](https://github.com/Shopify/polaris-react/pull/1756))
+- Updated exports in `src/utilities` and `src/test-utilities` to named exports ([#1717](https://github.com/Shopify/polaris-react/pull/1717))
+- Removed test errors and non-deprecation warnings ([#1715](https://github.com/Shopify/polaris-react/pull/1715))
+- Enabled `React.StrictMode` in test components and Storybook ([#1709](https://github.com/Shopify/polaris-react/pull/1709))
+- Removed all uses of `ReactDOM.findDOMNode` ([#1696](https://github.com/Shopify/polaris-react/pull/1696))
+- Enabled `react/no-unsafe` ESLint rule with `checkAliases` ([#1695](https://github.com/Shopify/polaris-react/pull/1695))
+- Alphabetized component export order and kebab-case files ([#1674](https://github.com/Shopify/polaris-react/pull/1674))
+- Updated `Collapsible` to no longer use `componentWillReceiveProps`([#1670](https://github.com/Shopify/polaris-react/pull/1670))
+- Restructured context structure to be more modular ([#1664](https://github.com/Shopify/polaris-react/pull/1664))
+- Updated `PositionedOverlay` to no longer use `componentWillReceiveProps`([#1621](https://github.com/Shopify/polaris-react/pull/1621))
+- Simplified `WithinContentContainer` context type ([#1602](https://github.com/Shopify/polaris-react/pull/1602))
+- Replaced all occurrences of `_.isEqual` with a custom isObjectsEqual function ([#1580](https://github.com/Shopify/polaris-react/pull/1580))
+- Updated `OptionList` to no longer use `componentWillReceiveProps`([#1557](https://github.com/Shopify/polaris-react/pull/1557))
+- Refactored `DualThumb` tests ([#1548](https://github.com/Shopify/polaris-react/pull/1548))
+- Converted `Sheet` to a functional component ([#1548](https://github.com/Shopify/polaris-react/pull/1548))
+- Removed `withContext` from `ResourceList.Item` ([#1503](https://github.com/Shopify/polaris-react/pull/1503))
+- Removed `withContext` from `Navigation.Item` ([#1502](https://github.com/Shopify/polaris-react/pull/1502))
+- Removed `withRef` from `UnstyledLink` ([#1501](https://github.com/Shopify/polaris-react/pull/1501))
+- Removed `withContext` from `ResourceList.FilterControl` ([#1500](https://github.com/Shopify/polaris-react/pull/1500))
+- Removed `withContext` from `Scrollable.ScrollTo` and added a test to boost coverage ([#1499](https://github.com/Shopify/polaris-react/pull/1499))
+- Removed `withContext` from `Loading` ([#1497](https://github.com/Shopify/polaris-react/pull/1497))
+- Removed `withContext` and `withAppProvider` from `ContextualSaveBar` ([#1498](https://github.com/Shopify/polaris-react/pull/1498))
+- Removed `withContext` from `Toast` ([#1494](https://github.com/Shopify/polaris-react/pull/1494))
+- Removed `withRef` and `withContext` from `DropZone.FileUpload` ([#1491](https://github.com/Shopify/polaris-react/pull/1491))
+- Created `useAppBridge` hook ([#1482](https://github.com/Shopify/polaris-react/pull/1482))
+- Removed testID warning in tests ([#1447](https://github.com/Shopify/polaris-react/pull/1447))
+- Updated `AppProvider` to use the new context API and refactored other instances to follow a new pattern and refactor test utilities ([#1424](https://github.com/Shopify/polaris-react/pull/1424))
+- Updated all context files to export react context rather than a provider and consumer ([#1424](https://github.com/Shopify/polaris-react/pull/1424))
+- Deleted `withSticky` ([#1424](https://github.com/Shopify/polaris-react/pull/1424))
+- Upgraded the `Autocomplete` component from legacy context API to use createContext ([#1403](https://github.com/Shopify/polaris-react/pull/1403))
+- Upgraded the `Navigation` component from legacy context API to use createContext ([#1402](https://github.com/Shopify/polaris-react/pull/1402))
+- Updated `ThemeProvider` to use the new context api ([#1396](https://github.com/Shopify/polaris-react/pull/1396))
+- Updated `AppProvider` to no longer use `componentWillReceiveProps`([#1255](https://github.com/Shopify/polaris-react/pull/1255))
+- Removed unused context from `Scrollable` ([#1253](https://github.com/Shopify/polaris-react/pull/1253))
+- Updated `ThemeProvider` to no longer use `componentWillReceiveProps` ([#1254](https://github.com/Shopify/polaris-react/pull/1254))
+- Removed context from `Collapsible` ([#1114](https://github.com/Shopify/polaris-react/pull/1114))
+- Refactored `Frame` and its subcomponents to use the `createContext` API instead of legacy context ([#803](https://github.com/Shopify/polaris-react/pull/803))
+- Upgraded the `Banner`, `Card`, and `Modal` components from legacy context API to use `createContext` ([#786](https://github.com/Shopify/polaris-react/pull/786))
+
+### Deprecations
+
+- Renamed `singleColumn`on`Page`to`narrowWidth` ([#1606](https://github.com/Shopify/polaris-react/pull/1606)).

a11y_shitlist.json

@@ -1,5 +1,5 @@
 {
-  "all-components-app-provider--with-i18n-object": [
+  "all-components-app-provider--with-i18n": [
     {
       "code": "WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent",
       "context": "<a aria-describedby=\"341\" class=\"Item-Link_2-raD\" tabindex=\"0\" id=\"ResourceListItemOverlay1\" href=\"customers/341\" data-polaris-unstyled=\"true\"></a>",

config/rollup/plugins/styles.js

@@ -170,35 +170,26 @@ async function generateSass(inputFolder, outputFolder, cssByFile) {
     }),
   );
 
-  // For each file that was referenced in the build, create a copy of the compiled
-  // ouput
-  const componentsCssFilenames = [];
-  cssByFile.forEach(async (compiledCss, filename) => {
+  const writeStylesFolderFilesPromises = [];
+  const componentFilesContent = [];
+  cssByFile.forEach((compiledCss, filename) => {
+    // Promises to copy the files referenced that live in the styles folder
     if (filename.startsWith(`${inputFolder}/styles`)) {
-      await outputFile(
-        filename.replace(inputFolder, outputFolder),
-        compiledCss,
+      writeStylesFolderFilesPromises.push(
+        outputFile(filename.replace(inputFolder, outputFolder), compiledCss),
       );
     }
 
     // For every referenced file that lives in the components folder:
-    // - copy it into the `styles/components` folder
-    // - make a note of the filename to use as an import
+    // - make a note of the contents to use in styles/components.scss
     if (filename.startsWith(`${inputFolder}/components`)) {
-      componentsCssFilenames.push(filename.replace(inputFolder, '.'));
-
-      await outputFile(
-        filename.replace(inputFolder, `${outputFolder}/styles`),
-        compiledCss,
-      );
+      componentFilesContent.push(compiledCss);
     }
   });
 
   // Generate styles/components.scss
-  // Contains imports for all the individual components that we collected above
-  const componentsScssContents = componentsCssFilenames
-    .map((filename) => `@import "${filename.replace(/\.scss$/, '')}";`)
-    .join('\n');
+  // Contains contents for all the individual components that we collected above
+  const componentsScssContents = componentFilesContent.join('\n\n');
 
   // Generate polaris.scss
   const polarisScssContent = `@import 'styles/foundation';
@@ -208,6 +199,7 @@ async function generateSass(inputFolder, outputFolder, cssByFile) {
 `;
 
   await Promise.all([
+    ...writeStylesFolderFilesPromises,
     outputFile(
       `${outputFolder}/styles/components.scss`,
       componentsScssContents,

config/typescript/react-transition-group.d.ts

@@ -0,0 +1,21 @@
+declare module '@material-ui/react-transition-group' {
+  import {Component} from 'react';
+
+  import CSSTransitionNameSpace = require('react-transition-group/CSSTransition');
+  import {TransitionProps} from 'react-transition-group/Transition';
+
+  type FindDOMNode = () => HTMLElement | null;
+  interface CombinedTransitionProps extends TransitionProps {
+    findDOMNode: FindDOMNode;
+  }
+  type CombinedCSSTransitionProps = CSSTransitionNameSpace.CSSTransitionProps &
+    CombinedTransitionProps;
+
+  // eslint-disable-next-line react/prefer-stateless-function
+  class Transition extends Component<CombinedTransitionProps> {}
+  // eslint-disable-next-line react/prefer-stateless-function
+  class CSSTransition extends Component<CombinedCSSTransitionProps> {}
+  import TransitionGroup = require('react-transition-group/TransitionGroup');
+
+  export {CSSTransition, Transition, TransitionGroup};
+}

config/typescript/react.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 declare module 'react' {
   interface Attributes {

src/locales/de.json → locales/de.json

@@ -121,11 +121,6 @@
       "iFrameTitle": "Text-Markup",
       "modalWarning": "Diese erforderlichen Eigenschaften fehlen im Modus: {missingProps}"
     },
-    "Page": {
-      "Header": {
-        "iconWarningMessage": "Das Symbol-Prop wurde von der Seite entfernt. Laden Sie stattdessen ein Anwendungssymbol im Abschnitt \"App-Setup\" Partners Dashboard von Shopify hoch."
-      }
-    },
     "Pagination": {
       "previous": "Zurück",
       "next": "Nächste",

src/locales/en.json → locales/en.json

@@ -138,12 +138,6 @@
       "modalWarning": "These required properties are missing from Modal: {missingProps}"
     },
 
-    "Page": {
-      "Header": {
-        "iconWarningMessage": "The icon prop has been removed from Page. Upload an application icon in the Shopify Partners Dashboard 'App setup' section instead."
-      }
-    },
-
     "Pagination": {
       "previous": "Previous",
       "next": "Next",