Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UAlert description slot in div #1551

Closed
cco3 opened this issue Mar 22, 2024 · 6 comments · Fixed by numselli/portfolio#14 · May be fixed by SamandarTemirxodjayev/goshtbor#26, SamandarTemirxodjayev/goshtbor#28 or SamandarTemirxodjayev/goshtbor#29
Labels
enhancement New feature or request

Comments

@cco3
Copy link

cco3 commented Mar 22, 2024

Description

Trying to place a div in a UAlert leads to hydration mismatches because both the #title and #description are p tags.

It's not clear to me that the #description should be in a p tag; and it'd be nice to put more substantial content inside an alert.

Additional context

Related issue

@cco3 cco3 added the enhancement New feature or request label Mar 22, 2024
@sandros94
Copy link
Collaborator

I'm not fully sure to follow you here: would you like explicitly note in the docs that the #description slot is a p tag, or would you more prefer it to be a div?

@cco3
Copy link
Author

cco3 commented Mar 23, 2024

I'm suggesting that it be a div so that I could nest other divs in it. I'm happy to defer to someone who has a better sense of these things, but I can imagine an alert being used for items more substantial than just phrasing content.

@sandros94
Copy link
Collaborator

I've opened a PR to add a default slot to the UAlert component.

This makes us not break the current functionality but adds the ability to insert custom components or code.

@benjamincanac
Copy link
Member

I agree that having divs for descriptions would allow more possibilities but wouldn't that worsen SEO?

@benjamincanac benjamincanac mentioned this issue Mar 28, 2024
8 tasks
@moshetanzer
Copy link
Collaborator

moshetanzer commented Mar 31, 2024

@benjamincanac cant we just do a dynamic component with default as p tag and document it? Think this would be good as it is what people are most used to adding default tract in slot instead of as prop. Thoughts

@benjamincanac benjamincanac added the v3 #1289 label Apr 8, 2024 — with Volta.net
Copy link
Member

Here is how I fixed in in v3, example for the Toast component here: https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/Toast.vue#L84-L89

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment