@automattic/vip-design-system 2.14.0 → 2.14.1

package/build/system/Button/Button.js

@@ -67,7 +67,8 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       width: Boolean(full) === true ? '100%' : undefined
     }, sx)
   }, rest, disabledAttributes, {
-    variant: variant,
+    variant: variant === 'danger' ? 'primary' : variant // fallback for danger variant used before the prop was added
+    ,
     onClick: handleOnClick,
     className: classNames('vip-button-component', className),
     "data-danger": danger,

package/build/system/DescriptionList/DescriptionList.js

@@ -89,7 +89,7 @@ var DescriptionListComponent = function DescriptionListComponent(_ref2) {
     })]
   });
 };
-var DescriptionList = /*#__PURE__*/forwardRef(function (_ref3) {
+var DescriptionList = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   var sx = _ref3.sx,
     className = _ref3.className,
     list = _ref3.list,
@@ -99,12 +99,15 @@ var DescriptionList = /*#__PURE__*/forwardRef(function (_ref3) {
     as = _ref3$as === void 0 ? 'dl' : _ref3$as,
     title = _ref3.title;
   var Component = as === 'table' ? TableComponent : DescriptionListComponent;
-  return _jsx(Component, {
-    list: list,
-    className: className,
-    sx: sx,
-    labelWidth: labelWidth,
-    title: title
+  return _jsx(Box, {
+    ref: ref,
+    children: _jsx(Component, {
+      list: list,
+      className: className,
+      sx: sx,
+      labelWidth: labelWidth,
+      title: title
+    })
   });
 });
 DescriptionList.displayName = 'DescriptionList';

package/build/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -22,7 +22,7 @@ const NewConfirmationDialogContent = ( {
 } ) => (
 	<Box className={ classNames( 'vip-confirmation-dialog-component', className ) }>
 		<Flex sx={ { justifyContent: 'flex-end', mt: 4 } }>
-			<Button variant="secondary" sx={ { mr: 2 } } onClick={ onClose }>
+			<Button variant="ghost" sx={ { mr: 2 } } onClick={ onClose }>
 				Cancel
 			</Button>
 			<NewDialog.Close>

package/build/system/NewDialog/DialogClose.js

@@ -41,7 +41,7 @@ export var DialogCloseDefault = /*#__PURE__*/forwardRef(function (_ref, forwarde
     children: _jsx(Button, {
       ref: forwardedRef,
       "aria-label": "Close",
-      variant: "tertiary",
+      variant: "ghost",
       sx: defaultCloseStyles(variant),
       children: _jsx(IoClose, {
         "aria-hidden": "true",

package/package.json

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

package/src/system/Button/Button.tsx

@@ -95,7 +95,7 @@ const Button = forwardRef< HTMLButtonElement, ButtonProps >(
 				} }
 				{ ...rest }
 				{ ...disabledAttributes }
-				variant={ variant }
+				variant={ variant === 'danger' ? 'primary' : variant } // fallback for danger variant used before the prop was added
 				onClick={ handleOnClick }
 				className={ classNames( 'vip-button-component', className ) }
 				data-danger={ danger }

package/src/system/DescriptionList/DescriptionList.tsx

@@ -83,17 +83,22 @@ const DescriptionListComponent = ( {
 );
 
 const DescriptionList = forwardRef< HTMLDivElement, DescriptionListProps >(
-	( { sx, className, list, labelWidth = '100px', as = 'dl', title }: DescriptionListProps ) => {
+	(
+		{ sx, className, list, labelWidth = '100px', as = 'dl', title }: DescriptionListProps,
+		ref
+	) => {
 		const Component = as === 'table' ? TableComponent : DescriptionListComponent;
 
 		return (
-			<Component
-				list={ list }
-				className={ className }
-				sx={ sx }
-				labelWidth={ labelWidth }
-				title={ title }
-			/>
+			<Box ref={ ref }>
+				<Component
+					list={ list }
+					className={ className }
+					sx={ sx }
+					labelWidth={ labelWidth }
+					title={ title }
+				/>
+			</Box>
 		);
 	}
 );

package/src/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -22,7 +22,7 @@ const NewConfirmationDialogContent = ( {
 } ) => (
 	<Box className={ classNames( 'vip-confirmation-dialog-component', className ) }>
 		<Flex sx={ { justifyContent: 'flex-end', mt: 4 } }>
-			<Button variant="secondary" sx={ { mr: 2 } } onClick={ onClose }>
+			<Button variant="ghost" sx={ { mr: 2 } } onClick={ onClose }>
 				Cancel
 			</Button>
 			<NewDialog.Close>

package/src/system/NewDialog/DialogClose.tsx

@@ -47,7 +47,7 @@ export const DialogCloseDefault = forwardRef< HTMLButtonElement, DialogCloseDefa
 				<Button
 					ref={ forwardedRef }
 					aria-label="Close"
-					variant="tertiary"
+					variant="ghost"
 					sx={ defaultCloseStyles( variant ) }
 				>
 					<IoClose aria-hidden="true" width={ 20 } height={ 20 } />