Eui: [EuiAvatar] Add support for isDisabled property

[jportner]

In implementing elastic/kibana#89344, I have found myself needing to differentiate between different Kibana spaces. We are building components that plugin owners can reuse to implement sharing for saved objects (e.g., show a list of other spaces that an object exists in, show a flyout to allow the user to change the selected spaces). However, we may have a situation where the user is using a feature that is enabled in one space and disabled in another space. In that case I'd like to be able to render those spaces differently.

If EuiAvatar had an isDisabled property that would "gray out" the entire component, that would be perfect for our needs. I'm thinking something just like EuiBadge has:

I imagine this should be straightforward to implement even if the avatar is an image, but I'm not sure.

[snide]

Just spitting out ideas for whoever picks this up. Visually this will be tough. Only thing I can think up is we grayscale the badge (which could require a css filter for the images) with a cursor: not allowed. Avatars aren't by nature clickable like badges, and get most of that functionality through common props (href/onclick).

[git-anurag-hub]

I am taking this up! @snide @cchaos if anyone else is not working. :/

[git-anurag-hub]

Do I need to make another section in doc for this feature. @snide @jportner @cchaos

[snide]

Adding an example to the existing section should be enough.

[git-anurag-hub]

Okay👍🏼

[jportner]

I just realized that EuiBadge's property is isDisabled, I updated the title and description of this issue to stay consistent 🤭

[git-anurag-hub]

Does this looks good to you? @jportner

[jportner]

That's perfect!

[git-anurag-hub]

@jportner Maybe you can help me with this I need to use !important here like that used in badges but commit is showing this error.

[cchaos]

@git-anurag-hub We have sass-lint hooked up in our repo with certain rules, no-importants being one of them to try to limit to necessary casses. If you need to commit with the !important tag you'll have to do:

property: value !important; // sass-lint:disable-line no-important

[cchaos]

And since you're most likely getting this error during the pre-commit hooks, you'll want to install a sass-lint plugin to your editor that can alert you while you're editing.

[git-anurag-hub]

Okay Thanks for help.:)

[cchaos]

Whoop, this was has been closed via #4549