Preparatory work for Styled Components 5 & latest TS (#1479)

Luke Bowerman · web-flow · commit 7f6741619f68 · 2020-09-28T10:59:54.000-07:00
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "prettier": "^2.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-is": "^16.13.1",
     "styled-components": "^4.4.1",
     "typescript": "^3.8.3",
     "webpack": "^4.44.2"
diff --git a/packages/components-providers/package.json b/packages/components-providers/package.json
@@ -22,10 +22,12 @@
     "@types/react": "^16.9.49",
     "@types/styled-components": "^4.4.1",
     "react": "^16.13.1",
+    "react-is": "^16.13.1",
     "styled-components": "^4.4.1"
   },
   "peerDependencies": {
-    "react": "^16.9.0",
+    "react": "^16.11",
+    "react-is": "^16.11",
     "styled-components": "^4"
   },
   "gitHead": "62febc162e3e45124f403e2c84fc741f68fe6714"
diff --git a/packages/components-test-utils/package.json b/packages/components-test-utils/package.json
@@ -25,11 +25,13 @@
     "enzyme": "^3.11.0",
     "jest-styled-components": "^6.3.4",
     "react": "^16.13.1",
+    "react-is": "^16.13.1",
     "react-test-renderer": "^16.13.1",
     "styled-components": "^4.4.1"
   },
   "peerDependencies": {
-    "react": "^16.11"
+    "react": "^16.11",
+    "react-is": "^16.11"
   },
   "gitHead": "62febc162e3e45124f403e2c84fc741f68fe6714"
 }
diff --git a/packages/components-theme-editor/package.json b/packages/components-theme-editor/package.json
@@ -24,10 +24,12 @@
     "@types/react": "^16.9.49",
     "@types/styled-components": "^4.4.1",
     "react": "^16.13.1",
+    "react-is": "^16.13.1",
     "styled-components": "^4.4.1"
   },
   "peerDependencies": {
-    "react": "^16.9.0",
+    "react": "^16.11",
+    "react-is": "^16.11",
     "styled-components": "^4"
   }
 }
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -53,11 +53,13 @@
     "jest-styled-components": "^6.3.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-is": "^16.13.1",
     "styled-components": "^4.4.1"
   },
   "peerDependencies": {
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^16.11",
+    "react-dom": "^16.11",
+    "react-is": "^16.11",
     "styled-components": "^4"
   },
   "gitHead": "62febc162e3e45124f403e2c84fc741f68fe6714"
diff --git a/packages/components/src/Dialog/Surface.tsx b/packages/components/src/Dialog/Surface.tsx
@@ -52,7 +52,6 @@ interface SurfaceProps
     ColorProps,
     LayoutProps {
   surfaceStyles?: CSSObject
-  anchor?: 'right'
   animationState?: string
 }
 
diff --git a/packages/components/src/Form/Inputs/InputColor/InputColor.tsx b/packages/components/src/Form/Inputs/InputColor/InputColor.tsx
@@ -135,7 +135,7 @@ export const InputColorComponent = forwardRef(
     }
 
     const handleColorChange = (hs: HueSaturation) => {
-      setColorState({ h: 0, s: 100, ...hs, v: get(color, 'v', 1) })
+      setColorState({ ...hs, v: get(color, 'v', 1) })
     }
 
     const handleSliderChange = (event: FormEvent<HTMLInputElement>) =>
diff --git a/packages/components/src/Link/Link.test.tsx b/packages/components/src/Link/Link.test.tsx
@@ -43,7 +43,7 @@ describe('Link', () => {
   test('Underline', () => {
     renderWithTheme(<Link underline>My link</Link>)
     const link = screen.getByText('My link')
-    expect(link).toHaveStyle('text-decoration: underline')
+    expect(link).toHaveStyleRule('text-decoration: underline')
   })
 
   test('color', () => {
diff --git a/packages/components/src/List/List.test.tsx b/packages/components/src/List/List.test.tsx
@@ -25,7 +25,8 @@
  */
 
 import React from 'react'
-import { createWithTheme } from '@looker/components-test-utils'
+import { createWithTheme, renderWithTheme } from '@looker/components-test-utils'
+import { screen } from '@testing-library/react'
 import { List } from './List'
 import { ListItem } from './ListItem'
 
@@ -68,15 +69,16 @@ test('A numerically ordered List', () => {
 })
 
 test('A numerically ordered List marked as nomarker', () => {
-  const component = createWithTheme(
-    <List type="number" nomarker>
+  renderWithTheme(
+    <List type="number" nomarker data-testid="list">
       <ListItem>🥑</ListItem>
       <ListItem>🍕</ListItem>
       <ListItem>🥨</ListItem>
     </List>
   )
-  const tree = component.toJSON()
-  expect(tree).toHaveStyleRule('list-style-type', 'none')
+
+  const list = screen.getByTestId('list')
+  expect(list).toHaveStyle('list-style-type: none')
   // Padding unset due to default reset applied
-  expect(tree).toMatchSnapshot()
+  expect(list).toMatchSnapshot()
 })
diff --git a/packages/components/src/List/__snapshots__/List.test.tsx.snap b/packages/components/src/List/__snapshots__/List.test.tsx.snap
@@ -113,21 +113,22 @@ exports[`A numerically ordered List marked as nomarker 1`] = `
 }
 
 <ol
-  className="c0"
+  class="c0"
+  data-testid="list"
   type="none"
 >
   <li
-    className="c1"
+    class="c1"
   >
     🥑
   </li>
   <li
-    className="c1"
+    class="c1"
   >
     🍕
   </li>
   <li
-    className="c1"
+    class="c1"
   >
     🥨
   </li>
diff --git a/packages/components/src/utils/getCurrentNode.ts b/packages/components/src/utils/getCurrentNode.ts
@@ -36,6 +36,7 @@ export function getCurrentNode<E extends HTMLElement = HTMLElement>(
   elementOrRefObject: ElementOrRef<E>
 ): E | null {
   if (!elementOrRefObject) return null
+  // @ts-expect-error: Need to find a better way to do union below
   return (elementOrRefObject as E).addEventListener
     ? (elementOrRefObject as E)
     : (elementOrRefObject as RefObject<E>).current
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
@@ -30,11 +30,13 @@
     "prism-react-renderer": "^1.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-is": "^16.13.1",
     "styled-components": "^4.4.1"
   },
   "peerDependencies": {
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^16.11",
+    "react-dom": "^16.11",
+    "react-is": "^16.11",
     "styled-components": "^4"
   },
   "gitHead": "62febc162e3e45124f403e2c84fc741f68fe6714"
diff --git a/playground/package.json b/playground/package.json
@@ -18,6 +18,7 @@
     "core-js": "^3.6.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-is": "^16.13.1",
     "styled-components": "^4.4.1"
   },
   "devDependencies": {
diff --git a/www/package.json b/www/package.json
@@ -27,6 +27,7 @@
     "react": "^16.13.1",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.13.1",
+    "react-is": "^16.13.1",
     "react-helmet": "^6.1.0",
     "react-live": "^2.2.2",
     "styled-components": "^4.4.1"

Original file line number	Diff line number	Diff line change
`@@ -24,10 +24,12 @@`
`24`	`24`	`"@types/react": "^16.9.49",`
`25`	`25`	`"@types/styled-components": "^4.4.1",`
`26`	`26`	`"react": "^16.13.1",`
	`27`	`+ "react-is": "^16.13.1",`
`27`	`28`	`"styled-components": "^4.4.1"`
`28`	`29`	`},`
`29`	`30`	`"peerDependencies": {`
`30`		`- "react": "^16.9.0",`
	`31`	`+ "react": "^16.11",`
	`32`	`+ "react-is": "^16.11",`
`31`	`33`	`"styled-components": "^4"`
`32`	`34`	`}`
`33`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,6 @@ interface SurfaceProps`
`52`	`52`	`ColorProps,`
`53`	`53`	`LayoutProps {`
`54`	`54`	`surfaceStyles?: CSSObject`
`55`		`- anchor?: 'right'`
`56`	`55`	`animationState?: string`
`57`	`56`	`}`
`58`	`57`
Original file line number	Diff line number	Diff line change
`@@ -135,7 +135,7 @@ export const InputColorComponent = forwardRef(`
`135`	`135`	`}`
`136`	`136`
`137`	`137`	`const handleColorChange = (hs: HueSaturation) => {`
`138`		`- setColorState({ h: 0, s: 100, ...hs, v: get(color, 'v', 1) })`
	`138`	`+ setColorState({ ...hs, v: get(color, 'v', 1) })`
`139`	`139`	`}`
`140`	`140`
`141`	`141`	`const handleSliderChange = (event: FormEvent<HTMLInputElement>) =>`
Original file line number	Diff line number	Diff line change
@@ -113,21 +113,22 @@ exports[`A numerically ordered List marked as nomarker 1`] = `
`113`	`113`	`}`
`114`	`114`
`115`	`115`	`<ol`
`116`		`- className="c0"`
	`116`	`+ class="c0"`
	`117`	`+ data-testid="list"`
`117`	`118`	`type="none"`
`118`	`119`	`>`
`119`	`120`	`<li`
`120`		`- className="c1"`
	`121`	`+ class="c1"`
`121`	`122`	`>`
`122`	`123`	`🥑`
`123`	`124`	`</li>`
`124`	`125`	`<li`
`125`		`- className="c1"`
	`126`	`+ class="c1"`
`126`	`127`	`>`
`127`	`128`	`🍕`
`128`	`129`	`</li>`
`129`	`130`	`<li`
`130`		`- className="c1"`
	`131`	`+ class="c1"`
`131`	`132`	`>`
`132`	`133`	`🥨`
`133`	`134`	`</li>`