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

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

@@ -159,11 +159,6 @@ var WithDialog = function WithDialog() {
     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 +177,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,7 +76,8 @@ var NewConfirmationDialog = function NewConfirmationDialog(_ref2) {
       buttonVariant = _ref2.buttonVariant,
       title = _ref2.title,
       _ref2$body = _ref2.body,
-      body = _ref2$body === void 0 ? '' : _ref2$body;
+      body = _ref2$body === void 0 ? '' : _ref2$body,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
 
   var _React$useState = _react["default"].useState(false),
       open = _React$useState[0],
@@ -93,7 +91,7 @@ var NewConfirmationDialog = function NewConfirmationDialog(_ref2) {
     return directTrigger;
   }
 
-  return (0, _jsxRuntime.jsx)(_.NewDialog.Root, {
+  return (0, _jsxRuntime.jsx)(_.NewDialog.Root, (0, _extends2["default"])({
     open: open,
     onOpenChange: setOpen,
     sx: {
@@ -111,7 +109,7 @@ var NewConfirmationDialog = function NewConfirmationDialog(_ref2) {
       buttonVariant: buttonVariant
     }),
     trigger: trigger
-  });
+  }, props));
 };
 
 exports.NewConfirmationDialog = NewConfirmationDialog;

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

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

@@ -120,11 +120,6 @@ export const WithDialog = () => {
 	const AreYouSureDialog = ( { onConfirm, ...props } ) => (
 		<NewDialog.Root
 			{ ...props }
-			contentProps={ {
-				onCloseAutoFocus: () => {
-					onConfirm();
-				},
-			} }
 			content={
 				<>
 					<Button variant="secondary" onClick={ () => onConfirm() }>
@@ -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,6 +56,7 @@ const NewConfirmationDialog = ( {
 	buttonVariant,
 	title,
 	body = '',
+	...props
 } ) => {
 	const [ open, setOpen ] = React.useState( false );
 	const directTrigger = React.cloneElement( trigger, { onClick: onConfirm } );
@@ -81,6 +82,7 @@ const NewConfirmationDialog = ( {
 				/>
 			}
 			trigger={ trigger }
+			{ ...props }
 		/>
 	);
 };

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>