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.

Sign up for GitHub

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

Jump to bottom

text-field: start/end display flex #18969

Merged
merged 2 commits into from
Jul 21, 2021
Merged

text-field: start/end display flex #18969

merged 2 commits into from
Jul 21, 2021

Conversation

fredrikhr
Copy link
Contributor

@fredrikhr fredrikhr commented Jul 16, 2021 •
edited
Loading

This PR brings fluentui web-components to parity with the bugfix accepted in microsoft/fast#4938

Pull request checklist

Description of changes

  • start and end slot in fluent-text-field get the display: flex rule.
  • Add Fabric Core CSS to storybook for testing components with non-svg icons.

Focus areas to test

fluent-text-field

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 16, 2021 •
edited
Loading

📊 Bundle size report

🤖 This report was generated against 499acbd08332c14de0a26fd2f66365a82148f9fc

@ghost
Copy link

ghost commented Jul 16, 2021 •
edited by ghost
Loading

CLA assistant check
All CLA requirements met.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 16, 2021 •
edited
Loading

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

Sandbox Source
Fluent UI React Starter Configuration

@size-auditor
Copy link

size-auditor bot commented Jul 16, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: 499acbd08332c14de0a26fd2f66365a82148f9fc (build)

@fredrikhr fredrikhr marked this pull request as ready for review July 16, 2021 09:57
@fabricteam
Copy link
Collaborator

fabricteam commented Jul 16, 2021 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 814 791 5000
BaseButton mount 890 888 5000
Breadcrumb mount 2584 2630 1000
ButtonNext mount 521 527 5000
Checkbox mount 1490 1485 5000
CheckboxBase mount 1247 1256 5000
ChoiceGroup mount 4682 4661 5000
ComboBox mount 941 982 1000
CommandBar mount 10092 10020 1000
ContextualMenu mount 6181 6271 1000
DefaultButton mount 1125 1085 5000
DetailsRow mount 3691 3651 5000
DetailsRowFast mount 3690 3695 5000
DetailsRowNoStyles mount 3419 3460 5000
Dialog mount 2154 2085 1000
DocumentCardTitle mount 155 154 1000
Dropdown mount 3174 3169 5000
FluentProviderNext mount 7124 7194 5000
FocusTrapZone mount 1742 1729 5000
FocusZone mount 1754 1756 5000
IconButton mount 1720 1713 5000
Label mount 324 327 5000
Layer mount 1771 1704 5000
Link mount 453 453 5000
MakeStyles mount 1815 1766 50000
MenuButton mount 1400 1444 5000
MessageBar mount 2004 1988 5000
Nav mount 3211 3216 1000
OverflowSet mount 1029 1038 5000
Panel mount 2057 2041 1000
Persona mount 795 816 1000
Pivot mount 1395 1370 1000
PrimaryButton mount 1236 1262 5000
Rating mount 7403 7434 5000
SearchBox mount 1251 1264 5000
Shimmer mount 2457 2395 5000
Slider mount 1898 1936 5000
SpinButton mount 4851 4868 5000
Spinner mount 415 411 5000
SplitButton mount 3076 3058 5000
Stack mount 496 491 5000
StackWithIntrinsicChildren mount 1467 1493 5000
StackWithTextChildren mount 4380 4380 5000
SwatchColorPicker mount 9902 9891 5000
Tabs mount 1364 1377 1000
TagPicker mount 2386 2329 5000
TeachingBubble mount 11564 11568 5000
Text mount 412 412 5000
TextField mount 1336 1346 5000
ThemeProvider mount 1167 1179 5000
ThemeProvider virtual-rerender 601 596 5000
Toggle mount 796 794 5000
buttonNative mount 115 105 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 151 140 1.08:1
CarouselMinimalPerf.default 462 435 1.06:1
DividerMinimalPerf.default 362 343 1.06:1
SegmentMinimalPerf.default 346 326 1.06:1
ChatWithPopoverPerf.default 345 328 1.05:1
LayoutMinimalPerf.default 365 351 1.04:1
RadioGroupMinimalPerf.default 434 416 1.04:1
TableMinimalPerf.default 393 379 1.04:1
AttachmentMinimalPerf.default 154 150 1.03:1
ListCommonPerf.default 626 607 1.03:1
ListNestedPerf.default 552 535 1.03:1
TextAreaMinimalPerf.default 481 468 1.03:1
ChatDuplicateMessagesPerf.default 283 277 1.02:1
FormMinimalPerf.default 396 389 1.02:1
LabelMinimalPerf.default 377 370 1.02:1
MenuButtonMinimalPerf.default 1612 1579 1.02:1
SkeletonMinimalPerf.default 348 340 1.02:1
StatusMinimalPerf.default 661 648 1.02:1
TableManyItemsPerf.default 1862 1833 1.02:1
AnimationMinimalPerf.default 399 395 1.01:1
BoxMinimalPerf.default 331 327 1.01:1
ButtonOverridesMissPerf.default 1652 1638 1.01:1
CheckboxMinimalPerf.default 2694 2677 1.01:1
DatepickerMinimalPerf.default 5290 5258 1.01:1
DialogMinimalPerf.default 748 740 1.01:1
HeaderSlotsPerf.default 739 733 1.01:1
ItemLayoutMinimalPerf.default 1193 1186 1.01:1
ListMinimalPerf.default 507 503 1.01:1
MenuMinimalPerf.default 824 812 1.01:1
RefMinimalPerf.default 233 231 1.01:1
SplitButtonMinimalPerf.default 3673 3647 1.01:1
TextMinimalPerf.default 336 333 1.01:1
CustomToolbarPrototype.default 3743 3689 1.01:1
ToolbarMinimalPerf.default 905 898 1.01:1
TooltipMinimalPerf.default 972 965 1.01:1
AttachmentSlotsPerf.default 1043 1040 1:1
ChatMinimalPerf.default 621 622 1:1
EmbedMinimalPerf.default 4036 4055 1:1
FlexMinimalPerf.default 284 285 1:1
HeaderMinimalPerf.default 346 346 1:1
InputMinimalPerf.default 1235 1235 1:1
ListWith60ListItems.default 627 629 1:1
PopupMinimalPerf.default 579 579 1:1
ProviderMinimalPerf.default 934 937 1:1
DropdownMinimalPerf.default 3024 3043 0.99:1
GridMinimalPerf.default 323 327 0.99:1
LoaderMinimalPerf.default 666 674 0.99:1
SliderMinimalPerf.default 1504 1524 0.99:1
TreeMinimalPerf.default 761 770 0.99:1
AvatarMinimalPerf.default 186 190 0.98:1
ButtonMinimalPerf.default 157 161 0.98:1
ButtonSlotsPerf.default 532 542 0.98:1
CardMinimalPerf.default 530 539 0.98:1
DropdownManyItemsPerf.default 643 657 0.98:1
PortalMinimalPerf.default 172 175 0.98:1
ReactionMinimalPerf.default 355 362 0.98:1
IconMinimalPerf.default 589 599 0.98:1
TreeWith60ListItems.default 166 169 0.98:1
VideoMinimalPerf.default 592 603 0.98:1
ImageMinimalPerf.default 346 357 0.97:1
ProviderMergeThemesPerf.default 1601 1653 0.97:1
RosterPerf.default 1113 1164 0.96:1
AlertMinimalPerf.default 258 273 0.95:1

chrisdholt
chrisdholt requested changes Jul 16, 2021
View reviewed changes
Copy link
Member

@chrisdholt chrisdholt left a comment

Choose a reason for hiding this comment

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

This is great, thanks for the contribution! My one request would be to pull the Fabric references as it's currently not aligned with the current POR and that will likely require a bit of a larger discussion.

packages/web-components/.storybook/preview-head.html Outdated Show resolved Hide resolved
packages/web-components/src/text-field/fixtures/text-field.html Outdated Show resolved Hide resolved
packages/web-components/src/text-field/text-field.styles.ts Show resolved Hide resolved
@fredrikhr fredrikhr force-pushed the web-components-textfield-start-end-flex branch from fbd74aa to dbf81c2 Compare July 17, 2021 10:16
@fredrikhr
Copy link
Contributor Author

@chrisdholt I reset the branch to dbf81c2. I'll open a new issue for the icons. Following the discussion we had yesterday on Discord I think https://github.com/microsoft/fluentui-system-icons will be a more correct place to file that issue? And if these icons are published to a CDN with stylesheets in the future we should re-introduce the test cases as I think there is value to testing <i>-tag icons in addition to SVG icons.

@chrisdholt chrisdholt merged commit 530f7e5 into microsoft:master Jul 21, 2021
@chrisdholt
Copy link
Member

thanks for this fix @fredrikhr!

@fredrikhr fredrikhr deleted the web-components-textfield-start-end-flex branch July 21, 2021 17:06
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/web-components@v1.2.2 has been released which incorporates this pull request.:tada:

Handy links:

PeterDraex pushed a commit to PeterDraex/fluentui that referenced this pull request Aug 6, 2021
@fredrikhr @PeterDraex
text-field: start/end display flex (microsoft#18969)
6b7f0f7 
* text-field: start/end display flex

ref.: microsoft/fast@ff37847

* Change files
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chrisdholt chrisdholt chrisdholt approved these changes

@EisenbergEffect EisenbergEffect Awaiting requested review from EisenbergEffect

@nicholasrice nicholasrice Awaiting requested review from nicholasrice

Assignees
No one assigned
Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@fredrikhr @fabricteam @chrisdholt @msft-fluent-ui-bot