Col resize hit area increase by snowystinger · Pull Request #3414 · adobe/react-spectrum

snowystinger · 2022-08-18T23:52:23Z

Closes

Increase hit area for resizers, investigate
- Set zIndex for all column headers such that the earliest dom element in the row is the highest, thereby allowing us to overflow the resizer on top of the next header.
- Open question, should I try to restrict it to only visible columns? My feeling is that we don't need to bother because the header row creates a stacking context, so these won't interfere with the rest of the table. Given that the visible window could expand, we technically need to allow for every possible zindex anyways, so it doesn't hurt to just line them all up. Biggest zindex possible is 2147483647, I think we won't need to worry about hitting that.
Resizer stays blue after resizing with mouse if you hover again
Firefox active state isn't blue, it should be blue like the other browsers
If the user resizes a column via mouse first and then tabs to the column header, keyboard navigation between column headers no longer works

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

adobe-bot · 2022-08-19T00:00:12Z

Build successful! 🎉

adobe-bot · 2022-08-19T00:01:38Z

Build successful! 🎉

adobe-bot · 2022-08-19T00:25:41Z

Build successful! 🎉

adobe-bot · 2022-08-19T01:37:30Z

Build successful! 🎉

adobe-bot · 2022-08-20T00:22:41Z

Build successful! 🎉

adobe-bot · 2022-08-22T21:24:43Z

Build successful! 🎉

adobe-bot · 2022-08-22T21:25:44Z

Build successful! 🎉

adobe-bot · 2022-08-22T22:11:07Z

Build successful! 🎉

reidbarber

LGTM, working as intended in Chrome/FF/Safari/iOS Safari.

adobe-bot · 2022-08-25T20:41:53Z

Build successful! 🎉

LFDanLu

Confirmed that I can actually resize the columns with my Android phone now with the larger hit areas! Noticed one issue, feel free to add to a followup if you want

LFDanLu · 2022-08-25T21:30:03Z

+    keysBefore.push(key);
+    key = tableState.collection.getKeyBefore(key);
+  } while (key != null);
+  let resizerPosition = keysBefore.reduce((acc, key) => acc + columnState.getColumnWidth(key), 0);


I think you'll have to account for scroll position here, try going to https://reactspectrum.blob.core.windows.net/reactspectrum/64ad9faffb499da09831a4beeb35e78613d787a2/storybook/index.html?path=/story/tableview--allowsresizing-many-columns-and-rows&providerSwitcher-scale=large&providerSwitcher-toastPosition=bottom and scrolling a bit to the right and then trigger resizing via the column header dropdown. You'll see the indicator is offset from the actual resizer by the amount you scrolled.

A similar class of issue happens when you drag the column resizer of the first column past the width of the visible table, then trigger the resize mode for the same column via the dropdown. The column will scroll the resizer into view but the nubbin indicator will be in the position the resizer was in before scrolling

# Conflicts: # packages/@react-aria/table/intl/ar-AE.json

adobe-bot · 2022-08-30T20:36:22Z

Build successful! 🎉

adobe-bot · 2022-08-30T21:03:48Z

Build successful! 🎉

adobe-bot · 2022-08-30T21:39:36Z

Build successful! 🎉

adobe-bot · 2022-09-14T18:15:03Z

Build successful! 🎉

adobe-bot · 2022-09-14T22:14:00Z

Build successful! 🎉

adobe-bot · 2022-09-14T22:16:28Z

Build successful! 🎉

adobe-bot · 2022-09-15T01:27:41Z

Build successful! 🎉

LFDanLu

Tested in Chrome/Safari/FF and Chrome Android, works pretty well. I did find one more edge case that I'll describe below, but I'm approving since it feels like exceeded the original scope of this PR so feel free to handle it in a followup alongside my other nitpicks

Repro:

Navigate to https://reactspectrum.blob.core.windows.net/reactspectrum/86644b16aae2d50e58adf67798194f50dad07dcc/storybook/index.html?path=/story/tableview--allowsresizing-uncontrolled-dynamic-widths&providerSwitcher-toastPosition=bottom
Hover over the "Type" column and drag its resizer to the right a little bit.
Click on the "Focusable before" input and tab into the tableview. Sometimes focus moves to the first column header instead of to the "Type" column
If focus is on the first column header, trigger keyboard resizing via the menu. Note that focus jumps from the resizer back to the "Type" column

Really weird and not 100% reproducible, must be something with the tracked focusedkey messing up.

LFDanLu · 2022-09-16T20:48:09Z

+  /* don't want the divider to add to the resizer's width since it's */
  &:active,
  &:focus-ring {
    &::after {
-      background-color: var(--spectrum-global-color-blue-400);
+      background-color: unset;


mega nit:
is this comment supposed to be here? Just trying to figure out how unsetting the background color is related to the resizer width here.

I've got an element that sits on top and isn't the button, when focused, I don't want it visible, it causes a tiny wiggle because the anti-aliasing is strong than it should be, so this looks better

adobe-bot · 2022-09-16T22:27:37Z

Build successful! 🎉

devongovett · 2022-09-17T00:47:09Z

2 things:

The top border of the table is above the blue line.
Should the blue line extend to the bottom of the table, rather than only to the bottom of the rows?

adobe-bot · 2022-09-19T18:07:17Z

Build successful! 🎉

LFDanLu

One last nit, small visual defect in the resizer when it is at the edge of the table, looks like it follows the rounded corner of the table and thus has a small gap:

adobe-bot · 2022-09-19T21:59:15Z

Build successful! 🎉

LFDanLu

LGTM

reidbarber

LGTM, tested Chrome/FF/Safari/iOS Safari.

adobe-bot · 2022-09-19T22:14:34Z

Build successful! 🎉

snowystinger added 3 commits August 18, 2022 16:39

Expand hit area of resizers

59ef6a3

fix lint

d86feac

Merge branch 'main' into col-resize-hit-area-increase

eb955e0

hide resizers if we change to keyboard modality while hovering

5d080ed

snowystinger marked this pull request as ready for review August 19, 2022 01:28

support RTL

1089248

use spectrum colors

7a860c5

snowystinger added 2 commits August 22, 2022 14:17

support up down arrows

9b1c200

Merge branch 'main' into col-resize-hit-area-increase

642d6cb

fix header truncation for resizable columns

64ad9fa

reidbarber previously approved these changes Aug 23, 2022

View reviewed changes

LFDanLu mentioned this pull request Aug 23, 2022

Disabling TableView/ListView keyboard navigation and press interactions if collection is empty #3422

Merged

5 tasks

Merge branch 'main' into col-resize-hit-area-increase

b8006f4

LFDanLu requested changes Aug 25, 2022

View reviewed changes

Merge branch 'main' into col-resize-hit-area-increase

5fef43e

# Conflicts: # packages/@react-aria/table/intl/ar-AE.json

snowystinger dismissed reidbarber’s stale review via 5fef43e August 30, 2022 20:28

fix double resize end and scroll position

ef8e093

add tests for resize end

e2b262f

fix tests

6a9fdd5

snowystinger added 2 commits September 14, 2022 15:02

Move resizer inside header

4de5967

Merge branch 'main' into col-resize-hit-area-increase

0558b53

snowystinger added 2 commits September 14, 2022 16:00

sync body to header scroll position on resize start

6ee3fe9

update scroll position for keyboard resize

86644b1

LFDanLu previously approved these changes Sep 16, 2022

View reviewed changes

rename prop

de2cef7

snowystinger dismissed LFDanLu’s stale review via de2cef7 September 16, 2022 22:19

LFDanLu previously approved these changes Sep 16, 2022

View reviewed changes

Make resize indicator full height

177b851

snowystinger dismissed LFDanLu’s stale review via 177b851 September 19, 2022 17:59

LFDanLu reviewed Sep 19, 2022

View reviewed changes

corner when resizer is at rounded corner

c36d30c

Merge branch 'main' into col-resize-hit-area-increase

0b695f8

LFDanLu approved these changes Sep 19, 2022

View reviewed changes

reidbarber approved these changes Sep 19, 2022

View reviewed changes

snowystinger merged commit 1728753 into main Sep 19, 2022

snowystinger deleted the col-resize-hit-area-increase branch September 19, 2022 22:32

snowystinger added the needs testing label Sep 19, 2022

snowystinger mentioned this pull request Sep 19, 2022

Column Resizing Epic #3007

Closed

61 tasks

dannify removed the needs testing label Oct 14, 2022

Conversation

snowystinger commented Aug 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

adobe-bot commented Aug 19, 2022

Uh oh!

adobe-bot commented Aug 19, 2022

Uh oh!

adobe-bot commented Aug 19, 2022

Uh oh!

adobe-bot commented Aug 19, 2022

Uh oh!

adobe-bot commented Aug 20, 2022

Uh oh!

adobe-bot commented Aug 22, 2022

Uh oh!

adobe-bot commented Aug 22, 2022

Uh oh!

adobe-bot commented Aug 22, 2022

Uh oh!

reidbarber left a comment

Choose a reason for hiding this comment

Uh oh!

adobe-bot commented Aug 25, 2022

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

LFDanLu Aug 25, 2022

Choose a reason for hiding this comment

Uh oh!

adobe-bot commented Aug 30, 2022

Uh oh!

adobe-bot commented Aug 30, 2022

Uh oh!

adobe-bot commented Aug 30, 2022

Uh oh!

adobe-bot commented Sep 14, 2022

Uh oh!

adobe-bot commented Sep 14, 2022

Uh oh!

adobe-bot commented Sep 14, 2022

Uh oh!

adobe-bot commented Sep 15, 2022

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

LFDanLu Sep 16, 2022

Choose a reason for hiding this comment

Uh oh!

snowystinger Sep 16, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

adobe-bot commented Sep 16, 2022

Uh oh!

devongovett commented Sep 17, 2022

Uh oh!

adobe-bot commented Sep 19, 2022

Uh oh!

LFDanLu left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adobe-bot commented Sep 19, 2022

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

reidbarber left a comment

Choose a reason for hiding this comment

Uh oh!

snowystinger commented Aug 18, 2022 •

edited

Loading

LFDanLu left a comment •

edited

Loading