How to use the ComponentCover

[jenniferarnesen]

Hi, I need to block interaction with a component in certain situations. I thought I could do this by wrapping the component in a ComponentCover, but the underlying component is still interactive, and some styles (e.g. button, dashboard item) are showing through the cover (I've applied translucent). I guess the question is - is the above scenario the intended purpose of the Component cover?

Could the answer to this question be added to the ui documentation? Thanks!

[varl]

Hi @jenniferarnesen,

The usage is to render the ComponentCover inside the component you want to block off:

    <div>
        <ComponentCover />

        <p>Other things in the component that will be covered by the ComponentCover component</p>
    </div>

The way it works is that the ComponentCover attempts to cover its parent, and not cover its children.

The ComponentCover accepts children to provide a way to render things on top of the cover, for example, a spinner. So things that are inside the component cover will get a higher z-index than the ComponentCover itself.

Does that explain how and why it works the way it does?

[amcgee]

This seems like the answer to me, @jenniferarnesen ?

[jenniferarnesen]

Yes, thanks that solved it for me.

[Mohammer5]

I'm wondering why the ComponentCover is being used to prevent user interaction with a certain element. I think the intended use-case of the component cover is to prevent interaction with "every thing else" while allowing interaction with a defined set of components.

If you want to disable the functionality of buttons, etc, wouldn't it be better to add disabled={true}, which should also make the component render the correct disabled styles (at least if they're the "new" ui component)?

[amcgee]

This is a good question, but tangential to this discussion Q&A I think...

[amcgee]

Ah sorry, I misread your comment - I think this is actually a question about @jenniferarnesen's use case specifically not about the design of the ComponentCover component