From 0ea9e8ffcef81fff01ed9342bc1dd80bdbd6305e Mon Sep 17 00:00:00 2001
From: Jonas Hungershausen <jonas.hungershausen@ory.sh>
Date: Mon, 25 Nov 2024 15:20:01 +0100
Subject: [PATCH] feat: allow overriding of field messages

---
 .../src/theme/default/components/form/index.tsx   |  4 +++-
 .../src/theme/default/components/form/label.tsx   | 15 +++------------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/elements-react/src/theme/default/components/form/index.tsx b/packages/elements-react/src/theme/default/components/form/index.tsx
index c487d398..ea7605c9 100644
--- a/packages/elements-react/src/theme/default/components/form/index.tsx
+++ b/packages/elements-react/src/theme/default/components/form/index.tsx
@@ -5,6 +5,7 @@ import { PropsWithChildren } from "react"
 import { cn } from "../../utils/cn"
 import { useIntl } from "react-intl"
 import {
+  messageTestId,
   OryFormRootProps,
   uiTextToFormattedMessage,
   useOryFlow,
@@ -52,11 +53,12 @@ export function DefaultMessage({ message }: OryMessageContentProps) {
   const intl = useIntl()
   return (
     <span
-      className={cn("text-sm mt-1 leading-normal", {
+      className={cn("text-sm leading-normal", {
         "text-forms-fg-error": message.type === "error",
         "text-forms-fg-default": message.type === "info",
         "text-forms-fg-success": message.type === "success",
       })}
+      {...messageTestId(message)}
     >
       {uiTextToFormattedMessage(message, intl)}
     </span>
diff --git a/packages/elements-react/src/theme/default/components/form/label.tsx b/packages/elements-react/src/theme/default/components/form/label.tsx
index 2c4a873e..1454e7fb 100644
--- a/packages/elements-react/src/theme/default/components/form/label.tsx
+++ b/packages/elements-react/src/theme/default/components/form/label.tsx
@@ -6,10 +6,10 @@ import {
   OryNodeLabelProps,
   messageTestId,
   uiTextToFormattedMessage,
+  useComponents,
   useOryFlow,
 } from "@ory/elements-react"
 import { useIntl } from "react-intl"
-import { cn } from "../../utils/cn"
 
 export function DefaultLabel({
   node,
@@ -19,6 +19,7 @@ export function DefaultLabel({
 }: OryNodeLabelProps) {
   const intl = useIntl()
   const label = getNodeLabel(node)
+  const { Message } = useComponents()
   const { config, flowType, flow } = useOryFlow()
 
   const isPassword = attributes.type === "password"
@@ -70,17 +71,7 @@ export function DefaultLabel({
       )}
       {children}
       {node.messages.map((message) => (
-        <span
-          key={message.id}
-          className={cn("text-sm leading-normal", {
-            "text-forms-fg-error": message.type === "error",
-            "text-forms-fg-default": message.type === "info",
-            "text-forms-fg-success": message.type === "success",
-          })}
-          {...messageTestId(message)}
-        >
-          {uiTextToFormattedMessage(message, intl)}
-        </span>
+        <Message.Content key={message.id} message={message} />
       ))}
     </div>
   )