Invalid HTML inside the card component

[batusek]

What version of Unfold are you using?

0.58.0 (bug probably introduced in 0.56.0)

What version of Django are you using?

4.2

What browser are you using?

Chrome latest

Did you checked changelog/commit history, if the bug is not already fixed?

Yes

Did you searched other issues, if the bug is not already fixed?

Yes

Did you checked documentation?

Yes, especially the documentation about components at https://unfoldadmin.com/docs/components/introduction/ that shows an example of the text component inside the card component:

{% component "unfold/components/card.html" with class="lg:w-1/3" %}
      {% component "unfold/components/text.html" %}
          {{ card.title }}
      {% endcomponent %}
{% endcomponent %}

Are you able to replicate the bug in the demo site?

Yes, it happens at https://demo.unfoldadmin.com/en/admin/

Repository with reproduced bug

N/A

Describe your issue

When you place components as described above (a text inside a card), unfold produces an invalid HTML (p inside span, which is not alowed). The problem is caused by this code:

https://github.com/unfoldadmin/django-unfold/blob/main/src/unfold/templates/unfold/components/card.html#L9

In the previous version, children have been rendered inside div, which is OK.

[lukasvinclav]

Does it have any impact on rendering? Which errors are you getting exactly?

[batusek]

Rendering is OK, just our automated tests are failing, because we use and HTML validator to make sure a generated HHTML is valid.

[lukasvinclav]

@batusek Now I understand. The problem is that I added new functionality which allows you to make a card component clickable and I changed some of the HTML elements from div to span. Would you mind looking at this issue? It will be important to differentiate between card component is clickable or not.

I will close the ticket for now, but I will be awaiting your PR which is going to work in all scenarios. Once I have it, I will review the code and do the testing.