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

Addressing PR feedback for SearchBox and VerticalDivider examples #12563

Merged
merged 10 commits into from Apr 7, 2020

Conversation

czearing
Copy link
Collaborator

@czearing czearing commented Apr 6, 2020

Pull request checklist

  • Include a change request file using $ yarn change

Description of changes

Addressing feedback from #12519

  • Removed onFocus and onBlur calls for SearchBox.
  • Changed the styles for VerticalDivider to be called outside of component.
  • Removed unnecessary arrow functions.

Focus areas to test

The example pages for SearchBox and VerticalDivider.

Microsoft Reviewers: Open in CodeFlow

…ix/example-updates

# Conflicts:
#	packages/office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Custom.Example.tsx
#	packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.CustomIcon.Example.tsx
#	packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Disabled.Example.tsx
#	packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx
#	packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.tsx
#	packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Underlined.Example.tsx
@size-auditor
Copy link

size-auditor bot commented Apr 6, 2020

Asset size changes

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

Baseline commit: 18799a4d2fc3364e3323bfb9d80b55894e641369 (build)

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 683 648 5000
Checkbox 1488 1575 5000
CheckboxBase 1159 1162 5000
ChoiceGroup 4278 4216 5000
CommandBar 9695 9208 1000
DefaultButton 818 848 5000
DetailsRow 2700 2651 5000
DetailsRow (fast icons) 2803 2693 5000
DetailsRow without styles 2514 2500 5000
Dialog 5718 5800 5000
DocumentCardTitle with truncation 1334 1340 1000
Dropdown 2445 2292 5000
FocusZone 1269 1302 5000
IconButton 1422 1302 5000
Label 389 383 5000
Link 361 347 5000
MenuButton 1110 1123 5000
Nav 4782 4498 1000
Pivot 1093 1047 1000
PrimaryButton 977 1004 5000
SearchBox 1222 1201 5000
Slider 1448 1388 5000
Spinner 308 285 5000
SplitButton 2374 2398 5000
Stack 366 354 5000
Stack with Intrinsic children 843 861 5000
Stack with Text children 3088 3194 5000
Text 278 257 5000
TextField 1411 1340 5000
Toggle 697 674 5000
button 58 61 5000

Perf Analysis (Fluent)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
Icon.Fluent 37 46 0.8:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.46 0.39 1.18:1 2000 926
🦄 Button.Fluent 0.08 0.14 0.57:1 5000 413
🔧 Checkbox.Fluent 0.62 0.33 1.88:1 1000 619
🔧 Dialog.Fluent 0.32 0.16 2:1 5000 1611
🔧 Dropdown.Fluent 3.14 0.38 8.26:1 1000 3135
🦄 Icon.Fluent 0.01 0.04 0.25:1 5000 37
🎯 Image.Fluent 0.06 0.08 0.75:1 5000 302
🔧 Slider.Fluent 1.39 0.33 4.21:1 1000 1389
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 327
🦄 Tooltip.Fluent 0.1 14.05 0.01:1 5000 510

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
DialogMinimalPerf.default 1818 1626 1.12:1
GridMinimalPerf.default 738 667 1.11:1
Text.Fluent 327 295 1.11:1
ReactionMinimalPerf.default 2245 2075 1.08:1
LabelMinimalPerf.default 355 334 1.06:1
ListMinimalPerf.default 387 365 1.06:1
Image.Fluent 302 285 1.06:1
Tooltip.Fluent 510 483 1.06:1
ButtonSlotsPerf.default 580 552 1.05:1
CheckboxMinimalPerf.default 2988 2840 1.05:1
LayoutMinimalPerf.default 556 532 1.05:1
ProviderMinimalPerf.default 543 515 1.05:1
PortalMinimalPerf.default 236 226 1.04:1
CustomToolbarPrototype.default 3311 3197 1.04:1
ToolbarMinimalPerf.default 955 922 1.04:1
Button.Fluent 413 398 1.04:1
BoxMinimalPerf.default 318 309 1.03:1
ChatDuplicateMessagesPerf.default 382 372 1.03:1
FormMinimalPerf.default 799 775 1.03:1
HeaderSlotsPerf.default 1451 1407 1.03:1
MenuMinimalPerf.default 1747 1696 1.03:1
TooltipMinimalPerf.default 750 730 1.03:1
TreeMinimalPerf.default 1015 988 1.03:1
Dropdown.Fluent 3135 3054 1.03:1
AnimationMinimalPerf.default 559 550 1.02:1
AttachmentMinimalPerf.default 806 794 1.02:1
AttachmentSlotsPerf.default 3319 3268 1.02:1
EmbedMinimalPerf.default 4805 4724 1.02:1
ListWith60ListItems.default 1117 1097 1.02:1
IconMinimalPerf.default 577 563 1.02:1
TextMinimalPerf.default 332 325 1.02:1
Slider.Fluent 1389 1363 1.02:1
AccordionMinimalPerf.default 206 203 1.01:1
DropdownMinimalPerf.default 3147 3103 1.01:1
HeaderMinimalPerf.default 456 450 1.01:1
ImageMinimalPerf.default 308 304 1.01:1
LoaderMinimalPerf.default 1003 996 1.01:1
AlertMinimalPerf.default 519 517 1:1
ChatWithPopoverPerf.default 549 548 1:1
DividerMinimalPerf.default 804 804 1:1
FlexMinimalPerf.default 230 229 1:1
InputMinimalPerf.default 926 928 1:1
ListCommonPerf.default 895 893 1:1
ListNestedPerf.default 834 836 1:1
RadioGroupMinimalPerf.default 441 439 1:1
SegmentMinimalPerf.default 901 901 1:1
VideoMinimalPerf.default 754 754 1:1
Avatar.Fluent 926 924 1:1
ButtonMinimalPerf.default 134 136 0.99:1
ItemLayoutMinimalPerf.default 1766 1787 0.99:1
PopupMinimalPerf.default 203 205 0.99:1
SplitButtonMinimalPerf.default 3072 3101 0.99:1
TextAreaMinimalPerf.default 2707 2725 0.99:1
CarouselMinimalPerf.default 545 555 0.98:1
MenuButtonMinimalPerf.default 1310 1332 0.98:1
AvatarMinimalPerf.default 499 515 0.97:1
CardMinimalPerf.default 320 331 0.97:1
HierarchicalTreeMinimalPerf.default 833 855 0.97:1
SliderMinimalPerf.default 1355 1401 0.97:1
TableMinimalPerf.default 545 563 0.97:1
TreeWith60ListItems.default 194 200 0.97:1
Checkbox.Fluent 619 639 0.97:1
Dialog.Fluent 1611 1659 0.97:1
ChatMinimalPerf.default 495 517 0.96:1
RefMinimalPerf.default 166 174 0.95:1
ProviderMergeThemesPerf.default 1232 1314 0.94:1
StatusMinimalPerf.default 542 580 0.93:1
DropdownManyItemsPerf.default 1256 1363 0.92:1

@dzearing dzearing merged commit 5862f96 into microsoft:master Apr 7, 2020
@msft-github-bot
Copy link
Contributor

🎉@uifabric/react-hooks@v7.1.1 has been released which incorporates this pull request.:tada:

Handy links:

Copy link
Member

@ecraig12345 ecraig12345 left a comment

Choose a reason for hiding this comment

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

Thanks for doing this! A couple more things (plus the file comment below):

At least going forward, please include a React.FunctionComponent type declaration for each example, e.g.:

export const VerticalDividerCustomExample: React.FunctionComponent = () => {

And see this comment #12519 (comment)

onChange={() => console.log('onChange called')}
/>
<Stack tokens={stackTokens}>
<SearchBox placeholder="Search" onSearch={newValue => console.log('value is ' + newValue)} />
Copy link
Member

Choose a reason for hiding this comment

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

This should go in a constant at the top of the file too (and then you can remove the tslint-disable):
const onSearch = newValue => console.log('value is ' + newValue)

DuanShaolong pushed a commit to DuanShaolong/fluentui that referenced this pull request Apr 27, 2020
…crosoft#12563)

* Examples update

* Change files

* Simplified SearchBox return statement and brackets

* Snapshot update for VerticalDividerBasicExample

* Optimizing SearchBox and VerticalDivider examples component render

* Change files

* Deleting extra change file.

* Change files

* Added change file
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants