docs: update the table column resizing example to align with the visu…

…al specifications (#872) * docs: update the table column resizing example to align with the visual specification * docs: update example for table column resizing on hover * docs: update minimum table column width to 80px
trendmicro-frontend · Jun 11, 2024 · 4d3e26a · 4d3e26a
1 parent 6c6d3ec
commit 4d3e26a
Show file tree

Hide file tree

Showing 18 changed files with 40 additions and 29 deletions.
diff --git a/packages/react-docs/pages/components/resize-handle/resizable.js b/packages/react-docs/pages/components/resize-handle/resizable.js
@@ -12,8 +12,8 @@ const App = () => {
   const [colorMode] = useColorMode();
   const [colorStyle] = useColorStyle();
   const dividerColor = {
-    dark: 'gray:70',
-    light: 'gray:30',
+    dark: 'gray:50',
+    light: 'gray:50',
   }[colorMode];
   const highlightedDividerColor = {
     dark: 'gray:50',
@@ -75,7 +75,9 @@ const App = () => {
             bottom: 0,
             borderLeft: 1,
             borderLeftColor: isResizing ? highlightedDividerColor : dividerColor,
+            opacity: 0.6,
             _hover: {
+              opacity: 1,
               borderLeftColor: highlightedDividerColor,
             },
           }}

diff --git a/packages/react-docs/pages/components/table/backup/column-ordering-using-react-dnd.js b/packages/react-docs/pages/components/table/backup/column-ordering-using-react-dnd.js
@@ -124,7 +124,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 40,
+      minSize: 80,
     },
     state: {
       columnOrder,

diff --git a/packages/react-docs/pages/components/table/backup/row-ordering-dnd.js b/packages/react-docs/pages/components/table/backup/row-ordering-dnd.js
@@ -173,7 +173,7 @@ const App = () => {
     data: items,
     columns,
     defaultColumn: {
-      minSize: 40,
+      minSize: 80,
     },
     getCoreRowModel: getCoreRowModel(),
     getRowId: row => row.id, //good to have guaranteed unique row ids/keys for rendering

diff --git a/packages/react-docs/pages/components/table/backup/row-ordering-using-react-movable.js b/packages/react-docs/pages/components/table/backup/row-ordering-using-react-movable.js
@@ -78,6 +78,7 @@ const App = () => {
           onChange={row.getToggleSelectedHandler()}
         />
       ),
+      minSize: 48,
       size: 48,
       style: {
         px: '4x',
@@ -131,7 +132,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 48,
+      minSize: 80,
     },
     state: {
       rowSelection,

diff --git a/packages/react-docs/pages/components/table/basic.js b/packages/react-docs/pages/components/table/basic.js
@@ -53,7 +53,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 40,
+      minSize: 80,
     },
     getCoreRowModel: getCoreRowModel(),
     getRowId: (originalRow, index) => {

diff --git a/packages/react-docs/pages/components/table/column-auto-sizing.js b/packages/react-docs/pages/components/table/column-auto-sizing.js
@@ -72,7 +72,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 40,
+      minSize: 80,
     },
     getCoreRowModel: getCoreRowModel(),
     getRowId: (originalRow, index) => {
@@ -122,7 +122,7 @@ const App = () => {
             size: Math.max(
               percentageWidth, // percentage of table width
               textWidth + gutterWidth, // text width with padding
-              minSize, // minimum size (e.g. 40px)
+              minSize, // minimum size (e.g. 80px)
             ),
           };
         }
@@ -148,7 +148,7 @@ const App = () => {
           id,
           size: Math.max(
             textWidth + gutterWidth, // text width with padding
-            minSize, // minimum size (e.g. 40px)
+            minSize, // minimum size (e.g. 80px)
           ),
         };
       });

diff --git a/packages/react-docs/pages/components/table/column-ordering-dnd.js b/packages/react-docs/pages/components/table/column-ordering-dnd.js
@@ -198,7 +198,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 40,
+      minSize: 80,
     },
     state: {
       columnOrder,
@@ -261,7 +261,7 @@ const App = () => {
             size: Math.max(
               percentageWidth, // percentage of table width
               textWidth + gutterWidth, // text width with padding
-              minSize, // minimum size (e.g. 40px)
+              minSize, // minimum size (e.g. 80px)
             ),
           };
         }
@@ -287,7 +287,7 @@ const App = () => {
           id,
           size: Math.max(
             textWidth + gutterWidth, // text width with padding
-            minSize, // minimum size (e.g. 40px)
+            minSize, // minimum size (e.g. 80px)
           ),
         };
       });

diff --git a/packages/react-docs/pages/components/table/column-resizing.js b/packages/react-docs/pages/components/table/column-resizing.js
@@ -89,7 +89,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 40,
+      minSize: 80,
     },
     columnResizeMode,
     getCoreRowModel: getCoreRowModel(),
@@ -100,7 +100,7 @@ const App = () => {
   });
 
   const layout = 'flexbox'; // One of: 'flexbox', 'table'
-  const variant = 'outline'; // One of: 'default', 'outline'
+  const variant = 'default'; // One of: 'default', 'outline'
 
   return (
     <>
@@ -147,8 +147,8 @@ const App = () => {
                 // ResizeHandle
                 const resizeHandleSX = (() => {
                   const dividerColor = {
-                    dark: 'gray:70',
-                    light: 'gray:30',
+                    dark: 'gray:50',
+                    light: 'gray:50',
                   }[colorMode];
                   const highlightedDividerColor = {
                     dark: 'gray:50',
@@ -163,12 +163,15 @@ const App = () => {
                     position: 'absolute',
                     top: (variant === 'outline') ? -1 : 0,
                     right: -1 * (isResizingColumn ? dividerWidth + translucentWidth : hoverableWidth),
-                    height: isResizingColumn ? tableHeight : 36,
+                    height: isResizingColumn ? tableHeight : '9x',
                     zIndex: 1,
 
                     borderLeft: dividerWidth,
                     borderLeftColor: isResizingColumn ? highlightedDividerColor : dividerColor,
+                    opacity: isResizingColumn ? 1 : 0,
                     _hover: {
+                      height: tableHeight,
+                      opacity: 1,
                       borderLeftColor: highlightedDividerColor,
                     },
 

diff --git a/packages/react-docs/pages/components/table/column-visibility-and-order/index.js b/packages/react-docs/pages/components/table/column-visibility-and-order/index.js
@@ -120,7 +120,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 40,
+      minSize: 80,
     },
     state: {
       columnOrder,
@@ -175,7 +175,7 @@ const App = () => {
             size: Math.max(
               percentageWidth, // percentage of table width
               textWidth + gutterWidth, // text width with padding
-              minSize, // minimum size (e.g. 40px)
+              minSize, // minimum size (e.g. 80px)
             ),
           };
         }
@@ -201,7 +201,7 @@ const App = () => {
           id,
           size: Math.max(
             textWidth + gutterWidth, // text width with padding
-            minSize, // minimum size (e.g. 40px)
+            minSize, // minimum size (e.g. 80px)
           ),
         };
       });

diff --git a/packages/react-docs/pages/components/table/column-visibility.js b/packages/react-docs/pages/components/table/column-visibility.js
@@ -61,7 +61,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 40,
+      minSize: 80,
     },
     state: {
       columnVisibility,

diff --git a/packages/react-docs/pages/components/table/pagination.js b/packages/react-docs/pages/components/table/pagination.js
@@ -82,7 +82,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 40,
+      minSize: 80,
     },
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),

diff --git a/packages/react-docs/pages/components/table/row-expanding.js b/packages/react-docs/pages/components/table/row-expanding.js
@@ -139,6 +139,7 @@ const App = () => {
           />
         );
       },
+      minSize: 48,
       size: 48,
     },
     {
@@ -168,7 +169,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 40,
+      minSize: 80,
     },
     getRowCanExpand: () => true,
     getCoreRowModel: getCoreRowModel(),

diff --git a/packages/react-docs/pages/components/table/row-ordering-dnd.js b/packages/react-docs/pages/components/table/row-ordering-dnd.js
@@ -119,6 +119,7 @@ const App = () => {
           onChange={row.getToggleSelectedHandler()}
         />
       ),
+      minSize: 48,
       size: 48,
       style: {
         px: '4x',
@@ -172,7 +173,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 48,
+      minSize: 80,
     },
     state: {
       rowSelection,

diff --git a/packages/react-docs/pages/components/table/row-selection.js b/packages/react-docs/pages/components/table/row-selection.js
@@ -48,6 +48,7 @@ const App = () => {
           onChange={row.getToggleSelectedHandler()}
         />
       ),
+      minSize: 48,
       size: 48,
       style: {
         px: '4x',
@@ -101,7 +102,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 48,
+      minSize: 80,
     },
     state: {
       rowSelection,

diff --git a/packages/react-docs/pages/components/table/sorting.js b/packages/react-docs/pages/components/table/sorting.js
@@ -80,7 +80,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 40,
+      minSize: 80,
     },
     state: {
       sorting,

diff --git a/packages/react-docs/pages/components/table/virtualized-rows.js b/packages/react-docs/pages/components/table/virtualized-rows.js
@@ -70,7 +70,7 @@ const App = () => {
     data,
     columns,
     defaultColumn: {
-      minSize: 40,
+      minSize: 80,
     },
     getCoreRowModel: getCoreRowModel(),
     getRowId: (originalRow, index) => {

diff --git a/packages/react-docs/pages/patterns/table-display/expandable-table-rows.js b/packages/react-docs/pages/patterns/table-display/expandable-table-rows.js
@@ -77,6 +77,7 @@ const App = () => {
           />
         );
       },
+      minSize: 48,
       size: 48,
     },
     {
@@ -133,7 +134,7 @@ const App = () => {
   ], [colorMode, colorStyle]); // Include both colorMode and colorStyle as dependencies to prevent memoization when the color mode changes
   const tableOptions = useMemo(() => ({
     defaultColumn: {
-      minSize: 48,
+      minSize: 80,
     },
     getExpandedRowModel: getExpandedRowModel(),
     getRowCanExpand: () => true,

diff --git a/packages/react-docs/pages/patterns/table-display/table-display.js b/packages/react-docs/pages/patterns/table-display/table-display.js
@@ -183,6 +183,7 @@ const App = () => {
           onChange={row.getToggleSelectedHandler()}
         />
       ),
+      minSize: 48,
       size: 48,
     },
     {
@@ -219,7 +220,7 @@ const App = () => {
 
   const tableOptions = useMemo(() => ({
     defaultColumn: {
-      minSize: 48,
+      minSize: 80,
     },
     state: {
       rowSelection,