@onewelcome/react-lib-components 8.15.0 → 8.16.0

package/src/components/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.tsx

@@ -34,7 +34,15 @@ export interface Props extends ComponentPropsWithRef<"div">, Omit<WrapperProps,
 }
 
 const CheckboxWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, error = false, helperText, helperProps, fieldsetProps, ...rest }: Props,
+  {
+    children,
+    error = false,
+    helperText,
+    helperProps,
+    errorMessageProps,
+    fieldsetProps,
+    ...rest
+  }: Props,
   ref
 ) => {
   const { errorId, helperId } = useWrapper();
@@ -67,9 +75,11 @@ const CheckboxWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
         helperText={helperText}
         helperProps={{
           ...helperProps,
-          className: `${classes["checkbox-wrapper-helper"]} ${
-            error ? classes["checkbox-wrapper-error"] : ""
-          } ${helperProps?.className ?? ""}`
+          className: `${classes["checkbox-wrapper-helper"]}  ${helperProps?.className ?? ""}`
+        }}
+        errorMessageProps={{
+          ...errorMessageProps,
+          className: `${error ? classes["checkbox-wrapper-error"] : ""}`
         }}
         error={error}
         errorMessageIcon={Icons.Error}

package/src/components/Form/Wrapper/RadioWrapper/RadioWrapper.module.scss

@@ -18,8 +18,10 @@
   margin-top: 1.25rem;
 }
 
-.radio-wrapper-error span {
+.radio-wrapper-error {
   font-size: 1rem;
+  margin-left: 0;
+  line-height: unset;
 }
 
 .radio-wrapper-error [data-icon] {

package/src/components/Form/Wrapper/RadioWrapper/RadioWrapper.tsx

@@ -38,6 +38,7 @@ const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   {
     children,
     error,
+    errorMessageProps,
     name,
     helperText,
     helperProps,
@@ -87,13 +88,15 @@ const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         helperText={helperText}
         helperProps={{
           ...helperProps,
-          className: `${classes["radio-wrapper-helper"]} ${
-            error ? classes["radio-wrapper-error"] : ""
-          } ${helperProps?.className ?? ""}`
+          className: `${classes["radio-wrapper-helper"]} ${helperProps?.className ?? ""}`
         }}
         error={error}
         errorId={errorId}
         errorMessageIcon={Icons.Error}
+        errorMessageProps={{
+          ...errorMessageProps,
+          className: `${error ? classes["radio-wrapper-error"] : ""}`
+        }}
       >
         {renderChildren()}
       </Wrapper>

package/src/components/Form/form.interfaces.ts

@@ -14,12 +14,14 @@
  *    limitations under the License.
  */
 
+import { ComponentPropsWithRef } from "react";
 import { DataAttributeKey } from "../../interfaces";
 
 /** Radios */
 export interface FormSelector extends FormElement {
   helperText?: string;
   errorMessage?: string;
+  errorMessageProps?: ComponentPropsWithRef<"span">;
   parentHelperId?: string;
   parentErrorId?: string;
 }

package/src/components/Notifications/Alert/AlertItem/AlertItem.tsx

@@ -33,8 +33,8 @@ export type Actions = (ButtonHTMLAttributes<HTMLButtonElement> & { label: string
 
 export interface Props {
   id: string;
-  title?: string;
-  content?: string;
+  title?: string | React.ReactNode;
+  content?: string | React.ReactNode;
   duration?: number;
   emphasis?: Emphasis;
   variant?: Variant;

package/src/components/Notifications/Alert/AlertProvider/AlertProvider.tsx

@@ -71,7 +71,7 @@ export const AlertProvider = ({
     return {
       ...arg,
       variant: variant ?? arg.variant,
-      id: generateID(15, arg.content ?? arg.title),
+      id: generateID(),
       duration: arg.duration ?? getDuration(arg),
       closeButtonTitle: closeTitle
     };

package/src/components/Tooltip/Tooltip.tsx

@@ -37,7 +37,7 @@ import { useGetDomRoot } from "../../hooks/useGetDomRoot";
 export interface Props extends ComponentPropsWithRef<"div"> {
   label: ReactNode;
   title?: string;
-  children: string;
+  children: ReactNode;
   domRoot?: HTMLElement;
   location?: "left" | "right" | "top" | "bottom";
   color?: "black" | "blue";
@@ -179,6 +179,9 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   const renderChildren = () => {
     if (React.isValidElement(label)) {
       return React.cloneElement(label as ReactElement, {
+        ref: relativeElement,
+        onMouseEnter: () => setVisible(true),
+        onMouseLeave: () => setVisible(false),
         onFocus: () => setVisible(true),
         onBlur: () => setVisible(false),
         "aria-describedby": identifier,
@@ -208,14 +211,16 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     <div {...rest} ref={wrappingDivRef} className={`${classes.wrapper} ${className ?? ""}`}>
       {renderChildren()}
       <div className={`${classes["tooltip-wrapper"]}`}>
-        <Icon
-          ref={relativeElement}
-          tag="div"
-          onMouseEnter={() => setVisible(true)}
-          onMouseLeave={() => setVisible(false)}
-          icon={Icons.InfoCircle}
-          className={classes.icon}
-        />
+        {!React.isValidElement(label) && (
+          <Icon
+            ref={relativeElement}
+            tag="div"
+            onMouseEnter={() => setVisible(true)}
+            onMouseLeave={() => setVisible(false)}
+            icon={Icons.InfoCircle}
+            className={classes.icon}
+          />
+        )}
         {createPortal(
           <div
             ref={elementToBePositioned}

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -340,7 +340,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
 
     alertFontSize: "0.875rem",
     alertTextColor: "var(--default)",
-    alertTextInvertedColor: "var(--light)",
+    alertTextInvertedColor: "var(--color-blue-grey25)",
 
     alertNeutralBackgroundColor: "var(--color-blue-grey50)",
     alertNeutralInvertedColor: "var(--color-blue-grey500)",