feat: use tags in PropsTable

ccontrols · May 3, 2020 · 737aac6 · 737aac6
1 parent 63f6bf1
commit 737aac6
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git a/ui/blocks/src/PropsTable/PropsTable.tsx b/ui/blocks/src/PropsTable/PropsTable.tsx
@@ -9,6 +9,7 @@ import {
   TableProps,
   Markdown,
   ActionContainer,
+  Tag,
 } from '@component-controls/components';
 import { Column } from 'react-table';
 import {
@@ -126,19 +127,27 @@ export const PropsTable: FC<PropsTableProps> = ({
                     type: { required },
                   },
                 } = original;
-
-                return (
+                const text = (
                   <Text
                     sx={{
                       fontWeight: 'bold',
-                      color: required ? 'red' : undefined,
                       textOverflow: 'ellipsis',
                     }}
                   >
                     {name}
-                    {required ? '*' : ''}
                   </Text>
                 );
+                return required ? (
+                  <Tag
+                    color="red"
+                    transparentAmount={0.95}
+                    sxStyle={{ borderRadius: 4 }}
+                  >
+                    {text}
+                  </Tag>
+                ) : (
+                  text
+                );
               },
             },
             {
@@ -150,9 +159,10 @@ export const PropsTable: FC<PropsTableProps> = ({
                   return null;
                 }
                 const {
+                  name,
                   prop: {
                     description,
-                    type: { raw, name },
+                    type: { raw, name: typeName, value },
                   },
                 } = original;
                 return (
@@ -162,7 +172,7 @@ export const PropsTable: FC<PropsTableProps> = ({
                     }}
                   >
                     {description && <Markdown>{description}</Markdown>}
-                    {(raw ?? name) && (
+                    {(raw ?? typeName) && (
                       <Styled.pre
                         sx={{
                           color: 'fadedText',
@@ -171,7 +181,20 @@ export const PropsTable: FC<PropsTableProps> = ({
                           margin: 0,
                         }}
                       >
-                        {raw ?? name}
+                        {Array.isArray(value) && value.length > 1
+                          ? value.map(({ name: typeName }) => (
+                              <Tag
+                                key={`${name}_${typeName}`}
+                                color="grey"
+                                transparentAmount={0.9}
+                                sxStyle={{
+                                  mr: 1,
+                                }}
+                              >
+                                {typeName}
+                              </Tag>
+                            ))
+                          : raw ?? typeName}
                       </Styled.pre>
                     )}
                   </Flex>

diff --git a/ui/components/src/Tag/Tag.tsx b/ui/components/src/Tag/Tag.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 /* eslint react/jsx-key: 0 */
-import { jsx } from 'theme-ui';
+import { jsx, SxStyleProp, Box } from 'theme-ui';
 import { FC } from 'react';
 import { transparentize } from 'polished';
 
@@ -13,7 +13,12 @@ export interface TagProps {
   /**
    * transparent amount - 0 to 1
    */
-  transparentAmount: number;
+  transparentAmount?: number;
+
+  /**
+   * theme-ui styling object for the container
+   */
+  sxStyle?: SxStyleProp;
 }
 
 /**
@@ -23,18 +28,21 @@ export const Tag: FC<TagProps> = ({
   children,
   color,
   transparentAmount = 0.8,
+  sxStyle,
   ...rest
 }) => (
-  <span
+  <Box
+    as="span"
     {...rest}
     sx={{
       display: 'inline-block',
       backgroundColor: transparentize(transparentAmount, color),
       paddingLeft: 1,
       paddingRight: 1,
       border: `1px solid ${color}`,
+      ...sxStyle,
     }}
   >
     {children}
-  </span>
+  </Box>
 );
diff --git a/ui/components/src/ThemeContext/ThemeContext.tsx b/ui/components/src/ThemeContext/ThemeContext.tsx
@@ -112,6 +112,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
       dark,
     );
   }, [dark, customTheme]);
+  console.log(theme);
   return (
     <ThemeContext.Provider
       value={{