Add support for semi-transparent background for floating content

[miroslavstastny]

Native menus and popover in Mac OS use semi-transparent blurred background:

Add support for the semi-transparent backgrounds to FUIR9 floating content - Menu, Popover...

This issue is to gather detailed requirements, think about the solution and provide an estimate.

CSS PoC: https://codepen.io/levithomason/pen/RwEjNKp

[bsunderhus]

For this feature we might require some levels of overrides:

1. global level flag that sets up every surface element as transparent (this could be a context)
2. component level property that allows component to opt-out of the global flag (this could be a context)

[bsunderhus]

This feature should affect surface components (not including Dialog):

1. Menu
2. Popover
3. Tooltip
4. Combobox
5. Dropdown
6. TagPicker
7. Toast (?)
8. Select (?)

@miroslavstastny, am I missing something?

[bsunderhus]

What happens on the case of Popover appearance="brand|inverted", do we have styles for those? https://react.fluentui.dev/?path=/docs/components-popover--default#appearance

We'll also need styles for when the background is dark!

[bsunderhus]

How should elements with background color behave inside of a semi-transparent surface? like a Button inside of a Popover:

(using dark theme here to make a clearer contrast between the button background and the semi-transparent background)

[layershifter]

This is blocked as we don't have required native support for the feature.

[CodeDoctorDE]

Do you mean on web? There is https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur which is baseline. Background with alpha should also be widely available

[layershifter]

@CodeDoctorDE it's about WebView2 limitations.

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".

[layershifter]

keep open

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".