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: remove withSafeTypeForAs #13845

Merged
merged 3 commits into from
Jul 2, 2020
Merged

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Jun 29, 2020

Pull request checklist

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

Description of changes

This PR replaces withSafeTypeForAs() calls with usage to:

Focus areas to test

(optional)

@layershifter layershifter changed the title chore: remove withSafeTypeForAs chore: remove withSafeTypeForAs [WIP] Jun 29, 2020
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 29, 2020

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 f83a850:

Sandbox Source
Fluent UI Button Configuration

@size-auditor
Copy link

size-auditor bot commented Jun 29, 2020

Asset size changes

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

Baseline commit: 6a33fd5c4919b378ce306c1877aa52d384a91019 (build)

@DustyTheBot
Copy link

DustyTheBot commented Jun 30, 2020

Warnings
⚠️ There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against f83a850

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Jun 30, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 898 939 5000
ButtonNext mount 574 584 5000
Checkbox mount 1602 1593 5000
CheckboxBase mount 1359 1316 5000
CheckboxNext mount 1637 1569 5000
ChoiceGroup mount 4991 5090 5000
ComboBox mount 935 906 1000
CommandBar mount 7539 7413 1000
ContextualMenu mount 12104 12358 1000
DefaultButton mount 1095 1103 5000
DetailsRow mount 3588 3520 5000
DetailsRowFast mount 3668 3606 5000
DetailsRowNoStyles mount 3316 3357 5000
Dialog mount 1503 1518 1000
DocumentCardTitle mount 1791 1770 1000
Dropdown mount 2632 2596 5000
FocusZone mount 1770 1795 5000
IconButton mount 1847 1765 5000
Label mount 346 357 5000
Link mount 458 458 5000
LinkNext mount 477 471 5000
MenuButton mount 1464 1516 5000
Nav mount 3252 3229 1000
Panel mount 1425 1512 1000
Persona mount 849 818 1000
Pivot mount 1449 1428 1000
PivotNext mount 1345 1389 1000
PrimaryButton mount 1251 1244 5000
SearchBox mount 1320 1324 5000
SearchBoxNext mount 1347 1381 5000
Slider mount 1512 1554 5000
SliderNext mount 2051 2060 5000
Spinner mount 464 441 5000
SplitButton mount 3178 3327 5000
Stack mount 529 534 5000
StackWithIntrinsicChildren mount 2061 2029 5000
StackWithTextChildren mount 5292 5262 5000
TagPicker mount 2909 2938 5000
Text mount 435 456 5000
TextField mount 1487 1484 5000
ThemeProvider mount 2932 2926 5000
ThemeProvider virtual-rerender 486 495 5000
Toggle mount 867 883 5000
ToggleNext mount 881 830 5000
button mount 106 104 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.43 0.47 0.91:1 2000 869
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 547
🔧 Checkbox.Fluent 0.65 0.37 1.76:1 1000 646
🦄 Dialog.Fluent 0.15 0.22 0.68:1 5000 759
🔧 Dropdown.Fluent 3.2 0.47 6.81:1 1000 3202
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 699
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 372
🔧 Slider.Fluent 1.53 0.37 4.14:1 1000 1525
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 358
🦄 Tooltip.Fluent 0.1 15.93 0.01:1 5000 482

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
HeaderSlotsPerf.default 928 806 1.15:1
CarouselMinimalPerf.default 510 453 1.13:1
AccordionMinimalPerf.default 153 141 1.09:1
RefMinimalPerf.default 203 188 1.08:1
TreeMinimalPerf.default 914 849 1.08:1
ButtonSlotsPerf.default 604 567 1.07:1
HeaderMinimalPerf.default 379 355 1.07:1
AttachmentSlotsPerf.default 1188 1122 1.06:1
FlexMinimalPerf.default 288 272 1.06:1
LayoutMinimalPerf.default 389 372 1.05:1
PortalMinimalPerf.default 114 109 1.05:1
IconMinimalPerf.default 681 648 1.05:1
BoxMinimalPerf.default 348 334 1.04:1
ImageMinimalPerf.default 391 377 1.04:1
Checkbox.Fluent 646 622 1.04:1
HierarchicalTreeMinimalPerf.default 432 419 1.03:1
LoaderMinimalPerf.default 734 713 1.03:1
MenuMinimalPerf.default 875 847 1.03:1
StatusMinimalPerf.default 692 670 1.03:1
ButtonMinimalPerf.default 171 167 1.02:1
ChatDuplicateMessagesPerf.default 420 411 1.02:1
ChatMinimalPerf.default 625 614 1.02:1
InputMinimalPerf.default 1076 1058 1.02:1
TextMinimalPerf.default 340 333 1.02:1
Dialog.Fluent 759 742 1.02:1
Text.Fluent 358 350 1.02:1
ChatWithPopoverPerf.default 453 448 1.01:1
DialogMinimalPerf.default 793 785 1.01:1
DropdownManyItemsPerf.default 1417 1399 1.01:1
GridMinimalPerf.default 350 345 1.01:1
ListCommonPerf.default 951 940 1.01:1
ListWith60ListItems.default 1097 1090 1.01:1
MenuButtonMinimalPerf.default 1532 1523 1.01:1
PopupMinimalPerf.default 636 627 1.01:1
ReactionMinimalPerf.default 382 379 1.01:1
SplitButtonMinimalPerf.default 3775 3723 1.01:1
Avatar.Fluent 869 858 1.01:1
Icon.Fluent 699 690 1.01:1
Tooltip.Fluent 482 477 1.01:1
AttachmentMinimalPerf.default 162 162 1:1
DropdownMinimalPerf.default 3290 3293 1:1
FormMinimalPerf.default 418 417 1:1
ListNestedPerf.default 892 889 1:1
SliderMinimalPerf.default 1545 1551 1:1
TextAreaMinimalPerf.default 473 474 1:1
CustomToolbarPrototype.default 3536 3540 1:1
TooltipMinimalPerf.default 745 743 1:1
CardMinimalPerf.default 585 592 0.99:1
CheckboxMinimalPerf.default 2883 2908 0.99:1
EmbedMinimalPerf.default 1955 1981 0.99:1
ItemLayoutMinimalPerf.default 1267 1286 0.99:1
LabelMinimalPerf.default 410 415 0.99:1
ProviderMergeThemesPerf.default 1766 1783 0.99:1
TableManyItemsPerf.default 2282 2296 0.99:1
VideoMinimalPerf.default 638 647 0.99:1
Button.Fluent 547 555 0.99:1
AlertMinimalPerf.default 298 304 0.98:1
ToolbarMinimalPerf.default 933 951 0.98:1
Dropdown.Fluent 3202 3279 0.98:1
Slider.Fluent 1525 1549 0.98:1
DividerMinimalPerf.default 343 354 0.97:1
ProviderMinimalPerf.default 851 875 0.97:1
AnimationMinimalPerf.default 380 396 0.96:1
AvatarMinimalPerf.default 454 472 0.96:1
ListMinimalPerf.default 468 490 0.96:1
TableMinimalPerf.default 385 399 0.96:1
Image.Fluent 372 389 0.96:1
SegmentMinimalPerf.default 344 361 0.95:1
RadioGroupMinimalPerf.default 402 435 0.92:1
TreeWith60ListItems.default 199 216 0.92:1

@@ -15,12 +15,13 @@ const ComponentDocSee: any = ({ displayName }) => {
return (
<List styles={listStyle}>
{/* Heads up! Still render empty lists to reserve the whitespace */}
<List.Item>
<List.Item index={0}>
Copy link
Member Author

Choose a reason for hiding this comment

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

index is a required prop on ListItem for Children API, microsoft/fluent-ui-react#2207

Previous typings were not correct because we exported ListItemProps only:

const ListItem: React.FC<WithAsProp<ListItemProps> & { index: number }> &

export default withSafeTypeForAs<typeof ListItem, ListItemProps, 'li'>(ListItem);

@@ -81,7 +81,6 @@ class SearchPage extends React.Component<SearchPageState, any> {

<p>
<Input
ref="input"
Copy link
Member Author

Choose a reason for hiding this comment

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

Strings can be used only for deprecated refs API: https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs. But there is no such usage 🧛

import CustomAvatar from './CustomAvatar';
import { AcceptIcon } from '@fluentui/react-icons-northstar';

const statusProps: Extendable<WithAsProp<StatusProps>> = {
Copy link
Member Author

Choose a reason for hiding this comment

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

There is no sense in it as as is not used inside

@@ -126,7 +134,7 @@ const AccordionTitle: React.FC<WithAsProp<AccordionTitleProps>> &
mapPropsToBehavior: () => ({
hasContent: !!content,
canBeCollapsed,
as,
as: String(as),
Copy link
Member Author

Choose a reason for hiding this comment

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

/**
* A Portal allows to render children outside of their parent.
*/
const Portal: React.FC<WithAsProp<PortalProps>> & FluentComponentStaticProps<PortalProps> = props => {
Copy link
Member Author

Choose a reason for hiding this comment

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

Portal does not have ElementType...

@@ -79,14 +79,10 @@ export interface PortalProps extends ChildrenComponentProps, ContentComponentPro
onOutsideClick?: (e: React.MouseEvent) => void;
}

export interface PortalState {
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, cruft

@layershifter layershifter added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Jun 30, 2020
@layershifter layershifter changed the title chore: remove withSafeTypeForAs [WIP] chore: remove withSafeTypeForAs Jun 30, 2020
…ithub.com/microsoft/fluentui into chore/no-with-safe-type-as

� Conflicts:
�	packages/fluentui/react-northstar/src/components/Grid/Grid.tsx
* [Treeview - JAWS doesn't narrate position for each tree item](https://github.com/FreedomScientific/VFO-standards-support/issues/338)
* [Aria compliant trees are read as empty tables](https://bugs.chromium.org/p/chromium/issues/detail?id=1048770)
*/
const Tree: ComponentWithAs<'div', TreeProps> &
Copy link
Member

Choose a reason for hiding this comment

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

The change from ul to div is intentional bugfix, correct?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yep, as Tree and its subcomponents render divs:

image

I also double checked this with @jurokapsiar and we will avoid ul/li as they are breaking markup once you add custom scrollbar or virtualization

@layershifter layershifter merged commit d8115b1 into master Jul 2, 2020
@layershifter layershifter deleted the chore/no-with-safe-type-as branch July 2, 2020 11:38
@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] 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
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.

5 participants