From a7ea40cbf63c150d3ebfd6fe239d50ccdd9958f3 Mon Sep 17 00:00:00 2001 From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com> Date: Tue, 8 Sep 2026 11:33:16 -0700 Subject: [PATCH 1/6] add more vertical icon to workflow icons --- .../s2/s2wf-icons/S2_Icon_MoreVertical_20_N.svg | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 packages/@react-spectrum/s2/s2wf-icons/S2_Icon_MoreVertical_20_N.svg diff --git a/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_MoreVertical_20_N.svg b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_MoreVertical_20_N.svg new file mode 100644 index 00000000000..06ce1b7e2a5 --- /dev/null +++ b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_MoreVertical_20_N.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file From 2039b5f3f01b6ea560b852daa9abf56a97a240c4 Mon Sep 17 00:00:00 2001 From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com> Date: Tue, 8 Sep 2026 11:33:27 -0700 Subject: [PATCH 2/6] update table column menu --- packages/@react-spectrum/s2/src/TableView.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx index 2eb75fc0c75..4fba315a7d5 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -98,6 +98,7 @@ import {Key} from '@react-types/shared'; import {LayoutInfo, Rect, TableLayout, Virtualizer} from 'react-aria-components/Virtualizer'; import {LayoutNode} from 'react-stately/useVirtualizerState'; import {Menu, MenuItem, MenuSection, MenuTrigger} from './Menu'; +import MoreVertical from '../s2wf-icons/S2_Icon_MoreVertical_20_N.svg'; import Nubbin from '../ui-icons/S2_MoveHorizontalTableWidget.svg'; import {OverlayTriggerStateContext} from 'react-aria-components/Dialog'; import {ProgressCircle} from './ProgressCircle'; @@ -955,14 +956,13 @@ const columnHeaderText = style({ flexBasis: 'auto' }); -const chevronIcon = style({ - rotate: 90, +const moreVerticalIcon = style({ marginStart: 'text-to-visual', minWidth: fontRelative(16), flexShrink: 0, '--iconPrimary': { type: 'fill', - value: 'currentColor' + value: 'gray-700' } }); @@ -1079,7 +1079,17 @@ function ColumnWithMenu(props: ColumnWithMenuProps) { )}
{children}
- + + + {items.length > 0 && ( From 544ad49b978fd621eefc46a4486a9b8c1a5c868c Mon Sep 17 00:00:00 2001 From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com> Date: Tue, 8 Sep 2026 11:34:52 -0700 Subject: [PATCH 3/6] fix formatting --- packages/@react-spectrum/s2/src/TableView.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx index 4fba315a7d5..28df3616e28 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -1081,15 +1081,15 @@ function ColumnWithMenu(props: ColumnWithMenuProps) {
{children}
- - + [ + IconContext, + { + styles: moreVerticalIcon + } + ] + ]}> + + {items.length > 0 && ( From 01d5165edfa2a6794039053197ce713aab324e78 Mon Sep 17 00:00:00 2001 From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com> Date: Wed, 9 Sep 2026 11:26:05 -0700 Subject: [PATCH 4/6] add hover/focus state to icon --- packages/@react-spectrum/s2/src/TableView.tsx | 42 +++++++++++-------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx index 28df3616e28..bc841943a81 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -962,7 +962,11 @@ const moreVerticalIcon = style({ flexShrink: 0, '--iconPrimary': { type: 'fill', - value: 'gray-700' + value: { + default: 'gray-700', + isHovered: 'gray-800', + isFocusVisible: 'gray-800' + } } }); @@ -1064,32 +1068,36 @@ function ColumnWithMenu(props: ColumnWithMenuProps) { className={renderProps => resizableMenuButtonWrapper({...renderProps, align: buttonAlignment}) }> - {allowsSorting && ( + {({isHovered, isFocusVisible}) => ( + <> + {allowsSorting && ( + + {sortDirection != null && + (sortDirection === 'ascending' ? : )} + + )} +
{children}
- {sortDirection != null && - (sortDirection === 'ascending' ? : )} + + )} -
{children}
- - - {items.length > 0 && ( From 4470198850567d8384e836b9b0c60b2f860f7965 Mon Sep 17 00:00:00 2001 From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com> Date: Wed, 9 Sep 2026 11:38:08 -0700 Subject: [PATCH 5/6] fix formatting --- packages/@react-spectrum/s2/src/TableView.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx index bc841943a81..ba708ef1094 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -1084,18 +1084,18 @@ function ColumnWithMenu(props: ColumnWithMenuProps) { (sortDirection === 'ascending' ? : )} )} -
{children}
- - - +
{children}
+ + + )} From bbbc449788f9a755e6ae805e32eee632bd26babe Mon Sep 17 00:00:00 2001 From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com> Date: Wed, 16 Sep 2026 15:07:06 -0700 Subject: [PATCH 6/6] update line height --- packages/@react-spectrum/s2/src/TableView.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx index ba708ef1094..6ddb48a8f42 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -898,9 +898,7 @@ const resizableMenuButtonWrapper = style({ paddingX: 16, backgroundColor: 'transparent', borderStyle: 'none', - fontSize: controlFont(), - fontFamily: 'sans', - fontWeight: 'bold' + font: 'title-sm' }); const resizerHandleContainer = style({ @@ -950,13 +948,14 @@ const resizerHandle = style<{isFocusVisible: boolean; isResizing: boolean}>({ const columnHeaderText = style({ truncate: true, // Make it so the text doesn't completely disappear when column is resized to smallest width + both sort and chevron icon is rendered - minWidth: fontRelative(16), + minWidth: fontRelative(18), flexGrow: 0, flexShrink: 1, flexBasis: 'auto' }); const moreVerticalIcon = style({ + size: '1lh', marginStart: 'text-to-visual', minWidth: fontRelative(16), flexShrink: 0,