docs: description for prop _msg on inputs (#382)

laske185 · web-flow · commit dcd11016cbad · 2025-09-16T08:10:32.000+02:00
diff --git a/docs/30-components/input-checkbox.mdx b/docs/30-components/input-checkbox.mdx
@@ -12,6 +12,7 @@ import Readme from '../../readmes/input-checkbox/readme.md';
 import { Configurator } from '@site/src/components/Configurator';
 import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
 import { ExampleLink } from '@site/src/components/ExampleLink';
+import { PropertyMsgUsage } from '@site/src/components/PropertyMsgUsage';
 
 # Checkbox
 
@@ -83,6 +84,10 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
 
 <Readme />
 
+## Verwendung _msg
+
+<PropertyMsgUsage />
+
 <ExampleLink component="input-checkbox" />
 
 ## Live-Editor
diff --git a/docs/30-components/input-color.mdx b/docs/30-components/input-color.mdx
@@ -12,6 +12,7 @@ import Readme from '../../readmes/input-color/readme.md';
 import { Configurator } from '@site/src/components/Configurator';
 import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
 import { ExampleLink } from '@site/src/components/ExampleLink';
+import { PropertyMsgUsage } from '@site/src/components/PropertyMsgUsage';
 
 # InputColor
 
@@ -72,6 +73,10 @@ Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgef
 
 <Readme />
 
+## Verwendung _msg
+
+<PropertyMsgUsage />
+
 <ExampleLink component="input-color" />
 
 ## Live-Editor
diff --git a/docs/30-components/input-date.mdx b/docs/30-components/input-date.mdx
@@ -12,6 +12,7 @@ import Readme from '../../readmes/input-date/readme.md';
 import { Configurator } from '@site/src/components/Configurator';
 import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
 import { ExampleLink } from '@site/src/components/ExampleLink';
+import { PropertyMsgUsage } from '@site/src/components/PropertyMsgUsage';
 
 # InputDate
 
@@ -127,6 +128,10 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
 
 <Readme />
 
+## Verwendung _msg
+
+<PropertyMsgUsage />
+
 <ExampleLink component="input-date" />
 
 ## Live-Editor
diff --git a/docs/30-components/input-email.mdx b/docs/30-components/input-email.mdx
@@ -12,6 +12,7 @@ import Readme from '../../readmes/input-email/readme.md';
 import { Configurator } from '@site/src/components/Configurator';
 import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
 import { ExampleLink } from '@site/src/components/ExampleLink';
+import { PropertyMsgUsage } from '@site/src/components/PropertyMsgUsage';
 
 # InputEmail
 
@@ -122,6 +123,10 @@ Mit den drei Attributen `_max-length`, `_max-length-behavior` und `_has-counter`
 
 <Readme />
 
+## Verwendung _msg
+
+<PropertyMsgUsage />
+
 <ExampleLink component="input-email" />
 
 ## Live-Editor
diff --git a/docs/30-components/input-file.mdx b/docs/30-components/input-file.mdx
@@ -12,6 +12,7 @@ import Readme from '../../readmes/input-file/readme.md';
 import { Configurator } from '@site/src/components/Configurator';
 import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
 import { ExampleLink } from '@site/src/components/ExampleLink';
+import { PropertyMsgUsage } from '@site/src/components/PropertyMsgUsage';
 
 # InputFile
 
@@ -68,6 +69,10 @@ Mögliche Werte und weitere Informationen erhalten Sie im <kol-link _href="https
 
 <Readme />
 
+## Verwendung _msg
+
+<PropertyMsgUsage />
+
 <ExampleLink component="input-file" />
 
 ## Live-Editor
diff --git a/docs/30-components/input-number.mdx b/docs/30-components/input-number.mdx
@@ -12,6 +12,7 @@ import Readme from '../../readmes/input-number/readme.md';
 import { Configurator } from '@site/src/components/Configurator';
 import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
 import { ExampleLink } from '@site/src/components/ExampleLink';
+import { PropertyMsgUsage } from '@site/src/components/PropertyMsgUsage';
 
 # InputNumber
 
@@ -60,6 +61,10 @@ Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="
 
 <Readme />
 
+## Verwendung _msg
+
+<PropertyMsgUsage />
+
 <ExampleLink component="input-number" />
 
 ## Live-Editor
diff --git a/docs/30-components/input-password.mdx b/docs/30-components/input-password.mdx
@@ -12,6 +12,7 @@ import Readme from '../../readmes/input-password/readme.md';
 import { Configurator } from '@site/src/components/Configurator';
 import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
 import { ExampleLink } from '@site/src/components/ExampleLink';
+import { PropertyMsgUsage } from '@site/src/components/PropertyMsgUsage';
 
 # InputPassword
 
@@ -114,6 +115,10 @@ Mit den drei Attributen `_max-length`, `_max-length-behavior` und `_has-counter`
 
 <Readme />
 
+## Verwendung _msg
+
+<PropertyMsgUsage />
+
 <ExampleLink component="input-password" />
 
 ## Live-Editor
diff --git a/docs/30-components/input-radio.mdx b/docs/30-components/input-radio.mdx
@@ -12,6 +12,7 @@ import Readme from '../../readmes/input-radio/readme.md';
 import { Configurator } from '@site/src/components/Configurator';
 import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
 import { ExampleLink } from '@site/src/components/ExampleLink';
+import { PropertyMsgUsage } from '@site/src/components/PropertyMsgUsage';
 
 # InputRadio
 
@@ -101,6 +102,10 @@ Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="
 
 <Readme />
 
+## Verwendung _msg
+
+<PropertyMsgUsage />
+
 <ExampleLink component="input-radio" />
 
 ## Live-Editor
diff --git a/docs/30-components/input-range.mdx b/docs/30-components/input-range.mdx
@@ -12,6 +12,7 @@ import Readme from '../../readmes/input-range/readme.md';
 import { Configurator } from '@site/src/components/Configurator';
 import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
 import { ExampleLink } from '@site/src/components/ExampleLink';
+import { PropertyMsgUsage } from '@site/src/components/PropertyMsgUsage';
 
 # InputRange
 
@@ -77,6 +78,10 @@ Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="
 
 <Readme />
 
+## Verwendung _msg
+
+<PropertyMsgUsage />
+
 <ExampleLink component="input-range" />
 
 ## Live-Editor
diff --git a/docs/30-components/input-text.mdx b/docs/30-components/input-text.mdx
@@ -12,6 +12,7 @@ import Readme from '../../readmes/input-text/readme.md';
 import { Configurator } from '@site/src/components/Configurator';
 import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
 import { ExampleLink } from '@site/src/components/ExampleLink';
+import { PropertyMsgUsage } from '@site/src/components/PropertyMsgUsage';
 
 # InputText
 
@@ -138,6 +139,10 @@ Mit den drei Attributen `_max-length`, `_max-length-behavior` und `_has-counter`
 
 <Readme />
 
+## Verwendung _msg
+
+<PropertyMsgUsage />
+
 <ExampleLink component="input-text" />
 
 ## Live-Editor
diff --git a/i18n/de/code.json b/i18n/de/code.json
@@ -362,5 +362,32 @@
 	},
 	"feedback.information": {
 		"message": "Ihre Meinung ist uns wichtig! Gemeinsam mit Ihnen möchten wir KoliBri stetig verbessern. Teilen Sie uns Ihre Ideen, Wünsche oder Anregungen mit – schnell und unkompliziert."
-	}
+	},
+	"property.msg.usage": {
+		"message": "Verwendung _msg"
+	},
+	"property.msg.case": {
+		"message": "Fall"
+	},
+	"property.msg.value": {
+		"message": "_msg-Wert"
+	},
+	"property.msg.case.no.msg": {
+		"message": "Keine Message"
+	},
+	"property.msg.value.undefined": {
+		"message": "undefined"
+	},
+	"property.msg.case.standard": {
+		"message": "\"Standard\"-Fehlermeldung"
+	},
+	"property.msg.value.string": {
+		"message": "string"
+	},
+	"property.msg.case.message": {
+		"message": "Meldung"
+	},
+	"property.msg.value.message": {
+		"message": "{_type: 'success', _description: 'Erfolgs-Meldung'}"
+	}	
 }
diff --git a/i18n/en/code.json b/i18n/en/code.json
@@ -362,5 +362,32 @@
 	},
 	"feedback.information": {
 		"message": "Your opinion matters! Together with you, we want to continuously improve KoliBri. Share your ideas, wishes, or suggestions—quickly and easily."
+	},
+	"property.msg.usage": {
+		"message": "Usage _msg"
+	},
+	"property.msg.case": {
+		"message": "Case"
+	},
+	"property.msg.value": {
+		"message": "_msg-Value"
+	},
+	"property.msg.case.no.msg": {
+		"message": "No message"
+	},
+	"property.msg.value.undefined": {
+		"message": "undefined"
+	},
+	"property.msg.case.standard": {
+		"message": "Default error message"
+	},
+	"property.msg.value.string": {
+		"message": "string"
+	},
+	"property.msg.case.message": {
+		"message": "Message"
+	},
+	"property.msg.value.message": {
+		"message": "{_type: 'success', _description: 'Success message'}"
 	}
 }
diff --git a/src/components/PropertyMsgUsage.tsx b/src/components/PropertyMsgUsage.tsx
@@ -0,0 +1,78 @@
+import type { FC } from 'react';
+import React from 'react';
+import { translate } from '@docusaurus/Translate';
+
+export const PropertyMsgUsage: FC = () => {
+    return (
+        <>
+            <table>
+                <thead>
+                    <tr>
+                        <th>
+                            {translate({
+                                id: 'property.msg.case',
+                                message: 'Fall',
+                            })}
+                        </th>
+                        <th>
+                            {translate({
+                                id: 'property.msg.value',
+                                message: '_msg-Wert',
+                            })}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            {translate({
+                                id: 'property.msg.case.no.msg',
+                                message: 'Keine Message',
+                            })}
+                        </td>
+                        <td>
+                            <code>
+                                {translate({
+                                    id: 'property.msg.value.undefined',
+                                    message: 'undefined',
+                                })}
+                            </code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            {translate({
+                                id: 'property.msg.case.standard',
+                                message: 'Standard-Fehlermeldung',
+                            })}
+                        </td>
+                        <td>
+                            <code>
+                                {translate({
+                                    id: 'property.msg.value.string',
+                                    message: 'string',
+                                })}
+                            </code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            {translate({
+                                id: 'property.msg.case.message',
+                                message: 'Meldung',
+                            })}
+                        </td>
+                        <td>
+                            <code>
+                                {translate({
+                                    id: 'property.msg.value.message',
+                                    message: '{_type: success, _description: Success message}',
+                                })}
+                            </code>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </>
+    );
+};
