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

UNRELEASED.md

@@ -7,13 +7,18 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 ### Enhancements
 
 - Update `VisuallyHidden` styles to not use `top` or `clip` ([#4641](https://github.com/Shopify/polaris-react/pull/4641)).
+- Added `PlainAction` type to `ComplexAction`. ([#4489](https://github.com/Shopify/polaris-react/pull/4489)
 
 ### Bug fixes
 
+- Fixed try-catch syntax error in `Modal` ([#4553](https://github.com/Shopify/polaris-react/pull/4553))
+
 ### Documentation
 
 ### Development workflow
 
+- Tightened up what absolute imports are allowed. Removed `baseUrl` from `tsconfig.json`. Attempting to do an absolute import from `src/X` or `components/X` now results in a error when type-checking. ([#4643](https://github.com/Shopify/polaris-react/pull/4643))
+
 ### Dependency upgrades
 
 ### Code quality

loom.config.ts

@@ -50,13 +50,13 @@ function jestAdjustmentsPlugin() {
     test.hook(({hooks}) => {
       hooks.configure.hook((configuration) => {
         // Aliases for root-level imports, which are used in test files
-        // These do not work in rollup builds, so perhaps we shouldn't configure
-        // them to work in jest tests either
-        configuration.jestModuleNameMapper?.hook((moduleMapper) => {
-          moduleMapper['^tests(.*)'] = '<rootDir>/tests$1';
-          moduleMapper['^(components)(.*)'] = '<rootDir>/src/$1$2';
-          return moduleMapper;
-        });
+        // `tests/*` as an alias for test-only utilities is acceptable, but
+        // avoid others as paths working in jest but not in rollup is confusing
+        configuration.jestModuleNameMapper?.hook((moduleNameMapper) => ({
+          ...moduleNameMapper,
+          '^tests/(.*)': '<rootDir>/tests/$1',
+          '^components$': '<rootDir>/src/components',
+        }));
 
         // Ignore tests in the examples folder
         configuration.jestConfig?.hook((config) => ({

src/components/AccountConnection/tests/AccountConnection.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 import {Avatar} from 'components';
-import {Button} from 'components/Button';
 
+import {Button} from '../../Button';
 import {AccountConnection} from '../AccountConnection';
 
 describe('<AccountConnection />', () => {

src/components/AppProvider/tests/AppProvider.test.tsx

@@ -1,11 +1,11 @@
 import React, {useContext} from 'react';
 import {matchMedia} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
-import {MediaQueryProvider} from 'components/MediaQueryProvider';
 
 import {LinkContext} from '../../../utilities/link';
-import {AppProvider} from '../AppProvider';
 import {FocusManager} from '../../FocusManager';
+import {MediaQueryProvider} from '../../MediaQueryProvider';
+import {AppProvider} from '../AppProvider';
 
 describe('<AppProvider />', () => {
   beforeEach(() => {

src/components/IndexTable/tests/IndexTable.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {Sticky} from 'components/Sticky';
-import {EventListener} from 'components/EventListener';
 
 import {getTableHeadingsBySelector} from '../utilities';
 import {EmptySearchResult} from '../../EmptySearchResult';
+import {EventListener} from '../../EventListener';
 import {Spinner} from '../../Spinner';
+import {Sticky} from '../../Sticky';
 import {Button} from '../../Button';
 import {Checkbox} from '../../Checkbox';
 import {Badge} from '../../Badge';

src/components/Labelled/tests/Labelled.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import {InlineError, Label, Labelled} from 'components';
 import {mountWithApp} from 'tests/utilities';
-import {Button} from 'components/Button';
+
+import {Button} from '../../Button';
 
 describe('<Labelled />', () => {
   it('passes relevant props along to the label', () => {

src/components/Layout/tests/Layout.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {TextContainer} from 'components/TextContainer';
-import {Heading} from 'components/Heading';
 
+import {Heading} from '../../Heading';
+import {TextContainer} from '../../TextContainer';
 import {Section} from '../components';
 import {Layout} from '../Layout';
 import styles from '../Layout.scss';

src/components/Modal/Modal.tsx

@@ -121,7 +121,7 @@ export const Modal: React.FunctionComponent<ModalProps> & {
       if (iframe && iframe.contentWindow) {
         try {
           setIframeHeight(iframe.contentWindow.document.body.scrollHeight);
-        } catch {
+        } catch (_error) {
           setIframeHeight(DEFAULT_IFRAME_CONTENT_HEIGHT);
         }
       }

src/components/Pagination/tests/Pagination.test.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 import type {CustomRoot} from '@shopify/react-testing';
 import {Tooltip, TextField} from 'components';
-import {TextStyle} from 'components/TextStyle';
 
 import {Key} from '../../../types';
 import {Pagination} from '../Pagination';
 import {Button} from '../../Button';
 import {ButtonGroup} from '../../ButtonGroup';
+import {TextStyle} from '../../TextStyle';
 import en from '../../../../locales/en.json';
 
 interface HandlerMap {

src/components/Popover/tests/Popover.test.tsx

@@ -1,8 +1,8 @@
 import React, {useCallback, useRef, useState} from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {PositionedOverlay} from 'components/PositionedOverlay';
 import {Portal} from 'components';
 
+import {PositionedOverlay} from '../../PositionedOverlay';
 import {Popover} from '../Popover';
 import type {PopoverPublicAPI} from '../Popover';
 import {PopoverOverlay} from '../components';

src/components/RangeSlider/components/SingleThumb/tests/SingleThumb.test.tsx

@@ -1,7 +1,7 @@
-import {InlineError} from 'components/InlineError';
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
+import {InlineError} from '../../../../InlineError';
 import {SingleThumb} from '../SingleThumb';
 
 const mockProps = {

src/components/SettingToggle/tests/SettingToggle.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {SettingAction} from 'components/SettingAction';
 
+import {SettingAction} from '../../SettingAction';
 import {SettingToggle} from '../SettingToggle';
 
 describe('<SettingToggle />', () => {

src/components/TopBar/components/UserMenu/tests/UserMenu.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {ViewMinor} from '@shopify/polaris-icons';
 import {mountWithApp} from 'tests/utilities';
-import {Avatar} from 'components/Avatar';
 
+import {Avatar} from '../../../../Avatar';
 import {UserMenu} from '../UserMenu';
 import {Menu} from '../../Menu';
 

src/components/UnstyledLink/tests/UnstyledLink.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {UnstyledLink} from 'components/UnstyledLink';
+
+import {UnstyledLink} from '../UnstyledLink';
 
 describe('<UnstyledLink />', () => {
   describe('custom link component', () => {

src/types.ts

@@ -156,6 +156,11 @@ export interface OutlineableAction extends Action {
   outline?: boolean;
 }
 
+export interface PlainAction extends Action {
+  /** Should action be displayed as a plain link */
+  plain?: boolean;
+}
+
 export interface ActionListItemDescriptor
   extends IconableAction,
     DisableableAction,
@@ -192,7 +197,8 @@ export interface ComplexAction
     DestructableAction,
     IconableAction,
     OutlineableAction,
-    LoadableAction {}
+    LoadableAction,
+    PlainAction {}
 
 export interface MenuActionDescriptor extends ComplexAction {
   /** Zero-indexed numerical position. Overrides the action's order in the menu */

src/utilities/index-table/tests/hooks-useContainerScroll.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 import {IndexTable, IndexTableProps} from 'components';
-import {ScrollContainer} from 'components/IndexTable';
 
+// eslint-disable-next-line @shopify/strict-component-boundaries
+import {ScrollContainer} from '../../../components/IndexTable';
 import {useContainerScroll} from '../hooks';
 
 function Component({condensed}: {condensed?: boolean}) {

tsconfig.json

@@ -1,7 +1,6 @@
 {
   "extends": "@shopify/typescript-configs/library",
   "compilerOptions": {
-    "baseUrl": "./",
     "rootDir": "./",
     "noEmit": false,
     "emitDeclarationOnly": true,
@@ -12,8 +11,8 @@
     "importsNotUsedAsValues": "error",
     "strictFunctionTypes": false,
     "paths": {
-      "components": ["src/components"],
-      "components/*": ["src/components/*"]
+      "components": ["./src/components"],
+      "tests/*": ["./tests/*"]
     }
   },
   "include": ["./config/typescript", "./src", "./tests", "./playground"]