Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[react-interactions] Add FocusTable colSpan support #17019

Merged
merged 1 commit into from
Oct 7, 2019
Merged

[react-interactions] Add FocusTable colSpan support #17019

merged 1 commit into from
Oct 7, 2019

Conversation

trueadm
Copy link
Contributor

@trueadm trueadm commented Oct 4, 2019

This PR adds support for colSpan on FocusTable cells. It works very much like how <td colSpan={2}> might work with the DOM. colSpan makes cells span a numerical number of columns, allowing for rows with a dynamic number of cells to continue to work.

This PR also removes the unnecessary focusTableByID and id logic, in favor of declarative nested tables (which compose better). Lastly, the wrap prop has been split into wrapX and wrapY, as per internal feedback.

@trueadm trueadm requested a review from necolas October 4, 2019 15:46
@sizebot
Copy link

sizebot commented Oct 4, 2019 •
edited
Loading

Details of bundled changes.

Comparing: 4bc52ef...4691b27

react-interactions

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-interactions-events/focus.development.js 0.0% +0.2% 11.81 KB 11.81 KB 2.57 KB 2.58 KB UMD_DEV
react-interactions-events/press.development.js 0.0% +0.1% 9.02 KB 9.02 KB 2.66 KB 2.66 KB UMD_DEV
react-interactions-events/tap.development.js 0.0% +0.1% 18.17 KB 18.17 KB 3.91 KB 3.92 KB UMD_DEV
react-interactions-events/focus.production.min.js 0.0% 🔺+0.2% 4.31 KB 4.31 KB 1.46 KB 1.46 KB UMD_PROD
react-interactions-events/press.production.min.js 0.0% 🔺+0.3% 2.62 KB 2.62 KB 1.09 KB 1.09 KB UMD_PROD
react-interactions-events/tap.production.min.js 0.0% 🔺+0.1% 6.31 KB 6.31 KB 2.36 KB 2.37 KB UMD_PROD
ReactFocusTable-dev.js +4.7% +5.2% 10.75 KB 11.26 KB 2.45 KB 2.57 KB FB_WWW_DEV
react-interactions-events/context-menu.development.js 0.0% +0.3% 2.68 KB 2.68 KB 1006 B 1009 B UMD_DEV
react-interactions-events/input.development.js 0.0% +0.2% 4.52 KB 4.52 KB 1.44 KB 1.45 KB UMD_DEV
react-interactions-events/scroll.development.js 0.0% +0.1% 6.3 KB 6.3 KB 1.65 KB 1.65 KB UMD_DEV
react-interactions-events/context-menu.production.min.js 0.0% 🔺+0.3% 1.39 KB 1.39 KB 728 B 730 B UMD_PROD
react-interactions-events/input.production.min.js 0.0% 🔺+0.3% 1.84 KB 1.84 KB 983 B 986 B UMD_PROD
react-interactions-events/scroll.production.min.js 0.0% 🔺+0.3% 2.63 KB 2.63 KB 1.15 KB 1.15 KB UMD_PROD
react-interactions-events/context-menu.development.js 0.0% +0.4% 2.49 KB 2.49 KB 959 B 963 B NODE_DEV
react-interactions-events/input.development.js 0.0% +0.3% 4.34 KB 4.34 KB 1.4 KB 1.4 KB NODE_DEV
react-interactions-events/scroll.development.js 0.0% +0.1% 6.12 KB 6.12 KB 1.61 KB 1.61 KB NODE_DEV
react-interactions-accessibility/focus-contain.development.js 0.0% +0.3% 2.24 KB 2.24 KB 943 B 946 B NODE_DEV
react-interactions-events/context-menu.production.min.js 0.0% 🔺+0.4% 1.2 KB 1.2 KB 667 B 670 B NODE_PROD
react-interactions-events/input.production.min.js 0.0% 🔺+0.2% 1.66 KB 1.66 KB 916 B 918 B NODE_PROD
react-interactions-events/scroll.production.min.js 0.0% 🔺+0.3% 2.44 KB 2.44 KB 1.09 KB 1.09 KB NODE_PROD
react-interactions-accessibility/focus-contain.production.min.js 0.0% 🔺+0.5% 1.09 KB 1.09 KB 650 B 653 B NODE_PROD
react-interactions-events/hover.development.js 0.0% +0.1% 7 KB 7 KB 1.55 KB 1.56 KB UMD_DEV
react-interactions-events/press-legacy.development.js 0.0% 0.0% 24.6 KB 24.6 KB 6.07 KB 6.08 KB UMD_DEV
react-interactions-events/hover.production.min.js 0.0% 🔺+0.3% 3.12 KB 3.12 KB 1.13 KB 1.13 KB UMD_PROD
react-interactions-events/press-legacy.production.min.js 0.0% 🔺+0.1% 7.31 KB 7.31 KB 2.77 KB 2.77 KB UMD_PROD
react-interactions-events/hover.development.js 0.0% +0.1% 6.82 KB 6.82 KB 1.51 KB 1.51 KB NODE_DEV
react-interactions-events/press-legacy.development.js 0.0% 0.0% 24.41 KB 24.41 KB 6.02 KB 6.02 KB NODE_DEV
react-interactions-accessibility/focus-table.development.js +3.8% +4.5% 10.87 KB 11.29 KB 2.48 KB 2.6 KB NODE_DEV
react-interactions-accessibility/focus-group.development.js 0.0% +0.2% 7.29 KB 7.29 KB 1.89 KB 1.9 KB NODE_DEV
react-interactions-events/hover.production.min.js 0.0% 🔺+0.2% 2.94 KB 2.94 KB 1.07 KB 1.08 KB NODE_PROD
react-interactions-events/press-legacy.production.min.js 0.0% 🔺+0.1% 7.13 KB 7.13 KB 2.71 KB 2.71 KB NODE_PROD
react-interactions-accessibility/focus-table.production.min.js 🔺+3.1% 🔺+5.0% 3.42 KB 3.53 KB 1.4 KB 1.47 KB NODE_PROD
react-interactions-accessibility/focus-group.production.min.js 0.0% 🔺+0.3% 2.41 KB 2.41 KB 1.13 KB 1.13 KB NODE_PROD
ReactFocusTable-prod.js 🔺+7.8% 🔺+5.0% 9.62 KB 10.37 KB 2.08 KB 2.19 KB FB_WWW_PROD
react-interactions-events/focus.development.js 0.0% +0.1% 11.63 KB 11.63 KB 2.53 KB 2.53 KB NODE_DEV
react-interactions-events/press.development.js 0.0% 0.0% 8.73 KB 8.73 KB 2.58 KB 2.58 KB NODE_DEV
react-interactions-events/tap.development.js 0.0% +0.1% 17.99 KB 17.99 KB 3.86 KB 3.86 KB NODE_DEV
react-interactions-accessibility/tabbable-scope.development.js 0.0% +0.5% 1.2 KB 1.2 KB 597 B 600 B NODE_DEV
react-interactions-events/focus.production.min.js 0.0% 🔺+0.2% 4.14 KB 4.14 KB 1.4 KB 1.4 KB NODE_PROD
react-interactions-events/press.production.min.js 0.0% 🔺+0.2% 2.33 KB 2.33 KB 1 KB 1 KB NODE_PROD
react-interactions-events/tap.production.min.js 0.0% 🔺+0.1% 6.15 KB 6.15 KB 2.32 KB 2.32 KB NODE_PROD
react-interactions-accessibility/tabbable-scope.production.min.js 0.0% 🔺+0.7% 662 B 662 B 437 B 440 B NODE_PROD
react-interactions-events/drag.development.js 0.0% +0.2% 5.23 KB 5.23 KB 1.54 KB 1.54 KB UMD_DEV
react-interactions-events/swipe.development.js 0.0% +0.1% 6 KB 6 KB 1.63 KB 1.63 KB UMD_DEV
react-interactions-events/drag.production.min.js 0.0% 🔺+0.3% 2.25 KB 2.25 KB 1.07 KB 1.07 KB UMD_PROD
react-interactions-events/keyboard.production.min.js 0.0% 🔺+0.1% 2.39 KB 2.39 KB 1.21 KB 1.21 KB UMD_PROD
react-interactions-events/swipe.production.min.js 0.0% 🔺+0.2% 2.45 KB 2.45 KB 1.11 KB 1.11 KB UMD_PROD
react-interactions-events/drag.development.js 0.0% +0.1% 6.98 KB 6.98 KB 2.21 KB 2.21 KB NODE_DEV
react-interactions-events/keyboard.development.js 0.0% 0.0% 5.79 KB 5.79 KB 2.19 KB 2.19 KB NODE_DEV
react-interactions-events/swipe.development.js 0.0% +0.1% 5.82 KB 5.82 KB 1.58 KB 1.58 KB NODE_DEV
react-interactions-accessibility/focus-manager.development.js 0.0% +0.2% 3.53 KB 3.53 KB 949 B 951 B NODE_DEV
react-interactions-events/drag.production.min.js 0.0% 🔺+0.1% 2.88 KB 2.88 KB 1.38 KB 1.38 KB NODE_PROD
react-interactions-events/swipe.production.min.js 0.0% 🔺+0.3% 2.27 KB 2.27 KB 1.05 KB 1.05 KB NODE_PROD
react-interactions-accessibility/focus-manager.production.min.js 0.0% 🔺+0.5% 1.25 KB 1.25 KB 612 B 615 B NODE_PROD

Generated by 🚫 dangerJS against 4691b27

@trueadm trueadm force-pushed the focus-table-colspan branch 2 times, most recently from 69a6703 to 4e1056c Compare October 4, 2019 15:56
elboman
elboman approved these changes Oct 4, 2019
View reviewed changes
Copy link
Member

@elboman elboman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, I think it looks good

Wondering why we killed the focusTableByID in favor of just the event, tho I think it's cleaner and more flexible this way

packages/react-interactions/accessibility/src/FocusTable.js Show resolved Hide resolved
@trueadm
Copy link
Contributor Author

trueadm commented Oct 7, 2019

Merging this as I plan to move these components to our internal codebase, away from Github.

@trueadm trueadm merged commit fff5b1c into facebook:master Oct 7, 2019
@trueadm trueadm deleted the focus-table-colspan branch October 7, 2019 10:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@elboman elboman elboman approved these changes

@necolas necolas Awaiting requested review from necolas

Assignees
No one assigned
Labels
CLA Signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@trueadm @sizebot @elboman @facebook-github-bot