canonical / react-components

A set of components based on Vanilla Framework
https://canonical.github.io/react-components
82 stars 49 forks source link

EmptyState implementation inconsistency with Vanilla Framework #1071

Closed vladimir-cucu closed 1 month ago

vladimir-cucu commented 2 months ago

Vanilla Framework's design of EmptyState component can be found here and the react-components library's design can be found here. The image is rendered to the left of the text in Vanilla Framework, while it is rendered on top of the text in react-components library.

vladimir-cucu commented 2 months ago

Had a small chat today with @lukasSerelis and he specified that the Empty State design from Vanilla Framework is the one we should use in the web apps as well.

bartaz commented 2 months ago

Thanks for confirming that. I'm not sure why this inconsistency was introduced, but will be good to fix that to avoid confusion.

vladimir-cucu commented 2 months ago

@bartaz I'm currently looking into how Vanilla Framework implemented the Empty State and the implementations of all 3 types of Empty States differ. Are we only concerned with implementing the No content Empty State in this component?

bartaz commented 2 months ago

Yes, the Vanilla docs for Empty State pattern are very generic and cover variety of cases (search, 404, etc). For apps the most relevant is "no content" empty state, so that was meant to be covered by this React component.

bartaz commented 2 months ago

Also note that this is very context specific, so image may be different, text obviously. The action button also should be optional.

image

Overall the purpose of empty state component is to provide information about what's missing, and ideally explain the action to be taken to add something.

jmuzina commented 1 month ago

Closing as completed in #1076