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

add data grid as a new web component #17390

Merged
merged 1 commit into from
Mar 12, 2021
Merged

add data grid as a new web component #17390

merged 1 commit into from
Mar 12, 2021

Conversation

chrisdholt
Copy link
Member

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

Adds "Data Grid" as a new component

Focus areas to test

(optional)

@chrisdholt chrisdholt self-assigned this Mar 12, 2021
@chrisdholt chrisdholt changed the title add data grid as a new component add data grid as a new web component Mar 12, 2021
@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 12, 2021 •
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 d1a2d9f:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@chrisdholt chrisdholt force-pushed the users/chhol/add-data-grid-as-a-new-component branch 3 times, most recently from f663ec4 to 05bab2a Compare March 12, 2021 03:25
@chrisdholt chrisdholt force-pushed the users/chhol/add-data-grid-as-a-new-component branch from 05bab2a to d1a2d9f Compare March 12, 2021 03:41
@size-auditor
Copy link

size-auditor bot commented Mar 12, 2021

Asset size changes

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

Baseline commit: 3b3e2a712ec720d570969fd116da39ba1c7b6218 (build)

@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1220 1237 5000
BaseButton mount 996 986 5000
Breadcrumb mount 44118 45003 5000
ButtonNext mount 1435 1379 5000
Checkbox mount 1663 1612 5000
CheckboxBase mount 1423 1365 5000
ChoiceGroup mount 5073 5026 5000
ComboBox mount 1053 1064 1000
CommandBar mount 10331 10484 1000
ContextualMenu mount 6421 6402 1000
DefaultButton mount 1243 1220 5000
DetailsRow mount 3839 3941 5000
DetailsRowFast mount 3777 3959 5000
DetailsRowNoStyles mount 3676 3516 5000
Dialog mount 1522 1568 1000
DocumentCardTitle mount 1876 1825 1000
Dropdown mount 3551 3538 5000
FocusTrapZone mount 1830 1862 5000
FocusZone mount 1806 1839 5000
IconButton mount 1856 1886 5000
Label mount 351 353 5000
Layer mount 1863 1887 5000
Link mount 479 490 5000
MakeStyles mount 2069 2047 50000
MenuButton mount 1556 1566 5000
MessageBar mount 2130 2123 5000
Nav mount 3446 3541 1000
OverflowSet mount 1063 1065 5000
Panel mount 1413 1495 1000
Persona mount 833 872 1000
Pivot mount 1426 1500 1000
PrimaryButton mount 1356 1357 5000
Rating mount 8110 8243 5000
SearchBox mount 1378 1398 5000
Shimmer mount 2741 2780 5000
Slider mount 2071 2079 5000
SpinButton mount 5129 5202 5000
Spinner mount 424 433 5000
SplitButton mount 3289 3336 5000
Stack mount 525 527 5000
StackWithIntrinsicChildren mount 1690 1688 5000
StackWithTextChildren mount 5203 5069 5000
SwatchColorPicker mount 10820 10814 5000
Tabs mount 1491 1502 1000
TagPicker mount 2935 2998 5000
TeachingBubble mount 12067 12140 5000
Text mount 462 443 5000
TextField mount 1485 1518 5000
ThemeProvider mount 1293 1266 5000
ThemeProvider virtual-rerender 619 640 5000
ThemeProviderNext mount 15728 15490 5000
Toggle mount 838 853 5000
buttonNative mount 105 115 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.2 0.5 0.4:1 2000 401
🦄 Button.Fluent 0.13 0.22 0.59:1 5000 648
🔧 Checkbox.Fluent 0.69 0.38 1.82:1 1000 690
🎯 Dialog.Fluent 0.18 0.24 0.75:1 5000 909
🔧 Dropdown.Fluent 3.21 0.44 7.3:1 1000 3210
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 746
🎯 Image.Fluent 0.1 0.14 0.71:1 5000 492
🔧 Slider.Fluent 1.73 0.5 3.46:1 1000 1725
🔧 Text.Fluent 0.09 0.03 3:1 5000 433
🦄 Tooltip.Fluent 0.16 0.95 0.17:1 5000 792

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
HeaderMinimalPerf.default 461 412 1.12:1
Avatar.Fluent 401 364 1.1:1
ChatWithPopoverPerf.default 445 409 1.09:1
RadioGroupMinimalPerf.default 547 501 1.09:1
Image.Fluent 492 452 1.09:1
AttachmentMinimalPerf.default 193 179 1.08:1
GridMinimalPerf.default 431 400 1.08:1
ListWith60ListItems.default 734 684 1.07:1
SegmentMinimalPerf.default 433 405 1.07:1
BoxMinimalPerf.default 444 418 1.06:1
Tooltip.Fluent 792 744 1.06:1
FormMinimalPerf.default 489 465 1.05:1
LayoutMinimalPerf.default 485 461 1.05:1
AvatarMinimalPerf.default 238 228 1.04:1
CardMinimalPerf.default 675 650 1.04:1
CarouselMinimalPerf.default 545 526 1.04:1
ListNestedPerf.default 677 652 1.04:1
PopupMinimalPerf.default 765 735 1.04:1
StatusMinimalPerf.default 864 827 1.04:1
ChatMinimalPerf.default 712 694 1.03:1
DividerMinimalPerf.default 432 420 1.03:1
ListCommonPerf.default 767 746 1.03:1
SkeletonMinimalPerf.default 440 427 1.03:1
TreeMinimalPerf.default 906 879 1.03:1
Dialog.Fluent 909 883 1.03:1
AttachmentSlotsPerf.default 1295 1275 1.02:1
ChatDuplicateMessagesPerf.default 333 327 1.02:1
DatepickerMinimalPerf.default 49991 49202 1.02:1
ImageMinimalPerf.default 453 445 1.02:1
LoaderMinimalPerf.default 787 772 1.02:1
MenuMinimalPerf.default 1023 1005 1.02:1
RefMinimalPerf.default 253 247 1.02:1
TableMinimalPerf.default 486 475 1.02:1
TextAreaMinimalPerf.default 578 569 1.02:1
Button.Fluent 648 635 1.02:1
AnimationMinimalPerf.default 442 438 1.01:1
ButtonSlotsPerf.default 650 641 1.01:1
ButtonUseCssNestingPerf.default 1208 1193 1.01:1
EmbedMinimalPerf.default 4565 4535 1.01:1
ItemLayoutMinimalPerf.default 1406 1387 1.01:1
MenuButtonMinimalPerf.default 1742 1718 1.01:1
TextMinimalPerf.default 425 421 1.01:1
CustomToolbarPrototype.default 3965 3915 1.01:1
ToolbarMinimalPerf.default 1071 1063 1.01:1
TooltipMinimalPerf.default 1042 1029 1.01:1
DialogMinimalPerf.default 886 885 1:1
FlexMinimalPerf.default 357 358 1:1
InputMinimalPerf.default 1384 1388 1:1
ListMinimalPerf.default 590 590 1:1
ProviderMinimalPerf.default 1048 1048 1:1
SliderMinimalPerf.default 1700 1705 1:1
SplitButtonMinimalPerf.default 4180 4169 1:1
VideoMinimalPerf.default 736 734 1:1
Checkbox.Fluent 690 690 1:1
Text.Fluent 433 432 1:1
ButtonOverridesMissPerf.default 1869 1882 0.99:1
ButtonUseCssPerf.default 900 911 0.99:1
CheckboxMinimalPerf.default 3005 3037 0.99:1
DropdownManyItemsPerf.default 808 815 0.99:1
DropdownMinimalPerf.default 3255 3291 0.99:1
HeaderSlotsPerf.default 886 896 0.99:1
IconMinimalPerf.default 751 756 0.99:1
TreeWith60ListItems.default 195 196 0.99:1
Dropdown.Fluent 3210 3231 0.99:1
AlertMinimalPerf.default 334 341 0.98:1
LabelMinimalPerf.default 495 507 0.98:1
ProviderMergeThemesPerf.default 1637 1667 0.98:1
ReactionMinimalPerf.default 466 474 0.98:1
Slider.Fluent 1725 1752 0.98:1
ButtonMinimalPerf.default 215 221 0.97:1
RosterPerf.default 1289 1335 0.97:1
PortalMinimalPerf.default 181 187 0.97:1
TableManyItemsPerf.default 2315 2383 0.97:1
Icon.Fluent 746 787 0.95:1
AccordionMinimalPerf.default 185 196 0.94:1

@chrisdholt chrisdholt merged commit 6000e06 into microsoft:master Mar 12, 2021
@chrisdholt chrisdholt deleted the users/chhol/add-data-grid-as-a-new-component branch March 12, 2021 04:25
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/web-components@v0.16.0 has been released which incorporates this pull request.:tada:

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
@chrisdholt @joshualamusga1
add data grid as a new component (microsoft#17390)
7b84c8f
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@chrisdholt @miroslavstastny
add data grid as a new component (microsoft#17390)
91a13be
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@scomea scomea scomea approved these changes

@EisenbergEffect EisenbergEffect EisenbergEffect approved these changes

@nicholasrice nicholasrice Awaiting requested review from nicholasrice

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@chrisdholt @fabricteam @msft-fluent-ui-bot @EisenbergEffect @scomea