Add a modal Dialog component

[afarber]

Add a modal Dialog component to PixiUI for asking questions and presenting simple choices:

• Add support for any number of buttons, including none
• Emit onSelect signal with button index and text when user makes a selection
• Accept Graphics, Sprites, Textures, or texture names via GetViewSettings
• Supports closeOnBackdropClick to dismiss on a scrim tap
• Also add JSdoc comments to all methods in the stories/utils/*.ts files

[afarber]

Hi @CyberDex please take a look at my PR.

I am still working on it, but do you have any suggestions already?

[afarber]

Hi @Zyie @GoodBoyDigital @CyberDex please review my PR

[afarber]

Hi @CyberDex I have improved the PR:

• Dialog now uses animations option like FancyButton. When animations is not passed, the dialog opens/closes immediately without animation
• Custom FancyButtons can be passed to Dialog constructor via the button property

Below are screenshots demoing this - the Simple Alert story has no animations and the Confirm Dialog story uses custom FancyButtons with hover/press animations:

I don't see any color issues in the Storybook on my end. Could you please confirm if the colors still look weird to you?

[CyberDex]

I have pushed a few fixes.

And there are a few issues to look into:

• closeOnBackdropClick closes the dialog also when clicked on the window, should only work on Backdrop
• feels like we need some more settings for the content text:
  • make it align center by default?
  • add margins settings?
• some stories need to be improved:
  • Fancy buttons configs need to be fixed as I have refactored them, you can use DialogGraphics.stories as a reference
  • letter grid content is not aligned with the bg borders and is misaligned
  • I do not see the point of the 'Use solid colours' section
  • for the DialogNineSlice.stories would be nice to have the same color as other components for consistency
  • BunnyBackdrop looks cool, but it is a bit overkill and out of the scope for this library

My main concern is to unify this component. The whole idea of this library is to have all components as universal as possible, so that text can be passed as text (an instance will be created under the hood), same as any text instance can be passed. Let's make sure it works the same for this component.

Maybe we could make it as a combination of 2 instances of the List component, and have the content to be passed as instances?

Like the outer list can have a background and a Backdrop, it can have a list of instances to be used as content (title, text), this way we could easily configure all margins and paddings of the elements. And for the buttons, it would be a horizontal list to align buttons, that in their own order can be passed as instances of either Button or FancyButton.

Sorry for such a deep review, just want to make sure all components follow the same idea and patterns.

WDYT @afarber ?

[afarber]

Hi @CyberDex I have addressed all your comments, please review my recent commits.

Specifically I have removed the redundand solid colors dialog stories, but please keep the both letter stories for me.

I need them for the word game that I am porting from jQuery UI to PixiUi, this is my motivation for the PR.

[CyberDex]

I have made some changes. @afarber also had to update your implementation of letter stories, as they were not adaptive, and will merge once you give me a green light. If you are not happy with what I have done, we can talk about it and update

[afarber]

Your changes look great. Yes, please merge and consider a release (new package version)

[CyberDex]

@afarber I removed an automatic dialog closing on any button click. Let's keep it manual for the developer; this will give a bit more control over the dialog behavior.