[Enhancement] Rename Empty State component to Message State

henrikvoetmand commented 1 year ago

[x] I have written a good issue

Describe the enhancement

In the Cookbook we have a component called Empty State. This component can be, and is used, for other types of messages than Empty states. In the design library this component is called Message State. This causes confusion for both designers and developers.

Describe the solution you'd like

Rename the component to "Message State" This will ensure alignment between Design and Code and the name is better suited for what the component is used for.

Have you considered any alternatives?

Are there any additional context?

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Refinement

[ ] Request that the issue is UX refined; do not proceed until this is done.
[ ] Request that the issue is tech refined; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

[ ] Make sure you have read: "Before you get coding".
[ ] Signal to others you are working on the issue by assigning yourself.
[ ] Create a branch from the develop branch following our branch naming convention.
[ ] Publish a WIP implementation to Github as a draft PR and ask for feedback.
[ ] Make sure you have implemented tests following the guidelines in: "The good: Test".
[ ] Update the cookbook with examples and showcases.

Review

Once the issue has been implemented and is ready for review:

[ ] Do a self-review.
[ ] Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".

henrikvoetmand commented 1 year ago

Consider the name - is "Message" more simple and understandable?

RasmusKjeldgaard commented 1 year ago

From a code-perspective I think we could fairly easy add the new name as an additional selector, and warn about the deprecation of the kirby-empty-state selector.

@Component({
  selector: 'kirby-empty-state, kirby-message-state',
  ...
})

And then a deprecation warning like this:

  constructor(private elementRef: ElementRef) {
    if(elementRef.nativeElement.nodeName === 'KIRBY-EMPTY-STATE') {
      console.warn('Deprecation warning here');
    }
  }

We should also remember to re-export the renamed class under its old name.

For the docs part, I think we should copy the existing docs to a new sub-page and change the name, while replacing the content of the empty-state docs entry with a link pointing there.

We need to remember that we cannot just rename the entry as it is now a secondary entry that consumers might be importing code from. So the entry will have to still be named empty-state until we make this a breaking change and remove the empty state name entirely.

Alternatively if all this is too cumbersome we can just duplicate the entire secondary entry under the new name and accept the code duplication.

RasmusKjeldgaard commented 1 year ago

I have been thinking about this for 10 minutes now and I honestly think we should just duplicate it all, log a warning in the empty-state variant on initialization and get on with our lives 😄

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because of no recent activity. It will be closed in 10 weeks if no further activity occurs. Thank you for your contributions.

stale[bot] commented 10 months ago

This issue has been closed due to inactivity. Please open a new issue if it becomes relevant again.

RasmusKjeldgaard commented 10 months ago

Can be renamed when moving this to a web component implementation.

stale[bot] commented 8 months ago

This issue has been closed due to inactivity. Please open a new issue if it becomes relevant again.

kirbydesign / designsystem