[ShadCN] Migrate Modal component to ShadCN/Tailwind #14163
Conversation
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
TylerAPfledderer
force-pushed
the
feat/shadcn-modal
branch
from
f5592cd
to
0003319
Compare
TylerAPfledderer
force-pushed
the
feat/shadcn-modal
branch
from
ab4905e
to
3c246ef
Compare
|
Currently trying to leverage |
Great! thanks for the update @TylerAPfledderer. I'll have a closer look tomorrow. |
|
@pettinarip I've noticed an error in my approach that I'll have corrected soon. I should allow disclosure control to come purely from a parent of the modal, and consider including the dialog trigger in the renders if they aren't being used already. |
| <Center className="absolute end-0 top-0" asChild> | ||
| <DialogPrimitive.Close className={close()}> | ||
| <MdClose /> | ||
| <span className="sr-only">Close</span> | ||
| </DialogPrimitive.Close> | ||
| </Center> |
There was a problem hiding this comment.
To give full control, perhaps we could avoid forcing this and declare it as part of the DialogClose button.
Then, we could be more opinionated in the Modal structure and declare it as part of the header.
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
<Center className="absolute end-0 top-0" asChild>
<DialogClose />
</Center>
</DialogHeader>There was a problem hiding this comment.
We could use our Button to wrap the close button to inherit the styles, right?
<DialogPrimitive.Close asChild>
<Button ...>...
</DialogPrimitive.Close>There was a problem hiding this comment.
To give full control, perhaps we could avoid forcing this and declare it as part of the DialogClose button.
Can you clarify what you mean here? Are you referring specifically to DialogTitle?
Hmmm I'm not sure either way about the use of Button component. Best would be
<Button variant="ghost" isSecondary size="sm">though here the size might be too small, but size="md" is too tall compared to the figma file, and you would have to force overrides in the size.
| contentProps?: DialogContentProps | ||
| } | ||
|
|
||
| const Modal = ({ |
There was a problem hiding this comment.
Nice. So, this export is to be backwards compatible with the previous instances, right?
Anyway, I think this abstraction makes sense to avoid repeating this code and have more consistency.
There was a problem hiding this comment.
Was thinking if this was the correct place to put it or in src/components/Modal.tsx.
There was a problem hiding this comment.
Yea. Prop naming has changed slightly.
I currently have it here just to keep this isolated from the existing Modal file along with having all of this isolated from the existing dialog file while I try to figure out how all of it should be merged together.
| const dialogVariant = tv({ | ||
| slots: { | ||
| content: | ||
| "data-[state=open]:animate-contentShow w-full fixed left-1/2 top-1/2 grid -translate-x-1/2 -translate-y-1/2 gap-4 rounded-md bg-white p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none", |
There was a problem hiding this comment.
contentShow? is that a built-in animation in TW?
There was a problem hiding this comment.
That is a utility that came from Radix as I was copy/pasting some default code. I'll review this.
|
@pettinarip Not sure what should be done here using this new modal for the wallet simulators. Per how logic works in radix between I could try and keep the current way the simulator modals are triggered, but could be become async with the intended approach in using this modal in other areas. Would at least keep this temporary At the time of this comment, I have not viewed other renders that are currently using the existing |
Description
Related Issue