@vertigis/react-ui 11.31.1 → 11.32.0

package/FormLabel/FormLabel.d.ts

@@ -3,10 +3,12 @@ import type { FormLabelClasses as MUIFormLabelClasses, FormLabelProps as MUIForm
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
 declare const gcxFormLabelClasses: {
     errorIcon: string;
+    errorIconBackground: string;
 };
 export * from "@mui/material/FormLabel";
 export declare const formLabelClasses: {
     errorIcon: string;
+    errorIconBackground: string;
     root: string;
     colorSecondary: string;
     focused: string;

package/FormLabel/FormLabel.js

@@ -2,12 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import MUIFormLabel, { formLabelClasses as muiFormLabelClasses } from "@mui/material/FormLabel";
 import clsx from "clsx";
 import { forwardRef } from "react";
+import Box from "../Box/index.js";
 import { useFormControl } from "../FormControl/index.js";
 import ErrorIcon from "../icons/Error.js";
 import { mergeStyles, styled } from "../styles/index.js";
 const PREFIX = "GcxFormLabel";
 const gcxFormLabelClasses = {
     errorIcon: `${PREFIX}-errorIcon`,
+    errorIconBackground: `${PREFIX}-errorIconBackground`,
 };
 // MUST be the first export, since some of the exports are overridden below.
 export * from "@mui/material/FormLabel";
@@ -18,7 +20,6 @@ export const formLabelClasses = {
 const StyledMUIFormLabel = styled(MUIFormLabel)(({ theme: { spacing, palette } }) => ({
     [`& .${formLabelClasses.errorIcon}`]: {
         fontSize: "0.875em",
-        marginRight: spacing(0.5),
     },
 }));
 export const FormLabel = forwardRef(function FormLabel(props, ref) {
@@ -27,7 +28,7 @@ export const FormLabel = forwardRef(function FormLabel(props, ref) {
     // See https://github.com/mui-org/material-ui/pull/20278.
     const muiFormControl = useFormControl();
     const error = errorProp ?? muiFormControl?.error;
-    const { errorIcon: errorIconClass, ...otherClasses } = mergeStyles(gcxFormLabelClasses, classes);
-    return (_jsxs(StyledMUIFormLabel, { error: error, className: clsx("GcxFormLabel", className), ...other, classes: otherClasses, ref: ref, children: [error && _jsx(ErrorIcon, { className: errorIconClass, "data-test": "FormLabel-ErrorIcon" }), children] }));
+    const { errorIcon: errorIconClass, errorIconBackground: errorIconBackgroundClass, ...otherClasses } = mergeStyles(gcxFormLabelClasses, classes);
+    return (_jsxs(StyledMUIFormLabel, { error: error, className: clsx("GcxFormLabel", className), ...other, classes: otherClasses, ref: ref, children: [error && (_jsx(Box, { className: errorIconBackgroundClass, component: "span", children: _jsx(ErrorIcon, { className: errorIconClass, "data-test": "FormLabel-ErrorIcon" }) })), children] }));
 });
 export default FormLabel;

package/InlineHelp/InlineHelp.js

@@ -32,12 +32,6 @@ const StyledPopover = styled(Popover)(({ theme: { spacing } }) => ({
         wordWrap: "break-word",
     },
 }));
-const Root = styled(Box)(({ theme: { spacing } }) => ({
-    [`& .${inlineHelpClasses.errorIcon}`]: {
-        color: "white",
-        marginTop: spacing(1),
-    },
-}));
 const InlineHelp = forwardRef(function InlineHelp({ children, classes: classesProp, className, icon, title, url, ...other }, ref) {
     const [iconBtnEl, setIconBtnEl] = useState();
     const theme = useTheme();
@@ -45,7 +39,7 @@ const InlineHelp = forwardRef(function InlineHelp({ children, classes: classesPr
     const formControl = useFormControl();
     const handleIconPopoverOpen = (event) => setIconBtnEl(event.currentTarget);
     const handleIconPopoverClose = () => setIconBtnEl(undefined);
-    return (_jsxs(Root, { className: clsx(classes.root, className), ref: ref, ...other, children: [_jsx(IconButton, { onClick: handleIconPopoverOpen, title: title, size: "small", "data-test": `${PREFIX}-button`, className: clsx({
+    return (_jsxs(Box, { className: clsx(classes.root, className), ref: ref, ...other, children: [_jsx(IconButton, { onClick: handleIconPopoverOpen, title: title, size: "small", "data-test": `${PREFIX}-button`, className: clsx({
                     [classes.errorIcon]: formControl?.error,
                 }), children: icon ? icon : _jsx(HelpIcon, {}) }), _jsxs(StyledPopover, { anchorEl: iconBtnEl, open: !!iconBtnEl, classes: { paper: classes.paper }, anchorOrigin: theme.direction === "rtl" ? RTL_ORIGIN : LTR_ORIGIN, transformOrigin: theme.direction === "rtl" ? RTL_ORIGIN : LTR_ORIGIN, onClose: handleIconPopoverClose, children: [_jsx(Typography, { children: children }), url && (_jsx(Link, { align: "right", display: "block", href: url.href, onClick: () => url.onClick?.(url.href), target: "_blank", variant: "body2", children: url.label }))] })] }));
 });