@xqmsg/ui-core 0.14.2 → 0.14.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.14.2",
+  "version": "0.14.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/input/components/token/index.tsx

@@ -9,6 +9,7 @@ export interface TokenProps {
   onDelete: any;
 }
 
+// For v1 we are truncating the label at 15 characters to avoid overflow
 const Token: React.FC<TokenProps> = ({ label, onDelete }) => {
   return (
     <Flex

package/src/components/table/Table.stories.tsx

@@ -4,22 +4,21 @@ import { Text } from '../text';
 import { Table, TableProps } from '.';
 import { TableBody, TableHeaders } from './TableTypes';
 import { useArgs } from '@storybook/addons';
-import { TableText } from './components/text';
 
-const tableColumns = ['foo', 'bar'];
+const tableColumns = ['AppliesToTypes', 'bar'];
 
 const tableHeaders: TableHeaders<typeof tableColumns> = {
-  foo: <Text variant="header">FOO</Text>,
-  bar: <Text variant="header">BAR</Text>,
+  AppliesToTypes: <Text variant="paragraph">AppliesToTypes</Text>,
+  bar: <Text variant="paragraph">BAR</Text>,
 };
 
 const tableBody: TableBody<typeof tableColumns> = [
   {
-    foo: <TableText primaryText="hee" secondaryText="hi" />,
+    AppliesToTypes: 'hi',
     bar: 'hey',
   },
-  { foo: 'hi', bar: 'hey' },
-  { foo: 'hi', bar: 'hey' },
+  { AppliesToTypes: 'hi', bar: 'hey' },
+  { AppliesToTypes: 'hi', bar: 'hey' },
 ];
 
 const meta: Meta<TableProps<typeof tableColumns>> = {
@@ -40,17 +39,6 @@ const meta: Meta<TableProps<typeof tableColumns>> = {
     loadMore: {
       description: 'The callback used on click of the load more button',
     },
-    variant: {
-      control: 'select',
-      description: 'The variant type of the table',
-    },
-    colorScheme: {
-      description: 'The color scheme of the table',
-    },
-    borderTopRadius: {
-      description:
-        'Whether or not the top border has a radius - if the user wants to add a filter to the top, etc. they can set it to true',
-    },
   },
   parameters: {
     controls: { expanded: true },

package/src/components/table/index.tsx

@@ -25,7 +25,6 @@ export interface TableProps<T extends ReadonlyTableColumns> {
   headers: TableHeaders<T>;
   body: TableBody<T>;
   loading?: boolean;
-  borderTopRadius?: boolean;
   loadMore?: () => void;
   placeholder?: string;
 }
@@ -40,7 +39,6 @@ export function Table<T extends ReadonlyTableColumns>({
   placeholder = 'There is currently no available data',
   loading,
 
-  borderTopRadius = true,
   loadMore,
 }: TableProps<T>) {
   const columnsAsConst = generateTableColumnsAsConst(columns);
@@ -50,11 +48,16 @@ export function Table<T extends ReadonlyTableColumns>({
       border="none"
       overflowX="auto"
       bg="white"
-      borderRadius="md"
-      borderTopLeftRadius={borderTopRadius ? 'md' : 0}
-      borderTopRightRadius={borderTopRadius ? 'md' : 0}
+      width="fit-content"
     >
-      <ChakraTable variant="unstyled">
+      <ChakraTable
+        variant="unstyled"
+        width="fit-content"
+        style={{
+          borderCollapse: 'separate',
+          borderSpacing: '0px',
+        }}
+      >
         <Thead>
           <Tr _odd={{ bg: colors.label.primary.dark }}>
             {columnsAsConst.map(column => (

package/src/theme/components/table.ts

@@ -5,26 +5,27 @@ const parts = ['th', 'td', 'tr', 'body', 'thead'];
 const baseStyle = {
   thead: { bg: colors.label.primary.dark },
   th: {
-    height: '100%',
-    width: '100%',
     bg: colors.label.primary.dark,
     padding: '5px 8px !important',
   },
   tr: {
     fontSize: '13px',
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%',
-    height: '100%',
-    borderRadius: 'md',
     _odd: {
-      bg: colors.fill.light.tertiary,
+      td: {
+        bg: colors.fill.light.tertiary,
+        _first: {
+          borderTopLeftRadius: 'md',
+          borderBottomLeftRadius: 'md',
+        },
+        _last: {
+          borderTopRightRadius: 'md',
+          borderBottomRightRadius: 'md',
+        },
+      },
     },
   },
   td: {
     padding: '5px 8px !important',
-    borderRadius: 'md',
-    width: '100%',
   },
 };