@vertigis/react-ui 11.31.2 → 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 }))] })] }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vertigis/react-ui",
-    "version": "11.31.2",
+    "version": "11.32.0",
     "description": "Utilities and React components used in VertiGIS applications.",
     "keywords": [
         "vertigis",

package/styles/createTheme.js

@@ -141,6 +141,7 @@ const getMenuItemStyles = ({ palette, transitions }) => ({
  */
 function getOverrides(theme) {
     const { palette, shape, spacing, transitions, typography } = theme;
+    const isDarkMode = palette.mode === "dark";
     return {
         components: {
             MuiAutocomplete: {
@@ -389,10 +390,10 @@ function getOverrides(theme) {
                         marginTop: 0,
                         marginBottom: spacing(0.5),
                         "&.Mui-error": {
-                            paddingLeft: spacing(1),
                             borderRadius: shape.borderRadius,
-                            color: "white",
-                            backgroundColor: palette.error.main,
+                            color: isDarkMode ? palette.text.primary : palette.error.main,
+                            fontStyle: "italic",
+                            backgroundColor: palette.background.default,
                         },
                     },
                 },
@@ -402,17 +403,33 @@ function getOverrides(theme) {
                     root: {
                         // Override disabled background color that gets applied
                         backgroundColor: "transparent",
-                        margin: spacing(1, 0),
+                        margin: spacing(0.5, 0),
                         color: "currentColor",
                         // Clear InlineHelp button
                         paddingRight: typography.pxToRem(32),
-                        lineHeight: 1,
+                        lineHeight: 1.4,
                         fontWeight: typography.fontWeightMedium,
                         "&.Mui-error, &.Mui-error.Mui-focused": {
-                            padding: spacing(1),
                             borderRadius: shape.borderRadius,
-                            color: "white",
-                            backgroundColor: palette.error.main,
+                            color: palette.text.primary,
+                            backgroundColor: palette.background.default,
+                            // Error icon background circle
+                            "& .GcxFormLabel-errorIconBackground": {
+                                display: "inline-flex",
+                                width: typography.pxToRem(22),
+                                height: typography.pxToRem(22),
+                                justifyContent: "center",
+                                marginRight: "4px",
+                                alignItems: "center",
+                                borderRadius: "50%",
+                                backgroundColor: isDarkMode
+                                    ? palette.text.primary
+                                    : palette.error.main,
+                            },
+                        },
+                        "&.Mui-error .GcxFormLabel-errorIcon": {
+                            margin: "0px 0px 2px 0px",
+                            color: isDarkMode ? palette.error.main : palette.background.default,
                         },
                         "&.Mui-focused": {
                             color: "currentColor",
@@ -467,13 +484,13 @@ function getOverrides(theme) {
                             boxShadow: "none",
                         },
                         "&.Mui-error": {
-                            backgroundColor: alpha(palette.error.main, 0.15),
-                            borderColor: palette.error.main,
-                            boxShadow: `0 0 0 1px ${palette.error.main} inset`,
+                            backgroundColor: "transparent",
+                            borderColor: "transparent",
+                            boxShadow: `0 0 0 1px ${isDarkMode ? palette.common.white : "transparent"} inset, 0 0 0 3px ${palette.error.main} inset, 0 0 0 4px ${isDarkMode ? palette.common.white : "transparent"} inset`,
                         },
                         "&.Mui-disabled": {
                             borderColor: palette.grey[300],
-                            backgroundColor: palette.mode === "dark" ? palette.grey[900] : palette.grey[100],
+                            backgroundColor: isDarkMode ? palette.grey[900] : palette.grey[100],
                         },
                     },
                     inputMultiline: {
@@ -720,7 +737,7 @@ function getOverrides(theme) {
                 },
                 styleOverrides: {
                     root: {
-                        backgroundColor: palette.mode === "dark" ? palette.grey[900] : palette.grey[100],
+                        backgroundColor: isDarkMode ? palette.grey[900] : palette.grey[100],
                         borderStyle: "solid",
                         borderWidth: 1,
                         borderColor: palette.grey[400],
@@ -758,7 +775,7 @@ function getOverrides(theme) {
                     },
                     head: {
                         // Chosen to match PanelGroup in react-ui-internal.
-                        backgroundColor: palette.mode === "dark" ? palette.grey[900] : palette.grey[200],
+                        backgroundColor: isDarkMode ? palette.grey[900] : palette.grey[200],
                         fontWeight: "bold",
                         fontSize: typography.pxToRem(14),
                     },