Skip to content

Text - README documentation #19073

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
Merged
merged 10 commits into from
Aug 5, 2021
Merged

Text - README documentation #19073

merged 10 commits into from
Aug 5, 2021

Conversation

@theerebuss
Copy link
Contributor

@theerebuss theerebuss commented Jul 22, 2021 •
edited
Loading

Pull request checklist

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

Description of changes

Added README for the react-text package

Focus areas to test

README

@theerebuss theerebuss added this to the July Project Cycle Q2 2021 milestone Jul 22, 2021
@theerebuss theerebuss mentioned this pull request Jul 22, 2021
Closed
44 tasks
@fabricteam
Copy link
Collaborator

fabricteam commented Jul 22, 2021 •
edited
Loading

📊 Bundle size report

🤖 This report was generated against 147ad1114e2e9261aae0908b98b7244a8b8997a7

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 22, 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 4192193:

Sandbox Source
Fluent UI React Starter Configuration

@size-auditor
Copy link

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

Asset size changes

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

Baseline commit: 147ad1114e2e9261aae0908b98b7244a8b8997a7 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 22, 2021 •
edited
Loading

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
Panel mount 2075 1391 1000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 778 781 5000
BaseButton mount 875 867 5000
Breadcrumb mount 2596 2572 1000
ButtonNext mount 421 431 5000
Checkbox mount 1503 1490 5000
CheckboxBase mount 1258 1275 5000
ChoiceGroup mount 4704 4634 5000
ComboBox mount 976 1000 1000
CommandBar mount 9927 10019 1000
ContextualMenu mount 6149 6086 1000
DefaultButton mount 1115 1094 5000
DetailsRow mount 3708 3704 5000
DetailsRowFast mount 3762 3706 5000
DetailsRowNoStyles mount 3503 3527 5000
Dialog mount 2118 2166 1000
DocumentCardTitle mount 141 140 1000
Dropdown mount 3213 3227 5000
FluentProviderNext mount 7395 7292 5000
FocusTrapZone mount 1760 1759 5000
FocusZone mount 1807 1789 5000
IconButton mount 1715 1888 5000
Label mount 342 336 5000
Layer mount 1784 1810 5000
Link mount 463 466 5000
MakeStyles mount 1841 1863 50000
MenuButton mount 1449 1491 5000
MessageBar mount 2005 2011 5000
Nav mount 3338 3215 1000
OverflowSet mount 1051 1049 5000
Panel mount 2075 1391 1000 Possible regression
Persona mount 805 819 1000
Pivot mount 1350 1419 1000
PrimaryButton mount 1260 1234 5000
Rating mount 7473 7560 5000
SearchBox mount 1305 1299 5000
Shimmer mount 2580 2540 5000
Slider mount 1957 1906 5000
SpinButton mount 4903 4917 5000
Spinner mount 424 412 5000
SplitButton mount 3099 3114 5000
Stack mount 494 508 5000
StackWithIntrinsicChildren mount 1554 1573 5000
StackWithTextChildren mount 4513 4558 5000
SwatchColorPicker mount 10147 10025 5000
Tabs mount 1430 1373 1000
TagPicker mount 2510 2567 5000
TeachingBubble mount 11806 11801 5000
Text mount 426 399 5000
TextField mount 1371 1322 5000
ThemeProvider mount 1205 1179 5000
ThemeProvider virtual-rerender 603 606 5000
Toggle mount 804 817 5000
buttonNative mount 113 111 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 211 189 1.12:1
RadioGroupMinimalPerf.default 465 434 1.07:1
TreeWith60ListItems.default 178 167 1.07:1
HeaderMinimalPerf.default 367 347 1.06:1
ImageMinimalPerf.default 379 356 1.06:1
ButtonSlotsPerf.default 554 530 1.05:1
TextAreaMinimalPerf.default 509 485 1.05:1
AlertMinimalPerf.default 273 262 1.04:1
AttachmentSlotsPerf.default 1081 1038 1.04:1
DropdownManyItemsPerf.default 685 662 1.03:1
GridMinimalPerf.default 332 323 1.03:1
MenuMinimalPerf.default 850 824 1.03:1
MenuButtonMinimalPerf.default 1656 1612 1.03:1
PortalMinimalPerf.default 181 175 1.03:1
RefMinimalPerf.default 240 234 1.03:1
SkeletonMinimalPerf.default 355 344 1.03:1
VideoMinimalPerf.default 626 608 1.03:1
AttachmentMinimalPerf.default 153 150 1.02:1
ButtonMinimalPerf.default 172 168 1.02:1
ButtonOverridesMissPerf.default 1713 1683 1.02:1
ChatMinimalPerf.default 646 634 1.02:1
ListWith60ListItems.default 626 614 1.02:1
LoaderMinimalPerf.default 713 699 1.02:1
PopupMinimalPerf.default 602 588 1.02:1
SplitButtonMinimalPerf.default 3812 3752 1.02:1
TreeMinimalPerf.default 802 787 1.02:1
ChatDuplicateMessagesPerf.default 290 286 1.01:1
DialogMinimalPerf.default 751 747 1.01:1
DropdownMinimalPerf.default 3129 3102 1.01:1
ListCommonPerf.default 635 630 1.01:1
ReactionMinimalPerf.default 373 369 1.01:1
SliderMinimalPerf.default 1583 1572 1.01:1
TableManyItemsPerf.default 1929 1911 1.01:1
TooltipMinimalPerf.default 1024 1012 1.01:1
AnimationMinimalPerf.default 408 407 1:1
BoxMinimalPerf.default 345 344 1:1
DividerMinimalPerf.default 354 355 1:1
EmbedMinimalPerf.default 4108 4117 1:1
HeaderSlotsPerf.default 751 753 1:1
InputMinimalPerf.default 1268 1265 1:1
ItemLayoutMinimalPerf.default 1208 1212 1:1
ProviderMinimalPerf.default 1011 1013 1:1
StatusMinimalPerf.default 665 665 1:1
IconMinimalPerf.default 605 607 1:1
ToolbarMinimalPerf.default 933 931 1:1
AccordionMinimalPerf.default 146 147 0.99:1
CarouselMinimalPerf.default 455 458 0.99:1
ChatWithPopoverPerf.default 348 351 0.99:1
CheckboxMinimalPerf.default 2727 2752 0.99:1
ListMinimalPerf.default 495 498 0.99:1
ProviderMergeThemesPerf.default 1653 1675 0.99:1
TableMinimalPerf.default 402 406 0.99:1
CustomToolbarPrototype.default 3849 3882 0.99:1
CardMinimalPerf.default 524 535 0.98:1
DatepickerMinimalPerf.default 5244 5401 0.97:1
ListNestedPerf.default 544 558 0.97:1
RosterPerf.default 1128 1161 0.97:1
SegmentMinimalPerf.default 342 351 0.97:1
TextMinimalPerf.default 334 345 0.97:1
LabelMinimalPerf.default 369 383 0.96:1
LayoutMinimalPerf.default 348 361 0.96:1
FormMinimalPerf.default 376 399 0.94:1
FlexMinimalPerf.default 279 300 0.93:1

@theerebuss theerebuss marked this pull request as ready for review July 23, 2021 10:16
@theerebuss theerebuss requested a review from a team as a code owner July 23, 2021 10:16
@theerebuss theerebuss requested review from a team July 23, 2021 10:37
Hotell
Hotell reviewed Jul 23, 2021
View reviewed changes
packages/react-text/README.md

## Typography wrappers

![List of typography variants by sorted descending by size](./assets/typography-examples.gif 'Typography wrapper list')
Copy link
Contributor

@Hotell Hotell Jul 23, 2021

Choose a reason for hiding this comment

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

why gif for static image ?

Copy link
Contributor Author

@theerebuss theerebuss Jul 23, 2021

Choose a reason for hiding this comment

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

Size optimization purposes only 😄

Copy link
Contributor

@Hotell Hotell Jul 23, 2021

Choose a reason for hiding this comment

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

haha, ok can we use jpeg or more modern approaches ? to me this is confusing ->
"like oh gif ! there is gonna be some movement - but I cant see any damn...what's wrong?"

Copy link
Contributor Author

@theerebuss theerebuss Aug 3, 2021

Choose a reason for hiding this comment

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

JPEG would imply a size around 4x bigger or visual degradation to achieve smaller sizes. Would it make a big difference if it stayed GIF? It's only visible on the source anyway and irrelevant when the MD is rendered in Github.

Copy link
Contributor

@Hotell Hotell Aug 3, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

I think we are prematurely optimising for non existent use case.

  • github is rendering those assets, hopefully they are optimizing accordingly ?

    • only 2 violations regarding images (lighthouse report)

      • explicit size 2021-08-03 at 15 53

      • pixel ration 2021-08-03 at 15 51

  • if we are concerned about this we should use webp or avif formats

  • as seen from the report is not doable by us to optimize much what is being rendered by github ( source we dont controll)

  • if this is rendered via storybook, the "issue" is even more non relevant as we are shipping extensive amount of javascript (where kB up and down for static asset like image is negligible )

anyways this is not blocking so approved - up to you which way to go / hope the context I provided makes sense 🤞

khmakoto
khmakoto approved these changes Jul 28, 2021
View reviewed changes
@khmakoto
Update packages/react-text/README.md
4192193 
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@theerebuss theerebuss merged commit d628c61 into microsoft:master Aug 5, 2021
@theerebuss theerebuss deleted the text-docs branch May 12, 2022 08:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Hotell Hotell Hotell approved these changes

@khmakoto khmakoto khmakoto approved these changes

+1 more reviewer

@ling1726 ling1726 ling1726 left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

Area: Documentation Component: Text Type: Documentation

Projects

None yet

Milestone

August Project Cycle Q3 2021

Development

Successfully merging this pull request may close these issues.

6 participants

@theerebuss @fabricteam @Hotell @khmakoto @ling1726 @tringakrasniqi