Skip to content

[Text] Component needs to respect global semantic colors#13594

Closed
nileshp87 wants to merge 8 commits intomicrosoft:masterfrom
nileshp87:patch-2
Closed

[Text] Component needs to respect global semantic colors#13594
nileshp87 wants to merge 8 commits intomicrosoft:masterfrom
nileshp87:patch-2

Conversation

@nileshp87
Copy link
Copy Markdown

@nileshp87 nileshp87 commented Jun 14, 2020

Pull request checklist

Description of changes

Looking at how TextField works, I mimicked the pattern for using semanticColors. However, to leave the old behavior intact I use the semanticColor as a fallback instead of the only option.

Focus areas to test

(optional)

@nileshp87 nileshp87 requested a review from natalieethell as a code owner June 14, 2020 19:57
@nileshp87 nileshp87 changed the title Color needs to respect global semantic colors [Text] Component needs to respect global semantic colors Jun 14, 2020
@size-auditor
Copy link
Copy Markdown

size-auditor bot commented Jun 14, 2020

Asset size changes

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

Baseline commit: 4765a203d0d25f4c09eb946b23e06fe50966d59f (build)

@ghost
Copy link
Copy Markdown

ghost commented Jun 16, 2020

CLA assistant check
All CLA requirements met.

@msft-github-bot
Copy link
Copy Markdown
Contributor

msft-github-bot commented Jun 16, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1194 1216 5000
BaseButton mount 938 937 5000
Breadcrumb mount 41131 41442 5000
ButtonNext mount 1351 1347 5000
Checkbox mount 1556 1590 5000
CheckboxBase mount 1272 1300 5000
ChoiceGroup mount 4973 4906 5000
ComboBox mount 982 995 1000
CommandBar mount 9898 9950 1000
ContextualMenu mount 6106 6062 1000
DefaultButton mount 1164 1140 5000
DetailsRow mount 3621 3643 5000
DetailsRowFast mount 3655 3702 5000
DetailsRowNoStyles mount 3476 3457 5000
Dialog mount 1480 1475 1000
DocumentCardTitle mount 1770 1781 1000
Dropdown mount 3398 3366 5000
FocusTrapZone mount 1803 1861 5000
FocusZone mount 1757 1784 5000
IconButton mount 1781 1808 5000
Label mount 326 331 5000
Layer mount 1809 1789 5000
Link mount 463 482 5000
MakeStyles mount 1949 1959 50000
MenuButton mount 1494 1495 5000
MessageBar mount 2015 1951 5000
Nav mount 3381 3268 1000
OverflowSet mount 1032 1053 5000
Panel mount 1369 1447 1000
Persona mount 846 800 1000
Pivot mount 1387 1366 1000
PrimaryButton mount 1326 1296 5000
Rating mount 7701 7822 5000
SearchBox mount 1383 1381 5000
Shimmer mount 2614 2626 5000
Slider mount 1966 1953 5000
SpinButton mount 5031 5081 5000
Spinner mount 395 400 5000
SplitButton mount 3193 3229 5000
Stack mount 520 511 5000
StackWithIntrinsicChildren mount 1501 1501 5000
StackWithTextChildren mount 4599 4614 5000
SwatchColorPicker mount err 10176 5000
Tabs mount 1431 1467 1000
TagPicker mount 2876 2884 5000
TeachingBubble mount 11403 11470 5000
Text mount 417 415 5000
TextField mount 1388 1395 5000
ThemeProvider mount 1167 1156 5000
ThemeProvider virtual-rerender 599 577 5000
ThemeProviderNext mount 15243 15287 5000
Toggle mount 827 834 5000
buttonNative mount 113 110 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.19 0.49 0.39:1 2000 388
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 635
🔧 Checkbox.Fluent 0.67 0.37 1.81:1 1000 666
🎯 Dialog.Fluent 0.17 0.22 0.77:1 5000 862
🔧 Dropdown.Fluent 3.11 0.43 7.23:1 1000 3107
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 763
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 443
🔧 Slider.Fluent 1.61 0.46 3.5:1 1000 1614
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 405
🦄 Tooltip.Fluent 0.12 0.91 0.13:1 5000 610

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
GridMinimalPerf.default 415 386 1.08:1
PortalMinimalPerf.default 187 176 1.06:1
ChatWithPopoverPerf.default 473 450 1.05:1
DialogMinimalPerf.default 884 844 1.05:1
FlexMinimalPerf.default 342 325 1.05:1
Avatar.Fluent 388 370 1.05:1
Tooltip.Fluent 610 579 1.05:1
AvatarMinimalPerf.default 230 221 1.04:1
CarouselMinimalPerf.default 538 519 1.04:1
PopupMinimalPerf.default 768 739 1.04:1
Button.Fluent 635 612 1.04:1
AccordionMinimalPerf.default 180 174 1.03:1
BoxMinimalPerf.default 425 412 1.03:1
ChatDuplicateMessagesPerf.default 410 399 1.03:1
DropdownMinimalPerf.default 3178 3085 1.03:1
InputMinimalPerf.default 1361 1320 1.03:1
ListMinimalPerf.default 582 565 1.03:1
ProviderMergeThemesPerf.default 1645 1594 1.03:1
TextMinimalPerf.default 413 400 1.03:1
ToolbarMinimalPerf.default 1057 1031 1.03:1
TreeMinimalPerf.default 886 861 1.03:1
TreeWith60ListItems.default 199 193 1.03:1
Icon.Fluent 763 740 1.03:1
CardMinimalPerf.default 628 614 1.02:1
DividerMinimalPerf.default 432 424 1.02:1
DropdownManyItemsPerf.default 794 780 1.02:1
HeaderSlotsPerf.default 887 870 1.02:1
ImageMinimalPerf.default 452 445 1.02:1
ProviderMinimalPerf.default 994 970 1.02:1
TableMinimalPerf.default 471 460 1.02:1
TextAreaMinimalPerf.default 580 566 1.02:1
AnimationMinimalPerf.default 452 447 1.01:1
ButtonMinimalPerf.default 205 203 1.01:1
ButtonOverridesMissPerf.default 1764 1754 1.01:1
ButtonUseCssNestingPerf.default 1136 1120 1.01:1
CheckboxMinimalPerf.default 2959 2931 1.01:1
ItemLayoutMinimalPerf.default 1374 1355 1.01:1
LoaderMinimalPerf.default 759 754 1.01:1
MenuMinimalPerf.default 978 968 1.01:1
RadioGroupMinimalPerf.default 519 516 1.01:1
IconMinimalPerf.default 761 754 1.01:1
Dialog.Fluent 862 856 1.01:1
Dropdown.Fluent 3107 3079 1.01:1
Image.Fluent 443 440 1.01:1
Slider.Fluent 1614 1603 1.01:1
ButtonSlotsPerf.default 627 629 1:1
DatepickerMinimalPerf.default 49705 49566 1:1
FormMinimalPerf.default 486 486 1:1
ListCommonPerf.default 718 716 1:1
MenuButtonMinimalPerf.default 1717 1722 1:1
ReactionMinimalPerf.default 468 468 1:1
RefMinimalPerf.default 251 250 1:1
SegmentMinimalPerf.default 409 411 1:1
SkeletonMinimalPerf.default 420 418 1:1
SplitButtonMinimalPerf.default 4006 4013 1:1
TooltipMinimalPerf.default 857 857 1:1
Text.Fluent 405 404 1:1
AttachmentSlotsPerf.default 1276 1288 0.99:1
ButtonUseCssPerf.default 884 890 0.99:1
ChatMinimalPerf.default 673 677 0.99:1
ListWith60ListItems.default 681 691 0.99:1
SliderMinimalPerf.default 1598 1610 0.99:1
TableManyItemsPerf.default 2237 2259 0.99:1
CustomToolbarPrototype.default 3728 3758 0.99:1
Checkbox.Fluent 666 673 0.99:1
EmbedMinimalPerf.default 4375 4470 0.98:1
LayoutMinimalPerf.default 459 467 0.98:1
ListNestedPerf.default 634 648 0.98:1
AlertMinimalPerf.default 327 337 0.97:1
StatusMinimalPerf.default 805 831 0.97:1
VideoMinimalPerf.default 683 702 0.97:1
LabelMinimalPerf.default 456 473 0.96:1
RosterPerf.default 1260 1315 0.96:1
HeaderMinimalPerf.default 414 436 0.95:1
AttachmentMinimalPerf.default 177 189 0.94:1

@natalieethell
Copy link
Copy Markdown
Contributor

Syncing up offline

@natalieethell
Copy link
Copy Markdown
Contributor

I would suggest chatting with @paulgildea and/or @dzearing about the behavior here. Originally, if I remember correctly, the assumption was that the Text object would inherit the text color of its parent elements. Not sure if the FluentUI team wants to change that assumption.

@msft-github-bot
Copy link
Copy Markdown
Contributor

Hello @dzearing!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

@ecraig12345 ecraig12345 reopened this Aug 28, 2020
@ecraig12345
Copy link
Copy Markdown
Member

@nileshp87 Looks like you need to update snapshots. cd to packages/office-ui-fabric-react then run yarn update-snapshots.

@ecraig12345
Copy link
Copy Markdown
Member

Actually I went ahead and did the updates in the interest of getting this merged (I've been trying to help get old PRs either merged or closed).

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci bot commented Aug 28, 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 deb02cd:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

Copy link
Copy Markdown
Member

@ecraig12345 ecraig12345 left a comment

Choose a reason for hiding this comment

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

Somehow this seems to be causing screener failures with Button, which is really strange because Button doesn't use Text. @dzearing or @khmakoto any ideas? (marking as request changes to ensure it gets fixed)
https://screener.io/v2/dashboard/5e753c387bf3181b00090c18/patch-2

@JustSlone
Copy link
Copy Markdown
Collaborator

JustSlone commented Mar 2, 2021

@nileshp87, @khmakoto, it looks like this PR is pretty far out of date. It might be a good idea to convert to draft while things get worked out.

Also, do we really need all of these requested reviewers? It would help to tidy that up too.

Thanks for picking this back up though!

@khmakoto
Copy link
Copy Markdown
Member

khmakoto commented Mar 2, 2021

@JustSlone Yeah, I've been working to get rid of merge conflicts and get it back to a good state. Although it might be good to close it and do it from zero again. I'll spin up a new one tomorrow.

@khmakoto
Copy link
Copy Markdown
Member

khmakoto commented Mar 2, 2021

Closed in favor of #17252.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fluent Text Component does not respect semantic coloring

10 participants