From 37d43fce6d916379002631c5c8084870def25148 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Thu, 3 Dec 2020 14:00:10 -0500
Subject: [PATCH] fix: sx prop upgrade

---
 ui/blocks/src/DocumentItem/DocumentItem.tsx        | 12 +++++++-----
 .../src/BlockContainer/BlockContainer.tsx          | 14 +++++---------
 .../src/Colors/CometColor/CometColor.tsx           |  4 ++--
 .../containers/TableContainer/TableContainer.tsx   |  6 +++---
 ui/editors/src/ColorEditor/ColorEditor.tsx         |  4 ++--
 5 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/ui/blocks/src/DocumentItem/DocumentItem.tsx b/ui/blocks/src/DocumentItem/DocumentItem.tsx
index 1381d106b..5778dc7e9 100644
--- 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
index 71dd72eda..9512d6bd5 100644
--- 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
index 1d48bf7a9..819e89d81 100644
--- 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
index 035d494ff..70c5768a9 100644
--- 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
index 52aaab3fa..c741a7b12 100644
--- 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',