search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.07k stars 2.69k forks source link

Add support for semi-transparent background for floating content #29491

Open miroslavstastny opened 9 months ago

miroslavstastny commented 9 months ago

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

image image

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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

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