Refactor column resizing for controlled state resizing by snowystinger · Pull Request #3672 · adobe/react-spectrum

snowystinger · 2022-10-20T15:51:14Z

Closes #3368
and supersedes #3529

✅ 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:

Table resizing should behave the same as it has from a user point of view. I've also added controlled stories, as well as aria examples (mouse only on the aria ones).

Internally, I've also added a number of tests. They are run against both the aria implementation and the rsp implementation.

🧢 Your Project:

adobe-bot · 2022-10-20T17:24:10Z

Build successful! 🎉

adobe-bot · 2022-10-20T20:14:13Z

Build successful! 🎉

adobe-bot · 2022-10-20T20:25:24Z

Build successful! 🎉

# Conflicts: # packages/@react-spectrum/table/src/TableView.tsx # packages/@react-stately/layout/src/TableLayout.ts

adobe-bot · 2022-11-28T02:35:27Z

Build successful! 🎉

…ctrum into refactor-column-resizing

adobe-bot · 2022-11-30T19:57:01Z

Build successful! 🎉

LFDanLu

Just two things I noticed when writing the docs, can be followup.

LFDanLu · 2022-12-13T17:44:01Z

+export type ColumnStaticSize = number | `${number}` | `${number}%`; // match regex: /^(\d+)(?=%$)/
+/** Widths that change size in relation to the remaining space and in ratio to other dynamic columns. */
+export type ColumnDynamicSize = `${number}fr`; // match regex: /^(\d+)(?=fr$)/
+/** All possible sizes a column can be assigned. */
+export type ColumnSize = ColumnStaticSize | ColumnDynamicSize;


Just a heads up, I noticed that these types were malformed in the docs.

Looks like it is having a hard time understanding ${number}` | `${number}% and ${number}fr unfortunately

urgh, lol, i'll address it in followup
TODO: add to follow up

LFDanLu

LGTM, would be good to check if #3523 is resolved by this work. I'll have to look up the team and see if they can try and upgrade when this goes out

…ry overrides

* fix(#2949): TableView Windows High Contrast issues * fix(#2949): ListView Windows High Contrast issues * fix(#2949): Drag and Drop Windows High Contrast issues * fix(#3672): refine Checkbox WHCM/forced-colors styles * fix(#3827): fix checkbox chromatic tests * fix(#3672): Move forced-colors color overrides to start of media-query * fix(#3672): remove some css specificity for forced-color overrides * fix(#3672): add vars for --spectrum-global-color-blue-500 * fix(#3672): fix checkbox forced-colors overrides * fix(#3672): fix circle loader forced-colors overrides * fix(#3672): fix dropzone forced-colors overrides * fix(#3672): fix switch forced-colors overrides * fix(#3672): fix table forced-colors overrides * fix(#3672): fix ListView forced-colors overrides * fix(#3672): ListView/Table add more code comments for forced-colors * fix(#3672): move forced-color-adjust statements to simplify media query overrides * fix(#3672): remove global variables from forced-colors overrides * fix border focus colors --------- Co-authored-by: Daniel Lu <dl1644@gmail.com> Co-authored-by: Robert Snow <rsnow@adobe.com> Co-authored-by: Reid Barber <reid@reidbarber.com>

snowystinger added 3 commits October 20, 2022 08:45

Refactor column resizing to make a single source of truth

6adffe8

Merge branch 'main' into refactor-column-resizing

dd8512f

fix merge

f370934

fix remove column math

7fd45f9

remove unused dep

fdb68a3

adobe deleted a comment from adobe-bot Oct 20, 2022

adobe deleted a comment from adobe-bot Nov 22, 2022

snowystinger added 3 commits November 22, 2022 12:21

Merge branch 'main' into refactor-column-resizing

9fe9238

# Conflicts: # packages/@react-spectrum/table/src/TableView.tsx # packages/@react-stately/layout/src/TableLayout.ts

Merge branch 'main' into refactor-column-resizing

9c39b1a

Move aria implementation to stately hook instead of layout

3fb4677

snowystinger added 9 commits November 28, 2022 17:04

fix keyboard resizing and default widths

69f481d

use aria tests for spectrum as well

a99ca8e

rename some props, refactor resizer so it sets on top of everything

83c2bd1

restore logic to fix tests

36804cb

fix min/max calculations

0bed81d

fix all types and lint

f39e26b

Merge branch 'main' into refactor-column-resizing

01ada31

fix import

a8ab122

Merge branch 'refactor-column-resizing' of github.com:adobe/react-spe…

bae3c9e

…ctrum into refactor-column-resizing

snowystinger marked this pull request as ready for review November 30, 2022 20:14

snowystinger closed this Dec 1, 2022

snowystinger deleted the refactor-column-resizing branch December 1, 2022 00:08

snowystinger restored the refactor-column-resizing branch December 1, 2022 00:48

snowystinger reopened this Dec 1, 2022

snowystinger added 2 commits December 13, 2022 15:33

move column layout to table stately

afb1591

add resizing hide header story

a7372f8

LFDanLu reviewed Dec 13, 2022

View reviewed changes

devongovett reviewed Dec 13, 2022

View reviewed changes

Comment thread packages/@react-types/table/src/index.d.ts Outdated

snowystinger added 4 commits December 14, 2022 07:02

move types

dff4b4d

Fix onResizeEnd call

9b94c17

Merge branch 'main' into refactor-column-resizing

f330245

move types

e905d3d

devongovett approved these changes Dec 13, 2022

View reviewed changes

LFDanLu approved these changes Dec 13, 2022

View reviewed changes

snowystinger merged commit 3e5f99b into main Dec 13, 2022

snowystinger deleted the refactor-column-resizing branch December 13, 2022 22:01

snowystinger pushed a commit that referenced this pull request Dec 13, 2022

fix(#3672): WHCM/forced-colors support for column resizer

17c244f

devongovett pushed a commit that referenced this pull request Dec 15, 2022

fix(#3672): WHCM/forced-colors support for column resizer (#3818)

694a181

majornista pushed a commit that referenced this pull request Dec 16, 2022

fix(#3672): refine Checkbox WHCM/forced-colors styles

044cb2b

snowystinger mentioned this pull request Dec 16, 2022

Calculated TableView columns widths are sometimes inaccurate due to state setTableWidth #3523

Closed

majornista pushed a commit that referenced this pull request Jan 17, 2023

fix(#3672): Move forced-colors color overrides to start of media-query

6c769b7

majornista pushed a commit that referenced this pull request Jan 19, 2023

fix(#3672): remove some css specificity for forced-color overrides

1625af5

majornista pushed a commit that referenced this pull request Jan 19, 2023

fix(#3672): add vars for --spectrum-global-color-blue-500

d9b2481

majornista pushed a commit that referenced this pull request Jan 25, 2023

fix(#3672): fix checkbox forced-colors overrides

b22009c

majornista pushed a commit that referenced this pull request Jan 25, 2023

fix(#3672): fix circle loader forced-colors overrides

5df48fa

majornista pushed a commit that referenced this pull request Jan 25, 2023

fix(#3672): fix dropzone forced-colors overrides

aba67e9

majornista pushed a commit that referenced this pull request Jan 25, 2023

fix(#3672): fix switch forced-colors overrides

0f2791c

majornista pushed a commit that referenced this pull request Jan 25, 2023

fix(#3672): fix table forced-colors overrides

de45011

majornista pushed a commit that referenced this pull request Jan 25, 2023

fix(#3672): fix ListView forced-colors overrides

a796b33

majornista pushed a commit that referenced this pull request Jan 25, 2023

fix(#3672): ListView/Table add more code comments for forced-colors

e23100b

majornista pushed a commit that referenced this pull request Jan 25, 2023

fix(#3672): move forced-color-adjust statements to simplify media que…

ca1ef83

…ry overrides

majornista pushed a commit that referenced this pull request Jan 26, 2023

fix(#3672): remove global variables from forced-colors overrides

91302f9

snowystinger mentioned this pull request Mar 23, 2023

useResizeObserver not preventing Resize Observer errors in some situations #1924

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor column resizing for controlled state resizing#3672

Refactor column resizing for controlled state resizing#3672
snowystinger merged 52 commits into
mainfrom
refactor-column-resizing

snowystinger commented Oct 20, 2022 •

edited

Loading

Uh oh!

adobe-bot commented Oct 20, 2022

Uh oh!

adobe-bot commented Oct 20, 2022

Uh oh!

adobe-bot commented Oct 20, 2022

Uh oh!

adobe-bot commented Nov 28, 2022

Uh oh!

adobe-bot commented Nov 30, 2022

Uh oh!

LFDanLu left a comment

Uh oh!

LFDanLu Dec 13, 2022

Uh oh!

snowystinger Dec 13, 2022

Uh oh!

Uh oh!

Uh oh!

LFDanLu left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

snowystinger commented Oct 20, 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 Oct 20, 2022

Uh oh!

adobe-bot commented Oct 20, 2022

Uh oh!

adobe-bot commented Oct 20, 2022

Uh oh!

adobe-bot commented Nov 28, 2022

Uh oh!

adobe-bot commented Nov 30, 2022

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

LFDanLu Dec 13, 2022

Choose a reason for hiding this comment

Uh oh!

snowystinger Dec 13, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

snowystinger commented Oct 20, 2022 •

edited

Loading