calcite-design-system
calcite-design-system copied to clipboard
Esri
Enhancement: Consolidate status colors across components
Description
Right now our "color" prop and what values it accepts is different across all components - it's used for styling an accent bar, and an icon if present / requested. The story around using that prop should be consistent where used. Note, it may change to a "status" or other name, but the resultant designs should not change
- Remove "red" as a color option for button, switch, link
- Input Message, Alert, Notice, Modal should all have the same 4 stateful colors (for now called by color name, potentially updated to intent-based nomenclature like info, success, warning, danger, in the future).
- Grey as option for the above (?)
- Update these instances to use the new "single" color css var.
cc @bstifle @asangma
Acceptance Criteria
Relevant Info
Which Component
Example Use Case
I'm re-opening this issue to collect feedback from the team. (For now I've left the issue title/description intact.)
For components that have a color property, the Calcite Design Team is currently considering the following change for v1:
| component | values | v1.0.0 proposed values |
|---|---|---|
| colors for status | ||
| calcite-alert | "blue" | "green" | "red" | "yellow" |
"info" | "success" | "danger" | "warning" | "brand" |
| calcite-modal | "blue" | "red" |
"info" | "danger" |
| calcite-notice | "blue" | "green" | "red" | "yellow" |
"info" | "success" | "danger" | "warning" | "brand" | "neutral" |
| colors for buttons | ||
| calcite-button | "blue" | "inverse" | "neutral" | "red" |
"brand" | "inverse" | "neutral" | "danger" |
| calcite-chip | "blue" | "green" | "grey" | "red" | "yellow" |
"brand" | "success" | "neutral" | "danger" | "warning" | "info" |
| calcite-fab | "blue" | "inverse" | "neutral" | "red" |
"brand" | "inverse" | "neutral" | "danger" |
| calcite-split-button | "blue" | "inverse" | "neutral" | "red" |
"brand" | "inverse" | "neutral" | "danger" |
@bstifle @julio8a @macandcheese please correct me if I'm wrong so we can fine-tune the changes needed.
What icon should an alert have when its new color is "brand"?
This is the current list: https://github.com/Esri/calcite-components/blob/master/src/components/calcite-alert/interfaces.ts#L3
Figma shows these 3 icons in use, is this correct?
success: "checkCircle",
warning: "exclamationMarkTriangle",
danger: "exclamationMarkTriangle",
info: "information",
brand: "information"
Notice pulls from this same list, so we also need an icon for the "neutral" color. Should we use "lightbulb" like Figma shows?
If an icon is required, the info icon would be more fitting to a general use case.
We should also make sure to audit calcite-input-message, right now its using nomenclature tied to input validation state, but we could make that consistent with the above proposed values.
@macandcheese should the design team look at this issue and make sure the tokens sync up with the proposed values?
Yeah that would be great, this comment is a good start but should be verified: https://github.com/Esri/calcite-components/issues/1220#issuecomment-890162861
Yeah that would be great, this comment is a good start but should be verified: #1220 (comment)
cc: @ashetland, @SkyeSeitz
Still need to verify that list. Are we also saying we'll rename the prop from color to status or is that still an open question?
I think we've wanted to move away from color to an intent based term, status, kind, etc., are common ones I've seen. cc @alisonailea as I know we've discussed this as well.
Okay we'll make sure to look at that as well when we verify the list. I like status, but we'll double check that it makes sense in each context. If not, kind also seems like a good bet.
@geospatialem Just confirming that this is slated for v1.0, yes? If so, we'll prioritize verification.
@geospatialem Just confirming that this is slated for v1.0, yes? If so, we'll prioritize verification.
@ashetland Great question, yes, this is slotted for next month's release.
Awesome. Aaron and I went over the proposed values. status as a new prop name to replace color is preferable in our opinion and we can have these changes updated in Figma this week including adding the neutral status to calcite-notice.
After a bit more discussion we've decided to go with renaming color to kind to avoid confusion with the status prop on inputs. Also, we can postpone adding a neutral variant to Notice at this time.
We do have a small mismatch on the blue starting point, though. Some components define blue=ui-brand and others define blue=ui-info. In these cases, are we suggesting to add the missing variants so they all have a brand and info?
After yet more discussing, we need to add variants for info or brand when one of them is missing.