Column Resizing Epic

[snowystinger]

🙋 Feature Request

Refactor

• [ ] NOT DOING ~Move resizing code out of react-aria/react-stately to the react-spectrum package https://github.com/adobe/react-spectrum/issues/3024~ -abandoned, we do want to export these hooks
• [x] NOT DOING Figure out the smallest way to feature flag the resizing portion of the TableView component https://github.com/adobe/react-spectrum/issues/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~
• [x] 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

• [x] RTL support https://github.com/adobe/react-spectrum/issues/3026
• [ ] Controlled state (skip this for first alpha)
• [ ] NVDA/VO https://github.com/adobe/react-spectrum/issues/3028
  • [x] support for column width values https://github.com/adobe/react-spectrum/pull/3295
  • [x] support for announcing that a column is resizable, resizer should also announce the name of it's column when focused https://github.com/adobe/react-spectrum/pull/3295
  • [ ] should announce resizing has started/stopped
  • [x] support swiping to resize (should come through as arrow keys, role=slider might fix this) https://github.com/adobe/react-spectrum/pull/3295
• [x] Remove hardcoded strings and add translations - AN-286401 https://github.com/adobe/react-spectrum/pull/3258 and https://github.com/adobe/react-spectrum/pull/3210

Bug fixes/investigations

• [x] Remove setTimeout that is compensating for restoreFocus so that selecting resize from the menu actually moves focus to the resizer https://github.com/adobe/react-spectrum/issues/3027
• [x] Look into why "Allows resizing hiding columns" menu won't open on iPhone/Android. Make this work on iPad https://github.com/adobe/react-spectrum/pull/3258
• [x] Increase hit area for resizers, investigate https://github.com/adobe/react-spectrum/pull/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 https://github.com/adobe/react-spectrum/pull/3258#discussion_r908825332
• [x] 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. https://github.com/adobe/react-spectrum/pull/3258
• [x] @dannify to check windows touch screen resizing https://github.com/adobe/react-spectrum/pull/3258
• [x] Firefox active state isn't blue, it should be blue like the other browsers https://github.com/adobe/react-spectrum/pull/3414
• [x] VO in Safari announces too many columns, probably including the "Spooky column" https://github.com/adobe/react-spectrum/pull/3258
• [ ] Resize cursor should change between EW to E or W cursor when hitting the bounds
  • [ ] we need assets for custom cursors
• [x] Selectable rows should not gain hover state while resizing is happening
• [x] Resizer doesn't line up with divider between cells https://github.com/adobe/react-spectrum/pull/3258
• [x] Resizer stays blue after resizing with mouse if you hover again https://github.com/adobe/react-spectrum/pull/3414
• [x] TalkBack/VO swiping up/down doesn't resize the column (role=slider might fix this) https://github.com/adobe/react-spectrum/pull/3295
• [x] Android NVDA Firefox must switch into forms mode first (role=slider might fix this) https://github.com/adobe/react-spectrum/pull/3295
• [x] 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 https://github.com/adobe/react-spectrum/pull/3295
• [x] If the user resizes a column via mouse first and then tabs to the column header, keyboard navigation between column headers no longer works https://github.com/adobe/react-spectrum/pull/3414
• [x] 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. https://github.com/adobe/react-spectrum/pull/3414

Design: see contribution site

• [x] 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 https://github.com/adobe/react-spectrum/pull/3414
• [ ] Add chevron to indicate there is a menu in the header. Perhaps only on hover?
• [ ] Get a different focus indicator for resizers from design
• [x] Full column divider line highlighting when resizing. https://github.com/adobe/react-spectrum/pull/3414
  • extremely difficult
• [ ] Does resizer have enough contrast? Should only appear on hover
• [x] 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? https://github.com/adobe/react-spectrum/pull/3295
• [ ] The e-resize/w-resize cursors don't match the col-resize cursor. One renders as an arrow, the other has a vertical line too. I like the col-resize cursor better - wonder if there is a way to make it only have one directional arrow without changing the style. Might require custom cursors, which I guess Spectrum does define...
• [x] 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? https://github.com/adobe/react-spectrum/pull/3295
• [x] A bigger Touch target https://github.com/adobe/react-spectrum/pull/3414

Nice to have:

• [x] get rid of all reference to resizing in useTableColumnHeader https://github.com/adobe/react-spectrum/pull/3295
• [ ] change signature of useTableColumnResizeState so it's not GridNodes

🧢 Your Company/Team

RSP .