v7.0.0 release

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: '10.24.0'
+          node-version: '12.13.0'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -39,7 +39,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: '10.24.0'
+          node-version: '12.13.0'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.nvmrc

@@ -1 +1 @@
-v10.24.0
+v12.13.0

.storybook/polaris-readme-loader.js

@@ -75,6 +75,7 @@ import {
   ChoiceList,
   Collapsible,
   ColorPicker,
+  ComboBox,
   Connected,
   ContextualSaveBar,
   DataTable,
@@ -105,6 +106,7 @@ import {
   Layout,
   Link,
   List,
+  ListBox,
   Loading,
   MediaCard,
   Modal,

UNRELEASED.md

@@ -4,6 +4,13 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Breaking changes
 
+- Updated `react` and `react-dom` to version 16.14.0. This is now the minimum version of React required to use the `@shopify/polaris` library.
+- Dropping support for node 10.x
+- Dropped support for Desktop Safari versions less than 13.1, and ios Safari versions less than 13.6. ([#4304](https://github.com/Shopify/polaris-react/pull/4304))
+- Made `autoComplete` prop in `TextField` a required string ([#4267](https://github.com/Shopify/polaris-react/pull/4267)). If you do not want the browser to autofill a user's information (for example an email input which is a customer's email, but not the email of the user who is entering the information), we recommend setting `autoComplete` to `"off"`.
+- `Autocomplete` now requires `Autocomplete.TextField` to be used ([#3910](https://github.com/Shopify/polaris-react/pull/3910))
+- Removed ComboBox as a named export on `Autocomplete` ([#3910](https://github.com/Shopify/polaris-react/pull/3910))
+
 ### Enhancements
 
 - Added `id` prop to `Layout` and `Heading` for hash linking ([#4307](https://github.com/Shopify/polaris-react/pull/4307))
@@ -18,6 +25,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Code quality
 
+- Rebuilt `Autocomplete` internals using new `ComboBox` and `ListBox` components built on the ARIA 1.2 spec for improved accessibility ([#3910](https://github.com/Shopify/polaris-react/pull/3910))
 - Modernized tests for Avatar, Backdrop, Badge, Banner components([#4306](https://github.com/Shopify/polaris-react/pull/4306))
 - Modernized tests for Tooltip, Toast components([#4314](https://github.com/Shopify/polaris-react/pull/4314))
 - Modernized tests for AccountConnection, ActionList components([#4316](https://github.com/Shopify/polaris-react/pull/4316))

dev.yml

@@ -2,7 +2,7 @@ name: polaris-react
 up:
   - node:
       yarn: v1.13.0
-      version: v10.24.0 # to be kept in sync with .nvmrc and ci.yml
+      version: v12.13.0 # to be kept in sync with .nvmrc and ci.yml
   - git_hooks:
       pre-commit: pre-commit
 

examples/create-react-app-ts-react-testing/src/App.tsx

@@ -99,12 +99,14 @@ export function App() {
                   label="First name"
                   placeholder="Tom"
                   onChange={handleFirstChange}
+                  autoComplete="given-name"
                 />
                 <TextField
                   value={last}
                   label="Last name"
                   placeholder="Ford"
                   onChange={handleLastChange}
+                  autoComplete="family-name"
                 />
               </FormLayout.Group>
 
@@ -113,6 +115,7 @@ export function App() {
                 label="Email"
                 placeholder="example@email.com"
                 onChange={handleEmailChange}
+                autoComplete="email"
               />
 
               <ChoiceList

examples/create-react-app/src/App.js

@@ -92,12 +92,14 @@ export function App() {
                   label="First name"
                   placeholder="Tom"
                   onChange={handleFirstChange}
+                  autoComplete="given-name"
                 />
                 <TextField
                   value={last}
                   label="Last name"
                   placeholder="Ford"
                   onChange={handleLastChange}
+                  autoComplete="family-name"
                 />
               </FormLayout.Group>
 
@@ -106,6 +108,7 @@ export function App() {
                 label="Email"
                 placeholder="example@email.com"
                 onChange={handleEmailChange}
+                autoComplete="email"
               />
 
               <ChoiceList

examples/next.js/pages/index.js

@@ -29,12 +29,9 @@ export default function App() {
     [],
   );
 
-  const toggleConnection = useCallback(
-    () => {
-      setConnected(!connected);
-    },
-    [connected],
-  );
+  const toggleConnection = useCallback(() => {
+    setConnected(!connected);
+  }, [connected]);
 
   const breadcrumbs = [{content: 'Sample apps'}, {content: 'next.js'}];
   const primaryAction = {content: 'New product'};
@@ -95,12 +92,14 @@ export default function App() {
                   label="First name"
                   placeholder="Tom"
                   onChange={handleFirstChange}
+                  autoComplete="given-name"
                 />
                 <TextField
                   value={last}
                   label="Last name"
                   placeholder="Ford"
                   onChange={handleLastChange}
+                  autoComplete="family-name"
                 />
               </FormLayout.Group>
 
@@ -109,6 +108,7 @@ export default function App() {
                 label="Email"
                 placeholder="example@email.com"
                 onChange={handleEmailChange}
+                autoComplete="email"
               />
 
               <ChoiceList

examples/webpack/src/App.js

@@ -29,12 +29,9 @@ export default function App() {
     [],
   );
 
-  const toggleConnection = useCallback(
-    () => {
-      setConnected(!connected);
-    },
-    [connected],
-  );
+  const toggleConnection = useCallback(() => {
+    setConnected(!connected);
+  }, [connected]);
 
   const breadcrumbs = [{content: 'Sample apps'}, {content: 'webpack'}];
   const primaryAction = {content: 'New product'};
@@ -95,12 +92,14 @@ export default function App() {
                   label="First name"
                   placeholder="Tom"
                   onChange={handleFirstChange}
+                  autoComplete="given-name"
                 />
                 <TextField
                   value={last}
                   label="Last name"
                   placeholder="Ford"
                   onChange={handleLastChange}
+                  autoComplete="family-name"
                 />
               </FormLayout.Group>
 
@@ -109,6 +108,7 @@ export default function App() {
                 label="Email"
                 placeholder="example@email.com"
                 onChange={handleEmailChange}
+                autoComplete="email"
               />
 
               <ChoiceList

locales/en.json

@@ -8,7 +8,8 @@
       "labelWithInitials": "Avatar with initials {initials}"
     },
     "Autocomplete": {
-      "spinnerAccessibilityLabel": "Loading"
+      "spinnerAccessibilityLabel": "Loading",
+      "ellipsis": "{content}…"
     },
     "Badge": {
       "PROGRESS_LABELS": {

package.json

@@ -78,17 +78,17 @@
   "dependencies": {
     "@shopify/polaris-icons": "^4.1.0",
     "@shopify/polaris-tokens": "^3.0.0",
-    "@types/react": "^16.9.12",
-    "@types/react-dom": "^16.9.4",
+    "@types/react": "^16.14.8",
+    "@types/react-dom": "^16.9.13",
     "@types/react-transition-group": "^4.4.0",
     "focus-visible": "^5.2.0",
     "lodash": "^4.17.4",
     "react-transition-group": "^4.4.1",
     "serve": "^12.0.0"
   },
   "peerDependencies": {
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
   "devDependencies": {
     "@babel/core": "^7.6.0",
@@ -139,10 +139,10 @@
     "object-hash": "^1.3.1",
     "postcss": "^7.0.18",
     "postcss-modules": "^3.1.0",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-is": "^16.9.0",
-    "react-test-renderer": "^16.9.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-is": "^16.7.2",
+    "react-test-renderer": "^16.14.0",
     "rimraf": "^3.0.0",
     "rollup": "^2.22.2",
     "sass-loader": "^8.0.0",
@@ -156,12 +156,13 @@
   },
   "browserslist": [
     "last 3 chrome versions",
-    "last 3 chromeandroid versions",
     "last 3 firefox versions",
     "last 3 opera versions",
-    "last 2 edge versions",
-    "safari >= 10",
-    "ios >= 10"
+    "last 3 edge versions",
+    "last 3 safari versions",
+    "last 3 chromeandroid versions",
+    "last 1 firefoxandroid versions",
+    "ios >= 13.4"
   ],
   "prettier": "@shopify/prettier-config",
   "stylelint": {
@@ -178,7 +179,7 @@
     {
       "name": "esm",
       "path": "dist/esm/index.js",
-      "limit": "100 kB"
+      "limit": "105 kB"
     },
     {
       "name": "esnext",

playground/DetailsPage.tsx

@@ -577,11 +577,13 @@ export function DetailsPage() {
                 label="Title"
                 value="M60-A"
                 onChange={() => setIsDirty(true)}
+                autoComplete="off"
               />
               <TextField
                 label="Description"
                 value={descriptionValue}
                 onChange={handleChange}
+                autoComplete="off"
                 multiline
               />
             </FormLayout>
@@ -653,11 +655,13 @@ export function DetailsPage() {
             label="Subject"
             value={supportSubject}
             onChange={handleSubjectChange}
+            autoComplete="off"
           />
           <TextField
             label="Message"
             value={supportMessage}
             onChange={handleMessageChange}
+            autoComplete="off"
             multiline
           />
         </FormLayout>