Extract & expose Dialog utility components

[brandongregoryscott]

Extract the following JSX/functions from Dialog.js and expose them as standalone components:

DialogHeader

evergreen/src/dialog/src/Dialog.js

Lines 113 to 132 in 108a5bc

	const renderHeader = close => {
	if (!header && !hasHeader) {
	return undefined
	}
	return (
	<Pane flexShrink={0} display="flex" alignItems="center" {...themedHeaderProps}>
	{header ? (
	renderNode(header, close)
	) : (
	<>
	<Heading is="h4" size={600} flex="1">
	{title}
	</Heading>
	{hasClose && <IconButton appearance="minimal" icon={CrossIcon} onClick={() => onCancel(close)} />}
	</>
	)}
	</Pane>
	)
	}

DialogBody

evergreen/src/dialog/src/Dialog.js

Lines 207 to 217 in 108a5bc

	<Pane
	data-state={state}
	display="flex"
	overflow="auto"
	flexDirection="column"
	minHeight={minHeightContent}
	{...themedBodyProps}
	{...contentContainerProps}
	>
	<Pane>{renderChildren(close)}</Pane>
	</Pane>

DialogFooter

evergreen/src/dialog/src/Dialog.js

Lines 134 to 169 in 108a5bc

	const renderFooter = close => {
	if (!footer && !hasFooter) {
	return undefined
	}
	return (
	<Pane display="flex" justifyContent="flex-end" {...themedFooterProps}>
	<Pane>
	{footer ? (
	renderNode(footer, close)
	) : (
	<>
	{/* Cancel should be first to make sure focus gets on it first. */}
	{hasCancel && (
	<Button tabIndex={0} onClick={() => onCancel(close)}>
	{cancelLabel}
	</Button>
	)}
	<Button
	tabIndex={0}
	marginLeft={8}
	appearance="primary"
	intent={intent}
	isLoading={isConfirmLoading}
	disabled={isConfirmDisabled}
	onClick={() => onConfirm(close)}
	>
	{confirmLabel}
	</Button>
	</>
	)}
	</Pane>
	</Pane>
	)
	}

These are already mostly "themed" as regular components, but may need some slight tweaks during extraction:

evergreen/src/dialog/src/Dialog.js

Lines 109 to 111 in 108a5bc

	const themedHeaderProps = useStyleConfig('DialogHeader', emptyProps, emptyProps, emptyProps)
	const themedBodyProps = useStyleConfig('DialogBody', emptyProps, emptyProps, emptyProps)
	const themedFooterProps = useStyleConfig('DialogFooter', emptyProps, emptyProps, emptyProps)

https://github.com/segmentio/evergreen/blob/master/src/themes/default/components/dialog-header.js
https://github.com/segmentio/evergreen/blob/master/src/themes/default/components/dialog-body.js
https://github.com/segmentio/evergreen/blob/master/src/themes/default/components/dialog-footer.js

These components should be attached to the Dialog component so they can be used for composition if needed, similar to the EmptyState component:

evergreen/src/empty-states/src/EmptyState.js

Lines 166 to 167 in 108a5bc

	EmptyState.PrimaryButton = PrimaryButton
	EmptyState.LinkButton = LinkButton

[shreedharbhat98]

Hey @brandongregoryscott I would like to contribute to this issue. Can you please assign this issue to me?

[brandongregoryscott]

Sure thing!