Column Resizing Epic

[snowystinger]

GA blockers:

• Spectrum custom cursors need to be re-added - Add custom cursor icons back #3649
• Aria docs example - Table column resizing aria docs #3982

Bugs to fix:

• Select all checkbox disappears in FF/Chrome
  • Go to story, "allowsresizing-many-columns-and-rows". Resize a column. Horizontally scroll. The select all checkbox in the header disappears.
  • Appears to be an issue with persisted keys because the select all checkbox is actually being removed from the dom
  • Resizing a column using keyboard (try 3rd col in "allows resizing, uncontrolled, sortable columns"). Make the column larger until you see the "select all" checkbox disappear.
  • Also just scroll horizontally with mouse in many rows/cols story with resize
• Restore FF hover styles when menu closes RSP Component Milestones (view)
  • Click a header menu open, click again to close. None of the resizers are visible until the mouse is moved.
• Table body becomes out of sync with header on scoll. (Safari)
  • Goto "allowsResizing, uncontrolled, sortable columns", resize the "Title" column wider, so the "Author" column's right/end edge is outside of the table. Start to resize author. The table header scrolls the entire column and resizer into view, but the table body does not scroll. Headers and body aren't lined up.
• Once the Nubbin is visible, moving column to column should still display it. (Touch)
  • Resizing should end if you tap on the table body. Tapping on another column's header while in resize shouldn't cause the menu to open nor exit resizing.
• Resizer can separate in RTL languages, Safari RSP Component Milestones (view)
• Holding enter key can cause rapid focus changes
  • If you press and hold the Enter key on the "Resize column" menu item, it goes into resizing mode, then immediately goes out of it, then opens the menu again. Check what usePress does to ignore repeat events, or do it on keyup.
• Divider sticks out a little over the Nubbin for column resizing, FF RSP Component Milestones (view)

---

Beta Work
Summary of remaining items for Col resizing Beta:

• useTableColumnResizeState takes table state, but needs the type on the hook - rob
• RSP docs example, add beta label - daniel - Table resizing docs #3840
• Layout performance PR needs reviews and merging - devon

More remaining

• WHCM PR needs reviews and merging - fix(#3672): WHCM/forced-colors support for column resizer #3818
• Possibly should announce when resizing is done

Testing session:

• Fix docs props for regex matches of ColumnSize - Support template literal types in docs generator #3856
• Try to combine onResize and onMove before Aria release Refactor column resizing for controlled state resizing #3672 (comment) - Remove need for onMove events #3858
• Column header menu can appear off the side of the table Refactor column resizing for controlled state resizing #3672 (comment)
• Find a way to pass onResize/onResizeEnd to TableLayout so we don't call it from the aria hook Refactor column resizing for controlled state resizing #3672 (comment)
• Refactor column resizing for controlled state resizing #3672 (comment)
• Determine why the row group doesn't get a hover change false Refactor column resizing for controlled state resizing #3672 (comment)

🙋 Feature Request

Refactor

• NOT DOING Move resizing code out of react-aria/react-stately to the react-spectrum package Column resizing followup - task: refactor to spectrum #3024 -abandoned, we do want to export these hooks
• NOT DOING Figure out the smallest way to feature flag the resizing portion of the TableView component Column resizing followup - task: try another method of feature flagging #3025
  • Approach 1: pare down the existing resizing code so it is more granular (aka layout level instead of two whole components) see starting branch work https://github.com/adobe/react-spectrum/compare/refactor-table-column-resizing?expand=1
    • TableView and DeprecatedTableView rely on two fairly different implementations of the public TableLayout module, these need to be combined and non-breaking. Possibly by moving some of useTableColumnResizeState into TableLayout
    • Resizing a column shouldn't cause the whole table size to change, only internally to the table
  • Approach 2: Get rid of the deprecated TableView component and test to make sure there aren't breaks to existing logic we don't quite want to jump to full release immediately
• Get new TableView behavior passing all tests https://github.com/adobe/react-spectrum/compare/tableview-col-resizing-works-with-tests?expand=1
  • deletes spooky column
  • makes tests more accurate using modern jest timer mocks
  • removes deprecated table view from code path, now it can just be deleted

Features

• RTL support Column resizing followup - task: Support RTL #3026
• Controlled state (skip this for first alpha) Refactor column resizing for controlled state resizing #3672
• NVDA/VO Column resizing followup - task: Support for screen readers #3028
  • support for column width values Table Column Resize via screen readers #3295
  • support for announcing that a column is resizable, resizer should also announce the name of it's column when focused Table Column Resize via screen readers #3295
  • should announce resizing has started/stopped
  • support swiping to resize (should come through as arrow keys, role=slider might fix this) Table Column Resize via screen readers #3295
• Remove hardcoded strings and add translations - AN-286401 Resizer keyboard #3258 and Tableview col resizing #3210

Bug fixes/investigations

• Remove setTimeout that is compensating for restoreFocus so that selecting resize from the menu actually moves focus to the resizer Column resizing followup - task: Fix focus marshalling to resizer #3027
• Look into why "Allows resizing hiding columns" menu won't open on iPhone/Android. Make this work on iPad Resizer keyboard #3258
• Increase hit area for resizers, investigate Col resize hit area increase #3414
  • move resizers out of the column headers
  • relax our contains "paint" rule
  • zIndex?
  • make clicking on white space part of the resizer hit area instead of the menu button
  • findings of investigation is that relaxing our overflow/paint contains results in headers rendering that we shouldn't be able to see, see Resizer keyboard #3258 (comment)
• Move focus to a resizer, tab out and tab back into the table, focus should be sent to the resizer. Improve consistency of tabbing into and out of a resizable TableView in general. Resizer keyboard #3258
• @dannify to check windows touch screen resizing Resizer keyboard #3258
• Firefox active state isn't blue, it should be blue like the other browsers Col resize hit area increase #3414
• VO in Safari announces too many columns, probably including the "Spooky column" Resizer keyboard #3258
• Resize cursor should change between EW to E or W cursor when hitting the bounds
  • we need assets for custom cursors
• Selectable rows should not gain hover state while resizing is happening
• Resizer doesn't line up with divider between cells Resizer keyboard #3258
• Resizer stays blue after resizing with mouse if you hover again Col resize hit area increase #3414
• TalkBack/VO swiping up/down doesn't resize the column (role=slider might fix this) Table Column Resize via screen readers #3295
• Android NVDA Firefox must switch into forms mode first (role=slider might fix this) Table Column Resize via screen readers #3295
• Tapping on a column header and selecting resize column briefly focuses resizer before focus is lost, hopefully this isn't the "clicking behind the menu item" issue Table Column Resize via screen readers #3295
• If the user resizes a column via mouse first and then tabs to the column header, keyboard navigation between column headers no longer works Col resize hit area increase #3414
• In the "allowsResizing, uncontrolled, sortable columns story", click on the "Title" header to open the dropdown. It shows sort and resize column options. Select a sort option. The dropdown will not open again. Col resize hit area increase #3414
• TableView resize last column, then resize a middle column, the entire table jumps as multiple columns resize at once Refactor column resizing for controlled state resizing #3672

Design: see contribution site

• if resizer is at end of table, there is a gap between it and the border of the table due to the rounded corner https://reactspectrum.blob.core.windows.net/reactspectrum/37b608f55dc16ca1fb00c2232c8252f4f2fb1a83/storybook/index.html?path=/story/tableview--allowsresizing-uncontrolled-dynamic-widths Col resize hit area increase #3414
• Add chevron to indicate there is a menu in the header. Perhaps only on hover? Custom resize cursors #3535
• Get a different focus indicator for resizers from design
• Full column divider line highlighting when resizing. Col resize hit area increase #3414
  • extremely difficult
• Does resizer have enough contrast? Should only appear on hover
• When hovering over the column headers, only the resizer for that column shows up, but I think it might make sense to show all column resizers? Table Column Resize via screen readers #3295
• After dragging a resizer with a mouse, it remains blue even when removing hover and coming back. I guess because it's focused. Should we even focus it with a mouse? If so, then where should we send focus afterward? Maybe the blue should only be the keyboard focus style unless it is actively being dragged? Table Column Resize via screen readers #3295
• A bigger Touch target Col resize hit area increase #3414

Nice to have:

• get rid of all reference to resizing in useTableColumnHeader Table Column Resize via screen readers #3295
• change signature of useTableColumnResizeState so it's not GridNodes takes table state, but needs the type on the aria hook

🧢 Your Company/Team

RSP
.

[tiffany-sy-lin]

When setting a column minWidth to a percentage value and the rest of the columns to a maxWidth value and an extra wide table, the column with the minWidth values does not expand to fit the extra space like it does when minWidth is set to a numeric value

https://codesandbox.io/s/sad-bash-vcyqmx?file=/src/App.js

To reproduce: Make the preview side very wide so that there are no horizontal scrollbars. There shouldn't be empty space on the right of the second table.