Editor package: invalid DOM nesting in PostPublishPanelToggle component

[vindl]

Describe the bug

Using the PostPublishPanelToggle component from @wordpress/editor package produces the following console warning:

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

This is caused by the fact that PostPublishPanelToggle nests a DotTip inside of a button:

gutenberg/packages/editor/src/components/post-publish-panel/toggle.js

Lines 45 to 57 in 94f5489

	<Button
	className="editor-post-publish-panel__toggle"
	isPrimary
	onClick={ onToggle }
	aria-expanded={ isOpen }
	disabled={ ! isButtonEnabled }
	isBusy={ isSaving && isPublished }
	>
	{ isBeingScheduled ? __( 'Schedule…' ) : __( 'Publish…' ) }
	<DotTip id="core/editor.publish">
	{ __( 'Finished writing? That’s great, let’s get this published right now. Just click ‘Publish’ and you’re good to go.' ) }
	</DotTip>
	</Button>

and DotTip in turn renders a button too (or two if IconButton renders it):

gutenberg/packages/nux/src/components/dot-tip/index.js

Lines 41 to 51 in 09dc71c

	<p>
	<Button isLink onClick={ onDismiss }>
	{ hasNextTip ? __( 'See next tip' ) : __( 'Got it' ) }
	</Button>
	</p>
	<IconButton
	className="nux-dot-tip__disable"
	icon="no-alt"
	label={ __( 'Disable tips' ) }
	onClick={ onDisable }
	/>

To Reproduce

import { PostPublishPanelToggle } from '@wordpress/editor';

...

render() {
	return <PostPublishPanelToggle />;
}

Related issue

A similar issue exist in edit-post's header component, where DotTip is nested inside of IconButton:

https://github.com/WordPress/gutenberg/blob/master/edit-post/components/header/index.js#L57-L68

[vindl]

cc @youknowriad @gziolo @aduth

[gziolo]

/cc @noisysocks

[aduth]

Previously: #6631 (comment)

[pento]

This issue (or, more broadly, the problem of using a <DotTip> inside a <Button>) is a blocker for making the dev environment more reliable.

It can currently be reproduced by running e2e tests with SCRIPT_DEBUG set to true. If you're not sure if your local environment is configured to reproduce it, you can rebuild it and test like so:

npm run env stop
rm -rf wordpress
unset LOCAL_SCRIPT_DEBUG
npm run build
npm run env install
npm run test-e2e