Enhancement: Calcite-icon option for adornments

[TheBlueDog]

Description

Enhance the calcite-icon component by adding the option to display an adornment layer over the chosen icon.

There are cases where an icon needs additional definition, but is not interactive like a button.

Icon library will not require additional versions of every icon to be created each time the adornment is needed by a product.

Acceptance Criteria

• I can choose to display an adornment on an icon by setting an option in the component
• I can specify which adornment from a defined list to display
• I can specify the color variable to use for a fill on the adornment
• The adornments can be applied to all of the icon size options
• The adornments will always be displayed in the lower right corner of the component for LTR locales
• The adornments will always be displayed in the lower left corner of the component when RTL option is set

Relevant Info

This will bring a familiar pattern from Pro into the web platform. See: ArcGIS Pro Style Guide Icon Adornments

Dependency - The adornments will need to be created by the icon team. It is unknown where the adornments would be stored (part of Calcite UI Icon library?)

Which Component

Calcite Icon

Example Use Case

Implementation code suggestion:

<calcite-icon icon="file-xls" scale="m" adornment="expired" adornment-fill="ui-danger"></calcite-icon>

[dozer76]

This will be an awesome addition for Site Scan's upcoming feature - Enterprise Fleet Management. We need to use icons to represent certain actions like this in interactive tables, which can be thought of as activity feeds. examples include:

• Maintenance event was completed on a drone
• Maintenance event is past-due
• A new document has been added to the organization (i.e. training guide)
• A document has expired, or renewed (i.e. pilot certificate)
• An incident occurred during the flight

[macandcheese]

I think the use case makes sense, especially when considering a table view or some kind of feed layout with many line items... couple thoughts:

• I worry about definition of the "smaller icon", especially at scale="s/m"

• I wonder if the meaning of "smaller icon" is clear. "File has expired" could be conflated with refresh or refreshed.

• Some of these, especially "add" and "expired" - look like they could be actionable elements.

• Some of the above already have calcite-ui-icons that could just use a fill color? (layer-add, layer-broken, check-layer, lock, etc.) - by adding more iconography on top of any underlying icon - are we making is easy for folks to create confusion for their users

• Has the idea of just using colored dot indicators (like the calcite-action one - but with the four status colors instead of brand color) been tried, with tooltips that convey meaning of colored indicator?

@dozer76 - do you have screenshots of the above so we can take a look at what the implementation is?

[griffgriffindor]

@macandcheese I wanted to tackle those points, because I had some the same thoughts. You brought up some great questions.

• For the smaller icons and larger icons, they all use the same size adornment, using an 11px circle. You can see in Erich's screenshot that all the adornments are the same size, and since these are primarily for statuses I think that's the way to go. This would be especially viable if we could scoot the adornment off the viewbox a couple pixels.

• We'd need to work out what is the best icon for those elements. For example, "File has expired" would work better with a clock instead of a 'sync' icon. The meanings of the icons combined with the colors should make it clearer.

• I think the adornments should be reserved for statuses primarily. Actionable items should be baked in as part of the icon, grey, and not contained in a circle, just like the icon folder-plus

• I believe we should clarify that adornments do not belong on icons that already have modifiers. That would definitely cause some confusion. Perhaps we can pick out which icons have modifiers, and not permit them to use the adornment function?

• The trouble with just colored dot indicators is that it doesn't convey enough meaning. Also there's accessibility problems when relying on color to convey all the meaning. Adornment + color container can indicate a lot more information than the dot.

[griffgriffindor]

• Some of the above already have calcite-ui-icons that could just use a fill color? (layer-add, layer-broken, check-layer, lock, etc.) - by adding more iconography on top of any underlying icon - are we making is easy for folks to create confusion for their users

Yeah, also, layer-broken and check-layer could be removed if we have these adornments implemented. We'd just have to make sure that people who are using those icons aren't using them as actionable icons. In that case, we should keep them as is.

[paulcpederson]

@johnmgriffith do we have these glyphs available? Assuming you would want these drawn to fit the 11x11 artboard right?

Could also have a calcite-adornment component which you could pass as the default slot to an icon. This would enable you to use an adornment with other components as well like calcite-avatar or calcite-action

[jul11557]

I'm 7 months behind here, but figured I'd add a comment, as this enhancement would be really helpful for our team's upcoming release -- specifically for user with avatars (re @paulcpederson's last comment). Here are a few examples where we would be interested in using this, if possible:

1. A status circle on a user avatar to indicate the user's status (online, offline, away). Right now we display a dot next to avatars, which doesn't match how apps generally display user status. We can customize this ourselves, but would be helpful if it were available with the calcite-avatar component.

2. An icon on a team avatar. We use an avatar component for teams and need a way to represent which team somebody is a part of. We are considering displaying a star icon on the avatar to denote this.

3. Potentially showing a dot or adornment on the filter icon to show that filters have been applied. (I think there may be better ways to display this and am not entirely sold on this pattern, but could be worth considering.)

We are currently using a custom avatar in our app and haven't switched to calcite-avatar. If the adornment options were available and extended to the calcite-avatar it would be a good switch for us.

[macandcheese]

@paulcpederson @jul11557 - We are looking at this again and are wondering:

• Is being able to display an icon a requirement, or would the ability to set a "status dot" on top of Avatar be sufficient?

[jul11557]

@macandcheese glad this enhancement is resurfacing!

ArcGIS Mission would also require an icon with a custom color option, yes. We use avatars for both individual users and mission teams. For teams, we chose to display a star to denote "My Team", which looks like this:

That being said, it seems unnecessary to allow product teams to put any icon whatsoever on top of another icon or avatar. In many cases, the adorning icon is very difficult to discern without a border or background. If the calcite team were to offer a couple icons as a small set available for adornments, that would seem perfectly reasonable to me (for example, perhaps a plus/minus icon to show that this person could be added or removed from something, a key for a key person, a badge to denote someone is a top contributor, etc.).