Skip to content

chore: migrate from getNativeElementProps to getIntrinsicElementProps #29499

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
Merged
bsunderhus merged 1 commit into from
Oct 13, 2023
Merged

chore: migrate from getNativeElementProps to getIntrinsicElementProps #29499

bsunderhus merged 1 commit into from
Oct 13, 2023

Conversation

@bsunderhus
Copy link
Contributor

@bsunderhus bsunderhus commented Oct 11, 2023

New Behavior

Follow up on #29310

getNativeElementProps has some type safety issues, allowing erroneous properties to be introduced.

  1. replaces use cases of getNativeElementProps with an equivalent but more restrict method getIntrinsicElementProps

@bsunderhus bsunderhus self-assigned this Oct 11, 2023
@bsunderhus bsunderhus marked this pull request as ready for review October 11, 2023 17:03
@fabricteam
Copy link
Collaborator

fabricteam commented Oct 11, 2023 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)		 92.961 kB
28.372 kB		 93.024 kB
28.383 kB		 63 B
11 B
react-alert
Alert		 84.287 kB
23.469 kB		 84.293 kB
23.456 kB		 6 B
-13 B
react-avatar
Avatar		 50.461 kB
15.901 kB		 50.534 kB
15.923 kB		 73 B
22 B
react-avatar
AvatarGroup		 19.992 kB
7.871 kB		 20.064 kB
7.894 kB		 72 B
23 B
react-avatar
AvatarGroupItem		 65.117 kB
20.238 kB		 65.19 kB
20.259 kB		 73 B
21 B
react-badge
Badge		 27.197 kB
8.779 kB		 27.264 kB
8.808 kB		 67 B
29 B
react-badge
CounterBadge		 28.098 kB
9.074 kB		 28.165 kB
9.101 kB		 67 B
27 B
react-badge
PresenceBadge		 25.603 kB
9.283 kB		 25.67 kB
9.313 kB		 67 B
30 B
react-button
Button		 40.007 kB
11.277 kB		 40.074 kB
11.292 kB		 67 B
15 B
react-button
CompoundButton		 47.363 kB
12.768 kB		 47.43 kB
12.787 kB		 67 B
19 B
react-button
MenuButton		 44.781 kB
12.649 kB		 44.848 kB
12.668 kB		 67 B
19 B
react-button
SplitButton		 52.795 kB
14.236 kB		 52.862 kB
14.254 kB		 67 B
18 B
react-button
ToggleButton		 57.054 kB
13.176 kB		 57.122 kB
13.194 kB		 68 B
18 B
react-checkbox
Checkbox		 37.235 kB
12.278 kB		 37.302 kB
12.302 kB		 67 B
24 B
react-combobox
Combobox (including child components)		 91.564 kB
29.879 kB		 91.637 kB
29.902 kB		 73 B
23 B
react-combobox
Dropdown (including child components)		 90.004 kB
29.537 kB		 90.079 kB
29.56 kB		 75 B
23 B
react-components
react-components: Button, FluentProvider & webLightTheme		 69.863 kB
20.148 kB		 69.858 kB
20.137 kB		 -5 B
-11 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 207.62 kB
59.701 kB		 207.606 kB
59.685 kB		 -14 B
-16 B
react-divider
Divider		 21.112 kB
7.812 kB		 21.179 kB
7.839 kB		 67 B
27 B
react-field
Field		 22.721 kB
8.611 kB		 22.788 kB
8.639 kB		 67 B
28 B
react-infobutton
InfoButton		 130.378 kB
41.093 kB		 130.378 kB
41.089 kB
-4 B
react-infobutton
InfoLabel		 134.068 kB
42.26 kB		 134.062 kB
42.25 kB		 -6 B
-10 B
react-label
Label		 14.435 kB
5.83 kB		 14.508 kB
5.857 kB		 73 B
27 B
react-link
Link		 17.328 kB
6.947 kB		 17.4 kB
6.977 kB		 72 B
30 B
react-persona
Persona		 57.352 kB
17.774 kB		 57.425 kB
17.798 kB		 73 B
24 B
react-progress
ProgressBar		 17.725 kB
6.965 kB		 17.788 kB
6.986 kB		 63 B
21 B
react-radio
Radio		 30.996 kB
10.223 kB		 31.063 kB
10.241 kB		 67 B
18 B
react-radio
RadioGroup		 15.631 kB
6.33 kB		 15.704 kB
6.35 kB		 73 B
20 B
react-spinner
Spinner		 23.688 kB
8.536 kB		 23.762 kB
8.556 kB		 74 B
20 B
react-switch
Switch		 33.455 kB
10.846 kB		 33.528 kB
10.87 kB		 73 B
24 B
react-table
DataGrid		 156.97 kB
43.826 kB		 156.97 kB
43.825 kB
-1 B
react-table
Table as DataGrid		 130.265 kB
35.168 kB		 130.265 kB
35.164 kB
-4 B
react-table
Table (Selection only)		 75.633 kB
20.448 kB		 75.633 kB
20.447 kB
-1 B
react-table
Table (Sort only)		 74.24 kB
20.048 kB		 74.24 kB
20.046 kB
-2 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-card
Card - All		 92.829 kB
26.915 kB
react-card
Card		 87.653 kB
25.399 kB
react-card
CardFooter		 13.423 kB
5.481 kB
react-card
CardHeader		 15.666 kB
6.235 kB
react-card
CardPreview		 14.374 kB
5.854 kB
react-components
react-components: FluentProvider & webLightTheme		 42.142 kB
13.97 kB
react-datepicker-compat
DatePicker Compat		 211.96 kB
59.117 kB
react-input
Input		 27.247 kB
9.194 kB
react-portal-compat
PortalCompatProvider		 6.503 kB
2.22 kB
react-select
Select		 28.968 kB
10.269 kB
react-slider
Slider		 38.146 kB
12.57 kB
react-spinbutton
SpinButton		 37.133 kB
11.856 kB
react-table
Table (Primitives only)		 43.797 kB
13.732 kB
react-tags
InteractionTag		 15.618 kB
6.152 kB
react-tags
Tag		 30.341 kB
9.505 kB
react-tags
TagGroup		 73.857 kB
22.067 kB
react-textarea
Textarea		 31.306 kB
10.549 kB
🤖 This report was generated against 1a52f5b27e2f71f7257c470bc9c7552ea5e07867

@bsunderhus bsunderhus force-pushed the cxe-us/chore--migrate-from-getNativeElementProps-to-getIntrinsicElementProps branch from 9b335e6 to 6feb80f Compare October 11, 2023 17:10
@fabricteam
Copy link
Collaborator

fabricteam commented Oct 11, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 626 635 5000
Button mount 320 297 5000
Field mount 1120 1143 5000
FluentProvider mount 698 718 5000
FluentProviderWithTheme mount 85 81 10
FluentProviderWithTheme virtual-rerender 73 74 10
FluentProviderWithTheme virtual-rerender-with-unmount 76 80 10
InfoButton mount 17 15 5000
MakeStyles mount 872 862 50000
Persona mount 1704 1724 5000
SpinButton mount 1426 1393 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 11, 2023 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c21afae:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@bsunderhus bsunderhus force-pushed the cxe-us/chore--migrate-from-getNativeElementProps-to-getIntrinsicElementProps branch 2 times, most recently from 6feb80f to 8eaf705 Compare October 11, 2023 17:58
@size-auditor
Copy link

size-auditor bot commented Oct 11, 2023 •
edited
Loading

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 1a52f5b27e2f71f7257c470bc9c7552ea5e07867 (build)

khmakoto
khmakoto reviewed Oct 11, 2023
View reviewed changes
@bsunderhus bsunderhus force-pushed the cxe-us/chore--migrate-from-getNativeElementProps-to-getIntrinsicElementProps branch from 69b91ba to c21afae Compare October 12, 2023 14:00
@bsunderhus bsunderhus requested a review from khmakoto October 12, 2023 14:01
@fabricteam
Copy link
Collaborator

fabricteam commented Oct 12, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@bsunderhus bsunderhus merged commit 967882a into microsoft:master Oct 13, 2023
@bsunderhus bsunderhus deleted the cxe-us/chore--migrate-from-getNativeElementProps-to-getIntrinsicElementProps branch October 13, 2023 11:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@khmakoto khmakoto khmakoto approved these changes

@tomi-msft tomi-msft Awaiting requested review from tomi-msft

@mltejera mltejera Awaiting requested review from mltejera

@sopranopillow sopranopillow Awaiting requested review from sopranopillow

@GeoffCoxMSFT GeoffCoxMSFT Awaiting requested review from GeoffCoxMSFT

@behowell behowell Awaiting requested review from behowell

@spmonahan spmonahan Awaiting requested review from spmonahan

@micahgodbolt micahgodbolt Awaiting requested review from micahgodbolt

@smhigley smhigley Awaiting requested review from smhigley

Assignees

@bsunderhus bsunderhus

Labels

Fluent UI react-components (v9)

Projects

None yet

Milestone

October Project Cycle Q4 2023

Development

Successfully merging this pull request may close these issues.

3 participants

@bsunderhus @fabricteam @khmakoto