Coverted all the css into Tailwind css of Modal component #1743
Conversation
Co-authored-by: Kyle Holmberg <[email protected]>
…l-styling-with-Tailwind
Co-authored-by: Kyle Holmberg <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
1 flaky test on run #4456 ↗︎
Details:
|
|||||||||||||||||||||
| Test | Artifacts | |
|---|---|---|
| when the server responds successfully > closes the modal when the x button is clicked |
Output
Screenshots
Video
|
|
This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.
Screen.Recording.2023-09-23.at.11.12.33.AM.movThe attached video is me trying to use the modal component on the |
Is this issue related to making changes in ui or any other reason ? |
| childrenClassName, | ||
| }) { | ||
| if (isOpen) { | ||
| gtag.modalView(screenReaderLabel); | ||
| } | ||
|
|
||
| const portalContainer = |
There was a problem hiding this comment.
Hey @subhajit20 ! I dove into this one rather than spend more of your time than you bargained for...
The issue where the modal was not rendering is explained because we use '#__next' in the "important" config. Radix's Dialog component uses React Portal to render as a direct child of body rather than the div with the #__next ID (as screenshotted). We needed to specifiy the container prop on the Dialog.Portal component so that Tailwind's styles actually applied!
I also made it so Tailwind works in Storybook.
I made some other changes, but nothing you need to worry about! Great work again.
|
Code Climate has analyzed commit b518d21 and detected 0 issues on this pull request. The test coverage on the diff in this pull request is 16.6% (90% is the threshold). This pull request will bring the total coverage in the repository to 75.7% (0.0% change). View more on Code Climate. |
Description of changes
Coverted all the css into Tailwind css of Modal component
Issue - #1725
Issue Resolved
Fixes #NA
Screenshots/GIFs