@automattic/vip-design-system 0.16.0 → 0.18.0

package/.storybook/main.js

@@ -6,5 +6,6 @@ module.exports = {
 		'@storybook/addon-essentials',
 		'@storybook/addon-links',
 		'@storybook/addon-controls',
+		'@storybook/addon-storysource',
 	],
 };

package/build/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.NewConfirmationDialog = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var NewConfirmationDialogContent = function NewConfirmationDialogContent(_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Confirm' : _ref$label,
+      onConfirm = _ref.onConfirm,
+      onClose = _ref.onClose,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className;
+  return (0, _jsxRuntime.jsx)(_.Box, {
+    className: (0, _classnames["default"])('vip-confirmation-dialog-component', className),
+    children: (0, _jsxRuntime.jsxs)(_.Flex, {
+      sx: {
+        justifyContent: 'flex-end',
+        mt: 4
+      },
+      children: [(0, _jsxRuntime.jsx)(_.Button, {
+        variant: "secondary",
+        sx: {
+          mr: 2
+        },
+        onClick: onClose,
+        children: "Cancel"
+      }), (0, _jsxRuntime.jsx)(_.NewDialog.Close, {
+        children: (0, _jsxRuntime.jsx)(_.Button, {
+          variant: "danger",
+          onClick: function onClick() {
+            onConfirm();
+            onClose();
+          },
+          children: label
+        })
+      })]
+    })
+  });
+};
+
+NewConfirmationDialogContent.propTypes = {
+  body: _propTypes["default"].node,
+  label: _propTypes["default"].string,
+  onClose: _propTypes["default"].func,
+  onConfirm: _propTypes["default"].func,
+  className: _propTypes["default"].any
+};
+
+var NewConfirmationDialog = function NewConfirmationDialog(_ref2) {
+  var trigger = _ref2.trigger,
+      onConfirm = _ref2.onConfirm,
+      _ref2$needsConfirm = _ref2.needsConfirm,
+      needsConfirm = _ref2$needsConfirm === void 0 ? true : _ref2$needsConfirm,
+      label = _ref2.label,
+      title = _ref2.title,
+      _ref2$body = _ref2.body,
+      body = _ref2$body === void 0 ? '' : _ref2$body;
+
+  var _React$useState = _react["default"].useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  var directTrigger = /*#__PURE__*/_react["default"].cloneElement(trigger, {
+    onClick: onConfirm
+  });
+
+  if (!needsConfirm) {
+    return directTrigger;
+  }
+
+  return (0, _jsxRuntime.jsx)(_.NewDialog.Root, {
+    open: open,
+    onOpenChange: setOpen,
+    sx: {
+      maxWidth: 680
+    },
+    title: title,
+    description: body,
+    content: (0, _jsxRuntime.jsx)(NewConfirmationDialogContent, {
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      onConfirm: onConfirm,
+      body: body,
+      label: label
+    }),
+    trigger: trigger
+  });
+};
+
+exports.NewConfirmationDialog = NewConfirmationDialog;
+NewConfirmationDialog.propTypes = {
+  needsConfirm: _propTypes["default"].bool,
+  trigger: _propTypes["default"].node,
+  onConfirm: _propTypes["default"].func,
+  title: _propTypes["default"].node.isRequired,
+  body: _propTypes["default"].node,
+  label: _propTypes["default"].node
+};

package/build/system/NewConfirmationDialog/NewConfirmationDialog.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'NewConfirmationDialog',
+  component: _.NewConfirmationDialog
+};
+exports["default"] = _default;
+var ConfirmationTrigger = (0, _jsxRuntime.jsx)(_.Button, {
+  sx: {
+    mr: 3
+  },
+  children: "Click to answer"
+});
+
+var Default = function Default() {
+  var _React$useState = _react["default"].useState('🤔'),
+      answer = _React$useState[0],
+      setAnswer = _React$useState[1];
+
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    children: [(0, _jsxRuntime.jsx)("p", {
+      children: "Confirm that your name is John doe?"
+    }), (0, _jsxRuntime.jsx)(_.NewConfirmationDialog, {
+      title: 'Are you John Doe?',
+      description: 'Please confirm that your name is John Doe.',
+      trigger: ConfirmationTrigger,
+      body: "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind.",
+      onConfirm: function onConfirm() {
+        return setAnswer('👍');
+      },
+      needsConfirm: true
+    }), (0, _jsxRuntime.jsxs)("p", {
+      children: ["Answer: ", answer]
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/NewConfirmationDialog/NewConfirmationDialog.test.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _NewConfirmationDialog = require("./NewConfirmationDialog");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var defaultProps = {
+  needsConfirm: true,
+  title: 'My Custom Title',
+  body: 'My Custom Text',
+  label: 'Submit this!',
+  trigger: (0, _jsxRuntime.jsx)("button", {
+    children: "Trigger"
+  })
+};
+
+var getButton = function getButton() {
+  return _react.screen.getByText('Trigger');
+};
+
+var getConfirmButton = function getConfirmButton() {
+  return _react.screen.getByText(defaultProps.label);
+};
+
+var getTitle = function getTitle() {
+  return _react.screen.getByRole('heading', {
+    level: 2
+  });
+};
+
+describe('<NewConfirmationDialog />', function () {
+  it('renders the NewConfirmationDialog component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_NewConfirmationDialog.NewConfirmationDialog, (0, _extends2["default"])({}, defaultProps))), container = _render.container;
+            expect(getButton()).toBeInTheDocument();
+
+            _react.fireEvent.click(getButton());
+
+            expect(getTitle()).toHaveTextContent(defaultProps.title);
+            expect(getConfirmButton()).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 8;
+            return (0, _jestAxe.axe)(container);
+
+          case 8:
+            _context.t1 = _context.sent;
+            _context.next = 11;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/build/system/NewConfirmationDialog/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _NewConfirmationDialog = require("./NewConfirmationDialog");
+
+exports.NewConfirmationDialog = _NewConfirmationDialog.NewConfirmationDialog;

package/build/system/NewDialog/DialogDescription.js

@@ -43,7 +43,8 @@ var DialogDescription = /*#__PURE__*/_react["default"].forwardRef(function (_ref
   return (0, _jsxRuntime.jsx)(DialogPrimitive.Description, (0, _extends2["default"])({}, rest, {
     ref: forwardedRef,
     sx: {
-      margin: 0
+      margin: 0,
+      color: 'text'
     },
     children: text
   }));
@@ -52,6 +53,6 @@ var DialogDescription = /*#__PURE__*/_react["default"].forwardRef(function (_ref
 exports.DialogDescription = DialogDescription;
 DialogDescription.displayName = 'DialogDescription';
 DialogDescription.propTypes = {
-  description: _propTypes["default"].string,
+  description: _propTypes["default"].node,
   hidden: _propTypes["default"].bool
 };

package/build/system/NewDialog/DialogTitle.js

@@ -40,7 +40,9 @@ var DialogTitle = function DialogTitle(_ref) {
 
   return (0, _jsxRuntime.jsx)(DialogPrimitive.Title, {
     sx: {
-      margin: 0
+      margin: 0,
+      fontSize: 3,
+      fontWeight: 500
     },
     children: titleNode
   });
@@ -48,6 +50,6 @@ var DialogTitle = function DialogTitle(_ref) {
 
 exports.DialogTitle = DialogTitle;
 DialogTitle.propTypes = {
-  title: _propTypes["default"].string,
+  title: _propTypes["default"].node,
   hidden: _propTypes["default"].bool
 };

package/build/system/NewDialog/NewDialog.js

@@ -7,6 +7,8 @@ exports.NewDialog = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
@@ -59,14 +61,33 @@ var NewDialog = function NewDialog(_ref) {
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? undefined : _ref$id;
 
+  var _React$useState = _react["default"].useState(open || defaultOpen),
+      isOpen = _React$useState[0],
+      setIsOpen = _React$useState[1];
+
   if (disabled) {
     return;
-  }
+  } // if content is a function, pass in onClose
+
+
+  var isContentFunction = typeof content === 'function';
+
+  var handleOnOpenChange = function handleOnOpenChange(status) {
+    setIsOpen(status);
+
+    if (onOpenChange) {
+      onOpenChange(status);
+    }
+  };
+
+  _react["default"].useEffect(function () {
+    handleOnOpenChange(open);
+  }, [open]);
 
   return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, {
     id: id,
-    open: open,
-    onOpenChange: onOpenChange,
+    open: isOpen,
+    onOpenChange: handleOnOpenChange,
     defaultOpen: defaultOpen,
     allowPinchZoom: allowPinchZoom,
     children: [trigger && (0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
@@ -84,7 +105,11 @@ var NewDialog = function NewDialog(_ref) {
           hidden: !showHeading
         }), (0, _jsxRuntime.jsx)("div", {
           role: "document",
-          children: content
+          children: isContentFunction ? content({
+            onClose: function onClose() {
+              return setIsOpen(false);
+            }
+          }) : content
         })]
       })]
     })]
@@ -94,9 +119,9 @@ var NewDialog = function NewDialog(_ref) {
 exports.NewDialog = NewDialog;
 NewDialog.propTypes = {
   trigger: _propTypes["default"].node.isRequired,
-  title: _propTypes["default"].string.isRequired,
-  description: _propTypes["default"].string.isRequired,
-  content: _propTypes["default"].node,
+  title: _propTypes["default"].node.isRequired,
+  description: _propTypes["default"].node.isRequired,
+  content: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   showHeading: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
   style: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),

package/build/system/NewDialog/NewDialog.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.CustomStateManagement = exports.CustomClose = exports.AutoOpen = void 0;
+exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.CustomStateManagement = exports.CustomOnClose = exports.CustomClose = exports.AutoOpen = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -222,20 +222,56 @@ var CustomStateManagement = function CustomStateManagement() {
       }), " attribute."]
     }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       open: open,
-      onOpenChange: setOpen,
+      onOpenChange: function onOpenChange(status) {
+        // eslint-disable-next-line no-console
+        console.log('New status changed', status);
+        setOpen(!!open);
+      },
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"
       }),
       content: (0, _jsxRuntime.jsx)("div", {
-        children: (0, _jsxRuntime.jsx)(_system.Button, {
-          onClick: function onClick() {
-            return setOpen(false);
-          },
-          children: "Close here instead"
+        sx: {
+          mt: 2
+        },
+        children: (0, _jsxRuntime.jsx)(NewDialog.Close, {
+          children: (0, _jsxRuntime.jsx)(_system.Button, {
+            children: "Close here instead"
+          })
         })
       })
     }))]
   });
 };
 
-exports.CustomStateManagement = CustomStateManagement;
+exports.CustomStateManagement = CustomStateManagement;
+
+var CustomOnClose = function CustomOnClose() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "This example shows how you can use the content as a function to use the onClose method (same behavior as the original Dialog component)."
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      content: function content(_ref) {
+        var onClose = _ref.onClose;
+        return (0, _jsxRuntime.jsx)("div", {
+          sx: {
+            mt: 2
+          },
+          children: (0, _jsxRuntime.jsx)(_system.Button, {
+            onClick: onClose,
+            children: "Close here instead"
+          })
+        });
+      }
+    }))]
+  });
+};
+
+exports.CustomOnClose = CustomOnClose;

package/build/system/index.js

@@ -51,6 +51,10 @@ var _ConfirmationDialog = require("./ConfirmationDialog");
 
 exports.ConfirmationDialog = _ConfirmationDialog.ConfirmationDialog;
 
+var _NewConfirmationDialog = require("./NewConfirmationDialog");
+
+exports.NewConfirmationDialog = _NewConfirmationDialog.NewConfirmationDialog;
+
 var _Flex = require("./Flex");
 
 exports.Flex = _Flex.Flex;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.16.0",
+	"version": "0.18.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -25,6 +25,7 @@
 		"@radix-ui/react-switch": "^0.1.5",
 		"@radix-ui/react-tooltip": "^0.1.7",
 		"@radix-ui/react-visually-hidden": "^0.1.4",
+		"@storybook/addon-storysource": "^6.5.10",
 		"babel-loader": "^8.2.2",
 		"classnames": "^2.3.1",
 		"framer-motion": "^3.9.1",

package/src/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -0,0 +1,93 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { NewDialog, Box, Flex, Button } from '..';
+
+const NewConfirmationDialogContent = ( {
+	label = 'Confirm',
+	onConfirm,
+	onClose,
+	className = null,
+} ) => (
+	<Box className={ classNames( 'vip-confirmation-dialog-component', className ) }>
+		<Flex sx={ { justifyContent: 'flex-end', mt: 4 } }>
+			<Button variant="secondary" sx={ { mr: 2 } } onClick={ onClose }>
+				Cancel
+			</Button>
+			<NewDialog.Close>
+				<Button
+					variant="danger"
+					onClick={ () => {
+						onConfirm();
+						onClose();
+					} }
+				>
+					{ label }
+				</Button>
+			</NewDialog.Close>
+		</Flex>
+	</Box>
+);
+
+NewConfirmationDialogContent.propTypes = {
+	body: PropTypes.node,
+	label: PropTypes.string,
+	onClose: PropTypes.func,
+	onConfirm: PropTypes.func,
+	className: PropTypes.any,
+};
+
+const NewConfirmationDialog = ( {
+	trigger,
+	onConfirm,
+	needsConfirm = true,
+	label,
+	title,
+	body = '',
+} ) => {
+	const [ open, setOpen ] = React.useState( false );
+	const directTrigger = React.cloneElement( trigger, { onClick: onConfirm } );
+
+	if ( ! needsConfirm ) {
+		return directTrigger;
+	}
+
+	return (
+		<NewDialog.Root
+			open={ open }
+			onOpenChange={ setOpen }
+			sx={ { maxWidth: 680 } }
+			title={ title }
+			description={ body }
+			content={
+				<NewConfirmationDialogContent
+					onClose={ () => setOpen( false ) }
+					onConfirm={ onConfirm }
+					body={ body }
+					label={ label }
+				/>
+			}
+			trigger={ trigger }
+		/>
+	);
+};
+
+NewConfirmationDialog.propTypes = {
+	needsConfirm: PropTypes.bool,
+	trigger: PropTypes.node,
+	onConfirm: PropTypes.func,
+	title: PropTypes.node.isRequired,
+	body: PropTypes.node,
+	label: PropTypes.node,
+};
+
+export { NewConfirmationDialog };

package/src/system/NewConfirmationDialog/NewConfirmationDialog.stories.jsx

@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import React from 'react';
+import { Box, NewConfirmationDialog, Button } from '..';
+
+export default {
+	title: 'NewConfirmationDialog',
+	component: NewConfirmationDialog,
+};
+
+const ConfirmationTrigger = <Button sx={ { mr: 3 } }>Click to answer</Button>;
+
+export const Default = () => {
+	const [ answer, setAnswer ] = React.useState( '🤔' );
+	return (
+		<Box>
+			<p>Confirm that your name is John doe?</p>
+			<NewConfirmationDialog
+				title={ 'Are you John Doe?' }
+				description={ 'Please confirm that your name is John Doe.' }
+				trigger={ ConfirmationTrigger }
+				body="A modal is used to perform more detailed actions that don&lsquo;t necessarily need the context
+					behind."
+				onConfirm={ () => setAnswer( '👍' ) }
+				needsConfirm={ true }
+			/>
+
+			<p>Answer: { answer }</p>
+		</Box>
+	);
+};

package/src/system/NewConfirmationDialog/NewConfirmationDialog.test.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { NewConfirmationDialog } from './NewConfirmationDialog';
+
+const defaultProps = {
+	needsConfirm: true,
+	title: 'My Custom Title',
+	body: 'My Custom Text',
+	label: 'Submit this!',
+	trigger: <button>Trigger</button>,
+};
+
+const getButton = () => screen.getByText( 'Trigger' );
+const getConfirmButton = () => screen.getByText( defaultProps.label );
+const getTitle = () => screen.getByRole( 'heading', { level: 2 } );
+
+describe( '<NewConfirmationDialog />', () => {
+	it( 'renders the NewConfirmationDialog component', async () => {
+		const { container } = render( <NewConfirmationDialog { ...defaultProps } /> );
+
+		expect( getButton() ).toBeInTheDocument();
+
+		fireEvent.click( getButton() );
+
+		expect( getTitle() ).toHaveTextContent( defaultProps.title );
+
+		expect( getConfirmButton() ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/NewConfirmationDialog/index.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { NewConfirmationDialog } from './NewConfirmationDialog';
+
+export { NewConfirmationDialog };

package/src/system/NewDialog/DialogDescription.js

@@ -21,7 +21,11 @@ export const DialogDescription = React.forwardRef(
 		}
 
 		return (
-			<DialogPrimitive.Description { ...rest } ref={ forwardedRef } sx={ { margin: 0 } }>
+			<DialogPrimitive.Description
+				{ ...rest }
+				ref={ forwardedRef }
+				sx={ { margin: 0, color: 'text' } }
+			>
 				{ text }
 			</DialogPrimitive.Description>
 		);
@@ -31,6 +35,6 @@ export const DialogDescription = React.forwardRef(
 DialogDescription.displayName = 'DialogDescription';
 
 DialogDescription.propTypes = {
-	description: PropTypes.string,
+	description: PropTypes.node,
 	hidden: PropTypes.bool,
 };

package/src/system/NewDialog/DialogTitle.js

@@ -18,10 +18,14 @@ export const DialogTitle = ( { title, hidden = false } ) => {
 		titleNode = <ScreenReaderText>{ titleNode }</ScreenReaderText>;
 	}
 
-	return <DialogPrimitive.Title sx={ { margin: 0 } }>{ titleNode }</DialogPrimitive.Title>;
+	return (
+		<DialogPrimitive.Title sx={ { margin: 0, fontSize: 3, fontWeight: 500 } }>
+			{ titleNode }
+		</DialogPrimitive.Title>
+	);
 };
 
 DialogTitle.propTypes = {
-	title: PropTypes.string,
+	title: PropTypes.node,
 	hidden: PropTypes.bool,
 };

package/src/system/NewDialog/NewDialog.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 /**
@@ -30,15 +31,32 @@ export const NewDialog = ( {
 	open = undefined,
 	id = undefined,
 } ) => {
+	const [ isOpen, setIsOpen ] = React.useState( open || defaultOpen );
+
 	if ( disabled ) {
 		return;
 	}
 
+	// if content is a function, pass in onClose
+	const isContentFunction = typeof content === 'function';
+
+	const handleOnOpenChange = status => {
+		setIsOpen( status );
+
+		if ( onOpenChange ) {
+			onOpenChange( status );
+		}
+	};
+
+	React.useEffect( () => {
+		handleOnOpenChange( open );
+	}, [ open ] );
+
 	return (
 		<DialogPrimitive.Root
 			id={ id }
-			open={ open }
-			onOpenChange={ onOpenChange }
+			open={ isOpen }
+			onOpenChange={ handleOnOpenChange }
 			defaultOpen={ defaultOpen }
 			allowPinchZoom={ allowPinchZoom }
 		>
@@ -55,7 +73,9 @@ export const NewDialog = ( {
 					<DialogTitle title={ title } hidden={ ! showHeading } />
 					<DialogDescription description={ description } hidden={ ! showHeading } />
 
-					<div role="document">{ content }</div>
+					<div role="document">
+						{ isContentFunction ? content( { onClose: () => setIsOpen( false ) } ) : content }
+					</div>
 				</DialogPrimitive.Content>
 			</DialogPrimitive.Portal>
 		</DialogPrimitive.Root>
@@ -64,9 +84,9 @@ export const NewDialog = ( {
 
 NewDialog.propTypes = {
 	trigger: PropTypes.node.isRequired,
-	title: PropTypes.string.isRequired,
-	description: PropTypes.string.isRequired,
-	content: PropTypes.node,
+	title: PropTypes.node.isRequired,
+	description: PropTypes.node.isRequired,
+	content: PropTypes.oneOfType( [ PropTypes.node, PropTypes.func ] ),
 	showHeading: PropTypes.bool,
 	disabled: PropTypes.bool,
 	style: PropTypes.oneOfType( [ PropTypes.object, PropTypes.func ] ),

package/src/system/NewDialog/NewDialog.stories.jsx

@@ -89,6 +89,7 @@ export const HiddenHeadings = () => (
 		/>
 	</>
 );
+
 export const CustomStyling = () => (
 	<>
 		<Text sx={ { fontSize: 3, mb: 3 } }>Custom Styling on Dialog Content</Text>
@@ -136,6 +137,7 @@ export const CustomClose = () => (
 		/>
 	</>
 );
+
 export const CustomStateManagement = () => {
 	const [ open, setOpen ] = useState( false );
 	return (
@@ -149,14 +151,42 @@ export const CustomStateManagement = () => {
 			<NewDialog.Root
 				{ ...defaultProps }
 				open={ open }
-				onOpenChange={ setOpen }
+				onOpenChange={ status => {
+					// eslint-disable-next-line no-console
+					console.log( 'New status changed', status );
+
+					setOpen( !! open );
+				} }
 				trigger={ <Button>Trigger Dialog</Button> }
 				content={
-					<div>
-						<Button onClick={ () => setOpen( false ) }>Close here instead</Button>
+					<div sx={ { mt: 2 } }>
+						<NewDialog.Close>
+							<Button>Close here instead</Button>
+						</NewDialog.Close>
 					</div>
 				}
 			/>
 		</>
 	);
 };
+
+export const CustomOnClose = () => {
+	return (
+		<>
+			<Text sx={ { fontSize: 3, mb: 3 } }>
+				This example shows how you can use the content as a function to use the onClose method (same
+				behavior as the original Dialog component).
+			</Text>
+
+			<NewDialog.Root
+				{ ...defaultProps }
+				trigger={ <Button>Trigger Dialog</Button> }
+				content={ ( { onClose } ) => (
+					<div sx={ { mt: 2 } }>
+						<Button onClick={ onClose }>Close here instead</Button>
+					</div>
+				) }
+			/>
+		</>
+	);
+};

package/src/system/index.js

@@ -20,6 +20,7 @@ import {
 
 import * as NewDialog from './NewDialog';
 import { ConfirmationDialog } from './ConfirmationDialog';
+import { NewConfirmationDialog } from './NewConfirmationDialog';
 import { Flex } from './Flex';
 import {
 	Input,
@@ -70,6 +71,7 @@ export {
 	DialogContent,
 	DialogTrigger,
 	ConfirmationDialog,
+	NewConfirmationDialog,
 	Grid,
 	Flex,
 	Notice,