chore(components): fix components tests

MIGRATING.md

@@ -1,5 +1,14 @@
 # Migration Guides
 
+## v0.14
+
+- `@theme-ui/components` and other Theme UI packagss no longe depends on
+  `@emotion/styled`.
+
+- Previously deprecated `.withComponent` API was removed.
+
+- `as` prop was removed from Themed.X components from `@theme-ui/mdx`.
+
 ## v0.13
 
 **Moved Emotion and `@mdx-js/react` to peerDependencies to solve context

packages/components/src/Close.tsx

@@ -8,7 +8,7 @@ export const CloseIcon = (
     xmlns="http://www.w3.org/2000/svg"
     width="24"
     height="24"
-    fill="currentcolor"
+    fill="currentolor"
     viewBox="0 0 24 24"
   >
     <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />

packages/components/src/MenuButton.tsx

@@ -13,7 +13,13 @@ export const MenuIcon = ({ size = 24 }) => {
       width={size}
       height={size}
       fill="currentColor"
-      css={{ display: 'block', margin: 0 }}>
+      css={{
+        display: 'block',
+        margin: 0,
+        boxSizing: 'border-box',
+        minWidth: 0,
+      }}
+    >
       <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
     </svg>
   )
@@ -34,7 +40,8 @@ export const MenuButton: ForwardRef<HTMLButtonElement, MenuButtonProps> =
         title="Menu"
         aria-label="Toggle Menu"
         variant="menu"
-        {...props}>
+        {...props}
+      >
         <MenuIcon />
       </IconButton>
     )

packages/components/test/__snapshots__/Button.spec.tsx.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button hidden 1`] = `
+.emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  text-align: center;
+  line-height: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: inherit;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: white;
+  background-color: primary;
+  border: 0;
+  border-radius: 4px;
+  color: background;
+  background-color: primary;
+}
+
+<button
+  className="emotion-0"
+  hidden={true}
+/>
+`;
+
+exports[`Button renders 1`] = `
+.emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  display: inline-block;
+  text-align: center;
+  line-height: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: inherit;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: white;
+  background-color: primary;
+  border: 0;
+  border-radius: 4px;
+  color: background;
+  background-color: primary;
+}
+
+<button
+  className="emotion-0"
+/>
+`;

packages/components/test/__snapshots__/index.tsx.snap

@@ -271,9 +271,9 @@ input:focus~.emotion-3 {
     aria-hidden="true"
     className="emotion-2"
     fill="currentcolor"
-    height="24"
+    height={24}
     viewBox="0 0 24 24"
-    width="24"
+    width={24}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -284,9 +284,9 @@ input:focus~.emotion-3 {
     aria-hidden="true"
     className="emotion-3"
     fill="currentcolor"
-    height="24"
+    height={24}
     viewBox="0 0 24 24"
-    width="24"
+    width={24}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -332,7 +332,7 @@ exports[`Close renders 1`] = `
   title="Close"
 >
   <svg
-    fill="currentcolor"
+    fill="currentolor"
     height="24"
     viewBox="0 0 24 24"
     width="24"
@@ -397,7 +397,7 @@ exports[`Donut renders 1`] = `
   role="img"
   stroke="currentcolor"
   strokeWidth={2}
-  viewBox="0 0 32 32"
+  viewBo="0 0 32 32"
   width={128}
 >
   <title>
@@ -852,11 +852,10 @@ exports[`MenuButton renders 1`] = `
 }
 
 .emotion-1 {
-  box-sizing: border-box;
-  margin: 0;
-  min-width: 0;
   display: block;
   margin: 0;
+  box-sizing: border-box;
+  min-width: 0;
 }
 
 <button
@@ -866,7 +865,7 @@ exports[`MenuButton renders 1`] = `
 >
   <svg
     className="emotion-1"
-    fill="currentcolor"
+    fill="currentColor"
     height={24}
     viewBox="0 0 24 24"
     width={24}
@@ -1067,9 +1066,9 @@ input:focus~.emotion-3 {
     aria-hidden="true"
     className="emotion-2"
     fill="currentcolor"
-    height="24"
+    height={24}
     viewBox="0 0 24 24"
-    width="24"
+    width={24}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -1080,9 +1079,9 @@ input:focus~.emotion-3 {
     aria-hidden="true"
     className="emotion-3"
     fill="currentcolor"
-    height="24"
+    height={24}
     viewBox="0 0 24 24"
-    width="24"
+    width={24}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -1141,9 +1140,9 @@ exports[`Select renders 1`] = `
   <svg
     className="emotion-2"
     fill="currentcolor"
-    height="24"
+    height={24}
     viewBox="0 0 24 24"
-    width="24"
+    width={24}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -1247,9 +1246,9 @@ exports[`Select renders with style props 1`] = `
   <svg
     className="emotion-2"
     fill="currentcolor"
-    height="24"
+    height={24}
     viewBox="0 0 24 24"
-    width="24"
+    width={24}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -1371,7 +1370,7 @@ exports[`Spinner renders 1`] = `
   fill="none"
   height={48}
   role="img"
-  stroke="currentcolor"
+  stroke="currentColor"
   strokeWidth={4}
   viewBox="0 0 32 32"
   width={48}

packages/components/test/types.tsx

@@ -70,6 +70,7 @@ import {
   Textarea,
   TextareaProps,
 } from '../'
+import { useRef } from 'react'
 
 /**
  * This isn't technically a Jest test, as Jest won't catch any type errors.
@@ -86,8 +87,6 @@ describe('components type check', () => {
         px={[3, 2, 1]}
         ref={(ref) => {
           console.log(ref?.style?.alignItems)
-          const _ref = ref!
-          type _ = AssertTrue<IsExact<typeof _ref, HTMLElement>>
         }}
       >
         <Box
@@ -396,19 +395,9 @@ describe('components type check', () => {
     ;((props: TextareaProps) => <Textarea {...props} />)({})
   })
 
-  describe('ref types inference', () => {
-    const expectSnippet = expecter(`
-      import { Box, Flex } from './packages/components'
-    `)
+  function __test__any_ref_is_assignable_to_Box_ref_prop() {
+    const ref = useRef<HTMLSelectElement>()
 
-    it('Box#ref infers HTMLDivElement | null', () => {
-      expectSnippet(`    
-        <Box
-          ref={ref => {
-            const _ref = ref;
-          }}
-        />
-      `).toInfer('_ref', 'HTMLDivElement | null')
-    })
-  })
+    const _ = <Box as="select" ref={ref} />
+  }
 })

packages/docs/src/gatsby-theme-code-recipes/recipe.js

@@ -1,20 +1,23 @@
 /** @jsx jsx */
-import { jsx, Themed } from 'theme-ui'
+import { jsx } from 'theme-ui'
 import { Link } from 'gatsby'
 
-export default (props) => (
-  <div>
-    <div
-      sx={{
-        fontWeight: 'bold',
-        mb: 3,
-      }}>
-      <Themed.a as={Link} to="/recipes">
-        Recipes
-      </Themed.a>
-      {' / '}
-      <span>{props.name}</span>
+export default function RecipeLink(props) {
+  return (
+    <div>
+      <div
+        sx={{
+          fontWeight: 'bold',
+          mb: 3,
+        }}
+      >
+        <Link sx={(t) => t.styles.a} to="/recipes">
+          Recipes
+        </Link>
+        {' / '}
+        <span>{props.name}</span>
+      </div>
+      {props.children}
     </div>
-    {props.children}
-  </div>
-)
+  )
+}

packages/mdx/src/index.tsx

@@ -107,23 +107,9 @@ interface AnyComponentProps extends JSX.IntrinsicAttributes {
   [key: string]: unknown
 }
 
-export type WithPoorAsProp<
-  Props,
-  As extends ElementType | undefined = undefined
-> = {
-  as?: As
-} & (undefined extends As
-  ? As extends undefined
-    ? Props
-    : AnyComponentProps
-  : AnyComponentProps)
-
 export interface ThemedComponent<Name extends string> {
-  <As extends ElementType | undefined = undefined>(
-    props: WithPoorAsProp<
-      Name extends keyof JSX.IntrinsicElements ? ComponentProps<Name> : {},
-      As
-    >
+  (
+    props: Name extends keyof JSX.IntrinsicElements ? ComponentProps<Name> : {}
   ): JSX.Element
 }
 
@@ -142,7 +128,6 @@ const createThemedComponent = <Name extends string>(
   const variantStyles = themed(variant)
 
   return (props) => {
-    // todo: handle `as` prop or deprecate it on Themed.X?
     const css = (props as any)['css']
 
     return jsx(name, {

packages/mdx/test/index.tsx

@@ -45,38 +45,6 @@ test('styles React components', () => {
   expect(json).toHaveStyleRule('color', 'tomato')
 })
 
-test('components accept an `as` prop', () => {
-  const Beep = (props: React.ComponentPropsWithoutRef<'h2'>) => (
-    <h2 {...props} />
-  )
-  const json = renderJSON(
-    <ThemeProvider
-      theme={{
-        styles: {
-          h1: {
-            color: 'tomato',
-          },
-        },
-      }}
-    >
-      <MDXProvider>
-        <Themed.h1 as={Beep}>Beep boop</Themed.h1>
-      </MDXProvider>
-    </ThemeProvider>
-  )!
-  expect(json.type).toBe('h2')
-  expect(json).toHaveStyleRule('color', 'tomato')
-})
-
-test('components with `as` prop receive all props', () => {
-  const Beep = (props: React.ComponentPropsWithoutRef<'div'>) => (
-    <div {...props} />
-  )
-  const json = renderJSON(<Themed.a as={Beep} activeClassName="active" />)!
-  expect(json.type).toBe('div')
-  expect(json.props.activeClassName).toBe('active')
-})
-
 test('cleans up style props', () => {
   const json = renderJSON(
     // @ts-expect-error