Skip to content

Conversation

@seb-jean
Copy link
Contributor

@seb-jean seb-jean commented Nov 16, 2025

Q A
Bug fix? no
New feature? yes
Deprecations? no
Documentation? yes
Issues Fix #...
License MIT

This pull request introduces the new Dialog component to the Shadcn UI kit in the Symfony UX Toolkit, including its templates for all subcomponents (Close, Content, Description, Footer, Header, Title, Trigger), JavaScript controller, documentation, and manifest.

I encountered a display issue with the Label component. So I updated this component to reflect Shadcn.

Below is a demonstration of the Dialog component:

Dialog.mp4

However, I am having a problem with the lucid-x icon. In the middle of it, there is what looks like a white line.

lucide-x

The second problem I see is that when using the Tab key while the dialog is open, elements outside the dialog can also be focused. This is unacceptable.

What do you think?
(In any case, this kit system is great, and it's only the beginning.)

@seb-jean seb-jean requested a review from Kocal as a code owner November 16, 2025 14:28
@carsonbot carsonbot added Documentation Improvements or additions to documentation Feature New Feature Toolkit Status: Needs Review Needs to be reviewed labels Nov 16, 2025
@Kocal
Copy link
Member

Kocal commented Nov 16, 2025

Hey, and thanks for the contribution! That's super appreciated 🤗

I don't see any issue with the closing icon, it's well displayed:
image

About the "focus trap" thing, I agree. I didn't see native things and the solution used in by Shadcn/RadixUI seems very complex.
Can we give a try to https://github.com/focus-trap/focus-trap? It looks like super easy to use.

Thanks!

@@ -0,0 +1,15 @@
{# @prop open boolean Open (or not) the Dialog at initial rendering, default to `false` #}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing @prop for id

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just added it.

@seb-jean seb-jean force-pushed the toolkit-shadcn-dialog branch from 42dd883 to a4a31fe Compare November 19, 2025 07:45
@seb-jean
Copy link
Contributor Author

Hey, and thanks for the contribution! That's super appreciated 🤗

I don't see any issue with the closing icon, it's well displayed: image

About the "focus trap" thing, I agree. I didn't see native things and the solution used in by Shadcn/RadixUI seems very complex. Can we give a try to https://github.com/focus-trap/focus-trap? It looks like super easy to use.

Thanks!

I'll look into improving the focus section.

@seb-jean seb-jean marked this pull request as draft November 20, 2025 15:16
@norkunas
Copy link
Contributor

norkunas commented Nov 21, 2025

I think you should remove the open attribute from the <dialog> element itself, and let to control dialog-controller with data-dialog-open-value="boolean", this way focus won't escape outside of dialog

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

Labels

Documentation Improvements or additions to documentation Feature New Feature Status: Needs Review Needs to be reviewed Toolkit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants