Merge pull request #84 from Automattic/add/toggle-hover-dialog-document

Add/toggle hover dialog document

Author: djalmaaraujo

src/system/Form/Toggle.js

@@ -23,6 +23,7 @@ export const Toggle = ( {
 		className={ classNames( 'vip-toggle-component', className ) }
 		sx={ {
 			all: 'unset',
+			cursor: 'pointer',
 			position: 'relative',
 			width: 40,
 			height: 20,

src/system/NewDialog/NewDialog.js

@@ -56,7 +56,7 @@ export const NewDialog = ( {
 					<DialogTitle title={ title } hidden={ ! showHeading } />
 					<DialogDescription description={ description } hidden={ ! showHeading } />
 
-					{ content }
+					<div role="document">{ content }</div>
 				</DialogPrimitive.Content>
 			</DialogPrimitive.Portal>
 		</DialogPrimitive.Root>

src/system/NewDialog/NewDialog.stories.jsx

@@ -61,6 +61,10 @@ export const HiddenHeadings = () => (
 						<Input type="text" name="username" id="username" />
 						<Button type="submit">Submit</Button>
 					</form>
+
+					<h3>Continue here</h3>
+
+					<p>This is an example.</p>
 				</div>
 			}
 		/>