Review icon usage and functions

[kwm14]

Reviewed our components to see where we use icons, their function, and usage. I've added a table to the Google doc.

[kwm14]

Examples

These frameworks have huge icon libraries compared to the 23 we currently have in Vanilla, but it's good to see how they group and categorize icons.

Salesforce | Lightning Design System Categories

• Action
• Custom
• Doctype
• Standard
• Utility

IBM | Design Language Categories

• Action
• Controls
• Date
• File
• Formatting
• Image
• Navigation
• Social
• Status
• Toggle
• User

Bloomberg | Fish Tank Categories

• Account & Status
• Actions & Features
• Content & Properties
• Directional
• Gesture
• Locations & Places
• Ratings & Scored
• Social Media

[kwm14]

@matthewpaulthomas I've added proposal to the document for categorizing the icons in Vanilla, it would be great to for you to review and get your thoughts? 😄

[matthewpaulthomas]

What started this project was that putting a button’s “+” icon on the left (correct) caused menubutton chevrons to be on the left too (incorrect). So I suggested that the chevron is not actually an icon: it doesn’t necessarily appear where an icon does, and giving a menubutton an icon shouldn’t cause the menubutton’s chevron to disappear.

So p-icon--plus and p-icon--minus are in the wrong place here. They are still presented as alternatives to p-icon--contextual-menu when they should not be.

Further, I don’t think the chevrons, drag symbol, or expand/collapse symbols should be advertised as “icons” at all. Developers shouldn’t use them in places where they would normally use icons; that would confuse users about how they behave. The main reason for developers to care about those symbols is if they are making custom controls that mimic Vanilla ones, for example expandable table cells. Maybe there should be a separate page on custom controls, describing how to use the standard symbols as well as things like how to use the standard margin, padding, border, and shadow.

If the behaviour symbols were omitted from the icons page, there’d be only 19 non-social icons left. That’s a small enough number that I don’t think categorisation is that useful. It’s more important in those other libraries since they have many more icons.

[kwm14]

Thanks, @matthewpaulthomas for looking at my proposal and raising some valid points.

If the behavior symbols were omitted from the icons page, there’d be only 19 non-social icons left. That’s a small enough number that I don’t think categorization is that useful. It’s more important in those other libraries since they have many more icons.

Agree to not categorize our current icons until the library grows more with requests from applications 👍

But I will pull out status icons into their own category as they're solely used in notifications.