@jobber/components 6.28.0 → 6.29.0

package/dist/Button/Button.types.d.ts

@@ -1,6 +1,9 @@
 import { IconNames } from "@jobber/design";
 import { LinkProps } from "react-router-dom";
 import { XOR } from "ts-xor";
+import { CSSProperties } from "react";
+import { TypographyProps } from "../Typography/Typography";
+import { IconProps } from "../Icon/Icon";
 export type HTMLButtonType = "button" | "submit";
 export type ButtonVariation = "work" | "learning" | "subtle" | "destructive";
 export type ButtonSize = "small" | "base" | "large";
@@ -22,6 +25,30 @@ export interface ButtonFoundationProps {
     readonly ariaLabel?: string;
     onClick?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
     onMouseDown?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
+    /**
+     * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * **Note:** If you are applying fill override to buttonIcon.path, you will need to add !important due
+     * to Button's children element css inheritance.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+        buttonLabel?: TypographyProps["UNSAFE_className"];
+        buttonIcon?: IconProps["UNSAFE_className"];
+    };
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * **Note:** If you are applying fill override to buttonIcon.path, you will need to add !important due
+     * to Button's children element css inheritance.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: CSSProperties;
+        buttonLabel?: TypographyProps["UNSAFE_style"];
+        buttonIcon?: IconProps["UNSAFE_style"];
+    };
 }
 interface ButtonNonComposableProps extends ButtonFoundationProps {
     readonly icon?: IconNames;

package/dist/Button/ButtonInternals.d.ts

@@ -5,6 +5,6 @@ import { TypographyProps } from "../Typography";
  * For backwards compatibility with the legacy button
  * @deprecated Used composed solution instead
  */
-export declare function ButtonContent({ label, icon, size, iconOnRight, }: Pick<ButtonProps, "label" | "icon" | "size" | "iconOnRight">): JSX.Element;
-export declare function ButtonIcon({ size: sizeProp, ...props }: Pick<IconProps, "size" | "name" | "testID">): JSX.Element;
+export declare function ButtonContent({ label, icon, size, iconOnRight, UNSAFE_className, UNSAFE_style, }: Pick<ButtonProps, "label" | "icon" | "size" | "iconOnRight" | "UNSAFE_className" | "UNSAFE_style">): JSX.Element;
+export declare function ButtonIcon({ size: sizeProp, ...props }: Pick<IconProps, "size" | "name" | "testID" | "UNSAFE_className" | "UNSAFE_style">): JSX.Element;
 export declare function ButtonLabel({ element, fontWeight, fontFamily, size: sizeProp, ...props }: Omit<TypographyProps, "textColor">): JSX.Element;

package/dist/Button-cjs.js

@@ -39,11 +39,11 @@ function useButtonStyles({ size: sizeProp, disabled, fullWidth, loading, variati
  * For backwards compatibility with the legacy button
  * @deprecated Used composed solution instead
  */
-function ButtonContent({ label, icon, size = "base", iconOnRight = false, }) {
+function ButtonContent({ label, icon, size = "base", iconOnRight = false, UNSAFE_className, UNSAFE_style, }) {
     return (React.createElement(React.Fragment, null,
-        icon && !iconOnRight && React.createElement(ButtonIcon, { name: icon, size: size }),
-        label && React.createElement(ButtonLabel, { size: size }, label),
-        icon && iconOnRight && React.createElement(ButtonIcon, { name: icon, size: size })));
+        icon && !iconOnRight && (React.createElement(ButtonIcon, { name: icon, size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonIcon })),
+        label && (React.createElement(ButtonLabel, { size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonLabel, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonLabel }, label)),
+        icon && iconOnRight && (React.createElement(ButtonIcon, { name: icon, size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonIcon }))));
 }
 function getTypeSizes(size) {
     switch (size) {
@@ -74,12 +74,13 @@ function Button(props) {
         React.createElement(ButtonWrapper, Object.assign({}, props))));
 }
 function ButtonWrapper(props) {
-    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, role, value, submit, to, url, } = props;
+    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, role, value, submit, to, url, UNSAFE_className = {}, UNSAFE_style = {}, children, } = props;
     const { combined } = useButtonStyles(props);
     const buttonType = submit ? "submit" : "button";
-    const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: combined, disabled,
-        id }, (submit && { name, value })), (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
-    const buttonInternals = props.children || React.createElement(ButtonContent, Object.assign({}, props));
+    const buttonClassNames = classnames(combined, UNSAFE_className.container);
+    const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: buttonClassNames, disabled,
+        id, style: UNSAFE_style.container }, (submit && { name, value })), (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
+    const buttonInternals = children || React.createElement(ButtonContent, Object.assign({}, props));
     if (to) {
         return (React.createElement(reactRouterDom.Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
     }

package/dist/Button-es.js

@@ -37,11 +37,11 @@ function useButtonStyles({ size: sizeProp, disabled, fullWidth, loading, variati
  * For backwards compatibility with the legacy button
  * @deprecated Used composed solution instead
  */
-function ButtonContent({ label, icon, size = "base", iconOnRight = false, }) {
+function ButtonContent({ label, icon, size = "base", iconOnRight = false, UNSAFE_className, UNSAFE_style, }) {
     return (React__default.createElement(React__default.Fragment, null,
-        icon && !iconOnRight && React__default.createElement(ButtonIcon, { name: icon, size: size }),
-        label && React__default.createElement(ButtonLabel, { size: size }, label),
-        icon && iconOnRight && React__default.createElement(ButtonIcon, { name: icon, size: size })));
+        icon && !iconOnRight && (React__default.createElement(ButtonIcon, { name: icon, size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonIcon })),
+        label && (React__default.createElement(ButtonLabel, { size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonLabel, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonLabel }, label)),
+        icon && iconOnRight && (React__default.createElement(ButtonIcon, { name: icon, size: size, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.buttonIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.buttonIcon }))));
 }
 function getTypeSizes(size) {
     switch (size) {
@@ -72,12 +72,13 @@ function Button(props) {
         React__default.createElement(ButtonWrapper, Object.assign({}, props))));
 }
 function ButtonWrapper(props) {
-    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, role, value, submit, to, url, } = props;
+    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, role, value, submit, to, url, UNSAFE_className = {}, UNSAFE_style = {}, children, } = props;
     const { combined } = useButtonStyles(props);
     const buttonType = submit ? "submit" : "button";
-    const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: combined, disabled,
-        id }, (submit && { name, value })), (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
-    const buttonInternals = props.children || React__default.createElement(ButtonContent, Object.assign({}, props));
+    const buttonClassNames = classnames(combined, UNSAFE_className.container);
+    const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: buttonClassNames, disabled,
+        id, style: UNSAFE_style.container }, (submit && { name, value })), (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
+    const buttonInternals = children || React__default.createElement(ButtonContent, Object.assign({}, props));
     if (to) {
         return (React__default.createElement(Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.28.0",
+  "version": "6.29.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -490,5 +490,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "27d46e235ce983b4cbbf07db3b588188949e1515"
+  "gitHead": "c89f5374f8dcd1c9c19e79b39adb7cf1de8a5c02"
 }