fix: fix a regression issue with border color display in table compon…

…ents (#741)
trendmicro-frontend · Apr 27, 2023 · f98dd6f · f98dd6f
1 parent 9c07a60
commit f98dd6f
Show file tree

Hide file tree

Showing 10 changed files with 181 additions and 157 deletions.
diff --git a/packages/react-docs/pages/components/table.mdx b/packages/react-docs/pages/components/table.mdx
@@ -41,6 +41,8 @@ render(() => {
   };
   const [variant, changeVariantBy] = useSelection('default');
   const [size, changeSizeBy] = useSelection('md');
+  const [isTableHeaderVisible, toggleIsTableHeaderVisible] = useToggle(true);
+  const [isTableBodyVisible, toggleIsTableBodyVisible] = useToggle(true);
   const data = React.useMemo(() => [
     { id: 1, eventType: 'Virus/Malware', affectedDevices: 20, detections: 634 },
     { id: 2, eventType: 'Spyware/Grayware', affectedDevices: 20, detections: 778 },
@@ -110,24 +112,51 @@ render(() => {
         </ButtonGroup>
       </FormGroup>
       <Divider mb="4x" />
+      <Box mb="4x">
+        <Text fontSize="lg" lineHeight="lg">
+          Table composition
+        </Text>
+      </Box>
+      <FormGroup>
+        <TextLabel display="flex" alignItems="center">
+          <Checkbox checked={isTableHeaderVisible} onChange={() => toggleIsTableHeaderVisible()} />
+          <Space width="2x" />
+          <Text fontFamily="mono" whiteSpace="nowrap">TableHeader</Text>
+        </TextLabel>
+      </FormGroup>
+      <FormGroup>
+        <TextLabel display="flex" alignItems="center">
+          <Checkbox checked={isTableBodyVisible} onChange={() => toggleIsTableBodyVisible()} />
+          <Space width="2x" />
+          <Text fontFamily="mono" whiteSpace="nowrap">TableBody</Text>
+        </TextLabel>
+      </FormGroup>
+      <Divider mb="4x" />
       <Flex alignItems="center" columnGap="3x" minHeight="5x">
-        <Table variant={variant} size={size}>
-          <TableHeader>
-            <TableHeaderRow>
-              <TableHeaderCell width="240px">Event Type</TableHeaderCell>
-              <TableHeaderCell textAlign="right">Affected Devices</TableHeaderCell>
-              <TableHeaderCell textAlign="right">Detections</TableHeaderCell>
-            </TableHeaderRow>
-          </TableHeader>
-          <TableBody>
-            {data.map(row => (
-              <TableRow key={row.id} {...tableRowProps}>
-                <TableCell width="240px">{row.eventType}</TableCell>
-                <TableCell textAlign="right">{row.affectedDevices}</TableCell>
-                <TableCell textAlign="right">{row.detections}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
+        <Table
+          variant={variant}
+          size={size}
+        >
+          {isTableHeaderVisible && (
+            <TableHeader>
+              <TableHeaderRow>
+                <TableHeaderCell width="240px">Event Type</TableHeaderCell>
+                <TableHeaderCell textAlign="right">Affected Devices</TableHeaderCell>
+                <TableHeaderCell textAlign="right">Detections</TableHeaderCell>
+              </TableHeaderRow>
+            </TableHeader>
+          )}
+          {isTableBodyVisible && (
+            <TableBody>
+              {data.map(row => (
+                <TableRow key={row.id} {...tableRowProps}>
+                  <TableCell width="240px">{row.eventType}</TableCell>
+                  <TableCell textAlign="right">{row.affectedDevices}</TableCell>
+                  <TableCell textAlign="right">{row.detections}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          )}
         </Table>
       </Flex>
     </>

diff --git a/packages/react/src/table/Table.js b/packages/react/src/table/Table.js
@@ -3,6 +3,7 @@ import { warnRemovedProps } from '@tonic-ui/utils';
 import memoize from 'micro-memoize';
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
+import { defaultSize, defaultVariant } from './constants';
 import { TableContext } from './context';
 import { useTableStyle } from './styles';
 
@@ -11,9 +12,9 @@ const getMemoizedState = memoize(state => ({ ...state }));
 const Table = forwardRef((
   {
     isHoverable, // deprecated
-    children,
-    size = 'md',
-    variant = 'default',
+    role: roleProp,
+    size = defaultSize,
+    variant = defaultVariant,
     ...rest
   },
   ref,
@@ -29,22 +30,21 @@ const Table = forwardRef((
     }, (isHoverable !== undefined));
   }
 
-  const styleProps = useTableStyle({ variant });
+  const role = roleProp ?? 'table';
+  const styleProps = useTableStyle();
   const context = getMemoizedState({
-    variant,
     size,
+    variant,
   });
 
   return (
     <TableContext.Provider value={context}>
       <Box
         ref={ref}
-        role="table"
+        role={role}
         {...styleProps}
         {...rest}
-      >
-        {children}
-      </Box>
+      />
     </TableContext.Provider>
   );
 });

diff --git a/packages/react/src/table/TableBody.js b/packages/react/src/table/TableBody.js
@@ -2,15 +2,23 @@ import React, { forwardRef } from 'react';
 import { Box } from '../box';
 import { useTableBodyStyle } from './styles';
 
-const TableBody = forwardRef((props, ref) => {
+const TableBody = forwardRef((
+  {
+    css: cssProp,
+    role: roleProp,
+    ...rest
+  },
+  ref,
+) => {
+  const role = roleProp ?? 'rowgroup';
   const styleProps = useTableBodyStyle();
 
   return (
     <Box
       ref={ref}
-      role="rowgroup"
+      role={role}
       {...styleProps}
-      {...props}
+      {...rest}
     />
   );
 });

diff --git a/packages/react/src/table/TableCell.js b/packages/react/src/table/TableCell.js
@@ -1,34 +1,28 @@
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
-import { useTableCellCSS, useTableCellStyle } from './styles';
+import { useTableCellStyle } from './styles';
 import useTable from './useTable';
 
 const TableCell = forwardRef((
   {
-    children,
-    css: cssProp,
     role: roleProp,
     width = 150,
     ...rest
   },
   ref,
 ) => {
-  const { size, variant } = useTable();
   const role = roleProp ?? 'cell';
-  const css = [useTableCellCSS({ role, variant }), cssProp];
-  const styleProps = useTableCellStyle({ size });
+  const { size, variant } = useTable();
+  const styleProps = useTableCellStyle({ size, variant });
 
   return (
     <Box
-      css={css}
       ref={ref}
       role={role}
       width={width}
       {...styleProps}
       {...rest}
-    >
-      {children}
-    </Box>
+    />
   );
 });
 

diff --git a/packages/react/src/table/TableHeader.js b/packages/react/src/table/TableHeader.js
@@ -2,15 +2,22 @@ import React, { forwardRef } from 'react';
 import { Box } from '../box';
 import { useTableHeaderStyle } from './styles';
 
-const TableHeader = forwardRef((props, ref) => {
+const TableHeader = forwardRef((
+  {
+    role: roleProp,
+    ...rest
+  },
+  ref,
+) => {
+  const role = roleProp ?? 'rowgroup';
   const styleProps = useTableHeaderStyle();
 
   return (
     <Box
       ref={ref}
-      role="rowgroup"
+      role={role}
       {...styleProps}
-      {...props}
+      {...rest}
     />
   );
 });

diff --git a/packages/react/src/table/TableHeaderCell.js b/packages/react/src/table/TableHeaderCell.js
@@ -1,34 +1,28 @@
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
-import { useTableHeaderCellCSS, useTableHeaderCellStyle } from './styles';
+import { useTableHeaderCellStyle } from './styles';
 import useTable from './useTable';
 
 const TableHeaderCell = forwardRef((
   {
-    children,
-    css: cssProp,
     role: roleProp,
     width = 150,
     ...rest
   },
   ref
 ) => {
-  const { size, variant } = useTable();
   const role = roleProp ?? 'columnheader';
-  const css = [useTableHeaderCellCSS({ role, variant }), cssProp];
-  const styleProps = useTableHeaderCellStyle({ size });
+  const { size, variant } = useTable();
+  const styleProps = useTableHeaderCellStyle({ size, variant });
 
   return (
     <Box
-      css={css}
       ref={ref}
       role={role}
       width={width}
       {...styleProps}
       {...rest}
-    >
-      {children}
-    </Box>
+    />
   );
 });
 

diff --git a/packages/react/src/table/TableHeaderRow.js b/packages/react/src/table/TableHeaderRow.js
@@ -2,15 +2,22 @@ import React, { forwardRef } from 'react';
 import { Box } from '../box';
 import { useTableHeaderRowStyle } from './styles';
 
-const TableHeaderRow = forwardRef((props, ref) => {
+const TableHeaderRow = forwardRef((
+  {
+    role: roleProp,
+    ...rest
+  },
+  ref,
+) => {
+  const role = roleProp ?? 'row';
   const styleProps = useTableHeaderRowStyle();
 
   return (
     <Box
       ref={ref}
-      role="row"
+      role={role}
       {...styleProps}
-      {...props}
+      {...rest}
     />
   );
 });

diff --git a/packages/react/src/table/TableRow.js b/packages/react/src/table/TableRow.js
@@ -1,18 +1,28 @@
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
-import { useTableRowStyle } from './styles';
+import { useTableRowCSS, useTableRowStyle } from './styles';
 import useTable from './useTable';
 
-const TableRow = forwardRef((props, ref) => {
+const TableRow = forwardRef((
+  {
+    css: cssProp,
+    role: roleProp,
+    ...rest
+  },
+  ref,
+) => {
   const { variant } = useTable();
-  const styleProps = useTableRowStyle({ variant });
+  const role = roleProp ?? 'row';
+  const css = [useTableRowCSS({ role, variant }), cssProp];
+  const styleProps = useTableRowStyle();
 
   return (
     <Box
+      css={css}
       ref={ref}
-      role="row"
+      role={role}
       {...styleProps}
-      {...props}
+      {...rest}
     />
   );
 });

diff --git a/packages/react/src/table/constants.js b/packages/react/src/table/constants.js
@@ -0,0 +1,2 @@
+export const defaultSize = 'md';
+export const defaultVariant = 'default';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const defaultSize = 'md';
		export const defaultVariant = 'default';