Merge branch 'master' into fix-dropzone-contrast

.github/workflows/approve-dependabot.yml

@@ -0,0 +1,13 @@
+name: Approve dependabot pull requests
+on: [pull_request]
+jobs:
+  automate-pullrequest-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Approve dependabot pull request
+        if: github.actor == 'dependabot'
+        uses: andrewmusgrave/[email protected]
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          event: APPROVE
+          body: 'Thank you dependabot 🎊'

UNRELEASED.md

@@ -11,15 +11,28 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Enhancements
 
 - Changed border color of `Drop zone` to have better contrast from the background and to be lighter when disabled ([#2119](https://github.com/Shopify/polaris-react/pull/2119))
+- Adjusted search results overlay to take up 100% height of the screen on small screens and to match the width of the search bar on large screens. ([#2103](https://github.com/Shopify/polaris-react/pull/2103))
+- Added skipToContentTarget prop to Frame component ([#2080](https://github.com/Shopify/polaris-react/pull/2080))
 
 ### Bug fixes
 
+- Fixed vertical alignment of Tabs disclosure activator ([#2087](https://github.com/Shopify/polaris-react/pull/2087))
+- Fixed `Modal` setting an invalid `id` on `aria-labelledby` when no `title` is set ([#2115](https://github.com/Shopify/polaris-react/pull/2115))
+- Fixed error warnings in `Card` and `RollupActions` tests ([#2125](https://github.com/Shopify/polaris-react/pull/2125))
+- Added default accessibility label from `ResourceItem` ([#2097](https://github.com/Shopify/polaris-react/pull/2097))
+
 ### Documentation
 
+- Updated the `withContext` section in the [v3 to v4 migration guide](https://github.com/Shopify/polaris-react/blob/master/documentation/guides/migrating-from-v3-to-v4.md) ([#2124](https://github.com/Shopify/polaris-react/pull/2124))
+
 ### Development workflow
 
 ### Dependency upgrades
 
 ### Code quality
 
+- Migrated `ContextualSaveBar` to use hooks instead of `withAppProvider` ([#2091](https://github.com/Shopify/polaris-react/pull/2091))
+- Migrated `RangeSlider`, `ScrollLock` and `TopBar.SearchField` to use hooks instead of withAppProvider ([#2083](https://github.com/Shopify/polaris-react/pull/2083))
+- Updated `ResourceItem` to no longer rely on withAppProvider ([#2094](https://github.com/Shopify/polaris-react/pull/2094))
+
 ### Deprecations

documentation/guides/migrating-from-v3-to-v4.md

@@ -237,7 +237,7 @@ The `Tabs.Panel` subcomponent has been removed. This was an undocumented subcomp
 
 ### WithContext <a name="polaris-withcontext"></a>
 
-The `WithContext` component has been removed. It was used as a utility to handle multiple [legacy contexts](https://reactjs.org/docs/legacy-context.html) at once. Use [modern contexts](https://reactjs.org/docs/context.html#api) and access them using providers, hooks or `Class.contextType` instead.
+The `WithContext` component has been removed. It was used as a utility to handle [legacy contexts](https://reactjs.org/docs/legacy-context.html) in class based components and multiple contexts at once. Use [modern contexts](https://reactjs.org/docs/context.html#api) and access them using providers, hooks, or `Class.contextType` instead.
 
 ```jsx
 // old

locales/de.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} Produkte",
       "Item": {
         "actionsDropdownLabel": "Aktionen für {accessibilityLabel}",
-        "actionsDropdown": "Dropdown-Liste mit Aktionen"
+        "actionsDropdown": "Dropdown-Liste mit Aktionen",
+        "viewItem": "Details anzeigen für {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Aktionen",

locales/en.json

@@ -170,7 +170,8 @@
 
       "Item": {
         "actionsDropdownLabel": "Actions for {accessibilityLabel}",
-        "actionsDropdown": "Actions dropdown"
+        "actionsDropdown": "Actions dropdown",
+        "viewItem": "View details for {itemName}"
       },
 
       "BulkActions": {

locales/es.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} artículos",
       "Item": {
         "actionsDropdownLabel": "Acciones para {accessibilityLabel}",
-        "actionsDropdown": "Menú desplegable de acciones"
+        "actionsDropdown": "Menú desplegable de acciones",
+        "viewItem": "Ver detalles de {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Acciones",

locales/fr.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} articles",
       "Item": {
         "actionsDropdownLabel": "Actions pour {accessibilityLabel}",
-        "actionsDropdown": "Actions de la liste déroulante"
+        "actionsDropdown": "Actions de la liste déroulante",
+        "viewItem": "Afficher les détails de {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Actions",

locales/hi.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} आइटम",
       "Item": {
         "actionsDropdownLabel": "{accessibilityLabel} के लिए कार्रवाई",
-        "actionsDropdown": "कार्रवाई ड्रॉपडाउन"
+        "actionsDropdown": "कार्रवाई ड्रॉपडाउन",
+        "viewItem": "{itemName} के लिए विवरण देखें"
       },
       "BulkActions": {
         "actionsActivatorLabel": "कार्रवाई",

locales/it.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} articoli",
       "Item": {
         "actionsDropdownLabel": "Azioni per {accessibilityLabel}",
-        "actionsDropdown": "Menu a tendina delle azioni"
+        "actionsDropdown": "Menu a tendina delle azioni",
+        "viewItem": "Visualizza dettagli di {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Azioni",

locales/ja.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength}個のアイテム",
       "Item": {
         "actionsDropdownLabel": "{accessibilityLabel}のアクション",
-        "actionsDropdown": "アクションドロップダウン"
+        "actionsDropdown": "アクションドロップダウン",
+        "viewItem": "{itemName}の詳細を表示する"
       },
       "BulkActions": {
         "actionsActivatorLabel": "アクション",

locales/ms.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} item",
       "Item": {
         "actionsDropdownLabel": "Tindakan untuk {accessibilityLabel}",
-        "actionsDropdown": "Juntai bawah tindakan"
+        "actionsDropdown": "Juntai bawah tindakan",
+        "viewItem": "Lihat butiran untuk {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Tindakan",

locales/nl.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} artikelen",
       "Item": {
         "actionsDropdownLabel": "Acties voor {accessibilityLabel}",
-        "actionsDropdown": "Vervolgkeuze acties"
+        "actionsDropdown": "Vervolgkeuze acties",
+        "viewItem": "Details weergeven voor {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Acties",

locales/pt-BR.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} itens",
       "Item": {
         "actionsDropdownLabel": "Ações para {accessibilityLabel}",
-        "actionsDropdown": "Menu suspenso Ações"
+        "actionsDropdown": "Menu suspenso Ações",
+        "viewItem": "Visualizar detalhes de {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Ações",

locales/zh-CN.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} 件产品",
       "Item": {
         "actionsDropdownLabel": "{accessibilityLabel}的操作",
-        "actionsDropdown": "操作下拉菜单"
+        "actionsDropdown": "操作下拉菜单",
+        "viewItem": "查看 {itemName} 详细信息"
       },
       "BulkActions": {
         "actionsActivatorLabel": "编辑",

locales/zh-TW.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} 件商品",
       "Item": {
         "actionsDropdownLabel": "{accessibilityLabel} 的動作",
-        "actionsDropdown": "動作下拉式選單"
+        "actionsDropdown": "動作下拉式選單",
+        "viewItem": "檢視 {itemName} 的詳細資訊"
       },
       "BulkActions": {
         "actionsActivatorLabel": "動作",

scripts/pa11y.js

@@ -1,9 +1,6 @@
 /* eslint-disable no-console */
 const puppeteer = require('puppeteer');
 const pa11y = require('pa11y');
-const shitlistCheck = require('./pa11y-utilities.js').shitlistCheck;
-
-const shitlist = require('./../a11y_shitlist.json');
 
 const NUMBER_OF_BROWSERS = 5;
 
@@ -106,28 +103,7 @@ async function runPa11y() {
     process.exit(1);
   }
 
-  const {results, remainingIssues} = shitlistCheck(rawResults, shitlist);
-
-  if (remainingIssues) {
-    console.log(
-      `
-========================================================================
-The following items were fixed, and therefore should be removed from the shitlist.
-Please edit the file a11y_shitlist.json to remove them and run these tests again.',
-========================================================================
-`,
-    );
-    remainingIssues.forEach((issue) => {
-      console.log(
-        '------------------------------------------------------------------------',
-      );
-      console.log(issue.exampleID);
-      console.log(
-        '------------------------------------------------------------------------',
-      );
-      console.log(JSON.stringify(issue.issues, null, 2));
-    });
-  }
+  const results = rawResults.filter((result) => result.issues.length);
 
   console.log(
     `
@@ -153,7 +129,7 @@ The following issues were discovered and need to be fixed before this code can b
     console.log('No issues!');
   }
 
-  if (results.length || remainingIssues) {
+  if (results.length) {
     process.exit(1);
   }
   process.exit(0);

src/components/ActionMenu/components/RollupActions/tests/RollupActions.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {ReactWrapper} from 'enzyme';
 import {HorizontalDotsMinor} from '@shopify/polaris-icons';
-import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
+import {mountWithAppProvider, trigger, act} from 'test-utilities/legacy';
 
 import {Button, Popover} from 'components';
 
@@ -60,7 +60,10 @@ describe('<RollupActions />', () => {
       expect(popoverComponent.prop('active')).toBe(true);
 
       const firstActionListItem = wrapper.find(ActionListItem).first();
-      trigger(firstActionListItem, 'onAction');
+      act(() => {
+        trigger(firstActionListItem, 'onAction');
+      });
+      popoverComponent.update();
 
       popoverComponent = wrapper.find(Popover);
       expect(popoverComponent.prop('active')).toBe(false);
@@ -107,5 +110,8 @@ function findPopoverActivator(wrapper: Wrapper) {
 
 function activatePopover(wrapper: Wrapper) {
   const activator = findPopoverActivator(wrapper);
-  trigger(activator, 'onClick');
+  act(() => {
+    trigger(activator, 'onClick');
+  });
+  wrapper.update();
 }