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

DetailsList - add option to customize the filter icon #18268

Merged
merged 6 commits into from
Jun 17, 2021
Merged

DetailsList - add option to customize the filter icon #18268

merged 6 commits into from
Jun 17, 2021

Conversation

khuynh92
Copy link
Collaborator

Pull request checklist

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

Description of changes

ODSP is looking to update chevrons in the detailsList to use ChevronDownSmall. Adding the option to pass in a filterIconName to customize the icon in the details header

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented May 20, 2021 •
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.

Latest deployment of this branch, based on commit 325cac6:

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

@size-auditor
Copy link

size-auditor bot commented May 20, 2021 •
edited

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-ShimmeredDetailsList 219.382 kB 219.695 kB ExceedsBaseline     313 bytes
office-ui-fabric-react fluentui-react-DetailsList 208.416 kB 208.729 kB ExceedsBaseline     313 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: a9a42d212a0d04f1d1c26cd5904e07f19ed695b2 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented May 20, 2021 •
edited

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 811 847 5000
BaseButton mount 868 921 5000
Breadcrumb mount 2604 2647 1000
ButtonNext mount 537 530 5000
Checkbox mount 1517 1514 5000
CheckboxBase mount 1293 1322 5000
ChoiceGroup mount 4699 4751 5000
ComboBox mount 972 1013 1000
CommandBar mount 10144 10316 1000
ContextualMenu mount 6340 6376 1000
DefaultButton mount 1109 1121 5000
DetailsRow mount 3825 3842 5000
DetailsRowFast mount 3750 3777 5000
DetailsRowNoStyles mount 3636 3530 5000
Dialog mount 2235 2167 1000
DocumentCardTitle mount 138 154 1000
Dropdown mount 3242 3239 5000
FocusTrapZone mount 1765 1861 5000
FocusZone mount 1840 1861 5000
IconButton mount 1706 1744 5000
Label mount 337 342 5000
Layer mount 1813 1788 5000
Link mount 454 466 5000
MakeStyles mount 1802 1836 50000
MenuButton mount 1491 1478 5000
MessageBar mount 2048 2055 5000
Nav mount 3582 3261 1000
OverflowSet mount 1033 1070 5000
Panel mount 2078 2105 1000
Persona mount 855 815 1000
Pivot mount 1437 1433 1000
PrimaryButton mount 1272 1312 5000
Rating mount 7647 7519 5000
SearchBox mount 1290 1320 5000
Shimmer mount 2540 2518 5000
Slider mount 1917 1917 5000
SpinButton mount 4962 4974 5000
Spinner mount 405 417 5000
SplitButton mount 3209 3146 5000
Stack mount 486 498 5000
StackWithIntrinsicChildren mount 1554 1538 5000
StackWithTextChildren mount 4570 4517 5000
SwatchColorPicker mount 10164 10346 5000
Tabs mount 1455 1435 1000
TagPicker mount 2473 2522 5000
TeachingBubble mount 12022 12116 5000
Text mount 443 438 5000
TextField mount 1403 1393 5000
ThemeProvider mount 1198 1209 5000
ThemeProvider virtual-rerender 623 593 5000
ThemeProviderNext mount 7106 7224 5000
Toggle mount 810 834 5000
buttonNative mount 112 117 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatWithPopoverPerf.default 387 352 1.1:1
TextMinimalPerf.default 351 322 1.09:1
TreeWith60ListItems.default 180 165 1.09:1
ButtonMinimalPerf.default 185 174 1.06:1
RadioGroupMinimalPerf.default 460 432 1.06:1
BoxMinimalPerf.default 356 340 1.05:1
ImageMinimalPerf.default 373 359 1.04:1
AlertMinimalPerf.default 280 272 1.03:1
AvatarMinimalPerf.default 197 192 1.03:1
ButtonSlotsPerf.default 571 553 1.03:1
ChatMinimalPerf.default 616 596 1.03:1
DropdownManyItemsPerf.default 686 663 1.03:1
EmbedMinimalPerf.default 4213 4104 1.03:1
ItemLayoutMinimalPerf.default 1268 1232 1.03:1
ListMinimalPerf.default 512 495 1.03:1
ListWith60ListItems.default 628 609 1.03:1
TableManyItemsPerf.default 1914 1850 1.03:1
DividerMinimalPerf.default 366 359 1.02:1
FlexMinimalPerf.default 285 279 1.02:1
HeaderMinimalPerf.default 358 350 1.02:1
PortalMinimalPerf.default 183 179 1.02:1
RefMinimalPerf.default 241 237 1.02:1
SliderMinimalPerf.default 1618 1586 1.02:1
ButtonOverridesMissPerf.default 1703 1693 1.01:1
CheckboxMinimalPerf.default 2793 2763 1.01:1
DatepickerMinimalPerf.default 5432 5361 1.01:1
FormMinimalPerf.default 409 405 1.01:1
InputMinimalPerf.default 1271 1258 1.01:1
LoaderMinimalPerf.default 713 705 1.01:1
MenuButtonMinimalPerf.default 1576 1560 1.01:1
SplitButtonMinimalPerf.default 3758 3726 1.01:1
ToolbarMinimalPerf.default 925 918 1.01:1
AttachmentSlotsPerf.default 1158 1155 1:1
CarouselMinimalPerf.default 454 455 1:1
DropdownMinimalPerf.default 3107 3098 1:1
HeaderSlotsPerf.default 765 767 1:1
LayoutMinimalPerf.default 347 346 1:1
ProviderMergeThemesPerf.default 1659 1660 1:1
ProviderMinimalPerf.default 1023 1018 1:1
StatusMinimalPerf.default 676 678 1:1
IconMinimalPerf.default 594 595 1:1
CustomToolbarPrototype.default 3819 3821 1:1
AnimationMinimalPerf.default 418 422 0.99:1
ChatDuplicateMessagesPerf.default 280 282 0.99:1
GridMinimalPerf.default 332 334 0.99:1
MenuMinimalPerf.default 839 844 0.99:1
SkeletonMinimalPerf.default 358 360 0.99:1
TooltipMinimalPerf.default 971 978 0.99:1
TreeMinimalPerf.default 793 798 0.99:1
CardMinimalPerf.default 540 550 0.98:1
TableMinimalPerf.default 395 405 0.98:1
TextAreaMinimalPerf.default 482 491 0.98:1
DialogMinimalPerf.default 746 773 0.97:1
LabelMinimalPerf.default 384 394 0.97:1
ListCommonPerf.default 605 625 0.97:1
ListNestedPerf.default 528 544 0.97:1
ReactionMinimalPerf.default 358 370 0.97:1
VideoMinimalPerf.default 601 621 0.97:1
AttachmentMinimalPerf.default 154 161 0.96:1
PopupMinimalPerf.default 563 586 0.96:1
RosterPerf.default 1119 1182 0.95:1
SegmentMinimalPerf.default 333 349 0.95:1
AccordionMinimalPerf.default 149 158 0.94:1

@khuynh92 khuynh92 requested a review from a team as a code owner June 10, 2021 16:37
@khuynh92
Copy link
Collaborator Author

Hi @ecraig12345, would you be able to review this PR? Thomas is out for a few days and we're hoping to get this change cherry-picked into v7, and consumed by odsp before the end of the month. Thanks!

@ecraig12345 ecraig12345 merged commit c67362c into microsoft:master Jun 17, 2021
@ecraig12345
Copy link
Member

@khuynh92 Looks like you've addressed all of Thomas's comments, and the change looks good to me. This wiki page has info about cherry-picking to v7 (let me know if you have any questions). https://github.com/microsoft/fluentui/wiki/Contributing-to-the-7.0-branch

@khuynh92 khuynh92 mentioned this pull request Jun 17, 2021
Merged
3 tasks
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/theme-samples@v8.1.26 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-monaco-editor@v1.1.26 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-toggle@v1.0.0-beta.112 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-experiments@v8.1.28 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/public-docsite@v8.2.29 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-date-time@v8.1.26 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-slider@v1.0.0-beta.112 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-docsite-components@v8.2.26 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/azure-themes@v8.1.26 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/public-docsite-resources@v8.1.29 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-tabs@v1.0.0-beta.114 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-charting@v5.2.9 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-examples@v8.30.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/api-docs@v8.1.26 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react@v8.20.0 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ecraig12345 ecraig12345 ecraig12345 approved these changes

@ThomasMichon ThomasMichon Awaiting requested review from ThomasMichon ThomasMichon is a code owner

Assignees
No one assigned
Labels
Component: DetailsList PR: API Modified
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@khuynh92 @fabricteam @ecraig12345 @msft-fluent-ui-bot @ThomasMichon