@automattic/vip-design-system 0.18.2-0 → 0.18.5-0

package/build/system/Dropdown/Dropdown.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.DropdownTrigger = exports.DropdownSubTrigger = exports.DropdownSubContent = exports.DropdownSub = exports.DropdownSeparator = exports.DropdownRadioGroup = exports.DropdownLabel = exports.DropdownItemIndicator = exports.Dropdown = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
@@ -48,7 +50,21 @@ exports.DropdownSubContent = DropdownSubContent;
 
 var Dropdown = function Dropdown(_ref) {
   var trigger = _ref.trigger,
-      children = _ref.children;
+      children = _ref.children,
+      _ref$open = _ref.open,
+      open = _ref$open === void 0 ? undefined : _ref$open,
+      _ref$defaultOpen = _ref.defaultOpen,
+      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+      _ref$onOpenChange = _ref.onOpenChange,
+      onOpenChange = _ref$onOpenChange === void 0 ? undefined : _ref$onOpenChange,
+      _ref$modal = _ref.modal,
+      modal = _ref$modal === void 0 ? true : _ref$modal,
+      _ref$dir = _ref.dir,
+      dir = _ref$dir === void 0 ? 'ltr' : _ref$dir,
+      _ref$contentProps = _ref.contentProps,
+      contentProps = _ref$contentProps === void 0 ? {} : _ref$contentProps,
+      _ref$portalProps = _ref.portalProps,
+      portalProps = _ref$portalProps === void 0 ? {} : _ref$portalProps;
 
   var firstChild = _react["default"].useMemo(function () {
     var _React$Children$only, _React$Children$only$;
@@ -57,23 +73,39 @@ var Dropdown = function Dropdown(_ref) {
   }, [children]);
 
   return (0, _jsxRuntime.jsxs)(DropdownMenu, {
+    open: open,
+    defaultOpen: defaultOpen,
+    onOpenChange: onOpenChange,
+    modal: modal,
+    dir: dir,
     children: [(0, _jsxRuntime.jsx)(DropdownTrigger, {
       asChild: true,
       children: trigger
-    }), (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.Portal, {
-      children: firstChild === 'DropdownContent' ? children : (0, _jsxRuntime.jsxs)(_DropdownContent.DropdownContent, {
+    }), (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.Portal, (0, _extends2["default"])({}, portalProps, {
+      children: firstChild === 'DropdownContent' ? children : (0, _jsxRuntime.jsxs)(_DropdownContent.DropdownContent, (0, _extends2["default"])({}, contentProps, {
         children: [children, (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.Arrow, {
           sx: {
-            fill: 'white'
+            fill: 'background',
+            boxShadow: 'high'
           }
         })]
-      })
-    })]
+      }))
+    }))]
   });
 };
 
 exports.Dropdown = Dropdown;
 Dropdown.propTypes = {
   trigger: _propTypes["default"].node.isRequired,
-  children: _propTypes["default"].node.isRequired
+  children: _propTypes["default"].node.isRequired,
+  // Props in root: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#root
+  open: _propTypes["default"].bool,
+  defaultOpen: _propTypes["default"].bool,
+  onOpenChange: _propTypes["default"].func,
+  modal: _propTypes["default"].bool,
+  dir: _propTypes["default"].string,
+  // Content props in: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#content
+  contentProps: _propTypes["default"].any,
+  // Portal props in: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#portal
+  portalProps: _propTypes["default"].any
 }; // Exports

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

@@ -3,7 +3,11 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.WithDialogState = exports.Default = exports.ComplexOptions = void 0;
+exports["default"] = exports.WithDialog = exports.Default = exports.ComplexOptions = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,24 +17,16 @@ var Dropdown = _interopRequireWildcard(require("."));
 
 var _Button = require("../Button");
 
-var _NewConfirmationDialog = require("../NewConfirmationDialog");
+var NewDialog = _interopRequireWildcard(require("../NewDialog"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["onConfirm"];
+
 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 _default = {
   title: 'Dropdown',
   component: Dropdown.Root
@@ -150,7 +146,7 @@ var ComplexOptions = function ComplexOptions() {
 
 exports.ComplexOptions = ComplexOptions;
 
-var WithDialogState = function WithDialogState() {
+var WithDialog = function WithDialog() {
   var _React$useState4 = _react["default"].useState(false),
       alertOpen = _React$useState4[0],
       setAlertOpen = _React$useState4[1];
@@ -159,43 +155,57 @@ var WithDialogState = function WithDialogState() {
       menuOpen = _React$useState5[0],
       setMenuOpen = _React$useState5[1];
 
-  var triggerRef = _react["default"].useRef();
+  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, {
+      content: (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [(0, _jsxRuntime.jsx)(_Button.Button, {
+          variant: "secondary",
+          onClick: function onClick() {
+            return onConfirm();
+          },
+          children: "Custom Close."
+        }), (0, _jsxRuntime.jsx)("p", {
+          children: "Teste abc."
+        })]
+      })
+    }));
+  };
 
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  return (0, _jsxRuntime.jsxs)("div", {
     children: [(0, _jsxRuntime.jsx)("p", {
-      children: "In this example, you can see how to trigger a Dialog from the Dropdown and still keep the focus back to the dropdown once the Dialog is closed. This example is important to keep accessibility."
-    }), (0, _jsxRuntime.jsx)(Dropdown.Root, {
+      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: {
+        sideOffset: 5
+      },
       trigger: (0, _jsxRuntime.jsx)(_Button.Button, {
-        ref: triggerRef,
         children: "Open"
       }),
-      children: (0, _jsxRuntime.jsxs)(Dropdown.Content, {
-        hidden: alertOpen,
-        children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
-          children: "Copy"
-        }), (0, _jsxRuntime.jsx)(_NewConfirmationDialog.NewConfirmationDialog, {
-          title: 'Are you sure?',
-          description: 'Please confirm that',
-          body: "Bla bleh.",
-          needsConfirm: true,
-          open: alertOpen,
-          onOpenChange: setAlertOpen,
-          onConfirm: function onConfirm() {
-            setMenuOpen(false);
-            triggerRef.current.focus();
+      children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
+        children: "I don't do anything"
+      }), (0, _jsxRuntime.jsx)(AreYouSureDialog, {
+        title: "Are you in the jungle?",
+        description: "sha-n-n-n-n-n-n-n-n knees, knees",
+        open: alertOpen,
+        onOpenChange: setAlertOpen,
+        onConfirm: function onConfirm() {
+          setAlertOpen(false);
+          setMenuOpen(false);
+        },
+        trigger: (0, _jsxRuntime.jsx)(Dropdown.Item, {
+          onSelect: function onSelect(event) {
+            return event.preventDefault();
           },
-          trigger: (0, _jsxRuntime.jsx)(Dropdown.Item, {
-            onSelect: function onSelect(event) {
-              return event.preventDefault();
-            },
-            children: "Click here"
-          })
-        })]
-      })
+          children: "Open Dialog"
+        })
+      })]
     })]
   });
 };
 
-exports.WithDialogState = WithDialogState;
+exports.WithDialog = WithDialog;

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,18 +19,13 @@ 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,
+      _ref$buttonVariant = _ref.buttonVariant,
+      buttonVariant = _ref$buttonVariant === void 0 ? 'danger' : _ref$buttonVariant,
       onConfirm = _ref.onConfirm,
       onClose = _ref.onClose,
       _ref$className = _ref.className,
@@ -47,7 +46,7 @@ var NewConfirmationDialogContent = function NewConfirmationDialogContent(_ref) {
         children: "Cancel"
       }), (0, _jsxRuntime.jsx)(_.NewDialog.Close, {
         children: (0, _jsxRuntime.jsx)(_.Button, {
-          variant: "danger",
+          variant: buttonVariant,
           onClick: function onClick() {
             onConfirm();
             onClose();
@@ -62,6 +61,7 @@ var NewConfirmationDialogContent = function NewConfirmationDialogContent(_ref) {
 NewConfirmationDialogContent.propTypes = {
   body: _propTypes["default"].node,
   label: _propTypes["default"].string,
+  buttonVariant: _propTypes["default"].string,
   onClose: _propTypes["default"].func,
   onConfirm: _propTypes["default"].func,
   className: _propTypes["default"].any
@@ -73,13 +73,11 @@ var NewConfirmationDialog = function NewConfirmationDialog(_ref2) {
       _ref2$needsConfirm = _ref2.needsConfirm,
       needsConfirm = _ref2$needsConfirm === void 0 ? true : _ref2$needsConfirm,
       label = _ref2.label,
+      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
@@ -89,24 +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
-    }),
+    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;
@@ -116,5 +114,6 @@ NewConfirmationDialog.propTypes = {
   onConfirm: _propTypes["default"].func,
   title: _propTypes["default"].node.isRequired,
   body: _propTypes["default"].node,
-  label: _propTypes["default"].node
+  label: _propTypes["default"].node,
+  buttonVariant: _propTypes["default"].string
 };

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

@@ -36,6 +36,7 @@ var Default = function Default() {
       children: "Confirm that your name is John doe?"
     }), (0, _jsxRuntime.jsx)(_.NewConfirmationDialog, {
       title: 'Are you John Doe?',
+      buttonVariant: "danger",
       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.",

package/build/system/NewDialog/NewDialog.js

@@ -50,6 +50,10 @@ var NewDialog = function NewDialog(_ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       extraStyles = _ref.style,
+      _ref$contentProps = _ref.contentProps,
+      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,
@@ -93,10 +97,11 @@ var NewDialog = function NewDialog(_ref) {
     children: [trigger && (0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
       asChild: true,
       children: trigger
-    }), (0, _jsxRuntime.jsxs)(DialogPrimitive.Portal, {
-      children: [(0, _jsxRuntime.jsx)(_DialogOverlay.DialogOverlay, {}), (0, _jsxRuntime.jsxs)(DialogPrimitive.Content, {
+    }), (0, _jsxRuntime.jsxs)(DialogPrimitive.Portal, (0, _extends2["default"])({}, portalProps, {
+      children: [(0, _jsxRuntime.jsx)(_DialogOverlay.DialogOverlay, {}), (0, _jsxRuntime.jsxs)(DialogPrimitive.Content, (0, _extends2["default"])({
         className: "vip-dialog-component",
-        sx: (0, _extends2["default"])({}, _DialogContent.contentStyles, extraStyles),
+        sx: (0, _extends2["default"])({}, _DialogContent.contentStyles, extraStyles)
+      }, contentProps, {
         children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, {}), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
           title: title,
           hidden: !showHeading
@@ -111,8 +116,8 @@ var NewDialog = function NewDialog(_ref) {
             }
           }) : content
         })]
-      })]
-    })]
+      }))]
+    }))]
   });
 };
 
@@ -125,6 +130,10 @@ NewDialog.propTypes = {
   showHeading: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
   style: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),
+  // 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,

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.2-0",
+	"version": "0.18.5-0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Dropdown/Dropdown.js

@@ -22,7 +22,18 @@ const DropdownSub = DropdownMenuPrimitive.DropdownMenuSub;
 const DropdownSubTrigger = DropdownMenuPrimitive.DropdownMenuSubTrigger;
 const DropdownSubContent = DropdownMenuPrimitive.DropdownMenuSubContent;
 
-export const Dropdown = ( { trigger, children } ) => {
+export const Dropdown = ( {
+	trigger,
+	children,
+	// Radix Specific Properties
+	open = undefined,
+	defaultOpen = false,
+	onOpenChange = undefined,
+	modal = true,
+	dir = 'ltr',
+	contentProps = {},
+	portalProps = {},
+} ) => {
 	const firstChild = React.useMemo(
 		() =>
 			React.isValidElement( children ) ? React.Children.only( children )?.type?.displayName : '',
@@ -30,17 +41,23 @@ export const Dropdown = ( { trigger, children } ) => {
 	);
 
 	return (
-		<DropdownMenu>
+		<DropdownMenu
+			open={ open }
+			defaultOpen={ defaultOpen }
+			onOpenChange={ onOpenChange }
+			modal={ modal }
+			dir={ dir }
+		>
 			<DropdownTrigger asChild>{ trigger }</DropdownTrigger>
 
-			<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Portal { ...portalProps }>
 				{ /* User can customize the content */ }
 				{ firstChild === 'DropdownContent' ? (
 					children
 				) : (
-					<DropdownContent>
+					<DropdownContent { ...contentProps }>
 						{ children }
-						<DropdownMenuPrimitive.Arrow sx={ { fill: 'white' } } />
+						<DropdownMenuPrimitive.Arrow sx={ { fill: 'background', boxShadow: 'high' } } />
 					</DropdownContent>
 				) }
 			</DropdownMenuPrimitive.Portal>
@@ -51,6 +68,18 @@ export const Dropdown = ( { trigger, children } ) => {
 Dropdown.propTypes = {
 	trigger: PropTypes.node.isRequired,
 	children: PropTypes.node.isRequired,
+
+	// Props in root: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#root
+	open: PropTypes.bool,
+	defaultOpen: PropTypes.bool,
+	onOpenChange: PropTypes.func,
+	modal: PropTypes.bool,
+	dir: PropTypes.string,
+
+	// Content props in: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#content
+	contentProps: PropTypes.any,
+	// Portal props in: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#portal
+	portalProps: PropTypes.any,
 };
 
 // Exports

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

@@ -1,5 +1,3 @@
-/** @jsxImportSource theme-ui */
-
 /**
  * External dependencies
  */
@@ -7,13 +5,13 @@ import React from 'react';
 import { DotFilledIcon, CheckIcon, ChevronRightIcon } from '@radix-ui/react-icons';
 
 /**
- /**
+/**
 * Internal dependencies
 */
 
 import * as Dropdown from '.';
 import { Button } from '../Button';
-import { NewConfirmationDialog } from '../NewConfirmationDialog';
+import * as NewDialog from '../NewDialog';
 
 export default {
 	title: 'Dropdown',
@@ -115,43 +113,56 @@ export const ComplexOptions = () => {
 	);
 };
 
-export const WithDialogState = () => {
+export const WithDialog = () => {
 	const [ alertOpen, setAlertOpen ] = React.useState( false );
 	const [ menuOpen, setMenuOpen ] = React.useState( false );
-	const triggerRef = React.useRef();
+
+	const AreYouSureDialog = ( { onConfirm, ...props } ) => (
+		<NewDialog.Root
+			{ ...props }
+			content={
+				<>
+					<Button variant="secondary" onClick={ () => onConfirm() }>
+						Custom Close.
+					</Button>
+
+					<p>Teste abc.</p>
+				</>
+			}
+		/>
+	);
+
 	return (
-		<>
+		<div>
 			<p>
-				In this example, you can see how to trigger a Dialog from the Dropdown and still keep the
-				focus back to the dropdown once the Dialog is closed. This example is important to keep
-				accessibility.
+				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.
 			</p>
 
 			<Dropdown.Root
+				modal={ ! alertOpen }
 				open={ menuOpen }
 				onOpenChange={ setMenuOpen }
-				trigger={ <Button ref={ triggerRef }>Open</Button> }
+				contentProps={ { sideOffset: 5 } }
+				trigger={ <Button>Open</Button> }
 			>
-				<Dropdown.Content hidden={ alertOpen }>
-					<Dropdown.Item>Copy</Dropdown.Item>
+				<Dropdown.Item>I don&apos;t do anything</Dropdown.Item>
 
-					<NewConfirmationDialog
-						title={ 'Are you sure?' }
-						description={ 'Please confirm that' }
-						body="Bla bleh."
-						needsConfirm={ true }
-						open={ alertOpen }
-						onOpenChange={ setAlertOpen }
-						onConfirm={ () => {
-							setMenuOpen( false );
-							triggerRef.current.focus();
-						} }
-						trigger={
-							<Dropdown.Item onSelect={ event => event.preventDefault() }>Click here</Dropdown.Item>
-						}
-					/>
-				</Dropdown.Content>
+				<AreYouSureDialog
+					title="Are you in the jungle?"
+					description="sha-n-n-n-n-n-n-n-n knees, knees"
+					open={ alertOpen }
+					onOpenChange={ setAlertOpen }
+					onConfirm={ () => {
+						setAlertOpen( false );
+						setMenuOpen( false );
+					} }
+					trigger={
+						<Dropdown.Item onSelect={ event => event.preventDefault() }>Open Dialog</Dropdown.Item>
+					}
+				/>
 			</Dropdown.Root>
-		</>
+		</div>
 	);
 };

package/src/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -14,6 +14,7 @@ import { NewDialog, Box, Flex, Button } from '..';
 
 const NewConfirmationDialogContent = ( {
 	label = 'Confirm',
+	buttonVariant = 'danger',
 	onConfirm,
 	onClose,
 	className = null,
@@ -25,7 +26,7 @@ const NewConfirmationDialogContent = ( {
 			</Button>
 			<NewDialog.Close>
 				<Button
-					variant="danger"
+					variant={ buttonVariant }
 					onClick={ () => {
 						onConfirm();
 						onClose();
@@ -41,6 +42,7 @@ const NewConfirmationDialogContent = ( {
 NewConfirmationDialogContent.propTypes = {
 	body: PropTypes.node,
 	label: PropTypes.string,
+	buttonVariant: PropTypes.string,
 	onClose: PropTypes.func,
 	onConfirm: PropTypes.func,
 	className: PropTypes.any,
@@ -51,10 +53,11 @@ const NewConfirmationDialog = ( {
 	onConfirm,
 	needsConfirm = true,
 	label,
+	buttonVariant,
 	title,
 	body = '',
+	...props
 } ) => {
-	const [ open, setOpen ] = React.useState( false );
 	const directTrigger = React.cloneElement( trigger, { onClick: onConfirm } );
 
 	if ( ! needsConfirm ) {
@@ -63,20 +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 }
 		/>
 	);
 };
@@ -88,6 +91,7 @@ NewConfirmationDialog.propTypes = {
 	title: PropTypes.node.isRequired,
 	body: PropTypes.node,
 	label: PropTypes.node,
+	buttonVariant: PropTypes.string,
 };
 
 export { NewConfirmationDialog };

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

@@ -18,6 +18,7 @@ export const Default = () => {
 			<p>Confirm that your name is John doe?</p>
 			<NewConfirmationDialog
 				title={ 'Are you John Doe?' }
+				buttonVariant="danger"
 				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

package/src/system/NewDialog/NewDialog.js

@@ -23,6 +23,8 @@ export const NewDialog = ( {
 	showHeading = true,
 	disabled = false,
 	style: extraStyles,
+	contentProps = {},
+	portalProps = {},
 
 	// Radix Specific Properties
 	defaultOpen = false,
@@ -62,12 +64,13 @@ export const NewDialog = ( {
 		>
 			{ trigger && <DialogPrimitive.Trigger asChild>{ trigger }</DialogPrimitive.Trigger> }
 
-			<DialogPrimitive.Portal>
+			<DialogPrimitive.Portal { ...portalProps }>
 				<DialogOverlay />
 
 				<DialogPrimitive.Content
 					className="vip-dialog-component"
 					sx={ { ...contentStyles, ...extraStyles } }
+					{ ...contentProps }
 				>
 					<DialogClose />
 					<DialogTitle title={ title } hidden={ ! showHeading } />
@@ -91,6 +94,12 @@ NewDialog.propTypes = {
 	disabled: PropTypes.bool,
 	style: PropTypes.oneOfType( [ PropTypes.object, PropTypes.func ] ),
 
+	// Content props in: https://www.radix-ui.com/docs/primitives/components/dialog#content
+	contentProps: PropTypes.any,
+
+	// 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,

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>