feat: Dialog Component

[iamtouha]

Description

This PR introduces-

• Dialog and DialogPanel component
• Storybook for Dialog
• Test for Dialog

Dialog API	Name	Type	Default value	Description
open*	boolean	-	Open/Close state
onClose*	(val: boolean) => void	-	Triggers when Dialog open/close state changes
static	boolean	false	Whether the element should ignore the internally managed open/closed state.
unmount	boolean	true	Whether the element should be unmounted or hidden based on the open/closed state.
overlayClassName	string	-	Update Dialog overlay style.

Related issue(s) refs #830

What kind of change does this PR introduce? (check at least one)

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New Feature (non-breaking change which adds functionality)
• [ ] New Feature (BREAKING CHANGE which adds functionality)
• [ ] Refactor
• [ ] Build-related changes
• [ ] Other, please describe:

Does this PR introduce a breaking change? (check one)

• [ ] Yes
• [x] No

If yes, please describe the impact and migration path for existing applications:

How has this been tested?

• Unit test written for Dialog

Screenshots (if appropriate):

The PR fulfils these requirements:

• [x] It's submitted to the main branch
• [x] When resolving a specific issue, it's referenced in the related issue section above
• [x] My change requires a change to the documentation. (Managed by Tremor Team)
• [x] I have added tests to cover my changes
• [x] Check the "Allow edits from maintainers" option while creating your PR.
• [x] Add refs #XXX or fixes #XXX to the related issue section if your PR refers to or fixes an issue.
• [x] By contributing to Tremor, you confirm that you have read and agreed to Tremor's CONTRIBUTING.md guideline. You also agree that your contributions will be licensed under the Apache License 2.0 license.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tremor-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 5, 2024 2:19pm

[github-actions[bot]]

:tada: This PR is included in version 3.13.0-beta-dialog.1 :tada:

The release is available on:

• npm package (@beta-dialog dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[severinlandolt]

Hey @iamtouha, thank you very much for creating this PR. I merged it a few days ago and its almost ready to be included in our next release.

Today I wanted to update Headless UI from 1.7.17 to1.7.18 and in the updated version, there seems to be a type issue. I am having a hard time fixing it, could you take a look at it? I created a branch with the updated tailwind packages and Dialog here:

https://github.com/tremorlabs/tremor/tree/chore/updatetailwindpackagegs

PS: I recently learned, that Headless UI also exports its props, might be useful too:

[iamtouha]

Hi @severinlandolt I'll take a look at the branch and investigate the type issue. I'll do my best to address it and get things sorted out.

[severinlandolt]

Hi @severinlandolt I'll take a look at the branch and investigate the type issue. I'll do my best to address it and get things sorted out.

@iamtouha Oh wow, you are quick! Thanks a ton✨ FYI: The error occurs during the build step:

[iamtouha]

Hi @severinlandolt It seems headlessui introduced a new property for dialog in their latest release. https://github.com/tailwindlabs/headlessui/pull/2709.

the fix is to add role?: "dialog" | "alertdialog"; key in DialogProps

I didn't use the DialogProp type provided by headlessui as typescript would yell at me if I wanted to extend the type. I guess it is due to static and unmount dialog props.

P.S. I have no idea how can i push this change to the branch. Should I create another PR?

[severinlandolt]

@iamtouha Cool! One moment, I will add you as contributor. Makes things a lot easier, have a look at your emails ;) You should now be able to directly commit to this PR 👍

[iamtouha]

@severinlandolt Cool! thanks!

[iamtouha]

Hi @severinlandolt, I apologize for any inconvenience or confusion caused by my inexperience. It seems a new PR was created whin i tried to commit to this PR as this is already closed.

[severinlandolt]

Hey @iamtouha, no worries at all! I will check it right now :)

[severinlandolt]

Hi @iamtouha, we just released a new version including your Dialog component! Thank you for your contribution. I was able to release your PR almost unchanged with what you submitted.

If you would like to contribute in the future, we have two issues which we would love to get some help:

• https://github.com/tremorlabs/tremor/issues/366 There has been a PR, but I am not sure if this is an optimal solution. It's creating a "duplicate" form with the regular HTML form tags which are then hidden with CSS. If you find another solution to this issue, this would be greatly appreciated.
• https://github.com/tremorlabs/tremor/issues/816 We use a seemingly deprecated/unmaintained package react-transition-group for the transition of the Button when the loading prop is set to true/false. Would be great to have this replaced with something like react-transition-state would make sense

[iamtouha]

Thanks @severinlandolt. Excited that the Dialog component is part of the new release. It was my pleasure contributing and I'm definitely interested in contributing further. I'll take a look at these issues and see how I can assist.