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

azure-themes: update error styles for azure-themes (light) #17399

Merged
merged 3 commits into from
Mar 23, 2021
Merged

azure-themes: update error styles for azure-themes (light) #17399

merged 3 commits into from
Mar 23, 2021

Conversation

mhdahman
Copy link
Contributor

Pull request checklist

  • Addresses an existing issue: bug7632227
  • Include a change request file using $ yarn change

Description of changes

This PR:

  • updates the following error styles for azure-themes (light theme only):
    • error message text color
    • input border color
    • input border width
  • updates the story book examples to include a text field with error message

Focus areas to test

The changes are applicable to the following components:

TextField

Before

Screen Shot 2021-03-12 at 3 17 11 PM

After

Screen Shot 2021-03-12 at 3 11 30 PM

Dropdown

Before

Screen Shot 2021-03-12 at 3 15 42 PM

After

Screen Shot 2021-03-12 at 3 11 26 PM

Combobox

Before

Screen Shot 2021-03-12 at 3 15 38 PM

After

Screen Shot 2021-03-12 at 3 11 23 PM

@mhdahman mhdahman mentioned this pull request Mar 12, 2021
Merged
2 tasks
@Jacqueline-ms
Copy link
Contributor

@aidanmc95 for visibility.

@codesandbox-ci
Copy link

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 3db55f3:

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

@mhdahman
Copy link
Contributor Author

Cherry picked for the 7.0 branch: #17398

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 12, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1149 1138 5000
BaseButton mount 900 884 5000
Breadcrumb mount 43861 43564 5000
ButtonNext mount 1202 1195 5000
Checkbox mount 1497 1494 5000
CheckboxBase mount 1272 1271 5000
ChoiceGroup mount 4634 4614 5000
ComboBox mount 1014 946 1000
CommandBar mount 10182 10015 1000
ContextualMenu mount 6194 6258 1000
DefaultButton mount 1122 1114 5000
DetailsRow mount 3528 3530 5000
DetailsRowFast mount 3623 3540 5000
DetailsRowNoStyles mount 3361 3330 5000
Dialog mount 1454 1431 1000
DocumentCardTitle mount 1833 1850 1000
Dropdown mount 3275 3254 5000
FocusTrapZone mount 1765 1785 5000
FocusZone mount 1827 1776 5000
IconButton mount 1736 1687 5000
Label mount 330 342 5000
Layer mount 1774 1780 5000
Link mount 472 467 5000
MakeStyles mount 1965 1968 50000
MenuButton mount 1462 1455 5000
MessageBar mount 1995 2022 5000
Nav mount 3201 3193 1000
OverflowSet mount 1037 1035 5000
Panel mount 1395 1404 1000
Persona mount 812 817 1000
Pivot mount 1399 1417 1000
PrimaryButton mount 1249 1276 5000
Rating mount 7522 7483 5000
SearchBox mount 1290 1292 5000
Shimmer mount 2548 2495 5000
Slider mount 1946 1941 5000
SpinButton mount 4878 4882 5000
Spinner mount 407 426 5000
SplitButton mount 3141 3106 5000
Stack mount 495 489 5000
StackWithIntrinsicChildren mount 1550 1531 5000
StackWithTextChildren mount 4496 4486 5000
SwatchColorPicker mount 9980 10099 5000
Tabs mount 1366 1362 1000
TagPicker mount 2729 2728 5000
TeachingBubble mount 11545 11491 5000
Text mount 417 416 5000
TextField mount 1375 1359 5000
ThemeProvider mount 1162 1176 5000
ThemeProvider virtual-rerender 600 603 5000
ThemeProviderNext mount 15895 15774 5000
Toggle mount 793 804 5000
buttonNative mount 102 114 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.49 0.37:1 2000 356
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 587
🔧 Checkbox.Fluent 0.65 0.35 1.86:1 1000 647
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 820
🔧 Dropdown.Fluent 3.17 0.41 7.73:1 1000 3165
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 705
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 408
🔧 Slider.Fluent 1.61 0.48 3.35:1 1000 1607
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 380
🦄 Tooltip.Fluent 0.14 0.89 0.16:1 5000 719

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AlertMinimalPerf.default 315 292 1.08:1
IconMinimalPerf.default 708 664 1.07:1
AvatarMinimalPerf.default 220 208 1.06:1
ButtonSlotsPerf.default 598 568 1.05:1
CardMinimalPerf.default 591 561 1.05:1
DropdownManyItemsPerf.default 778 739 1.05:1
LayoutMinimalPerf.default 444 424 1.05:1
SegmentMinimalPerf.default 400 382 1.05:1
TreeWith60ListItems.default 194 185 1.05:1
Avatar.Fluent 356 340 1.05:1
TextAreaMinimalPerf.default 520 502 1.04:1
Dialog.Fluent 820 788 1.04:1
Icon.Fluent 705 679 1.04:1
AnimationMinimalPerf.default 432 418 1.03:1
ButtonUseCssPerf.default 845 824 1.03:1
ChatDuplicateMessagesPerf.default 310 300 1.03:1
DividerMinimalPerf.default 394 381 1.03:1
HeaderSlotsPerf.default 817 796 1.03:1
LabelMinimalPerf.default 446 435 1.03:1
ListMinimalPerf.default 543 529 1.03:1
PopupMinimalPerf.default 738 716 1.03:1
RefMinimalPerf.default 254 247 1.03:1
Image.Fluent 408 395 1.03:1
Tooltip.Fluent 719 698 1.03:1
AttachmentMinimalPerf.default 169 165 1.02:1
CarouselMinimalPerf.default 494 484 1.02:1
ChatWithPopoverPerf.default 391 383 1.02:1
FlexMinimalPerf.default 316 311 1.02:1
ImageMinimalPerf.default 404 398 1.02:1
ListNestedPerf.default 605 595 1.02:1
RadioGroupMinimalPerf.default 469 459 1.02:1
SkeletonMinimalPerf.default 392 384 1.02:1
TableManyItemsPerf.default 2070 2030 1.02:1
CustomToolbarPrototype.default 3867 3804 1.02:1
TooltipMinimalPerf.default 973 955 1.02:1
VideoMinimalPerf.default 671 657 1.02:1
Checkbox.Fluent 647 633 1.02:1
Text.Fluent 380 371 1.02:1
AttachmentSlotsPerf.default 1227 1211 1.01:1
ButtonUseCssNestingPerf.default 1106 1100 1.01:1
DropdownMinimalPerf.default 3174 3131 1.01:1
HeaderMinimalPerf.default 398 395 1.01:1
LoaderMinimalPerf.default 755 744 1.01:1
MenuButtonMinimalPerf.default 1610 1587 1.01:1
StatusMinimalPerf.default 741 733 1.01:1
TableMinimalPerf.default 429 423 1.01:1
ToolbarMinimalPerf.default 984 979 1.01:1
TreeMinimalPerf.default 809 798 1.01:1
Button.Fluent 587 584 1.01:1
Dropdown.Fluent 3165 3127 1.01:1
BoxMinimalPerf.default 387 387 1:1
ButtonMinimalPerf.default 179 179 1:1
DialogMinimalPerf.default 803 804 1:1
EmbedMinimalPerf.default 4284 4271 1:1
FormMinimalPerf.default 439 439 1:1
GridMinimalPerf.default 367 366 1:1
InputMinimalPerf.default 1328 1327 1:1
ItemLayoutMinimalPerf.default 1241 1236 1:1
ListCommonPerf.default 678 676 1:1
PortalMinimalPerf.default 182 182 1:1
ReactionMinimalPerf.default 427 426 1:1
SliderMinimalPerf.default 1616 1613 1:1
SplitButtonMinimalPerf.default 3797 3792 1:1
Slider.Fluent 1607 1614 1:1
AccordionMinimalPerf.default 169 171 0.99:1
ButtonOverridesMissPerf.default 1748 1762 0.99:1
ChatMinimalPerf.default 637 642 0.99:1
CheckboxMinimalPerf.default 2855 2882 0.99:1
MenuMinimalPerf.default 907 920 0.99:1
ProviderMinimalPerf.default 980 987 0.99:1
DatepickerMinimalPerf.default 46225 47237 0.98:1
ProviderMergeThemesPerf.default 1618 1644 0.98:1
TextMinimalPerf.default 373 379 0.98:1
ListWith60ListItems.default 639 662 0.97:1
RosterPerf.default 1136 1170 0.97:1

@size-auditor
Copy link

size-auditor bot commented Mar 12, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: 869c2e52f9127437f25cf8baa62949c295aed180 (build)

Jacqueline-ms
Jacqueline-ms approved these changes Mar 17, 2021
View reviewed changes
Copy link
Contributor

@Jacqueline-ms Jacqueline-ms left a comment

Choose a reason for hiding this comment

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

image
Color has been updated to #A4262C per design file

Both 7.0 and 8.0 branches have this update for light theme.

@ecraig12345 ecraig12345 reopened this Mar 22, 2021
@Jacqueline-ms Jacqueline-ms merged commit 6d000dd into microsoft:master Mar 23, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/azure-themes@v8.0.17 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/public-docsite-resources@v8.0.19 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-examples@v8.9.0 has been released which incorporates this pull request.:tada:

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
@mhdahman @joshualamusga1
azure-themes: update error styles for azure-themes (light) (microsoft…
dd34cac 
…#17399)

* add example for TextField with error message

* update error styles for azure-themes (light)

* Change files
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@mhdahman @miroslavstastny
azure-themes: update error styles for azure-themes (light) (microsoft…
55854ef 
…#17399)

* add example for TextField with error message

* update error styles for azure-themes (light)

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

@Jacqueline-ms Jacqueline-ms Jacqueline-ms approved these changes

@hyoshis hyoshis Awaiting requested review from hyoshis

Assignees

@khmakoto khmakoto

Labels
Package: azure-themes
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@mhdahman @Jacqueline-ms @fabricteam @msft-fluent-ui-bot @ecraig12345 @khmakoto