Merge pull request #564 from open-formulieren/feature/462-refactor-bu…

…tton

[#462] Refactor button

CHANGELOG.rst

@@ -7,6 +7,36 @@ SDK Changelog
 
 .. warning:: SDK 1.6.0 requires at least version 2.4.0 of the Open Formulieren API.
 
+Updating stylesheets
+--------------------
+
+In this version, the button component has been refactored to use the Utrecht button components.
+In order to maintain the same style as in previous versions, the following Utrecht design tokens
+should be set:
+
+* ``--utrecht-button-primary-action-focus-border-color`` has ``#000000`` (black) in the Open Forms
+  theme.
+* ``--utrecht-button-primary-action-danger-focus-border-color`` has ``#000000`` (black) in the
+  Open Forms theme.
+* ``--utrecht-button-secondary-action-danger-background-color`` takes the value of the old ``--of-button-danger-bg``
+* ``--utrecht-button-secondary-action-danger-color`` takes the value of the old ``--of-button-danger-fg``
+* ``--utrecht-button-secondary-action-focus-border-color`` takes the value of the old ``--of-color-focus-border``
+* ``--utrecht-button-subtle-danger-background-color``  takes the value of ``--of-color-danger``
+* ``--utrecht-button-subtle-danger-hover-background-color`` takes the value ``--of-color-bg``
+* ``--utrecht-button-subtle-danger-active-background-color`` takes the value of the old ``--of-button-danger-active-bg``
+* ``--utrecht-button-disabled-color``. This does not take the value of an old token. For the
+  Open Forms theme this is now ``#ffffff``.
+* ``--utrecht-button-disabled-background-color``. This does not take the value of an old token,
+  the colour was previously obtained by graying out the primary button. For the Open Forms theme,
+  this is now ``#a02017``.
+* ``--utrecht-action-disabled-cursor``. This does not take the value of an old token. It controls
+  the looks of the cursor when hovering a disabled button. For the Open Forms theme, this is now
+  ``not-allowed``.
+* ``--utrecht-action-submit-cursor``. This does not take the value of an old token. It controls the
+  looks of the cursor when hovering over a submit button. For the Open Forms theme, this is now
+  ``pointer``.
+
+
 1.6.0-alpha.0 (2023-10-02)
 ==========================
 

package.json

@@ -30,7 +30,7 @@
     "@floating-ui/react": "^0.24.2",
     "@formio/protected-eval": "^1.2.1",
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@open-formulieren/design-tokens": "^0.41.0",
+    "@open-formulieren/design-tokens": "^0.44.1",
     "@sentry/react": "^6.13.2",
     "@sentry/tracing": "^6.13.2",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",

src/components/Button/OFButton.js

@@ -0,0 +1,29 @@
+import {Button as UtrechtButton} from '@utrecht/component-library-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+// Temporary until the aria-disabled is set on the Utrecht button
+const OFButton = ({disabled, children, ...extraProps}) => {
+  const {onClick: onClickHandler, ...otherProps} = extraProps;
+
+  if (disabled) otherProps.className = 'utrecht-button--disabled';
+
+  const onClick = event => {
+    if (disabled) event.preventDefault();
+
+    if (onClickHandler) onClickHandler(event);
+  };
+
+  return (
+    <UtrechtButton aria-disabled={disabled} onClick={onClick} {...otherProps}>
+      {children}
+    </UtrechtButton>
+  );
+};
+
+OFButton.propTypes = {
+  disabled: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+export default OFButton;