@canonical/react-components 0.59.1 → 0.60.0

package/dist/components/ConfirmationButton/ConfirmationButton.js

@@ -10,6 +10,15 @@ var _ConfirmationModal = _interopRequireDefault(require("../ConfirmationModal"))
 var _reactUseportal = _interopRequireDefault(require("react-useportal"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const generateTitle = title => {
+  if (typeof title === "string") {
+    return title;
+  }
+  if (typeof title === "number") {
+    return title.toString();
+  }
+  return null;
+};
 /**
  * `ConfirmationButton` is a specialised version of the [ActionButton](?path=/docs/actionbutton--default-story) component that uses a [ConfirmationModal](?path=/docs/confirmationmodal--default-story) to prompt a confirmation from the user before executing an action.
  */
@@ -52,7 +61,7 @@ const ConfirmationButton = _ref => {
     className: "p-text--small u-text--muted u-hide--small"
   }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/_react.default.createElement("code", null, "SHIFT"), " and clicking the action."))), /*#__PURE__*/_react.default.createElement(_ActionButton.default, _extends({}, actionButtonProps, {
     onClick: shiftClickEnabled ? handleShiftClick : openPortal,
-    title: onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel
+    title: generateTitle(onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel)
   }), actionButtonProps.children));
 };
 exports.ConfirmationButton = ConfirmationButton;

package/dist/components/ConfirmationModal/ConfirmationModal.d.ts

@@ -1,13 +1,18 @@
 import { MouseEvent, ReactElement } from "react";
 import type { ReactNode } from "react";
 import { PropsWithSpread, ValueOf } from "../../types";
-import { ButtonAppearance } from "../Button";
+import { ButtonAppearance, ButtonProps } from "../Button";
 import { ModalProps } from "../Modal";
+import { ActionButtonProps } from "../ActionButton";
 export type Props = PropsWithSpread<{
     /**
      * Label for the cancel button.
      */
-    cancelButtonLabel?: string;
+    cancelButtonLabel?: ReactNode;
+    /**
+     * Additional props to be spread on the cancel button.
+     */
+    cancelButtonProps?: Partial<ButtonProps>;
     /**
      * The content of the modal.
      */
@@ -19,7 +24,11 @@ export type Props = PropsWithSpread<{
     /**
      * Label for the confirm button.
      */
-    confirmButtonLabel: string;
+    confirmButtonLabel: ReactNode;
+    /**
+     * Additional props to be spread on the confirm button.
+     */
+    confirmButtonProps?: Partial<ActionButtonProps>;
     /**
      * Extra elements to be placed in the button row of the modal.
      */
@@ -40,5 +49,5 @@ export type Props = PropsWithSpread<{
 /**
  * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
  */
-export declare const ConfirmationModal: ({ cancelButtonLabel, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, ...props }: Props) => ReactElement;
+export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, ...props }: Props) => ReactElement;
 export default ConfirmationModal;

package/dist/components/ConfirmationModal/ConfirmationModal.js

@@ -16,6 +16,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const ConfirmationModal = _ref => {
   let {
     cancelButtonLabel = "Cancel",
+    cancelButtonProps,
     children,
     confirmButtonAppearance = "negative",
     confirmButtonLabel,
@@ -23,6 +24,7 @@ const ConfirmationModal = _ref => {
     onConfirm,
     confirmButtonLoading,
     confirmButtonDisabled,
+    confirmButtonProps,
     ...props
   } = _ref;
   const handleClick = action => event => {
@@ -34,16 +36,16 @@ const ConfirmationModal = _ref => {
     }
   };
   return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
-    buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, confirmExtra, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, confirmExtra, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, cancelButtonProps, {
       className: "u-no-margin--bottom",
       onClick: handleClick(props.close)
-    }, cancelButtonLabel), /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
+    }), cancelButtonLabel), /*#__PURE__*/_react.default.createElement(_ActionButton.default, _extends({}, confirmButtonProps, {
       appearance: confirmButtonAppearance,
       className: "u-no-margin--bottom",
       onClick: handleClick(onConfirm),
       loading: confirmButtonLoading,
       disabled: confirmButtonDisabled
-    }, confirmButtonLabel))
+    }), confirmButtonLabel))
   }, props), children);
 };
 exports.ConfirmationModal = ConfirmationModal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.59.1",
+  "version": "0.60.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {