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.

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

feat(docs): Add Icon viewer page #12645

Merged
merged 10 commits into from
Apr 14, 2020
Merged

Conversation

mnajdova
Copy link
Contributor

@mnajdova mnajdova commented Apr 10, 2020

Pull request checklist

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

Description of changes

(give an overview)

Focus areas to test

(optional)

Microsoft Reviewers: Open in CodeFlow

@size-auditor
Copy link

size-auditor bot commented Apr 10, 2020

Asset size changes

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

Baseline commit: 1ed7214e0bc984ccee034e3e30a0975ed0371ebc (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Apr 10, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 767 770 5000
Checkbox 1681 1783 5000
CheckboxBase 1353 1434 5000
ChoiceGroup 4957 4909 5000
ComboBox 890 924 1000
CommandBar 6517 6820 1000
DefaultButton 1032 983 5000
DetailsRow 3061 3199 5000
DetailsRow (fast icons) 3193 3012 5000
DetailsRow without styles 2933 2891 5000
Dialog 1356 1343 1000
DocumentCardTitle with truncation 1437 1335 1000
Dropdown 2845 2771 5000
FocusZone 1438 1496 5000
IconButton 1650 1544 5000
Label 503 482 5000
Link 433 444 5000
MenuButton 1434 1414 5000
Nav 2949 3158 1000
Panel 1323 1359 1000
Persona 763 783 1000
Pivot 1204 1254 1000
PrimaryButton 1156 1193 5000
SearchBox 1408 1463 5000
Slider 1796 1914 5000
Spinner 355 369 5000
SplitButton 3132 2929 5000
Stack 459 443 5000
Stack with Intrinsic children 1026 1004 5000
Stack with Text children 3893 4105 5000
TagPicker 2722 2734 5000
Text 387 376 5000
TextField 1645 1696 5000
Toggle 853 809 5000
button 48 55 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.54 0.48 1.13:1 2000 1080
🦄 Button.Fluent 0.1 0.18 0.56:1 5000 516
🔧 Checkbox.Fluent 0.68 0.37 1.84:1 1000 681
🔧 Dialog.Fluent 0.39 0.19 2.05:1 5000 1937
🔧 Dropdown.Fluent 3.6 0.45 8:1 1000 3598
🔧 Icon.Fluent 0.14 0.04 3.5:1 5000 681
🎯 Image.Fluent 0.07 0.09 0.78:1 5000 370
🔧 Slider.Fluent 1.48 0.39 3.79:1 1000 1479
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 359
🦄 Tooltip.Fluent 0.12 15.35 0.01:1 5000 618

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FlexMinimalPerf.default 329 295 1.12:1
DropdownMinimalPerf.default 4051 3753 1.08:1
LoaderMinimalPerf.default 1136 1050 1.08:1
ButtonMinimalPerf.default 176 164 1.07:1
TextAreaMinimalPerf.default 3153 2960 1.07:1
AccordionMinimalPerf.default 260 246 1.06:1
ChatMinimalPerf.default 673 636 1.06:1
SegmentMinimalPerf.default 1214 1141 1.06:1
BoxMinimalPerf.default 370 353 1.05:1
CarouselMinimalPerf.default 665 636 1.05:1
ImageMinimalPerf.default 439 417 1.05:1
ProviderMergeThemesPerf.default 1494 1417 1.05:1
RefMinimalPerf.default 198 188 1.05:1
StatusMinimalPerf.default 795 759 1.05:1
AlertMinimalPerf.default 645 622 1.04:1
ListCommonPerf.default 1194 1146 1.04:1
ListMinimalPerf.default 543 520 1.04:1
ListNestedPerf.default 1110 1067 1.04:1
ListWith60ListItems.default 1428 1372 1.04:1
PortalMinimalPerf.default 312 299 1.04:1
RadioGroupMinimalPerf.default 603 581 1.04:1
Icon.Fluent 681 655 1.04:1
Tooltip.Fluent 618 592 1.04:1
ButtonSlotsPerf.default 679 659 1.03:1
ChatWithPopoverPerf.default 669 647 1.03:1
HeaderSlotsPerf.default 1847 1799 1.03:1
TextMinimalPerf.default 393 381 1.03:1
TreeMinimalPerf.default 1225 1188 1.03:1
EmbedMinimalPerf.default 5469 5339 1.02:1
FormMinimalPerf.default 1038 1018 1.02:1
HeaderMinimalPerf.default 620 605 1.02:1
MenuButtonMinimalPerf.default 1711 1672 1.02:1
TreeWith60ListItems.default 222 218 1.02:1
Button.Fluent 516 507 1.02:1
AvatarMinimalPerf.default 624 616 1.01:1
MenuMinimalPerf.default 2133 2112 1.01:1
TooltipMinimalPerf.default 863 857 1.01:1
AnimationMinimalPerf.default 701 698 1:1
DropdownManyItemsPerf.default 1571 1569 1:1
ItemLayoutMinimalPerf.default 2326 2317 1:1
TableMinimalPerf.default 754 751 1:1
CustomToolbarPrototype.default 3511 3496 1:1
Dialog.Fluent 1937 1932 1:1
Text.Fluent 359 358 1:1
AttachmentMinimalPerf.default 152 153 0.99:1
AttachmentSlotsPerf.default 2677 2716 0.99:1
InputMinimalPerf.default 1158 1174 0.99:1
LayoutMinimalPerf.default 759 763 0.99:1
Avatar.Fluent 1080 1091 0.99:1
Dropdown.Fluent 3598 3641 0.99:1
Slider.Fluent 1479 1488 0.99:1
CardMinimalPerf.default 429 437 0.98:1
HierarchicalTreeMinimalPerf.default 1120 1146 0.98:1
LabelMinimalPerf.default 460 470 0.98:1
PopupMinimalPerf.default 241 247 0.98:1
ProviderMinimalPerf.default 624 638 0.98:1
SliderMinimalPerf.default 1522 1553 0.98:1
SplitButtonMinimalPerf.default 3999 4067 0.98:1
Image.Fluent 370 378 0.98:1
ChatDuplicateMessagesPerf.default 461 475 0.97:1
IconMinimalPerf.default 699 719 0.97:1
DividerMinimalPerf.default 1046 1086 0.96:1
Checkbox.Fluent 681 711 0.96:1
CheckboxMinimalPerf.default 3327 3484 0.95:1
DialogMinimalPerf.default 2068 2175 0.95:1
GridMinimalPerf.default 933 977 0.95:1
ToolbarMinimalPerf.default 1142 1206 0.95:1
ReactionMinimalPerf.default 2486 2659 0.93:1
VideoMinimalPerf.default 852 922 0.92:1

@@ -165,6 +165,15 @@ class Sidebar extends React.Component<any, any> {
to: '/shorthand-props',
},
},
{
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Now that we have the viewer we may even hide from public the example with all icons, and add link on the SvgIcon's docs page for the icons viewer... I am open for other ideas/suggestions here

/>
<Flex wrap gap="gap.medium" styles={iconFlexStyles}>
{filteredIcons.map(Icon => (
<Flex.Item align="center" key={Icon.displayName}>
Copy link
Member

Choose a reason for hiding this comment

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

Should we extract this to a component?

@mnajdova mnajdova merged commit fbe4c9b into microsoft:master Apr 14, 2020
DuanShaolong pushed a commit to DuanShaolong/fluentui that referenced this pull request Apr 27, 2020
* wip

* -fixed on the navigation buttons

* -added more info

* -fixed ts issue

* Update packages/fluentui/docs/src/views/IconViewer.tsx

Co-Authored-By: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/docs/src/views/IconViewer.tsx

Co-Authored-By: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* -changed state to reducer

* -added ComponentPlaygroundSnippet & fixed styles

* -updated changelog

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants