Improved support for design system neutral color #16899
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
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 5fe109b:
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 4e3e43703b6315081f68aa8b61e73c7cc349c4aa (build) |
Perf AnalysisNo significant results to display. All results
Perf Analysis (Fluent)Perf comparison
Perf tests with no regressions
|
| }) | ||
| public neutralBaseColor: string; | ||
| protected neutralBaseColorChanged(oldValue: string, newValue: string): void { | ||
| this.neutralPalette = createColorPalette(parseColorHexRGB(newValue)); |
There was a problem hiding this comment.
parseColorHexRGB can return null so you might want to null check the result prior to providing it to createColorPalette unless you want this to throw
There was a problem hiding this comment.
What's our standard here? I thought parseColor was the function that threw if the format of the color is not supported, but it looks now like it just runs a regex. What would be expected behavior if someone passed this something other than a valid hex color? Seems maybe preferable to throw instead of default to grey or something.
bheston
force-pushed
the
add-neutral-base-color
branch
from
e8bc9a9 to
f144c53
Compare
added 4 commits
February 11, 2021 10:05
- Added a neutralBaseColor property in the design system - Update neutralPalette and accentPalette when respective baseColor changes - Updated Card to base background color on local neutralPalette - Updated Card stories to illustrate use cases
bheston
force-pushed
the
add-neutral-base-color
branch
from
614d650 to
5fe109b
Compare
chrisdholt
approved these changes
Feb 11, 2021
|
🎉 Handy links: |
joshualamusga1
pushed a commit
to joshualamusga1/fluentui
that referenced
this pull request
Feb 25, 2021
* Improved support for design system neutral color - Added a neutralBaseColor property in the design system - Update neutralPalette and accentPalette when respective baseColor changes - Updated Card to base background color on local neutralPalette - Updated Card stories to illustrate use cases * Change files * Update api report * Added null checking on parsed color Co-authored-by: Brian Heston <brheston@microsoft.com>
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Pull request checklist
$ yarn changeDescription of changes
Many use cases involve adjusting the neutral palette color, most commonly on cards or regions that have a special color. Currently this is difficult to do through properties alone, and is confusing even with code. This change makes adjusting the neutral color design system attributes easier as well as updates the Card component to adjust its background color with the neutral tint while respecting the relationship with its container.
Focus areas to test
(optional)