RFC: Dialog component

[miroslavstastny]

Motivation

• Confirmation dialog:
  

What Stardust component can be currently used?

• Popup, but it is coupled with a trigger and its position is relative to the trigger.
• Portal, but it is too low level (and should be used by library consumers only in special cases).

Other libraries

lib	component	link
bootstrap	Modal	https://getbootstrap.com/docs/4.2/components/modal/
	Popover	https://getbootstrap.com/docs/4.2/components/popovers/
	Tooltip	https://getbootstrap.com/docs/4.2/components/tooltips/
semantic-ui/react	Modal	https://react.semantic-ui.com/modules/modal/
	Confirm	https://react.semantic-ui.com/addons/confirm/
	Popup	https://react.semantic-ui.com/modules/popup/
Fabric	Callout	https://developer.microsoft.com/en-us/fabric#/components/callout
	Dialog	https://developer.microsoft.com/en-us/fabric#/components/dialog
	HoverCard	https://developer.microsoft.com/en-us/fabric#/components/hovercard
	Modal	https://developer.microsoft.com/en-us/fabric#/components/modal
	Tooltip	https://developer.microsoft.com/en-us/fabric#/components/tooltip
Blueprint	Dialog	https://blueprintjs.com/docs/#core/components/dialog	Do not use Modal, it is an adjective
	Popover	https://blueprintjs.com/docs/#core/components/popover
	Tooltip	https://blueprintjs.com/docs/#core/components/tooltip
Evergreen	Dialog	https://evergreen.segment.com/components/dialog/
	CornerDialog	https://evergreen.segment.com/components/corner-dialog/
	Tooltip	https://evergreen.segment.com/components/tooltip/
Material UI	Dialog	https://material-ui.com/api/dialog/	Built using Modal low level base component.
	Popover	https://material-ui.com/api/popover/

To investigate/discuss

• what are the placement options
  • center of the screen?
  • top of the screen?
  • center of an element?
  • SemanticUI: center or top of the screen
• what are the sizing options?
  • SemanticUI: mini, tiny, small, large, fullscreen - changes dialog width
• should it have header and footer?
  • SemanticUI: yes, Header, Actions
• should it be always modal?
  • SemanticUI: always
• should it display an overlay?
  • always, never, configurable, if modal?
  • what color?
  • SemanticUI: always (called dimmer) - true, inverted, blurring

[layershifter]

SUIR has also Confirm addon, https://react.semantic-ui.com/addons/confirm/

[layershifter]

Reach UI

• AlertDialog: https://ui.reach.tech/alert-dialog
• Dialog: https://ui.reach.tech/dialog

[miroslavstastny]

@layershifter - thanks, Confirm added to the list. Do you remember what the reason was to have separate Modal and Confirm?

[layershifter]

thanks, Confirm added to the list. Do you remember what the reason was to have separate Modal and Confirm?

They have different APIs, I'm not sure that we actually need Confirm as a separate component now.

Confirm

 <Confirm
  cancelButton='Never mind'
  confirmButton="Let's do it"
  onCancel={this.handleCancel}
  onConfirm={this.handleConfirm}
/>

Modal

<Modal
  actions={[
    { key: 'cancel', content: 'Never mind', onClick: this.handleCancel },
    { key: 'confirm', content: 'Let's do it', positive: true, onClick: this.handleConfirm }
  ]}
/>

I should mention that SUI core doesn't have it.

[miroslavstastny]

Dialog component implemented in #790.