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

chore:(docs) Update and migrate component implementation guide #31398

Merged
merged 3 commits into from
May 23, 2024
Merged

chore:(docs) Update and migrate component implementation guide #31398

merged 3 commits into from
May 23, 2024

Conversation

mltejera
Copy link
Contributor

We're migrating and updating the component implementation guide.

This is a direct port from the wiki, with some additions now that we're onto molecule and organism level components.

@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented May 16, 2024 •
edited

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.

@fabricteam
Copy link
Collaborator

fabricteam commented May 16, 2024 •
edited

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 631 632 5000
Button mount 315 294 5000
Field mount 1107 1151 5000
FluentProvider mount 715 712 5000
FluentProviderWithTheme mount 80 86 10
FluentProviderWithTheme virtual-rerender 41 34 10
FluentProviderWithTheme virtual-rerender-with-unmount 74 70 10
MakeStyles mount 861 874 50000
Persona mount 1778 1719 5000
SpinButton mount 1418 1376 5000
SwatchPicker mount 1571 1564 5000

@fabricteam
Copy link
Collaborator

fabricteam commented May 16, 2024 •
edited

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 95 80 1.19:1
AccordionMinimalPerf.default 93 80 1.16:1
ButtonMinimalPerf.default 91 82 1.11:1
AttachmentSlotsPerf.default 689 633 1.09:1
FlexMinimalPerf.default 163 150 1.09:1
TableMinimalPerf.default 247 227 1.09:1
GridMinimalPerf.default 205 190 1.08:1
PortalMinimalPerf.default 89 83 1.07:1
RefMinimalPerf.default 114 107 1.07:1
IconMinimalPerf.default 406 380 1.07:1
TextMinimalPerf.default 203 190 1.07:1
AlertMinimalPerf.default 168 158 1.06:1
AttachmentMinimalPerf.default 85 80 1.06:1
ButtonSlotsPerf.default 316 299 1.06:1
AnimationMinimalPerf.default 311 297 1.05:1
SegmentMinimalPerf.default 204 196 1.04:1
TextAreaMinimalPerf.default 290 279 1.04:1
CheckboxMinimalPerf.default 1157 1118 1.03:1
HeaderSlotsPerf.default 474 459 1.03:1
ImageMinimalPerf.default 229 222 1.03:1
ListMinimalPerf.default 319 311 1.03:1
ListNestedPerf.default 327 317 1.03:1
RosterPerf.default 1593 1554 1.03:1
ToolbarMinimalPerf.default 564 547 1.03:1
ButtonOverridesMissPerf.default 686 673 1.02:1
CarouselMinimalPerf.default 264 260 1.02:1
DialogMinimalPerf.default 446 438 1.02:1
DividerMinimalPerf.default 205 200 1.02:1
DropdownMinimalPerf.default 1438 1415 1.02:1
ListCommonPerf.default 386 380 1.02:1
PopupMinimalPerf.default 357 351 1.02:1
AvatarMinimalPerf.default 109 108 1.01:1
BoxMinimalPerf.default 197 195 1.01:1
ChatDuplicateMessagesPerf.default 153 152 1.01:1
DatepickerMinimalPerf.default 3604 3571 1.01:1
HeaderMinimalPerf.default 202 200 1.01:1
InputMinimalPerf.default 561 554 1.01:1
ListWith60ListItems.default 361 358 1.01:1
LoaderMinimalPerf.default 186 184 1.01:1
MenuButtonMinimalPerf.default 970 958 1.01:1
SkeletonMinimalPerf.default 195 193 1.01:1
SplitButtonMinimalPerf.default 2278 2263 1.01:1
StatusMinimalPerf.default 389 386 1.01:1
TreeMinimalPerf.default 485 478 1.01:1
ChatMinimalPerf.default 453 451 1:1
EmbedMinimalPerf.default 1871 1875 1:1
ItemLayoutMinimalPerf.default 696 699 1:1
LabelMinimalPerf.default 216 216 1:1
MenuMinimalPerf.default 506 505 1:1
ReactionMinimalPerf.default 211 210 1:1
SliderMinimalPerf.default 764 761 1:1
TooltipMinimalPerf.default 1281 1287 1:1
VideoMinimalPerf.default 434 436 1:1
ChatWithPopoverPerf.default 198 199 0.99:1
ProviderMinimalPerf.default 200 202 0.99:1
RadioGroupMinimalPerf.default 268 271 0.99:1
LayoutMinimalPerf.default 196 199 0.98:1
ProviderMergeThemesPerf.default 623 635 0.98:1
TableManyItemsPerf.default 1101 1122 0.98:1
CustomToolbarPrototype.default 1464 1490 0.98:1
FormMinimalPerf.default 215 221 0.97:1
CardMinimalPerf.default 309 321 0.96:1
DropdownManyItemsPerf.default 386 403 0.96:1

@fabricteam
Copy link
Collaborator

fabricteam commented May 16, 2024 •
edited

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented May 16, 2024 •
edited

📊 Bundle size report

✅ No changes found

@mltejera
Copy link
Contributor Author

There are a lot of links to docs that haven't migrated yet. We should probably leave them as is until we've migrated and then we can swap them.

@mltejera mltejera marked this pull request as ready for review May 16, 2024 21:16
@mltejera mltejera requested review from a team as code owners May 16, 2024 21:16
@fabricteam
Copy link
Collaborator

fabricteam commented May 16, 2024 •
edited

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 611 620 5000
Breadcrumb mount 1655 1706 1000
Checkbox mount 1702 1685 5000
CheckboxBase mount 1441 1484 5000
ChoiceGroup mount 2945 2962 5000
ComboBox mount 696 674 1000
CommandBar mount 6504 6510 1000
ContextualMenu mount 12209 12545 1000
DefaultButton mount 810 777 5000
DetailsRow mount 2199 2185 5000
DetailsRowFast mount 2227 2230 5000
DetailsRowNoStyles mount 2045 2037 5000
Dialog mount 2865 2816 1000
DocumentCardTitle mount 229 225 1000
Dropdown mount 2021 1994 5000
FocusTrapZone mount 1157 1142 5000
FocusZone mount 1054 1068 5000
GroupedList mount 37863 42202 2
GroupedList virtual-rerender 17929 20236 2
GroupedList virtual-rerender-with-unmount 51338 51373 2
GroupedListV2 mount 226 222 2
GroupedListV2 virtual-rerender 216 212 2
GroupedListV2 virtual-rerender-with-unmount 227 220 2
IconButton mount 1113 1131 5000
Label mount 342 345 5000
Layer mount 2716 2772 5000
Link mount 387 391 5000
MenuButton mount 996 988 5000
MessageBar mount 21437 21465 5000
Nav mount 2034 1991 1000
OverflowSet mount 767 785 5000
Panel mount 1828 1801 1000
Persona mount 739 763 1000
Pivot mount 907 892 1000
PrimaryButton mount 955 943 5000
Rating mount 4675 4613 5000
SearchBox mount 922 939 5000
Shimmer mount 1893 1921 5000
Slider mount 1367 1371 5000
SpinButton mount 2983 2964 5000
Spinner mount 406 386 5000
SplitButton mount 1824 1843 5000
Stack mount 414 414 5000
StackWithIntrinsicChildren mount 880 911 5000
StackWithTextChildren mount 2651 2655 5000
SwatchColorPicker mount 6336 6341 5000
TagPicker mount 1474 1419 5000
Text mount 379 387 5000
TextField mount 979 933 5000
ThemeProvider mount 833 848 5000
ThemeProvider virtual-rerender 581 582 5000
ThemeProvider virtual-rerender-with-unmount 1286 1284 5000
Toggle mount 636 612 5000
buttonNative mount 188 192 5000

@mltejera mltejera mentioned this pull request May 17, 2024
Open
@mltejera mltejera changed the title chore: Update and migrate component implementation guide chore:(docs) Update and migrate component implementation guide May 17, 2024
@mltejera mltejera requested a review from Hotell May 21, 2024 21:17
@mltejera mltejera requested a review from Hotell May 22, 2024 20:30
@mltejera mltejera force-pushed the docs/component-implementation-guide branch from cc6c6b8 to fb5ae82 Compare May 23, 2024 16:03
@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@mltejera mltejera merged commit d8d3252 into microsoft:master May 23, 2024
22 checks passed
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request May 28, 2024
@marcosmoura
Merge branch 'master' into feat/react-drawer/allow-aside-tag
f7f0a2b 
* master: (49 commits)
  Update focus order in sankey chart for vertical navigation (microsoft#31469)
  chore: use new performant 'type-check' for v9 libaries (microsoft#31454)
  applying package updates
  fix(Timepicker-compat): clearIcon not working in freeform (microsoft#31324)
  chore: re-enable lint rule (microsoft#31459)
  feat(react-tag-picker): adds text property to TagPickerOption (microsoft#31474)
  feat(recipes): create package with initial implementation (moved from /apps) (microsoft#31386)
  applying package updates
  applying package updates
  chore: revert globals changes (microsoft#31470)
  (web-components) Use `ElementInternals` for TextInput elements (microsoft#31201)
  chore:(docs) Update and migrate component implementation guide (microsoft#31398)
  disallow all globals in Fluent v9 (microsoft#30967)
  chore:(react-nav-preview) Recomposing more components and some pixel pushing (microsoft#31387)
  fix(pr-deploy-site): explicitly set types to not include whole @types/* globals which are causing issues with addition of @types/web (microsoft#31465)
  fix(recipes-react-components): explicitly set types to not include whole @types/* globals which are cauising issues with addition of @types/web (microsoft#31463)
  applying package updates
  applying package updates
  applying package updates
  Update IconDirectionContextProvider import to import from specific path (microsoft#31006)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fabricteam fabricteam fabricteam left review comments

@Mitch-At-Work Mitch-At-Work Mitch-At-Work left review comments

@layershifter layershifter layershifter approved these changes

@Hotell Hotell Awaiting requested review from Hotell

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

Successfully merging this pull request may close these issues.

None yet
5 participants
@mltejera @fabricteam @Hotell @layershifter @Mitch-At-Work