fix: add error suffix to combobox instead of in alert, rename id prop

Author: HedwigJDoets

packages/pluggableWidgets/combobox-web/src/components/ComboboxWrapper.tsx

@@ -57,7 +57,7 @@ export const ComboboxWrapper = forwardRef(
                         </div>
                     )}
                 </div>
-                {validation && <ValidationAlert referenceId={inputId}>{validation}</ValidationAlert>}
+                {validation && <ValidationAlert referenceId={inputId + "-error"}>{validation}</ValidationAlert>}
             </Fragment>
         );
     }

packages/shared/widget-plugin-component-kit/src/Alert.tsx

@@ -5,7 +5,7 @@ export interface AlertProps {
     children?: ReactNode;
     className?: string;
     bootstrapStyle: "default" | "primary" | "success" | "info" | "warning" | "danger";
-    inputElementId?: string;
+    id?: string;
     role?: string;
 }
 
@@ -21,19 +21,15 @@ export const ValidationAlert = ({ className, children, referenceId }: Validation
         className={classNames("mx-validation-message", className)}
         bootstrapStyle="danger"
         role="alert"
-        inputElementId={referenceId}
+        id={referenceId}
     >
         {children}
     </Alert>
 );
 
-export const Alert = ({ className, bootstrapStyle, children, role, inputElementId }: AlertProps): ReactNode =>
+export const Alert = ({ className, bootstrapStyle, children, role, id }: AlertProps): ReactNode =>
     Children.count(children) > 0 ? (
-        <div
-            className={classNames(`alert alert-${bootstrapStyle}`, className)}
-            role={role}
-            {...(inputElementId ? { id: inputElementId + "-error" } : undefined)}
-        >
+        <div className={classNames(`alert alert-${bootstrapStyle}`, className)} role={role} id={id}>
             {children}
         </div>
     ) : null;