diff --git a/.eslintrc b/.eslintrc index 5a096bf1664..9f874b83c24 100644 --- a/.eslintrc +++ b/.eslintrc @@ -55,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": [ { diff --git a/UNRELEASED-v7.md b/UNRELEASED-v7.md index fac9c99fdcd..75177189b09 100644 --- a/UNRELEASED-v7.md +++ b/UNRELEASED-v7.md @@ -19,6 +19,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Added support for multi-sectioned options in `Autocomplete` [#4221](https://github.com/Shopify/polaris-react/pull/4221) - Added `wrapOverflow` prop to `AutocompleteProps` props to force text-breakword ([#4416](https://github.com/Shopify/polaris-react/pull/4416)) +- Added support for React 17 ([#4432](https://github.com/Shopify/polaris-react/pull/4432)) ### Bug fixes diff --git a/config/typescript/react.d.ts b/config/typescript/react.d.ts deleted file mode 100644 index beb24373720..00000000000 --- a/config/typescript/react.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -declare module 'react' { - interface Attributes { - testID?: string; - } -} diff --git a/package.json b/package.json index 3a9356d1c7e..7aba45a498e 100644 --- a/package.json +++ b/package.json @@ -76,17 +76,17 @@ "dependencies": { "@shopify/polaris-icons": "^4.1.0", "@shopify/polaris-tokens": "^3.0.0", - "@types/react": "^16.14.8", - "@types/react-dom": "^16.9.13", - "@types/react-transition-group": "^4.4.0", + "@types/react": "^17.0.19", + "@types/react-dom": "^17.0.9", + "@types/react-transition-group": "^4.4.2", "focus-visible": "^5.2.0", "lodash": "^4.17.4", - "react-transition-group": "^4.4.1", + "react-transition-group": "^4.4.2", "serve": "^12.0.0" }, "peerDependencies": { - "react": "^16.14.0", - "react-dom": "^16.14.0" + "react": "^16.14.0 || ^17.0.0", + "react-dom": "^16.14.0 || ^17.0.0" }, "devDependencies": { "@babel/core": "^7.15.0", @@ -120,8 +120,6 @@ "@storybook/addon-essentials": "^6.3.7", "@storybook/addon-knobs": "^6.3.0", "@storybook/react": "^6.3.7", - "@types/enzyme": "^3.10.3", - "@types/enzyme-adapter-react-16": "^1.0.5", "@types/lodash": "^4.14.138", "@types/node": "^12.7.5", "@types/scss-parser": "^1.0.0", @@ -134,23 +132,20 @@ "core-js": "^3.6.5", "create-file-webpack": "^1.0.2", "downlevel-dts": "^0.6.0", - "enzyme": "^3.10.0", - "enzyme-adapter-react-16": "^1.14.0", "fs-extra": "^7.0.1", "glob": "^7.1.4", "gray-matter": "^4.0.2", "marked": "^0.7.0", - "mutationobserver-shim": "^0.3.3", "node-cmd": "^3.0.0", "node-sass": "^4.12.0", "npm-run-all": "^4.1.5", "object-hash": "^1.3.1", "postcss": "^7.0.18", "postcss-modules": "^3.1.0", - "react": "^16.14.0", - "react-dom": "^16.14.0", - "react-is": "^16.7.2", - "react-test-renderer": "^16.14.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-is": "^17.0.2", + "react-test-renderer": "^17.0.2", "rimraf": "^3.0.0", "sass-loader": "^8.0.0", "scss-parser": "^1.0.3", diff --git a/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx b/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx index ee265d0f20e..8f8cf092291 100644 --- a/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx +++ b/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx @@ -98,10 +98,7 @@ export class ConnectedFilterControl extends Component< const rightMarkup = actionsToRender.length > 0 ? ( -
+
{this.popoverFrom(actionsToRender)}
) : null; diff --git a/src/components/Frame/components/Toast/Toast.tsx b/src/components/Frame/components/Toast/Toast.tsx index 2712b24e217..f82a47b677c 100644 --- a/src/components/Frame/components/Toast/Toast.tsx +++ b/src/components/Frame/components/Toast/Toast.tsx @@ -48,12 +48,7 @@ export function Toast({ }, [action, duration, onDismiss]); const dismissMarkup = ( - ); diff --git a/src/components/Modal/components/Dialog/Dialog.tsx b/src/components/Modal/components/Dialog/Dialog.tsx index 6a82a76897e..8c56a565fdb 100644 --- a/src/components/Modal/components/Dialog/Dialog.tsx +++ b/src/components/Modal/components/Dialog/Dialog.tsx @@ -75,11 +75,7 @@ export function Dialog({ className={styles.Dialog} >
- + {children}
diff --git a/src/components/Navigation/components/Section/Section.tsx b/src/components/Navigation/components/Section/Section.tsx index e435e9015a3..64884023304 100644 --- a/src/components/Navigation/components/Section/Section.tsx +++ b/src/components/Navigation/components/Section/Section.tsx @@ -119,7 +119,6 @@ export function Section({ className={toggleClassName} onClick={toggleExpanded} aria-label={ariaLabel} - testID="ToggleViewAll" > diff --git a/src/components/Navigation/components/Section/tests/Section.test.tsx b/src/components/Navigation/components/Section/tests/Section.test.tsx index 545a2664626..22e5be5b396 100644 --- a/src/components/Navigation/components/Section/tests/Section.test.tsx +++ b/src/components/Navigation/components/Section/tests/Section.test.tsx @@ -138,7 +138,9 @@ describe('', () => { {...context}, ); - channels.find('button', {testID: 'ToggleViewAll'})!.trigger('onClick'); + channels + .find('button', {className: 'Item RollupToggle'})! + .trigger('onClick'); channels.find('a')!.trigger('onClick', { preventDefault: noop, currentTarget: { @@ -185,7 +187,9 @@ describe('', () => { }, ); - withSubNav.find('button', {testID: 'ToggleViewAll'})!.trigger('onClick'); + withSubNav + .find('button', {className: 'Item RollupToggle'})! + .trigger('onClick'); withSubNav.find(Item, {url: '/other'})!.trigger('onClick'); expect(withSubNav).toContainReactComponent(Collapsible, {open: true}); @@ -206,7 +210,7 @@ describe('', () => { ); expect(channels).toContainReactComponent('button', { - testID: 'ToggleViewAll', + className: 'Item RollupToggle', }); }); diff --git a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx index 4ea3fb77215..1eeaa710f7d 100644 --- a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx +++ b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx @@ -147,7 +147,6 @@ export class PopoverOverlay extends PureComponent { return ( ', () => { it('renders an activator', () => { const popover = mountWithApp( - Activator} - onClose={spy} - />, + Activator} onClose={spy} />, ); - expect(popover).toContainReactComponent('div', {testID: 'activator'}); + expect(popover).toContainReactComponent('div', {children: 'Activator'}); }); it('renders a positionedOverlay when active is true', () => { diff --git a/src/components/ResourceList/components/FilterControl/components/FilterCreator/FilterCreator.tsx b/src/components/ResourceList/components/FilterControl/components/FilterCreator/FilterCreator.tsx index b1fa0755628..a219ddda408 100644 --- a/src/components/ResourceList/components/FilterControl/components/FilterCreator/FilterCreator.tsx +++ b/src/components/ResourceList/components/FilterControl/components/FilterCreator/FilterCreator.tsx @@ -120,7 +120,6 @@ export function FilterCreator({