-
Notifications
You must be signed in to change notification settings - Fork 2.7k
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.
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
feat(react-shared-contexts): adds MaterialType context to support Semi Transparency #31409
base: master
Are you sure you want to change the base?
Conversation
📊 Bundle size report✅ No changes found |
@@ -0,0 +1,7 @@ | |||
{ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🕵 fluentui-web-components-v3 Open the Visual Regressions report to inspect the affected screenshots
Accordion 3 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Accordion.Size - RTL.normal.chromium.png | 2 | Changed |
Accordion.Size - Dark Mode.normal.chromium.png | 2 | Changed |
Accordion.Size.normal.chromium.png | 2 | Changed |
Avatar 5 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Avatar.Active.normal.chromium.png | 5 | Changed |
Avatar.Active Appearance.normal.chromium.png | 10 | Changed |
Avatar.Active Appearance - Dark Mode.normal.chromium.png | 2 | Changed |
Avatar.Color.normal.chromium.png | 1 | Changed |
Avatar.Color - RTL.normal.chromium.png | 1 | Changed |
Badge 6 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Badge.Shape.normal.chromium.png | 1 | Changed |
Badge.Appearance - Dark Mode.normal.chromium.png | 15 | Changed |
Badge.Default.normal.chromium.png | 1 | Changed |
Badge.Appearance.normal.chromium.png | 1 | Changed |
Badge.Size.normal.chromium.png | 6 | Changed |
Badge.Color.normal.chromium.png | 1 | Changed |
Button 15 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Button.Large Icon Only - Dark Mode.pressed.chromium.png | 5 | Changed |
Button.Large Icon Only - Dark Mode.default.chromium.png | 4 | Changed |
Button.Large With Icon - RTL.default.chromium.png | 5 | Changed |
Button.Large Icon Only - Dark Mode.hover.chromium.png | 3 | Changed |
Button.Large Icon Only.pressed.chromium.png | 3 | Changed |
Button.Large With Icon - RTL.hover.chromium.png | 4 | Changed |
Button.Large With Icon - Dark Mode.default.chromium.png | 4 | Changed |
Button.Large Icon Only.default.chromium.png | 5 | Changed |
Button.Large Icon Only.hover.chromium.png | 4 | Changed |
Button.Large With Icon.default.chromium.png | 5 | Changed |
Button.Large With Icon - Dark Mode.pressed.chromium.png | 5 | Changed |
Button.Large With Icon.hover.chromium.png | 4 | Changed |
Button.Large With Icon - Dark Mode.hover.chromium.png | 3 | Changed |
Button.Large With Icon - RTL.pressed.chromium.png | 3 | Changed |
Button.Large With Icon.pressed.chromium.png | 3 | Changed |
Divider 3 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Divider.With Svg - RTL.normal.chromium.png | 3 | Changed |
Divider.Vertical With Svg.normal.chromium.png | 4 | Changed |
Divider.With Svg.normal.chromium.png | 3 | Changed |
MenuList 16 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
MenuList.Checkbox - RTL.2nd selected.chromium.png | 1 | Changed |
MenuList.Checkbox.2nd selected.chromium.png | 1 | Changed |
MenuList.Checkbox With Icons - RTL.1st selected.chromium.png | 4 | Changed |
MenuList.Checkbox With Icons - RTL.normal.chromium.png | 4 | Changed |
MenuList.Radio With Icons.normal.chromium.png | 4 | Changed |
MenuList.Checkbox With Icons.2nd selected.chromium.png | 5 | Changed |
MenuList.Checkbox With Icons.normal.chromium.png | 4 | Changed |
MenuList.Radio With Icons.2nd selected.chromium.png | 4 | Changed |
MenuList.With Icons.hover menuitem.chromium.png | 3 | Changed |
MenuList.Radio With Icons - RTL.1st selected.chromium.png | 4 | Changed |
MenuList.Radio With Icons - RTL.2nd selected.chromium.png | 4 | Changed |
MenuList.Radio With Icons - RTL.normal.chromium.png | 4 | Changed |
MenuList.Checkbox With Icons - RTL.2nd selected.chromium.png | 5 | Changed |
MenuList.Checkbox With Icons.1st selected.chromium.png | 4 | Changed |
MenuList.Radio With Icons.1st selected.chromium.png | 4 | Changed |
MenuList.With Icons.normal.chromium.png | 4 | Changed |
Slider 2 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Slider.Size Small.rightArrow.chromium.png | 1 | Changed |
Slider.Size Small.normal.chromium.png | 1 | Changed |
Switch 2 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Switch.Checked - RTL.hover.chromium.png | 1 | Changed |
Switch.Checked.hover.chromium.png | 1 | Changed |
Text 1 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Text.Block.normal.chromium.png | 995 | Changed |
TextInput 1 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
TextInput.Size Large.normal.chromium.png | 2 | Changed |
Perf Analysis (
|
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
Avatar | mount | 626 | 642 | 5000 | |
Button | mount | 306 | 309 | 5000 | |
Field | mount | 1099 | 1129 | 5000 | |
FluentProvider | mount | 707 | 731 | 5000 | |
FluentProviderWithTheme | mount | 77 | 83 | 10 | |
FluentProviderWithTheme | virtual-rerender | 34 | 34 | 10 | |
FluentProviderWithTheme | virtual-rerender-with-unmount | 83 | 77 | 10 | |
MakeStyles | mount | 873 | 858 | 50000 | |
Persona | mount | 1751 | 1715 | 5000 | |
SpinButton | mount | 1352 | 1402 | 5000 | |
SwatchPicker | mount | 1560 | 1566 | 5000 |
@@ -0,0 +1,7 @@ | |||
{ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🕵 fluentuiv9 Open the Visual Regressions report to inspect the affected screenshots
Avatar Converged 1 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Avatar Converged.badgeMask - RTL.normal.chromium.png | 4 | Changed |
/** | ||
* A solid surface that does not allow any light to pass through. | ||
*/ | ||
Opaque: 'opaque', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The design spec does not use this nomenclature. If we want to formalize this in another way let's go through it with designers first.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we invent something that does not align with design language, this can result in design specs that confuse feature engineers
|
||
export type MaterialType = (typeof MaterialType)[keyof typeof MaterialType]; | ||
|
||
namespace MaterialType { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why is the namespace necessary?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it is not. I can have it removed, but if you need to refer to the type of a single element in a union created as a const
then you'd have to access like typeof MaterialType.UnionMember
, by using this namespace exclusively for type you can do MaterilType.UnionMember
work properly without having to use the typeof
key and this does not produce anything on the JS bundle (as this namespace only includes types)
/** | ||
* @internal | ||
* Used as a flag that indicates that the components should have a semi-transparent background. | ||
* The provided number will be used as a backdrop filter blur value. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
provided how?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sorry, this comment is not updated. the first implementation I used the backdrop-filter blur values directly as the values provided by MaterialTypeContext
.
Feature
Adds
MaterialType
inspired by Apple's human interface design guidelines (https://developer.apple.com/documentation/swiftui/material)The
MaterialTypeContextValue
will be shared between surface components that will support different kinds of translucency levels on their surface.First step for #29491
Summary
This pull request primarily introduces the
MaterialType
context in the@fluentui/react-shared-contexts
and@fluentui/react-components
packages to support semi-transparency. The changes include the creation ofMaterialType
,MaterialTypeContextValue
, andMaterialTypeProvider
, as well as the addition of these types and provider to various exports, imports, and context providers.