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

chore: Attachment use compose() #12674

Merged
merged 22 commits into from
Apr 15, 2020
Merged

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Apr 14, 2020

Pull request checklist

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

BREAKING CHANGES

slotClassNames removal

slotClassNames were removed from Attachment, please use classnames on matching components instead.

// Before
Attachment.slotClassNames.action
// After
AttachmentAction.className

styles were moved to components from slots

  • styles for action, description, icon & header slots were moved to separate components
    • as these components are separate they have own props for styles
  • styles for content slots were moved to separate AttachmentBody
  • styles for progress slot are not separated anymore and should be used on root in attachmentStyles

Before

const attachmentStyles: ComponentSlotStylesPrepared<AttachmentStylesProps, AttachmentVariables> = {
  content: () => ({ display: 'flex' }),
  progress: () => ({ display: 'flex' }),

  action: () => ({ display: 'flex' }),
  description: () => ({ display: 'flex' }),
  icon: () => ({ display: 'flex' }),
  header: () => ({ display: 'flex' }),
}

After

const attachmentStyles: ComponentSlotStylesPrepared<AttachmentStylesProps, AttachmentVariables> = {
  root: () => ({
    '& .ui-attachment__progress': {
      display: 'flex'
   },
};

const attachmentBodyStyles: ComponentSlotStylesPrepared<AttachmentBodyStylesProps, AttachmentVariables> = {
  root: ({ variables: v }): ICSSInJSStyle => ({
    display: 'flex'
  }),
};

const attachmentIconStyles: ComponentSlotStylesPrepared<AttachmentIconStylesProps, AttachmentVariables> = {
  root: ({ variables: v }): ICSSInJSStyle => ({
    display: 'flex'
  }),
};

const attachmentHeaderStyles: ComponentSlotStylesPrepared<AttachmentHeaderStylesProps, AttachmentVariables> = {
  root: ({ variables: v }): ICSSInJSStyle => ({
    display: 'flex'
  }),
};

Description of changes

This PR updates Attachment to use instead Boxes composed components.
Adds body slot to Attachment.

Performance

Due enabled caching performance for rerenders was improved improved almost twice 🚀

image

Focus areas to test

(optional)

Microsoft Reviewers: Open in CodeFlow

@size-auditor
Copy link

size-auditor bot commented Apr 14, 2020

Asset size changes

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

Baseline commit: 0b9847bc9bfdc1c4a0cb35ce0cfcfdc32880500b (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Apr 14, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 678 697 5000
Checkbox 1585 1566 5000
CheckboxBase 1313 1241 5000
ChoiceGroup 4449 4602 5000
ComboBox 831 854 1000
CommandBar 6524 6480 1000
DefaultButton 900 941 5000
DetailsRow 2803 2913 5000
DetailsRow (fast icons) 2898 3028 5000
DetailsRow without styles 2677 2821 5000
Dialog 1236 1251 1000
DocumentCardTitle with truncation 1405 1466 1000
Dropdown 2541 2557 5000
FocusZone 1425 1374 5000
IconButton 1381 1424 5000
Label 391 402 5000
Link 392 360 5000
MenuButton 1153 1210 5000
Nav 2684 2786 1000
Panel 1237 1249 1000
Persona 673 700 1000
Pivot 1135 1082 1000
PrimaryButton 1079 1066 5000
SearchBox 1206 1263 5000
Slider 1563 1595 5000
Spinner 332 344 5000
SplitButton 2668 2548 5000
Stack 411 394 5000
Stack with Intrinsic children 980 961 5000
Stack with Text children 3417 3607 5000
TagPicker 2351 2378 5000
Text 294 308 5000
TextField 1458 1484 5000
Toggle 737 736 5000
button 54 56 5000

Perf Analysis (Fluent)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
AttachmentSlotsPerf.default 993 2466 0.4:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.47 0.44 1.07:1 2000 947
🦄 Button.Fluent 0.09 0.15 0.6:1 5000 450
🔧 Checkbox.Fluent 0.69 0.33 2.09:1 1000 694
🔧 Dialog.Fluent 0.35 0.18 1.94:1 5000 1764
🔧 Dropdown.Fluent 3.55 0.39 9.1:1 1000 3554
🔧 Icon.Fluent 0.12 0.04 3:1 5000 617
🦄 Image.Fluent 0.06 0.09 0.67:1 5000 311
🔧 Slider.Fluent 1.51 0.37 4.08:1 1000 1513
🔧 Text.Fluent 0.06 0.02 3:1 5000 319
🦄 Tooltip.Fluent 0.11 14.8 0.01:1 5000 547

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
RefMinimalPerf.default 188 167 1.13:1
PortalMinimalPerf.default 285 255 1.12:1
TreeWith60ListItems.default 225 206 1.09:1
LabelMinimalPerf.default 366 342 1.07:1
ProviderMergeThemesPerf.default 1461 1371 1.07:1
ListNestedPerf.default 983 928 1.06:1
Slider.Fluent 1513 1432 1.06:1
CarouselMinimalPerf.default 622 591 1.05:1
ChatDuplicateMessagesPerf.default 410 390 1.05:1
AttachmentMinimalPerf.default 134 129 1.04:1
ButtonSlotsPerf.default 564 544 1.04:1
InputMinimalPerf.default 1030 994 1.04:1
CustomToolbarPrototype.default 3493 3348 1.04:1
AnimationMinimalPerf.default 602 585 1.03:1
PopupMinimalPerf.default 238 231 1.03:1
TextMinimalPerf.default 311 301 1.03:1
TreeMinimalPerf.default 1099 1068 1.03:1
VideoMinimalPerf.default 837 814 1.03:1
ButtonMinimalPerf.default 130 128 1.02:1
DropdownMinimalPerf.default 3589 3506 1.02:1
ItemLayoutMinimalPerf.default 1931 1893 1.02:1
TableMinimalPerf.default 600 591 1.02:1
AvatarMinimalPerf.default 513 508 1.01:1
ChatWithPopoverPerf.default 553 545 1.01:1
FormMinimalPerf.default 856 851 1.01:1
GridMinimalPerf.default 794 787 1.01:1
HeaderSlotsPerf.default 1530 1515 1.01:1
ListWith60ListItems.default 1185 1176 1.01:1
MenuMinimalPerf.default 1884 1865 1.01:1
MenuButtonMinimalPerf.default 1457 1437 1.01:1
ReactionMinimalPerf.default 2300 2285 1.01:1
SplitButtonMinimalPerf.default 3579 3551 1.01:1
StatusMinimalPerf.default 589 585 1.01:1
IconMinimalPerf.default 591 584 1.01:1
Checkbox.Fluent 694 690 1.01:1
Icon.Fluent 617 610 1.01:1
Text.Fluent 319 317 1.01:1
ChatMinimalPerf.default 545 545 1:1
CheckboxMinimalPerf.default 3047 3059 1:1
FlexMinimalPerf.default 265 265 1:1
ListCommonPerf.default 1007 1010 1:1
ProviderMinimalPerf.default 601 600 1:1
TooltipMinimalPerf.default 786 786 1:1
Button.Fluent 450 451 1:1
Tooltip.Fluent 547 549 1:1
DividerMinimalPerf.default 905 915 0.99:1
EmbedMinimalPerf.default 5156 5186 0.99:1
ImageMinimalPerf.default 306 308 0.99:1
SliderMinimalPerf.default 1495 1513 0.99:1
Dropdown.Fluent 3554 3587 0.99:1
CardMinimalPerf.default 362 369 0.98:1
LayoutMinimalPerf.default 573 584 0.98:1
RadioGroupMinimalPerf.default 516 524 0.98:1
Dialog.Fluent 1764 1806 0.98:1
AlertMinimalPerf.default 535 551 0.97:1
HeaderMinimalPerf.default 479 494 0.97:1
SegmentMinimalPerf.default 994 1030 0.97:1
TextAreaMinimalPerf.default 2903 2983 0.97:1
ToolbarMinimalPerf.default 994 1023 0.97:1
DialogMinimalPerf.default 1753 1831 0.96:1
HierarchicalTreeMinimalPerf.default 883 923 0.96:1
LoaderMinimalPerf.default 999 1036 0.96:1
BoxMinimalPerf.default 271 284 0.95:1
DropdownManyItemsPerf.default 1377 1444 0.95:1
Image.Fluent 311 327 0.95:1
Avatar.Fluent 947 1020 0.93:1
ListMinimalPerf.default 420 475 0.88:1
AccordionMinimalPerf.default 194 232 0.84:1

@@ -34,8 +34,9 @@ export const getTelemetry = (displayName: string, telemetry: Telemetry | undefin

const useTelemetry = (displayName: string, telemetry: Telemetry | undefined): UseTelemetryResult => {
const composeOptions = useComposeOptions();
const telemetryName = composeOptions?.displayNames[composeOptions?.displayNames.length - 1] || displayName;
Copy link
Member Author

Choose a reason for hiding this comment

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

Oops, the actual name is the last one

@layershifter layershifter changed the title [WIP] chore: Attachment use compose() chore: Attachment use compose() Apr 14, 2020
{Text.create(description, {
defaultProps: () => ({ styles: resolvedStyles.description }),
})}
<div className="ui-attachment__content">
Copy link
Contributor

Choose a reason for hiding this comment

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

Just curious, why we don't have AttachmentBody component that will have the header and description props and we would create those inside that component?

{!_.isNil(progress) && <div className={classes.progress} style={{ width: `${progress}%` }} />}

{AttachmentAction.create(action)}
{!_.isNil(progress) && <div className="ui-attachment__progress" style={{ width: `${progress}%` }} />}
Copy link
Contributor

Choose a reason for hiding this comment

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

Why we don't have AttachmentProgress component? I understand that you are just mapping shorthands to components, so I'm just interested whether there is a solid reason for it not being one

})}
{!_.isNil(progress) && <div className={classes.progress} style={{ width: `${progress}%` }} />}

{AttachmentAction.create(action)}
Copy link
Contributor

Choose a reason for hiding this comment

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

It's interesting that none of the sub-components need any of the parent's props :)

flex: 1,
},

'& .ui-attachment__progress': {
Copy link
Contributor

Choose a reason for hiding this comment

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

It's not obvious why this is implemented with selector. I would vote for a separate component, to keep it consistent with other slots..

@layershifter layershifter merged commit 4552dcc into master Apr 15, 2020
@layershifter layershifter deleted the chore/attachment-use-compose branch April 15, 2020 12:34
DuanShaolong pushed a commit to DuanShaolong/fluentui that referenced this pull request Apr 27, 2020
* chore: Attachment use compose()

* fix duplicate import

* fix more regressions

* fix UT

* fix import paths

* fix UTs

* fix styles

* fix regressions

* fix acc

* fix more issues

* uses button variables instead

* revert a change

* address review comments

* fix UTs

* introduce body slot

* update changelog

* fix keys

* add UT for body, add export and static field

* add missing proptype

* fix changelog
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