Merge branch 'main' into sophie/visually-hidden-css-bug

.eslintignore

@@ -1,5 +1,10 @@
 node_modules
+/.loom
 /examples
 /build
-/dist
+/build-internal
 /src/styles/polaris-tokens
+
+index.esnext
+index.js
+index.mjs

.eslintrc

@@ -38,6 +38,7 @@
     "@shopify/jsx-prefer-fragment-wrappers": "off",
     "@shopify/no-ancestor-directory-import": "error",
     "@shopify/react-prefer-private-members": "off",
+    "@typescript-eslint/array-type": ["error", {"defaultOption": "array"}],
     "jsx-a11y/label-has-for": [
       2,
       {
@@ -54,18 +55,7 @@
     "jsx-a11y/mouse-events-have-key-events": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-noninteractive-element-interactions": "off",
-    "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
-    "no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "test-utilities/legacy",
-            "message": "Please import the modern testing library from 'test-utilities' instead"
-          }
-        ]
-      }
-    ]
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": "off"
   },
   "overrides": [
     {
@@ -96,12 +86,6 @@
         "@shopify/jsx-no-hardcoded-content": "off"
       }
     },
-    {
-      "files": ["esnext/index.js"],
-      "rules": {
-        "import/no-unresolved": "off"
-      }
-    },
     {
       "files": ["playground/Playground.tsx"],
       "rules": {

.github/CONTRIBUTING.md

@@ -4,23 +4,23 @@ Polaris React is Shopify’s most active open source project. It’s the only pr
 
 ## Code of conduct
 
-We expect all participants to read our [code of conduct](https://github.com/Shopify/polaris-react/blob/master/.github/CODE_OF_CONDUCT.md) to understand which actions are and aren’t tolerated.
+We expect all participants to read our [code of conduct](https://github.com/Shopify/polaris-react/blob/main/.github/CODE_OF_CONDUCT.md) to understand which actions are and aren’t tolerated.
 
 ## Open development
 
 All work on Polaris React happens directly on GitHub. Both team members and external contributors send pull requests which go through the same review process.
 
 ## Semantic versioning
 
-Polaris React follows semantic versioning. We release [patch versions for bug fixes](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md#patch), [minor versions for new features](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md#minor), and [major versions for breaking changes](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md#major). When we make breaking changes, we introduce deprecation warnings in a minor version along with the upgrade path so that our users learn about the upcoming changes and migrate their code in advance.
+Polaris React follows semantic versioning. We release [patch versions for bug fixes](https://github.com/Shopify/polaris-react/blob/main/documentation/Versioning%20and%20changelog.md#patch), [minor versions for new features](https://github.com/Shopify/polaris-react/blob/main/documentation/Versioning%20and%20changelog.md#minor), and [major versions for breaking changes](https://github.com/Shopify/polaris-react/blob/main/documentation/Versioning%20and%20changelog.md#major). When we make breaking changes, we introduce deprecation warnings in a minor version along with the upgrade path so that our users learn about the upcoming changes and migrate their code in advance.
 
 We tag every pull request with a label marking whether the change should go in the next patch, minor, or a major version. We release new patch versions most weeks, minor versions every couple weeks, and major versions one or two times a year.
 
-Every significant change is documented in the [CHANGELOG](https://github.com/Shopify/polaris-react/blob/master/CHANGELOG.md). We have a Probot 🤖 to remind you to include a CHANGELOG entry.
+Every significant change is documented in the [CHANGELOG](https://github.com/Shopify/polaris-react/blob/main/CHANGELOG.md). We have a Probot 🤖 to remind you to include a CHANGELOG entry.
 
 ## Branch organization
 
-We do our best to keep `master` releasable at all times, with work for major releases happening in separate branches. [Breaking changes](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md#major) should never be merged directly to `master`. Otherwise, if you send a pull request please do it against the `master` branch. Continue reading for more about pull requests and breaking changes.
+We do our best to keep `main` releasable at all times, with work for major releases happening in separate branches. [Breaking changes](https://github.com/Shopify/polaris-react/blob/main/documentation/Versioning%20and%20changelog.md#major) should never be merged directly to `main`. Otherwise, if you send a pull request please do it against the `main` branch. Continue reading for more about pull requests and breaking changes.
 
 ## Bugs
 
@@ -64,15 +64,14 @@ We’ll review your pull request and either merge it, request changes to it, or
 
 **Before submitting a pull request**, please:
 
-1. Fork the repository and create your branch from `master`
+1. Fork the repository and create your branch from `main`
 1. Run `yarn` in the repository root
-1. If you’ve fixed a bug or added code that [should be tested](https://github.com/Shopify/web-foundation/blob/master/Best%20practices/Testing.md), add tests
-1. Ensure the test suite passes with `yarn test` (protip: `yarn test:watch TestName` is helpful in development)
-1. If your pull request modifies any SVG files run `yarn run sewing-kit optimize`
+1. If you’ve fixed a bug or added code, make sure to add tests
+1. Ensure the test suite passes with `yarn test` (protip: `yarn test TestName` is helpful in development)
 1. Format your code with `yarn format`
 1. Make sure your code lints with `yarn lint`
 1. Run the TypeScript compiler with `yarn type-check`
-1. [Tophat 🎩](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting.md) your changes locally with `yarn dev`
+1. [Tophat 🎩](https://github.com/Shopify/polaris-react/blob/main/documentation/Tophatting.md) your changes locally with `yarn dev`
 1. If you haven’t already, [sign a CLA](https://cla.shopify.com/)
 
 ### Contributor License Agreement (CLA)
@@ -85,15 +84,16 @@ Each contributor is required to [sign a CLA](https://cla.shopify.com/). This pro
 
 ### Best practices
 
-Take a look at [our best practices](https://github.com/Shopify/web-foundation/tree/master/handbook/Best%20practices) which include [testing](https://github.com/Shopify/web-foundation/blob/master/handbook/Best%20practices/Testing.md), [React testing](https://github.com/Shopify/web-foundation/blob/master/handbook/Best%20practices/React/Testing.md), [Jest](https://github.com/Shopify/web-foundation/blob/master/handbook/Best%20practices/Jest.md), and [Enzyme](https://github.com/Shopify/web-foundation/blob/master/handbook/Best%20practices/Enzyme.md). We will continue to add best practices here.
+Use the [documentation directory](https://github.com/Shopify/polaris-react/tree/main/documentation) for guidance on: [accessibility testing](https://github.com/Shopify/polaris-react/blob/main/documentation/Accessibility%20testing.md) and [adding to the change log](https://github.com/Shopify/polaris-react/blob/main/documentation/Versioning%20and%20changelog.md). For code style best practices, take a look at existing components.
+
+Making sure the voice and tone is consistent across Polaris is important to us, for more information visit the [voice and tone guidelines](https://polaris.shopify.com/content/voice-and-tone).
 
 ### Development workflow
 
 After cloning Polaris React, run `yarn` to fetch its dependencies. Then you can run several commands:
 
 - `yarn dev` runs a Storybook server which includes a playground editable at `playground/Playground.tsx`
 - `yarn test` runs the complete test suite
-- `yarn test:coverage` runs tests and generates a test coverage report
 - `yarn test <pattern>` runs tests with matching filenames
 - `yarn tophat` runs a local development server and mounts all of the component examples
 
@@ -116,8 +116,8 @@ Linting will catch common issues that may exist in your code. You can check the
 
 Our code editor of choice is [VS Code](https://code.visualstudio.com/) which has [integrations with Prettier](https://github.com/prettier/prettier-vscode) and our linting tools which make this automatic. If you choose to use VS Code, these integrations will be listed as recommended extensions (or search for `@recommended`) in the extensions panel.
 
-However, there are still some styles that the linter cannot pick up. If you are unsure about something, looking at [our JavaScript style guide](https://github.com/Shopify/javascript) will guide you in the right direction.
+However, there are still some styles that the linter cannot pick up. If you are unsure about something, looking at [our JavaScript](https://github.com/Shopify/javascript) and [CSS](https://github.com/Shopify/css) guides may help.
 
 ## Breaking changes
 
-If your pull request contains breaking changes, please target the branch for the next major release and open a pull request against `master` that introduces the deprecation warnings and upgrade path. If you are unsure if the changes are considered breaking or not, open your pull request against the `master` branch and let us know. We understand it can be uncomfortable asking for help and this is why we have a [code of conduct](https://github.com/Shopify/polaris-react/blob/master/.github/CODE_OF_CONDUCT.md) to ensure the community is positive, encouraging, and helpful.
+If your pull request contains breaking changes, please target the branch for the next major release and open a pull request against `main` that introduces the deprecation warnings and upgrade path. If you are unsure if the changes are considered breaking or not, open your pull request against the `main` branch and let us know. We understand it can be uncomfortable asking for help and this is why we have a [code of conduct](https://github.com/Shopify/polaris-react/blob/main/.github/CODE_OF_CONDUCT.md) to ensure the community is positive, encouraging, and helpful.

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -10,7 +10,6 @@ labels: Feature request
 Write a short description of the feature here ↓
 -->
 
-
 ## Rationale
 
 <!--
@@ -19,4 +18,4 @@ Explain the benefit of this feature
 
 ---
 
-🌟 Feature requests that are not yet planned will be closed. We then use the issue’s [:+1: upvotes](https://help.github.com/articles/about-conversations-on-github/) to track and set priorities. See the [contribution guidelines](https://github.com/Shopify/polaris-react/blob/master/.github/CONTRIBUTING.md) for more information.
+🌟 Feature requests that are not yet planned will be closed. We then use the issue’s [:+1: upvotes](https://help.github.com/articles/about-conversations-on-github/) to track and set priorities. See the [contribution guidelines](https://github.com/Shopify/polaris-react/blob/main/.github/CONTRIBUTING.md) for more information.

.github/ISSUE_TEMPLATE/ISSUE.md

@@ -12,14 +12,12 @@ labels: 🐛Bug
 Write a short description of the issue here ↓
 -->
 
-
 ## Expected behavior
 
 <!--
 What do you think should happen?
 -->
 
-
 ## Actual behavior
 
 <!--
@@ -36,12 +34,10 @@ If you include an animated gif showing your issue, wrapping it in a details tag
 
 -->
 
-
 ## Steps to reproduce the problem
 
-1.
-1.
-1.
+1. First step
+1. Second step
 
 ## Reduced test case
 
@@ -55,7 +51,6 @@ The best way to get your bug fixed is to provide a reduced test case. This [Code
 - Device:
 - Operating System:
 
-
 Or run `npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/polaris` to provide specifications on your environment including version numbers, browser, device, and operating system.
 
 Paste the results here:

.github/PULL_REQUEST_TEMPLATE.md

@@ -56,24 +56,19 @@ export function Playground() {
     </Page>
   );
 }
-
 ```
 
 </details>
 
 ### 🎩 checklist
 
-* [ ] Tested on [mobile](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting.md#cross-browser-testing)
-* [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/intro-to-shopify/shopify-admin/supported-browsers)
-* [ ] Tested for [accessibility](https://github.com/Shopify/polaris-react/blob/master/documentation/Accessibility%20testing.md)
-* [ ] Updated the component's `README.md` with documentation changes
-* [ ] [Tophatted documentation](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting%20documentation.md) changes in the style guide
-* [ ] For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit
+- [ ] Tested on [mobile](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting.md#cross-browser-testing)
+- [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/intro-to-shopify/shopify-admin/supported-browsers)
+- [ ] Tested for [accessibility](https://github.com/Shopify/polaris-react/blob/master/documentation/Accessibility%20testing.md)
+- [ ] Updated the component's `README.md` with documentation changes
+- [ ] [Tophatted documentation](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting%20documentation.md) changes in the style guide
+- [ ] For visual design changes, ping @ sarahill to update the Polaris UI kit
 
 <!--
   When tophatting, please check the UNRELEASED entry for consistency, as per the [guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md).
 -->
-
-<!--
-  If you don't have access to Percy, please request access in the #polaris Slack channel.
--->

.github/changelog.yml

@@ -14,4 +14,4 @@ include:
   - /^tsconfig.json$/
 inProgressMessage: missing an entry in UNRELEASED.md
 skipLabel: 🤖Skip Changelog
-detailsUrl: https://github.com/Shopify/polaris-react/blob/master/UNRELEASED.md
+detailsUrl: https://github.com/Shopify/polaris-react/blob/main/UNRELEASED.md

.github/probots.yml

@@ -1,6 +1,4 @@
 enabled:
-  - wip
-  - triage-new-issues
   - changelog
   - cla
   - welcome

.github/workflows/ci.yml

@@ -0,0 +1,60 @@
+name: CI
+
+on: push
+
+jobs:
+  test:
+    name: 'Test'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 12
+          cache: yarn
+
+      - run: yarn --frozen-lockfile
+      - run: yarn run type-check && yarn run build
+      - run: yarn run lint
+      - run: yarn run check:custom-properties
+      - run: yarn run test
+
+  accessibility_test:
+    name: 'Accessibility test'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 12
+          cache: yarn
+
+      - run: yarn --frozen-lockfile
+      - run: yarn run storybook:build --quiet
+      - run: node ./scripts/accessibility-check.js
+        env:
+          STORYBOOK_DISABLE_DOCS: 1
+
+  visual_regression_test:
+    name: 'Visual regression test'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # Chromatic git history to track changes
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 12
+          cache: yarn
+
+      - run: yarn --frozen-lockfile
+      - run: yarn storybook:build --quiet
+
+      - uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          storybookBuildDir: 'build-internal/storybook/static'
+          autoAcceptChanges: 'main'
+          exitZeroOnChanges: true
+          exitOnceUploaded: true

.github/workflows/size-limit.yml

@@ -0,0 +1,18 @@
+name: Size limit
+
+on:
+  pull_request:
+    branches:
+      - '**'
+
+jobs:
+  size:
+    name: Size limit
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v2
+      - uses: andresz1/[email protected]
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,7 +1,13 @@
 *.log
 node_modules
+/.loom
 /build
-/dist
+/build-internal
 .DS_Store
 *.scss.d.ts
 /src/styles/polaris-tokens
+.idea
+
+index.esnext
+index.js
+index.mjs

.nvmrc

@@ -1 +1 @@
-v10.15.0
+v12.22.0