diff --git a/package.json b/package.json index 6b9e6049689..58931b677a0 100644 --- a/package.json +++ b/package.json @@ -159,7 +159,7 @@ "shx": "^0.3.2", "storybook-chromatic": "^3.1.0", "svgo": "^1.3.0", - "typescript": "~3.7.2" + "typescript": "~3.5.1" }, "peerDependencies": { "react": "^16.8.6", diff --git a/src/components/ContextualSaveBar/ContextualSaveBar.tsx b/src/components/ContextualSaveBar/ContextualSaveBar.tsx index 981b57ea049..159ce208f24 100644 --- a/src/components/ContextualSaveBar/ContextualSaveBar.tsx +++ b/src/components/ContextualSaveBar/ContextualSaveBar.tsx @@ -1,14 +1,11 @@ import React from 'react'; -import { - ContextualSaveBarProps as ContextualSaveBarProps1, - useFrame, -} from '../../utilities/frame'; +import {ContextualSaveBarProps, useFrame} from '../../utilities/frame'; // The script in the styleguide that generates the Props Explorer data expects -// that the interface defining the props is defined in this file, not imported -// from elsewhere. This silly workaround ensures that the Props Explorer table -// is generated correctly. -export interface ContextualSaveBarProps extends ContextualSaveBarProps1 {} +// a component's props to be found in the Props interface. This silly workaround +// ensures that the Props Explorer table is generated correctly, instead of +// crashing if we write `ContextualSaveBar extends React.Component` +export interface ContextualSaveBarProps extends ContextualSaveBarProps {} export const ContextualSaveBar = React.memo(function ContextualSaveBar({ message, diff --git a/src/components/DropZone/tests/DropZone.test.tsx b/src/components/DropZone/tests/DropZone.test.tsx index fd03defd982..50f11ab54d0 100755 --- a/src/components/DropZone/tests/DropZone.test.tsx +++ b/src/components/DropZone/tests/DropZone.test.tsx @@ -473,9 +473,6 @@ function setBoundingClientRect(size: keyof typeof widths) { left: 0, bottom: 0, right: 0, - x: 0, - y: 0, - toJSON() {}, }; }); } diff --git a/src/components/RangeSlider/RangeSlider.tsx b/src/components/RangeSlider/RangeSlider.tsx index 861e016fd75..2e787abb004 100644 --- a/src/components/RangeSlider/RangeSlider.tsx +++ b/src/components/RangeSlider/RangeSlider.tsx @@ -6,9 +6,9 @@ import {RangeSliderDefault} from './utilities'; import {SingleThumb, DualThumb} from './components'; // The script in the styleguide that generates the Props Explorer data expects -// that the interface defining the props is defined in this file, not imported -// from elsewhere. This silly workaround ensures that the Props Explorer table -// is generated correctly. +// a component's props to be found in the Props interface. This silly workaround +// ensures that the Props Explorer table is generated correctly, instead of +// crashing if we write `RangeSlider extends React.Component` interface Props extends RangeSliderProps {} export function RangeSlider({ diff --git a/src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx b/src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx index d8afbba6b27..6468109d8eb 100644 --- a/src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx +++ b/src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx @@ -490,7 +490,16 @@ describe('', () => { }); getBoundingClientRectSpy = jest .spyOn(Element.prototype, 'getBoundingClientRect') - .mockImplementation(mockGetBoundingClientRect); + .mockImplementation(() => { + return { + width: 124, + height: 0, + top: 0, + left: -12, + bottom: 0, + right: 0, + }; + }); }); afterAll(() => { @@ -694,7 +703,16 @@ describe('', () => { }); getBoundingClientRectSpy = jest .spyOn(Element.prototype, 'getBoundingClientRect') - .mockImplementation(mockGetBoundingClientRect); + .mockImplementation(() => { + return { + width: 124, + height: 0, + top: 0, + left: -12, + bottom: 0, + right: 0, + }; + }); }); afterAll(() => { @@ -1025,19 +1043,3 @@ function findThumbUpper(containerComponent: ReactWrapper): ReactWrapper { function findTrack(containerComponent: ReactWrapper): ReactWrapper { return findByTestID(containerComponent, 'trackWrapper'); } - -function mockGetBoundingClientRect(): ReturnType< - Element['getBoundingClientRect'] -> { - return { - width: 124, - height: 0, - top: 0, - left: -12, - bottom: 0, - right: 0, - x: 0, - y: 0, - toJSON() {}, - }; -} diff --git a/src/components/ThemeProvider/ThemeProvider.tsx b/src/components/ThemeProvider/ThemeProvider.tsx index e683482d4fd..d7d85ecfd6d 100644 --- a/src/components/ThemeProvider/ThemeProvider.tsx +++ b/src/components/ThemeProvider/ThemeProvider.tsx @@ -32,10 +32,10 @@ export function ThemeProvider({ [customProperties, themeConfig, unstableGlobalTheming], ); - // We want these values to be empty string instead of `undefined` when not set. + // We want these values to be `null` instead of `undefined` when not set. // Otherwise, setting a style property to `undefined` does not remove it from the DOM. - const backgroundColor = customProperties['--p-surface-background'] || ''; - const color = customProperties['--p-text-on-surface'] || ''; + const backgroundColor = customProperties['--p-surface-background'] || null; + const color = customProperties['--p-text-on-surface'] || null; useEffect(() => { document.body.style.backgroundColor = backgroundColor; diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx index 339df4e6e31..f9e12c162f5 100644 --- a/src/components/Toast/Toast.tsx +++ b/src/components/Toast/Toast.tsx @@ -2,16 +2,16 @@ import React, {useRef} from 'react'; import {Toast as AppBridgeToast} from '@shopify/app-bridge/actions'; import {DEFAULT_TOAST_DURATION} from '../Frame'; -import {ToastProps as ToastProps1, useFrame} from '../../utilities/frame'; +import {ToastProps, useFrame} from '../../utilities/frame'; import {useUniqueId} from '../../utilities/unique-id'; import {useDeepEffect} from '../../utilities/use-deep-effect'; import {useAppBridge} from '../../utilities/app-bridge'; // The script in the styleguide that generates the Props Explorer data expects -// that the interface defining the props is defined in this file, not imported -// from elsewhere. This silly workaround ensures that the Props Explorer table -// is generated correctly. -export interface ToastProps extends ToastProps1 {} +// a component's props to be found in the Props interface. This silly workaround +// ensures that the Props Explorer table is generated correctly, instead of +// crashing if we write `ComposedProps = ToastProps & WithAppProviderProps` +export interface ToastProps extends ToastProps {} export const Toast = React.memo(function Toast(props: ToastProps) { const id = useUniqueId('Toast'); diff --git a/src/utilities/tests/is-element-in-viewport.test.ts b/src/utilities/tests/is-element-in-viewport.test.ts index 008d14d975a..a710c0f0b54 100644 --- a/src/utilities/tests/is-element-in-viewport.test.ts +++ b/src/utilities/tests/is-element-in-viewport.test.ts @@ -69,8 +69,5 @@ function mockGetBoundingClientRect({ right, height, width, - x: 0, - y: 0, - toJSON() {}, }); } diff --git a/yarn.lock b/yarn.lock index 610ba0d209c..857120c7b0a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16886,10 +16886,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@~3.7.2: - version "3.7.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.2.tgz#27e489b95fa5909445e9fef5ee48d81697ad18fb" - integrity sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ== +typescript@~3.5.1: + version "3.5.1" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.1.tgz#ba72a6a600b2158139c5dd8850f700e231464202" + integrity sha512-64HkdiRv1yYZsSe4xC1WVgamNigVYjlssIoaH2HcZF0+ijsk5YK2g0G34w9wJkze8+5ow4STd22AynfO6ZYYLw== ua-parser-js@^0.7.18: version "0.7.19"