@canonical/react-components 4.5.3 → 4.6.0

package/dist/components/ActionButton/ActionButton.d.ts

@@ -1,7 +1,6 @@
-import React, { MouseEventHandler } from "react";
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import React from "react";
 import type { ButtonProps } from "../Button";
-import type { ClassName, PropsWithSpread } from "../../types";
+import type { PropsWithSpread } from "../../types";
 export declare const LOADER_MIN_DURATION = 400;
 export declare const SUCCESS_DURATION = 2000;
 export declare enum Label {
@@ -9,39 +8,15 @@ export declare enum Label {
     SUCCESS = "Action completed"
 }
 export type Props = PropsWithSpread<{
-    /**
-     * The appearance of the button.
-     */
-    appearance?: ButtonProps["appearance"];
-    /**
-     * The content of the button.
-     */
-    children?: ReactNode;
-    /**
-     * Optional class(es) to pass to the button element.
-     */
-    className?: ClassName;
-    /**
-     * Whether the button should be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether the button should display inline.
-     */
-    inline?: boolean;
     /**
      * Whether the button should be in the loading state.
      */
     loading?: boolean;
-    /**
-     * Function for handling button click event.
-     */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Whether the button should be in the success state.
      */
     success?: boolean;
-}, ButtonHTMLAttributes<HTMLButtonElement>>;
+}, ButtonProps>;
 /**
  * This is a not an existing Vanilla component. It can be used to display submitting states for forms or other actions.
  *
@@ -49,5 +24,5 @@ export type Props = PropsWithSpread<{
  * [Button](?path=/docs/components-button--docs) in addition to those in the
  * props table:
  */
-declare const ActionButton: ({ appearance, children, className, onClick, disabled, inline, loading, success, ...buttonProps }: Props) => React.JSX.Element;
+declare const ActionButton: ({ children, className, disabled, loading, success, ...buttonProps }: Props) => React.JSX.Element;
 export default ActionButton;

package/dist/components/ActionButton/ActionButton.js

@@ -7,7 +7,8 @@ exports.default = exports.SUCCESS_DURATION = exports.Label = exports.LOADER_MIN_
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon"));
-const _excluded = ["appearance", "children", "className", "onClick", "disabled", "inline", "loading", "success"];
+var _Button = _interopRequireDefault(require("../Button"));
+const _excluded = ["children", "className", "disabled", "loading", "success"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -29,12 +30,9 @@ let Label = exports.Label = /*#__PURE__*/function (Label) {
  */
 const ActionButton = _ref => {
   let {
-      appearance,
       children,
       className,
-      onClick,
       disabled = null,
-      inline = false,
       loading = false,
       success = false
     } = _ref,
@@ -105,26 +103,16 @@ const ActionButton = _ref => {
     }
     return () => window.clearTimeout(successTimeout);
   }, [showSuccess]);
-  const buttonClasses = (0, _classnames.default)(className, "p-action-button", appearance ? "p-button--".concat(appearance) : "p-button", {
-    "is-processing": showLoader || showSuccess,
-    "is-disabled": disabled === null ? showLoader : disabled,
-    "is-inline": inline
+  const buttonClasses = (0, _classnames.default)(className, "p-action-button", {
+    "is-processing": showLoader || showSuccess
   });
   const showIcon = showLoader || showSuccess;
-  const isDisabled = disabled === null ? showLoader : disabled;
   const icon = showLoader && "spinner" || showSuccess && "success" || null;
-  const iconLight = appearance === "positive" || appearance === "negative";
-  const onClickDisabled = e => e.preventDefault();
-
-  // This component uses the base button element instead of the Button component
-  // as the button requires a ref and Button would have to be updated to use
-  // forwardRef which is not currently supported by components that use
-  // typescript generics.
-  return /*#__PURE__*/_react.default.createElement("button", _extends({
+  const iconLight = buttonProps.appearance === "positive" || buttonProps.appearance === "negative";
+  return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
     className: buttonClasses,
     ref: ref,
-    onClick: isDisabled ? onClickDisabled : onClick,
-    "aria-disabled": isDisabled || undefined,
+    disabled: disabled === null ? showLoader : disabled,
     style: height && width ? {
       height: "".concat(height, "px"),
       width: "".concat(width, "px")

package/dist/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ButtonHTMLAttributes, ComponentType, ElementType, MouseEventHandler, ReactNode } from "react";
+import type { ButtonHTMLAttributes, ComponentType, ElementType, MouseEventHandler, ReactNode, Ref } from "react";
 import type { ClassName, ValueOf } from "../../types";
 export declare const ButtonAppearance: {
     readonly BASE: "base";
@@ -54,6 +54,10 @@ export type Props<P = null> = {
      * Whether the button should be small.
      */
     small?: boolean;
+    /**
+     * A ref to the button.
+     */
+    ref?: Ref<HTMLButtonElement>;
 } & (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> | P);
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Button](https://docs.vanillaframework.io/patterns/buttons/).

package/dist/components/ConfirmationModal/ConfirmationModal.stories.js

@@ -7,6 +7,7 @@ exports.default = exports.Positive = exports.NoTitle = exports.Extra = exports.D
 var _react = _interopRequireWildcard(require("react"));
 var _ConfirmationModal = _interopRequireDefault(require("./ConfirmationModal"));
 var _Input = _interopRequireDefault(require("../Input"));
+var _Icon = _interopRequireDefault(require("../Icon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const doNothing = () => {};
@@ -24,9 +25,15 @@ const Default = exports.Default = {
       onClick: () => setModalOpen(true)
     }, "Open confirmation modal"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
       title: "Confirm delete",
-      confirmButtonLabel: "Delete",
+      confirmButtonLabel: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        name: "delete",
+        light: true
+      }), /*#__PURE__*/_react.default.createElement("span", null, "Delete")),
       onConfirm: doNothing,
-      close: closeHandler
+      close: closeHandler,
+      confirmButtonProps: {
+        hasIcon: true
+      }
     }, /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")) : null);
   },
   name: "Default"

package/dist/components/LoginPageLayout/LoginPageLayout.scss

@@ -8,10 +8,6 @@
   .page-card {
     border: 0;
   }
-
-  .is-paper {
-    background-color: #fff;
-  }
 }
 
 .page-inner {

package/dist/esm/components/ActionButton/ActionButton.d.ts

@@ -1,7 +1,6 @@
-import React, { MouseEventHandler } from "react";
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import React from "react";
 import type { ButtonProps } from "../Button";
-import type { ClassName, PropsWithSpread } from "../../types";
+import type { PropsWithSpread } from "../../types";
 export declare const LOADER_MIN_DURATION = 400;
 export declare const SUCCESS_DURATION = 2000;
 export declare enum Label {
@@ -9,39 +8,15 @@ export declare enum Label {
     SUCCESS = "Action completed"
 }
 export type Props = PropsWithSpread<{
-    /**
-     * The appearance of the button.
-     */
-    appearance?: ButtonProps["appearance"];
-    /**
-     * The content of the button.
-     */
-    children?: ReactNode;
-    /**
-     * Optional class(es) to pass to the button element.
-     */
-    className?: ClassName;
-    /**
-     * Whether the button should be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether the button should display inline.
-     */
-    inline?: boolean;
     /**
      * Whether the button should be in the loading state.
      */
     loading?: boolean;
-    /**
-     * Function for handling button click event.
-     */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Whether the button should be in the success state.
      */
     success?: boolean;
-}, ButtonHTMLAttributes<HTMLButtonElement>>;
+}, ButtonProps>;
 /**
  * This is a not an existing Vanilla component. It can be used to display submitting states for forms or other actions.
  *
@@ -49,5 +24,5 @@ export type Props = PropsWithSpread<{
  * [Button](?path=/docs/components-button--docs) in addition to those in the
  * props table:
  */
-declare const ActionButton: ({ appearance, children, className, onClick, disabled, inline, loading, success, ...buttonProps }: Props) => React.JSX.Element;
+declare const ActionButton: ({ children, className, disabled, loading, success, ...buttonProps }: Props) => React.JSX.Element;
 export default ActionButton;

package/dist/esm/components/ActionButton/ActionButton.js

@@ -1,10 +1,11 @@
-var _excluded = ["appearance", "children", "className", "onClick", "disabled", "inline", "loading", "success"];
+var _excluded = ["children", "className", "disabled", "loading", "success"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import classNames from "classnames";
 import React, { useEffect, useRef, useState } from "react";
 import Icon from "../Icon";
+import Button from "../Button";
 export var LOADER_MIN_DURATION = 400; // minimium duration (ms) loader displays
 export var SUCCESS_DURATION = 2000; // duration (ms) success tick is displayed
 
@@ -22,12 +23,9 @@ export var Label = /*#__PURE__*/function (Label) {
  */
 var ActionButton = _ref => {
   var {
-      appearance,
       children,
       className,
-      onClick,
       disabled = null,
-      inline = false,
       loading = false,
       success = false
     } = _ref,
@@ -98,26 +96,16 @@ var ActionButton = _ref => {
     }
     return () => window.clearTimeout(successTimeout);
   }, [showSuccess]);
-  var buttonClasses = classNames(className, "p-action-button", appearance ? "p-button--".concat(appearance) : "p-button", {
-    "is-processing": showLoader || showSuccess,
-    "is-disabled": disabled === null ? showLoader : disabled,
-    "is-inline": inline
+  var buttonClasses = classNames(className, "p-action-button", {
+    "is-processing": showLoader || showSuccess
   });
   var showIcon = showLoader || showSuccess;
-  var isDisabled = disabled === null ? showLoader : disabled;
   var icon = showLoader && "spinner" || showSuccess && "success" || null;
-  var iconLight = appearance === "positive" || appearance === "negative";
-  var onClickDisabled = e => e.preventDefault();
-
-  // This component uses the base button element instead of the Button component
-  // as the button requires a ref and Button would have to be updated to use
-  // forwardRef which is not currently supported by components that use
-  // typescript generics.
-  return /*#__PURE__*/React.createElement("button", _extends({
+  var iconLight = buttonProps.appearance === "positive" || buttonProps.appearance === "negative";
+  return /*#__PURE__*/React.createElement(Button, _extends({
     className: buttonClasses,
     ref: ref,
-    onClick: isDisabled ? onClickDisabled : onClick,
-    "aria-disabled": isDisabled || undefined,
+    disabled: disabled === null ? showLoader : disabled,
     style: height && width ? {
       height: "".concat(height, "px"),
       width: "".concat(width, "px")

package/dist/esm/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ButtonHTMLAttributes, ComponentType, ElementType, MouseEventHandler, ReactNode } from "react";
+import type { ButtonHTMLAttributes, ComponentType, ElementType, MouseEventHandler, ReactNode, Ref } from "react";
 import type { ClassName, ValueOf } from "../../types";
 export declare const ButtonAppearance: {
     readonly BASE: "base";
@@ -54,6 +54,10 @@ export type Props<P = null> = {
      * Whether the button should be small.
      */
     small?: boolean;
+    /**
+     * A ref to the button.
+     */
+    ref?: Ref<HTMLButtonElement>;
 } & (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> | P);
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Button](https://docs.vanillaframework.io/patterns/buttons/).

package/dist/esm/components/ConfirmationModal/ConfirmationModal.stories.js

@@ -2,6 +2,7 @@ import { useState } from "react";
 import React from "react";
 import ConfirmationModal from "./ConfirmationModal";
 import Input from "../Input";
+import Icon from "../Icon";
 var doNothing = () => {};
 var meta = {
   component: ConfirmationModal,
@@ -17,9 +18,15 @@ export var Default = {
       onClick: () => setModalOpen(true)
     }, "Open confirmation modal"), modalOpen ? /*#__PURE__*/React.createElement(ConfirmationModal, {
       title: "Confirm delete",
-      confirmButtonLabel: "Delete",
+      confirmButtonLabel: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+        name: "delete",
+        light: true
+      }), /*#__PURE__*/React.createElement("span", null, "Delete")),
       onConfirm: doNothing,
-      close: closeHandler
+      close: closeHandler,
+      confirmButtonProps: {
+        hasIcon: true
+      }
     }, /*#__PURE__*/React.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/React.createElement("br", null), "You cannot undo this action.")) : null);
   },
   name: "Default"

package/dist/esm/components/LoginPageLayout/LoginPageLayout.scss

@@ -8,10 +8,6 @@
   .page-card {
     border: 0;
   }
-
-  .is-paper {
-    background-color: #fff;
-  }
 }
 
 .page-inner {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "4.5.3",
+  "version": "4.6.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -37,7 +37,7 @@
     "@eslint/compat": "2.0.1",
     "@eslint/eslintrc": "3.3.3",
     "@eslint/js": "9.39.2",
-    "@percy/cli": "1.31.8",
+    "@percy/cli": "1.31.14",
     "@percy/storybook": "9.1.0",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",