fix: sx prop upgrade

ccontrols · Dec 3, 2020 · 37d43fc · 37d43fc
1 parent 64dfd0b
commit 37d43fc
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 21 deletions.
diff --git a/ui/blocks/src/DocumentItem/DocumentItem.tsx b/ui/blocks/src/DocumentItem/DocumentItem.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box, Text, SxStyleProp } from 'theme-ui';
+import { jsx, Box, Text, BoxProps } from 'theme-ui';
 import {
   Document,
   defDocType,
@@ -22,13 +22,15 @@ export interface DocumentItemProps {
    * document to be displayed
    */
   doc: Document;
-
-  sx?: SxStyleProp;
 }
 /**
  * displays a single doument item
  */
-export const DocumentItem: FC<DocumentItemProps> = ({ doc, link, sx }) => {
+export const DocumentItem: FC<DocumentItemProps & BoxProps> = ({
+  doc,
+  link,
+  ...rest
+}) => {
   const { type = defDocType, tags = [], date, author } = doc;
   const store = useStore();
   const dateNode = date ? (
@@ -53,7 +55,7 @@ export const DocumentItem: FC<DocumentItemProps> = ({ doc, link, sx }) => {
   ) : null;
   const tagsNode = tags.length ? <TagsList tags={tags} /> : null;
   return (
-    <Box variant="documentitem.container" sx={sx}>
+    <Box variant="documentitem.container" {...rest}>
       <Box variant="documentitem.titlerow">
         <Link href={link}>
           <Subtitle>{doc.title}</Subtitle>

diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx
@@ -1,12 +1,12 @@
 /** @jsx jsx */
 import { FC, useState } from 'react';
-import { jsx, Flex, Link, Divider, Box, SxStyleProp, Text } from 'theme-ui';
+import { jsx, Flex, Link, Divider, Box, BoxProps, Text } from 'theme-ui';
 import { ChevronRightIcon, ChevronDownIcon } from '@primer/octicons-react';
 import { Collapsible } from '../Collapsible';
 import { LinkHeading } from '../LinkHeading';
 import { Description } from '../Description';
 
-export interface BlockContainerProps {
+export interface BlockContainerOwnProps {
   /**
    * optional section title for the block.
    */
@@ -29,11 +29,6 @@ export interface BlockContainerProps {
    */
   collapsible?: boolean;
 
-  /**
-   * theme-ui styling object for Block Box
-   */
-  sx?: SxStyleProp;
-
   /**
    * testing id
    */
@@ -44,6 +39,8 @@ export interface BlockContainerProps {
   plain?: boolean;
 }
 
+export type BlockContainerProps = BlockContainerOwnProps & BoxProps;
+
 /**
  * a collapsible block with a title. The title creates also an attribute id and an octicon for github style navigation.
  *
@@ -54,7 +51,6 @@ export const BlockContainer: FC<BlockContainerProps> = ({
   id,
   description,
   collapsible = true,
-  sx,
   plain = false,
   ...rest
 }) => {
@@ -66,7 +62,7 @@ export const BlockContainer: FC<BlockContainerProps> = ({
     children
   );
   return (
-    <Box variant="blockcontainer.container" sx={sx} {...rest}>
+    <Box variant="blockcontainer.container" {...rest}>
       {(blockId || title || collapsible) && (
         <LinkHeading
           as={collapsible ? 'h3' : 'h4'}

diff --git a/ui/design-tokens/src/Colors/CometColor/CometColor.tsx b/ui/design-tokens/src/Colors/CometColor/CometColor.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, SxStyleProp } from 'theme-ui';
+import { jsx, BoxProps } from 'theme-ui';
 import tinycolor from 'tinycolor2';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr, mostReadable, contrastGrade } from '../utils';
@@ -43,7 +43,7 @@ export const BaseCometColor: FC<ColorBlockProps> = ({
   const contrast = tinycolor.readability(hex, contrastColor);
 
   let accessibilityTest;
-  const testProps: SxStyleProp = {
+  const testProps: BoxProps['sx'] = {
     ml: 3,
     width: '40px',
     textAlign: 'center',

diff --git a/ui/design-tokens/src/containers/TableContainer/TableContainer.tsx b/ui/design-tokens/src/containers/TableContainer/TableContainer.tsx
@@ -6,11 +6,11 @@ import {
   DetailedHTMLProps,
   ThHTMLAttributes,
 } from 'react';
-import { jsx, SxStyleProp, Theme } from 'theme-ui';
+import { jsx, BoxProps, Theme } from 'theme-ui';
 import { ContainerProps } from '../../types';
 
 export interface TableColumn {
-  sx?: SxStyleProp;
+  sx?: BoxProps['sx'];
   props?: DetailedHTMLProps<
     ThHTMLAttributes<HTMLTableHeaderCellElement>,
     HTMLTableHeaderCellElement
@@ -22,7 +22,7 @@ export interface TableColumn {
 export interface TableContainerOwnProps {
   header?: ReactNode;
   columns: TableColumn[];
-  sx?: SxStyleProp;
+  sx?: BoxProps['sx'];
 }
 
 export type TableContainerProps = TableContainerOwnProps & ContainerProps;

diff --git a/ui/editors/src/ColorEditor/ColorEditor.tsx b/ui/editors/src/ColorEditor/ColorEditor.tsx
@@ -7,14 +7,14 @@ import {
   RgbStringColorPicker,
   RgbaStringColorPicker,
 } from 'react-colorful';
-import { jsx, Button, Box, SxStyleProp, Theme } from 'theme-ui';
+import { jsx, Button, Box, BoxProps, Theme } from 'theme-ui';
 import { Popover } from '@component-controls/components';
 import { ComponentControlColor, ControlTypes } from '@component-controls/core';
 import { useControl } from '@component-controls/store';
 import { PropertyEditor } from '../types';
 import { addPropertyEditor } from '../prop-factory';
 
-const sxProps: SxStyleProp = {
+const sxProps: BoxProps['sx'] = {
   position: 'relative',
   display: 'flex',
   flexDirection: 'column',