geospatialem
commented
2 months ago Once design provides expertise, an audit across the design system components should be conducted to list out the relevant components to tackle 🏈
Open macandcheese opened 8 months ago
geospatialem
commented
2 months ago Once design provides expertise, an audit across the design system components should be conducted to list out the relevant components to tackle 🏈
Check existing issues
Description
Across the component library, we offer a mix of ways to implement content. In many places, we offer properties for adding simple strings, and in others we offer slots.
In some cases, we offer both: when slotted content is provided, it takes precedence over any supplied string properties of the same name.
This is a somewhat inconsistent experience, both in nomenclature (title/subtitle, heading/description, label, etc.), but also in implementation, as seemingly similar visual displays are achieved in different ways.
Acceptance Criteria
Anywhere we expect simple text to be the most common use case, we should offer properties as an out of the box solution. This ensures consistent implementation of text lockups, and will prevent a lot of accidental misalignment or extraneous padding / margin we often see.
We should ALSO have slots for these, because there are always some cases to use rich content - whether that be links, icons, imagery, etc. However, this should be a fallback from the text-only properties to encourage consistency and improve out of the box experience and design.
Ensure consistency with naming of slots (heading / description vs. title / subtitle) and properties.
Relevant Info
We should additionally ensure the nomenclature used is consistent, we have a mix of heading / description, title / subtitle / label, etc.,
Some of this could be supplied by an internal helper that is hidden from the user to keep user-facing API consistent and simple.
Which Component
All components, but ones like Card, Alert, Notice were the impetus for opening the issue.
Example Use Case
As an end-user, I most often want to use simple strings to populate components. It can be confusing and hard to know when and why some components offer slots for this, why some offer string-only props, and why some offer both. I still want the ability to add rich content as needed with slots.
Priority impact
impact - p3 - not time sensitive
Calcite package
Esri team
Calcite (design)