Dimmer feature missing.

[ghost]

Description

Feature => A dimmer hides distractions to focus attention on particular content. A dimmer will automatically be created when a dimming behavior is triggered on an element.

Types of Dimmer

1. Simple => A simple dimmer displays no content.
2. Content => It can display content.
3. Page => A dimmer can be formatted to be fixed to the page.

[cchaos]

Hi @walter-ind , I'm still not following what it is you are proposing. Do you have any examples with screenshots? Also, is there are a particular use-case/need for this component?

We don't usually add features/components just to align with other UI systems in the wild, but wait for a specific need identified by a consumer. At the same time, if you want to build something like this, we encourage you to come up with a fully detailed spec including use-cases that describes exactly what it is and what it's intended for.

Here is an example of a starter-spec: #1689

[ghost]

Description

Guiding Principles

We work on variety of apps and execute many actions while going through our work. Sometimes, we work on some really important and confidential tasks that needs confirmation from the application side that it has got completed and no other remaining action has been left to be taken.
The work could be anything like sending an email to your boss/PL(Project leader) about your unavailbility for some days, making any account on any social networking website , sending message to your loved ones etc.

In all those cases, our whole attention should be on the fact that whether the task has been executed properly or not. Thus, we need something to popup as soon as our task reaches it's destination so that our whole attention is diverted to that popup message and we get confirmed that our work has got completed.

The above purpose is served by "Dimmer" Component.

Features

• A dimmer hides distractions to focus attention on particular content.
• A dimmer will automatically be created when a dimming behavior is triggered on an element.

Types of Dimmer

1. Simple => A simple dimmer displays no content.
2. Content => It can display content.
3. Page => A dimmer can be formatted to be fixed to the page.

GIF(s)

1. Simple Dimmer Demo

2. Content Dimmer Demonstration

3. Page Dimmer Demonstration

In page dimmer, this dimmer is present on the whole page.

In all the above cases, when + button is clicked, then dimmer is triggered whereas when - button is clicked, then dimmer goes away.

[ghost]

@cchaos have a look at above.

[cchaos]

Thanks @walter-ind for the in-depth description. Now that I see what you are talking about, we actually do have this feature. It's called EuiOverlayMask. Consumers can use this in conjunction with simple text, toast, or modals to provide the exact experience you are talking about.

We've discussed this as a group and decided that it already exists we are just missing the documentation. So I'm going to close this one in favor of documenting that component.