@automattic/vip-design-system 0.18.3-0 → 0.19.0

package/build/system/Dropdown/Dropdown.stories.js

@@ -153,17 +153,13 @@ var WithDialog = function WithDialog() {
 
   var _React$useState5 = _react["default"].useState(false),
       menuOpen = _React$useState5[0],
-      setMenuOpen = _React$useState5[1];
+      setMenuOpen = _React$useState5[1]; // eslint-disable-next-line react/prop-types
+
 
   var AreYouSureDialog = function AreYouSureDialog(_ref) {
     var onConfirm = _ref.onConfirm,
         props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
     return (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, props, {
-      contentProps: {
-        onCloseAutoFocus: function onCloseAutoFocus() {
-          onConfirm();
-        }
-      },
       content: (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [(0, _jsxRuntime.jsx)(_Button.Button, {
           variant: "secondary",
@@ -182,6 +178,7 @@ var WithDialog = function WithDialog() {
     children: [(0, _jsxRuntime.jsx)("p", {
       children: "This is an important example when combining the Dropdown component with the NewDialog component. In order to have the correct accessibility, there are some events you need to use. Use this example if you want to copy and paste the code."
     }), (0, _jsxRuntime.jsxs)(Dropdown.Root, {
+      modal: !alertOpen,
       open: menuOpen,
       onOpenChange: setMenuOpen,
       contentProps: {

package/build/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -5,6 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.NewConfirmationDialog = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,15 +19,8 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-/** @jsxImportSource theme-ui */
+var _excluded = ["trigger", "onConfirm", "needsConfirm", "label", "buttonVariant", "title", "body"];
 
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
 var NewConfirmationDialogContent = function NewConfirmationDialogContent(_ref) {
   var _ref$label = _ref.label,
       label = _ref$label === void 0 ? 'Confirm' : _ref$label,
@@ -79,11 +76,8 @@ var NewConfirmationDialog = function NewConfirmationDialog(_ref2) {
       buttonVariant = _ref2.buttonVariant,
       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];
+      body = _ref2$body === void 0 ? '' : _ref2$body,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
 
   var directTrigger = /*#__PURE__*/_react["default"].cloneElement(trigger, {
     onClick: onConfirm
@@ -93,25 +87,24 @@ var NewConfirmationDialog = function NewConfirmationDialog(_ref2) {
     return directTrigger;
   }
 
-  return (0, _jsxRuntime.jsx)(_.NewDialog.Root, {
-    open: open,
-    onOpenChange: setOpen,
+  return (0, _jsxRuntime.jsx)(_.NewDialog.Root, (0, _extends2["default"])({
     sx: {
       maxWidth: 680
     },
     title: title,
     description: body,
-    content: (0, _jsxRuntime.jsx)(NewConfirmationDialogContent, {
-      onClose: function onClose() {
-        return setOpen(false);
-      },
-      onConfirm: onConfirm,
-      body: body,
-      label: label,
-      buttonVariant: buttonVariant
-    }),
+    content: function content(_ref3) {
+      var onClose = _ref3.onClose;
+      return (0, _jsxRuntime.jsx)(NewConfirmationDialogContent, {
+        onClose: onClose,
+        onConfirm: onConfirm,
+        body: body,
+        label: label,
+        buttonVariant: buttonVariant
+      });
+    },
     trigger: trigger
-  });
+  }, props));
 };
 
 exports.NewConfirmationDialog = NewConfirmationDialog;

package/build/system/NewDialog/NewDialog.js

@@ -7,6 +7,8 @@ exports.NewDialog = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -25,19 +27,12 @@ var _DialogContent = require("./DialogContent");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["trigger", "description", "title", "content", "showHeading", "disabled", "style", "contentProps", "portalProps"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
 var NewDialog = function NewDialog(_ref) {
   var _ref$trigger = _ref.trigger,
       trigger = _ref$trigger === void 0 ? null : _ref$trigger,
@@ -54,20 +49,9 @@ var NewDialog = function NewDialog(_ref) {
       contentProps = _ref$contentProps === void 0 ? {} : _ref$contentProps,
       _ref$portalProps = _ref.portalProps,
       portalProps = _ref$portalProps === void 0 ? {} : _ref$portalProps,
-      _ref$defaultOpen = _ref.defaultOpen,
-      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
-      _ref$allowPinchZoom = _ref.allowPinchZoom,
-      allowPinchZoom = _ref$allowPinchZoom === void 0 ? false : _ref$allowPinchZoom,
-      _ref$onOpenChange = _ref.onOpenChange,
-      onOpenChange = _ref$onOpenChange === void 0 ? undefined : _ref$onOpenChange,
-      _ref$open = _ref.open,
-      open = _ref$open === void 0 ? undefined : _ref$open,
-      _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];
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+
+  var closeRef = _react["default"].useRef(null);
 
   if (disabled) {
     return;
@@ -76,24 +60,13 @@ var NewDialog = function NewDialog(_ref) {
 
   var isContentFunction = typeof content === 'function';
 
-  var handleOnOpenChange = function handleOnOpenChange(status) {
-    setIsOpen(status);
+  var onClose = function onClose() {
+    var _closeRef$current;
 
-    if (onOpenChange) {
-      onOpenChange(status);
-    }
+    closeRef == null ? void 0 : (_closeRef$current = closeRef.current) == null ? void 0 : _closeRef$current.click();
   };
 
-  _react["default"].useEffect(function () {
-    handleOnOpenChange(open);
-  }, [open]);
-
-  return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, {
-    id: id,
-    open: isOpen,
-    onOpenChange: handleOnOpenChange,
-    defaultOpen: defaultOpen,
-    allowPinchZoom: allowPinchZoom,
+  return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, (0, _extends2["default"])({}, props, {
     children: [trigger && (0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
       asChild: true,
       children: trigger
@@ -102,7 +75,9 @@ var NewDialog = function NewDialog(_ref) {
         className: "vip-dialog-component",
         sx: (0, _extends2["default"])({}, _DialogContent.contentStyles, extraStyles)
       }, contentProps, {
-        children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, {}), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
+        children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, {
+          ref: closeRef
+        }), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
           title: title,
           hidden: !showHeading
         }), (0, _jsxRuntime.jsx)(_DialogDescription.DialogDescription, {
@@ -111,14 +86,12 @@ var NewDialog = function NewDialog(_ref) {
         }), (0, _jsxRuntime.jsx)("div", {
           role: "document",
           children: isContentFunction ? content({
-            onClose: function onClose() {
-              return setIsOpen(false);
-            }
+            onClose: onClose
           }) : content
         })]
       }))]
     }))]
-  });
+  }));
 };
 
 exports.NewDialog = NewDialog;
@@ -133,12 +106,5 @@ NewDialog.propTypes = {
   // Content props in: https://www.radix-ui.com/docs/primitives/components/dialog#content
   contentProps: _propTypes["default"].any,
   // Portal props in: https://www.radix-ui.com/docs/primitives/components/dialog#portal
-  portalProps: _propTypes["default"].any,
-  // Radix DialogPrimitive.Root properties
-  // https://www.radix-ui.com/docs/primitives/components/dialog#root
-  id: _propTypes["default"].string,
-  open: _propTypes["default"].bool,
-  defaultOpen: _propTypes["default"].bool,
-  allowPinchZoom: _propTypes["default"].bool,
-  onOpenChange: _propTypes["default"].func
+  portalProps: _propTypes["default"].any
 };

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

@@ -225,7 +225,7 @@ var CustomStateManagement = function CustomStateManagement() {
       onOpenChange: function onOpenChange(status) {
         // eslint-disable-next-line no-console
         console.log('New status changed', status);
-        setOpen(!!open);
+        setOpen(!open);
       },
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"

package/build/system/Tooltip/Tooltip.js

@@ -35,7 +35,11 @@ var StyledArrow = function StyledArrow(props) {
 
 var Tooltip = function Tooltip(_ref) {
   var _ref$trigger = _ref.trigger,
-      trigger = _ref$trigger === void 0 ? (0, _jsxRuntime.jsx)(_md.MdHelp, {}) : _ref$trigger,
+      trigger = _ref$trigger === void 0 ? (0, _jsxRuntime.jsx)(_md.MdHelp, {
+    sx: {
+      fill: 'text'
+    }
+  }) : _ref$trigger,
       _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
       _ref$width = _ref.width,
@@ -67,7 +71,12 @@ var Tooltip = function Tooltip(_ref) {
           background: 'transparent',
           border: 'none',
           display: 'inline-flex',
-          outline: 'none',
+          '&:focus': function focus(theme) {
+            return theme.outline;
+          },
+          '&:focus-visible': function focusVisible(theme) {
+            return theme.outline;
+          },
           p: 0,
           m: 0
         },
@@ -75,12 +84,14 @@ var Tooltip = function Tooltip(_ref) {
           children: [(0, _jsxRuntime.jsx)(_.Card, (0, _extends2["default"])({
             className: "tooltip-content",
             sx: {
-              width: width
+              width: width,
+              background: 'dialog'
             }
           }, props, {
             children: children ? children : (0, _jsxRuntime.jsx)(_.Text, {
               sx: {
-                fontSize: 1
+                fontSize: 2,
+                color: 'text'
               },
               children: text
             })

package/build/system/Tooltip/Tooltip.stories.js

@@ -30,7 +30,8 @@ var Default = function Default() {
     }), (0, _jsxRuntime.jsx)(_.Tooltip, {
       children: (0, _jsxRuntime.jsxs)(_.Text, {
         sx: {
-          fontSize: 1
+          fontSize: 1,
+          color: 'text'
         },
         children: ["This is a tooltip that can be used to describe various pieces of functionality.", (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Link, {
           children: "Find out more \u2192"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.18.3-0",
+	"version": "0.19.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Dropdown/Dropdown.stories.jsx

@@ -117,20 +117,15 @@ export const WithDialog = () => {
 	const [ alertOpen, setAlertOpen ] = React.useState( false );
 	const [ menuOpen, setMenuOpen ] = React.useState( false );
 
+	// eslint-disable-next-line react/prop-types
 	const AreYouSureDialog = ( { onConfirm, ...props } ) => (
 		<NewDialog.Root
 			{ ...props }
-			contentProps={ {
-				onCloseAutoFocus: () => {
-					onConfirm();
-				},
-			} }
 			content={
 				<>
 					<Button variant="secondary" onClick={ () => onConfirm() }>
 						Custom Close.
 					</Button>
-
 					<p>Teste abc.</p>
 				</>
 			}
@@ -146,6 +141,7 @@ export const WithDialog = () => {
 			</p>
 
 			<Dropdown.Root
+				modal={ ! alertOpen }
 				open={ menuOpen }
 				onOpenChange={ setMenuOpen }
 				contentProps={ { sideOffset: 5 } }

package/src/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -56,8 +56,8 @@ const NewConfirmationDialog = ( {
 	buttonVariant,
 	title,
 	body = '',
+	...props
 } ) => {
-	const [ open, setOpen ] = React.useState( false );
 	const directTrigger = React.cloneElement( trigger, { onClick: onConfirm } );
 
 	if ( ! needsConfirm ) {
@@ -66,21 +66,20 @@ const NewConfirmationDialog = ( {
 
 	return (
 		<NewDialog.Root
-			open={ open }
-			onOpenChange={ setOpen }
 			sx={ { maxWidth: 680 } }
 			title={ title }
 			description={ body }
-			content={
+			content={ ( { onClose } ) => (
 				<NewConfirmationDialogContent
-					onClose={ () => setOpen( false ) }
+					onClose={ onClose }
 					onConfirm={ onConfirm }
 					body={ body }
 					label={ label }
 					buttonVariant={ buttonVariant }
 				/>
-			}
+			) }
 			trigger={ trigger }
+			{ ...props }
 		/>
 	);
 };

package/src/system/NewDialog/NewDialog.js

@@ -25,15 +25,9 @@ export const NewDialog = ( {
 	style: extraStyles,
 	contentProps = {},
 	portalProps = {},
-
-	// Radix Specific Properties
-	defaultOpen = false,
-	allowPinchZoom = false,
-	onOpenChange = undefined,
-	open = undefined,
-	id = undefined,
+	...props
 } ) => {
-	const [ isOpen, setIsOpen ] = React.useState( open || defaultOpen );
+	const closeRef = React.useRef( null );
 
 	if ( disabled ) {
 		return;
@@ -42,26 +36,12 @@ export const NewDialog = ( {
 	// if content is a function, pass in onClose
 	const isContentFunction = typeof content === 'function';
 
-	const handleOnOpenChange = status => {
-		setIsOpen( status );
-
-		if ( onOpenChange ) {
-			onOpenChange( status );
-		}
+	const onClose = () => {
+		closeRef?.current?.click();
 	};
 
-	React.useEffect( () => {
-		handleOnOpenChange( open );
-	}, [ open ] );
-
 	return (
-		<DialogPrimitive.Root
-			id={ id }
-			open={ isOpen }
-			onOpenChange={ handleOnOpenChange }
-			defaultOpen={ defaultOpen }
-			allowPinchZoom={ allowPinchZoom }
-		>
+		<DialogPrimitive.Root { ...props }>
 			{ trigger && <DialogPrimitive.Trigger asChild>{ trigger }</DialogPrimitive.Trigger> }
 
 			<DialogPrimitive.Portal { ...portalProps }>
@@ -72,13 +52,11 @@ export const NewDialog = ( {
 					sx={ { ...contentStyles, ...extraStyles } }
 					{ ...contentProps }
 				>
-					<DialogClose />
+					<DialogClose ref={ closeRef } />
 					<DialogTitle title={ title } hidden={ ! showHeading } />
 					<DialogDescription description={ description } hidden={ ! showHeading } />
 
-					<div role="document">
-						{ isContentFunction ? content( { onClose: () => setIsOpen( false ) } ) : content }
-					</div>
+					<div role="document">{ isContentFunction ? content( { onClose } ) : content }</div>
 				</DialogPrimitive.Content>
 			</DialogPrimitive.Portal>
 		</DialogPrimitive.Root>
@@ -99,12 +77,4 @@ NewDialog.propTypes = {
 
 	// Portal props in: https://www.radix-ui.com/docs/primitives/components/dialog#portal
 	portalProps: PropTypes.any,
-
-	// Radix DialogPrimitive.Root properties
-	// https://www.radix-ui.com/docs/primitives/components/dialog#root
-	id: PropTypes.string,
-	open: PropTypes.bool,
-	defaultOpen: PropTypes.bool,
-	allowPinchZoom: PropTypes.bool,
-	onOpenChange: PropTypes.func,
 };

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

@@ -155,7 +155,7 @@ export const CustomStateManagement = () => {
 					// eslint-disable-next-line no-console
 					console.log( 'New status changed', status );
 
-					setOpen( !! open );
+					setOpen( ! open );
 				} }
 				trigger={ <Button>Trigger Dialog</Button> }
 				content={

package/src/system/Tooltip/Tooltip.js

@@ -15,7 +15,7 @@ import { Card, Text } from '..';
 const StyledArrow = props => <TooltipPrimitive.Arrow sx={ { fill: 'white' } } { ...props } />;
 
 const Tooltip = ( {
-	trigger = <MdHelp />,
+	trigger = <MdHelp sx={ { fill: 'text' } } />,
 	text = '',
 	width = 200,
 	children,
@@ -48,7 +48,8 @@ const Tooltip = ( {
 						background: 'transparent',
 						border: 'none',
 						display: 'inline-flex',
-						outline: 'none',
+						'&:focus': theme => theme.outline,
+						'&:focus-visible': theme => theme.outline,
 						p: 0,
 						m: 0,
 					} }
@@ -56,8 +57,8 @@ const Tooltip = ( {
 					{ trigger }
 
 					<TooltipPrimitive.Content>
-						<Card className="tooltip-content" sx={ { width: width } } { ...props }>
-							{ children ? children : <Text sx={ { fontSize: 1 } }>{ text }</Text> }
+						<Card className="tooltip-content" sx={ { width, background: 'dialog' } } { ...props }>
+							{ children ? children : <Text sx={ { fontSize: 2, color: 'text' } }>{ text }</Text> }
 						</Card>
 						<StyledArrow />
 					</TooltipPrimitive.Content>

package/src/system/Tooltip/Tooltip.stories.jsx

@@ -12,7 +12,7 @@ export const Default = () => (
 	<Flex sx={ { alignItems: 'center' } }>
 		<Heading sx={ { mb: 0, mr: 2 } }>My Section Heading</Heading>
 		<Tooltip>
-			<Text sx={ { fontSize: 1 } }>
+			<Text sx={ { fontSize: 1, color: 'text' } }>
 				This is a tooltip that can be used to describe various pieces of functionality.
 				<br />
 				<Link>Find out more &rarr;</Link>