theme-ui icon indicating copy to clipboard operation
theme-ui copied to clipboard

`IntrinsicSxElements` does not include `span` property

Open Merlin04 opened this issue 1 year ago • 0 comments

Describe the bug The IntrinsicSxElements interface, defined in @theme-ui/core/src/types.ts, appears to be the only public-facing way to access the types of props of Theme UI's JSX intrinsic elements. It does not include a span property, despite including properties for seemingly every other major element type (like div, h1-h6, img, code, etc).

To Reproduce Steps to reproduce the behavior:

  1. Attempt to make a component that looks something like this:
function CustomSpan(props: IntrinsicSxElements["span"] & { myProp: string }) {
    return <span sx={{ ...props }} />;
}
  1. Observe that TypeScript gives an error on "span":

    TS2339: Property 'span' does not exist on type 'IntrinsicSxElements'.

Expected behavior This interface should include a span property.

Additional context The workaround I'm currently using is to use JSX.IntrinsicElements["span"] & SxProp, which is what each IntrinsicSxElements property eventually expands to.

I'd be happy to make a PR to fix this, just wanted to check that this wasn't intentional for some reason I didn't realize before spending time doing so.

Merlin04 avatar Aug 10 '22 19:08 Merlin04