Update tippy, react, jest, and testing dependencies

package.json

@@ -70,36 +70,38 @@
     "@react-aria/utils": "^3.1.0",
     "@react-aria/visually-hidden": "^3.1.0",
     "@react-stately/toggle": "^3.1.0",
-    "@tippyjs/react": "^4.0.0",
+    "@tippyjs/react": "^4.2.0",
     "@types/classnames": "^2.2.9",
     "@types/tinycolor2": "^1.4.2",
     "classnames": "^2.2.6",
+    "csstype": "^3.0.3",
     "tinycolor2": "^1.4.1",
     "tslib": "^2.0.1"
   },
   "devDependencies": {
     "@actions/core": "^1.1.0",
     "@actions/github": "^1.1.0",
     "@auto-it/jira": "^9.53.1",
-    "@babel/core": "^7.4.5",
-    "@babel/generator": "^7.11.6",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/traverse": "^7.5.5",
-    "@storybook/addon-docs": "^6.0.0-rc.24",
-    "@storybook/react": "^6.0.0-rc.24",
+    "@babel/core": "^7.12.3",
+    "@babel/generator": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/traverse": "^7.12.1",
+    "@storybook/addon-docs": "^6.0.26",
+    "@storybook/react": "^6.0.26",
     "@svgr/core": "^4.3.0",
     "@svgr/plugin-jsx": "^4.3.0",
     "@svgr/plugin-prettier": "^4.2.0",
     "@svgr/plugin-svgo": "^4.2.0",
-    "@testing-library/jest-dom": "^5.7.0",
-    "@testing-library/react": "^10.0.4",
-    "@testing-library/user-event": "^10.2.4",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.8",
     "@types/babel__traverse": "^7.0.7",
     "@types/faker": "^4.1.8",
     "@types/jest": "^26.0.13",
     "@types/less": "^3.0.0",
     "@types/prettier": "^1.19.0",
-    "@types/react": "^16.8.21",
+    "@types/react": "^16.9.53",
+    "@types/react-dom": "^16.9.8",
     "@types/rimraf": "^2.0.3",
     "@types/storybook__react": "^5.2.1",
     "@types/svgo": "^1.2.1",
@@ -108,7 +110,7 @@
     "auto": "^9.53.1",
     "babel-loader": "^8.1.0",
     "btoa": "^1.2.1",
-    "chromatic": "^5.1.0",
+    "chromatic": "^5.2.0",
     "eslint": "^7.8.1",
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-problems": "^5.0.0",
@@ -118,9 +120,9 @@
     "eslint-plugin-react-hooks": "^4.1.0",
     "faker": "^4.1.0",
     "framer-motion": "1.6.8",
-    "jest": "^26.4.2",
+    "jest": "^26.5.3",
     "jest-emotion": "^10.0.32",
-    "jest-util": "^26.3.0",
+    "jest-util": "^26.5.2",
     "less": "^3.9.0",
     "node-fetch": "^2.6.0",
     "normalize.css": "^8.0.1",
@@ -134,7 +136,7 @@
     "rollup-plugin-typescript2": "^0.25.3",
     "styled-system": "^5.0.12",
     "svgo": "^1.2.2",
-    "ts-jest": "^26.3.0",
+    "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.1",
     "ts-node": "^9.0.0",
     "typescript": "^4.0.2"

src/Button/Button.tsx

@@ -1,5 +1,5 @@
 import { colors, ShadedColor } from "../colors";
-import * as CSS from "csstype";
+import type { Property, SimplePseudos } from "csstype";
 import { base } from "../typography";
 import { ClassNames } from "@emotion/core";
 import { getOffsetInPalette } from "../colors/utils/getOffsetInPalette";
@@ -29,8 +29,8 @@ function getTextColor({
   color: NonNullable<Props["color"]>;
   feel: NonNullable<Props["feel"]>;
   theme: NonNullable<Props["theme"]>;
-  mode?: CSS.SimplePseudos;
-}): CSS.ColorProperty | undefined {
+  mode?: SimplePseudos;
+}): Property.Color | undefined {
   // Text color will always be the same for secondary buttons
   if (color === colors.white) {
     return colors.grey.darker;
@@ -82,7 +82,7 @@ function getHeight({
   size,
 }: {
   size: NonNullable<Props["size"]>;
-}): CSS.HeightProperty<TLength> {
+}): Property.Height<TLength> {
   switch (size) {
     case "small":
       return 28;
@@ -107,7 +107,7 @@ function getHoverBackgroundColor({
   color: NonNullable<Props["color"]>;
   feel: NonNullable<Props["feel"]>;
   theme: NonNullable<Props["theme"]>;
-}): CSS.BackgroundColorProperty {
+}): Property.BackgroundColor {
   if (color === colors.white) {
     // Special case for secondary buttons
     return colors.silver.light;

src/ListItem/index.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/no-empty-interface */
-import * as CSS from "csstype";
+import type { Property } from "csstype";
 import React from "react";
 import { ClassNames } from "@emotion/core";
 import { assertUnreachable } from "../shared/assertUnreachable";
@@ -12,7 +11,7 @@ import classnames from "classnames";
 
 function getIconHorizontalPadding(
   iconSize: NonNullable<ReturnType<typeof useListConfig>["iconSize"]>
-): CSS.PaddingProperty<number> {
+): Property.Padding<number> {
   switch (iconSize) {
     case "large":
       return 16;
@@ -27,7 +26,7 @@ function getIconHorizontalPadding(
 
 function getIconSize(
   iconSize: NonNullable<ReturnType<typeof useListConfig>["iconSize"]>
-): CSS.WidthProperty<number> {
+): Property.Width<number> {
   switch (iconSize) {
     case "large":
       return 18;
@@ -42,7 +41,7 @@ function getIconSize(
 
 function getIconMarginLeft(
   iconSize: NonNullable<ReturnType<typeof useListConfig>["iconSize"]>
-): CSS.MarginLeftProperty<number> {
+): Property.MarginLeft<number> {
   switch (iconSize) {
     case "large":
     case "normal":

src/Loaders/LoadingSpinner.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from "react";
-import * as CSS from "csstype";
+import type { Property } from "csstype";
 import { jsx, keyframes } from "@emotion/core";
 import { colors } from "../colors";
 import { useSpaceKitProvider } from "../SpaceKitProvider";
@@ -47,9 +47,9 @@ export const LoadingSpinner = React.forwardRef<SVGSVGElement, Props>(
     const THEME_MAP: Record<
       Theme,
       {
-        orbitColor: CSS.ColorProperty;
-        orbitOpacity: CSS.GlobalsNumber;
-        asteroidColor: CSS.ColorProperty;
+        orbitColor: Property.Color;
+        orbitOpacity: Property.Opacity;
+        asteroidColor: Property.Color;
       }
     > = {
       light: {

src/Modal/Modal.tsx

@@ -4,7 +4,7 @@ import React, { useEffect } from "react";
 import { motion, MotionProps } from "framer-motion";
 import * as typography from "../typography";
 import { colors } from "../colors";
-import * as CSS from "csstype";
+import type { Property } from "csstype";
 import { useSpaceKitProvider } from "../SpaceKitProvider";
 import { assertUnreachable } from "../shared/assertUnreachable";
 
@@ -112,7 +112,7 @@ const modalBackdrop = css`
 
 type TLength = string | 0 | number;
 
-function getModalWidth(size: Props["size"]): CSS.WidthProperty<TLength> {
+function getModalWidth(size: Props["size"]): Property.Width<TLength> {
   switch (size) {
     case "small":
       return 460;

src/Popover/popover/sizeModifier.ts

@@ -266,7 +266,7 @@ function getPlacementAndMaxSize({
  * element in it's entirety, it'll find the placement that can show the most
  * content with a max-height.
  */
-export const sizeModifier: Modifier<Options> = {
+export const sizeModifier: Modifier<"maxSize", Options> = {
   name: "maxSize",
   enabled: true,
   phase: "main",

src/fonts/fonts.ts

@@ -1,15 +1,15 @@
-import * as CSS from "csstype";
+import type { Property } from "csstype";
 
 /**
  * Sans-serif font
  *
  * @see https://zpl.io/V4ep7Jy
  */
-export const base: CSS.FontFamilyProperty = "'Source Sans Pro', sans-serif";
+export const base: Property.FontFamily = "'Source Sans Pro', sans-serif";
 
 /**
  * Monospace font
  *
  * @see https://zpl.io/V4ep7Jy
  */
-export const mono: CSS.FontFamilyProperty = "'Source Code Pro', monospace";
+export const mono: Property.FontFamily = "'Source Code Pro', monospace";

src/typography/Typography.story.tsx

@@ -1,9 +1,11 @@
+/* eslint-disable prefer-destructuring */
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import * as typographyDefinitions from "./index";
 import { colors } from "../colors";
 import { Page } from "../../components-util/Page";
 import { Column } from "../../components-util/Column";
+import { PropertyValue } from "csstype";
 
 function round(number: number, digits: number): number {
   const multiplier = 10 ** digits;
@@ -24,22 +26,28 @@ const TypographyDefs: React.FC<{
       marginTop: 24,
     }}
   >
-    {Object.entries(definitions).map(([name, properties]) => (
-      <div key={name} style={{ margin: "15px 0" }}>
-        <div style={properties}>{name}</div>
-        <div style={typographyDefinitions.base.small}>
-          {typeof properties.fontSize === "number"
-            ? round(properties.fontSize / 15, 4)
-            : properties.fontSize}
-          em • {properties.fontSize}
-          {typeof properties.fontSize === "number" &&
-          typeof properties.lineHeight === "number"
-            ? ` / ${Math.round(properties.fontSize * properties.lineHeight)}`
-            : ""}{" "}
-          • {properties.fontWeight}
+    {Object.entries(definitions).map(([name, properties]) => {
+      // @see https://github.com/frenic/csstype#version-30 on why we need to use
+      // `PropertyValue` to unpack these values.
+      const fontSize: PropertyValue<typeof properties.fontSize> =
+        properties.fontSize;
+      const lineHeight: PropertyValue<typeof properties.lineHeight> =
+        properties.lineHeight;
+
+      return (
+        <div key={name} style={{ margin: "15px 0" }}>
+          <div style={properties}>{name}</div>
+          <div style={typographyDefinitions.base.small}>
+            {typeof fontSize === "number" ? round(fontSize / 15, 4) : fontSize}
+            em • {fontSize}
+            {typeof fontSize === "number" && typeof lineHeight === "number"
+              ? ` / ${Math.round(fontSize * lineHeight)}`
+              : ""}{" "}
+            • {properties.fontWeight}
+          </div>
         </div>
-      </div>
-    ))}
+      );
+    })}
   </div>
 );
 

src/typography/TypographyDefinition.ts

@@ -1,21 +1,17 @@
-import * as CSS from "csstype";
+import type { Property } from "csstype";
 
-/**
- * Generic from `csstype`. I honestly have no idea what it is; I stole the value
- * used from emotion.
- */
 type TLength = string | 0 | number;
 
 /**
  * Things that we define in our typography style system.
  */
 export interface TypographyDefinition {
-  fontFamily: CSS.FontFamilyProperty;
-  fontSize: CSS.FontSizeProperty<TLength>;
+  fontFamily: Property.FontFamily;
+  fontSize: Property.FontSize<TLength>;
   /**
    * This is optional. We shouldn't be setting the style when we don't care what
    * is.
    */
-  fontWeight?: CSS.FontWeightProperty;
-  lineHeight: CSS.LineHeightProperty<TLength>;
+  fontWeight?: Property.FontWeight;
+  lineHeight: Property.LineHeight<TLength>;
 }