diff --git a/packages/react-docs/pages/components/resize-handle/resizable.js b/packages/react-docs/pages/components/resize-handle/resizable.js index 39694791af..c493ecc77d 100644 --- 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 index 501113e0bd..9d6e6fcd31 100644 --- 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 index 113f9a5f37..a5bc190aac 100644 --- 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 index 05e45e955b..821bab6f8b 100644 --- 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 index e53a8ca7a2..d4c19aa167 100644 --- 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 index 19ab613d9b..8487032d07 100644 --- 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 index d2c30117c9..2e1c85efd8 100644 --- 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 index 71427ab82d..cd6937815b 100644 --- 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 index b5d8ce0553..d28cc0dc42 100644 --- 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 index 3f64be29a4..fd93ae2650 100644 --- 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 index c6999a6d2e..2786a1cb7f 100644 --- 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 index fab2db15e5..f941f2b27b 100644 --- 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 index 50d2634f4d..b9855c0e05 100644 --- 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 index fb00af5037..5b3a46d354 100644 --- 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 index 29224480bc..de3d4ab8b7 100644 --- 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 index e9c08d3d37..234bb2e997 100644 --- 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 index 280858e4ae..37a6270cc9 100644 --- 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 index b871c21dff..593e1e7e77 100644 --- 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,