Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

chore: move more components #2307

Merged
merged 18 commits into from
Feb 7, 2020
Merged

chore: move more components #2307

merged 18 commits into from
Feb 7, 2020

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Feb 3, 2020

BREAKING CHANGES

Only specific props are now passed to component's style functions.

Checkbox
checked
disabled
labelPosition
toggle
Icon
bordered
circular
color
disabled
name
outline
rotate
size
xSpacing
isFontIcon
isSvgIcon
Label
hasActionableIcon
hasImage
circular
color
imagePosition
Slider
fluid
vertical
disabled
Status
color
size
state
Text
atMention
color
important
timestamp
truncated
disabled
error
success
temporary
align
weight
size

@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Feb 3, 2020

Warnings
⚠️ 18 perf regressions detected

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.64 0.43 1.49:1 2000 1277
🔧 Button.Fluent 1.38 0.25 5.52:1 1000 1381
🔧 Checkbox.Fluent 1.64 0.31 5.29:1 1000 1644
🔧 Dialog.Fluent 0.37 0.21 1.76:1 5000 1863
🔧 Dropdown.Fluent 3.95 0.39 10.13:1 1000 3951
🔧 Icon.Fluent 0.26 0.04 6.5:1 5000 1322
🔧 Image.Fluent 0.11 0.09 1.22:1 5000 562
🔧 Slider.Fluent 2.29 0.37 6.19:1 1000 2291
🔧 Text.Fluent 0.05 0.02 2.5:1 5000 251
🦄 Tooltip.Fluent 0.37 20.83 0.02:1 5000 1864

🔧 Needs work     🎯 On target     🦄 Amazing

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio
CarouselMinimalPerf.default 2312 2101 1.1:1
Checkbox.Fluent 1644 1535 1.07:1
TextMinimalPerf.default 273 259 1.05:1
AvatarMinimalPerf.default 602 582 1.03:1
AttachmentSlotsPerf.default 3164 3133 1.01:1
Avatar.Fluent 1277 1272 1:1
LabelMinimalPerf.default 1864 1885 0.99:1
EmbedMinimalPerf.default 7442 7606 0.98:1
StatusMinimalPerf.default 1072 1097 0.98:1
Dropdown.Fluent 3951 4063 0.97:1
Icon.Fluent 1322 1357 0.97:1
DropdownMinimalPerf.default 4188 4426 0.95:1
Slider.Fluent 2291 2417 0.95:1
Text.Fluent 251 281 0.89:1
SliderMinimalPerf.default 2116 2429 0.87:1
ButtonSlotsPerf.default 1732 2005 0.86:1
CheckboxMinimalPerf.default 6993 8127 0.86:1
IconMinimalPerf.default 1127 1343 0.84:1
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ListMinimalPerf.default 844 702 1.2:1
LoaderMinimalPerf.default 2384 2063 1.16:1
BoxMinimalPerf.default 226 207 1.09:1
HeaderMinimalPerf.default 523 479 1.09:1
LayoutMinimalPerf.default 637 585 1.09:1
Image.Fluent 562 515 1.09:1
TextAreaMinimalPerf.default 3361 3116 1.08:1
ChatDuplicateMessagesPerf.default 608 566 1.07:1
SplitButtonMinimalPerf.default 14559 13665 1.07:1
RefMinimalPerf.default 184 173 1.06:1
Dialog.Fluent 1863 1755 1.06:1
DropdownManyItemsPerf.default 532 505 1.05:1
ReactionMinimalPerf.default 3001 2852 1.05:1
AccordionMinimalPerf.default 186 178 1.04:1
AnimationMinimalPerf.default 442 424 1.04:1
ProviderMinimalPerf.default 610 589 1.04:1
ChatMinimalPerf.default 1796 1752 1.03:1
ListCommonPerf.default 1215 1183 1.03:1
VideoMinimalPerf.default 805 784 1.03:1
AlertMinimalPerf.default 539 527 1.02:1
PortalMinimalPerf.default 272 267 1.02:1
CustomToolbarPrototype.default 4121 4025 1.02:1
Tooltip.Fluent 1864 1830 1.02:1
ButtonMinimalPerf.default 1227 1213 1.01:1
PopupMinimalPerf.default 408 405 1.01:1
ProviderMergeThemesPerf.default 1199 1191 1.01:1
RadioGroupMinimalPerf.default 406 403 1.01:1
TooltipMinimalPerf.default 2423 2401 1.01:1
HeaderSlotsPerf.default 1559 1575 0.99:1
SegmentMinimalPerf.default 1472 1494 0.99:1
ToolbarMinimalPerf.default 730 739 0.99:1
HierarchicalTreeMinimalPerf.default 936 951 0.98:1
Button.Fluent 1381 1406 0.98:1
DividerMinimalPerf.default 998 1026 0.97:1
GridMinimalPerf.default 999 1027 0.97:1
ItemLayoutMinimalPerf.default 1745 1804 0.97:1
DialogMinimalPerf.default 1757 1849 0.95:1
ImageMinimalPerf.default 630 661 0.95:1
InputMinimalPerf.default 1137 1191 0.95:1
ChatWithPopoverPerf.default 606 647 0.94:1
TreeMinimalPerf.default 889 957 0.93:1
AttachmentMinimalPerf.default 904 982 0.92:1
FlexMinimalPerf.default 422 461 0.92:1
MenuButtonMinimalPerf.default 1702 1842 0.92:1
TableMinimalPerf.default 608 686 0.89:1
MenuMinimalPerf.default 1953 2342 0.83:1
FormMinimalPerf.default 809 1022 0.79:1

Generated by 🚫 dangerJS

const { disabled } = this.props
const checked = !this.state.checked
const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
const checked = !state.checked
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: move this line in the condition below

Copy link
Member Author

Choose a reason for hiding this comment

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

Done 👍


return (
<ElementType {...getA11Props('root', { className: classes.root, ...unhandledProps })}>
{isSvgIcon && callable(maybeIcon.icon)({ classes, rtl: context.rtl, props })}
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe we should restrict the props sent here too. Not as part of this PR, though

Copy link
Member Author

Choose a reason for hiding this comment

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

Agree, let's do it separately. I am even not sure that should pass there something

const { classes, styles: resolvedStyles } = useStyles(Label.displayName, {
className: Label.className,
mapPropsToStyles: () => ({
hasActionableIcon: _.has(icon, 'onClick'),
Copy link
Contributor

Choose a reason for hiding this comment

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

👍

@@ -124,7 +124,7 @@ exports[`felaRenderer marginLeft is rendered into marginLeft due to RTL with \`n


<div className=ui-provider__box dir=rtl>
<span className=ui-text a dir=auto>
<span dir=auto className=ui-text a>
Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder why these are changed :\

Copy link
Member Author

Choose a reason for hiding this comment

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

Small issue, I fixed order of props in Text and reverted this change 👍

Copy link
Member

@miroslavstastny miroslavstastny left a comment

Choose a reason for hiding this comment

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

It scares me that Checkbox does not render but no UTs fail 😟

/** Alternative text. */
alt?: string
'aria-label'?: string
Copy link
Contributor

Choose a reason for hiding this comment

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

👍

...commonPropTypes.createCommon({
children: false,
content: false,
const iconElement = Icon.create(icon, {
Copy link
Contributor

Choose a reason for hiding this comment

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

No getA11Props?

const { className, color, icon, size, state, design, styles, variables } = props
const { classes, styles: resolvedStyles } = useStyles(Status.displayName, {
className: Status.className,
mapPropsToStyles: () => ({
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's update the statusStyles with the new typings

@@ -106,15 +106,15 @@ export type TeamsThemeStylesProps = {
Reaction?: ReactionProps
ReactionGroup?: ReactionGroupProps
Segment?: SegmentProps
Slider?: SliderProps
Slider?: SliderStylesProps
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's update Status too.

Copy link
Contributor

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

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

Please update #2269 after merging

@layershifter layershifter merged commit 142de9f into master Feb 7, 2020
@layershifter layershifter deleted the chore/move-more-components branch February 7, 2020 11:39
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants