From 8046ed1c9427d39c4c4daac465378f8317e46ccf Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Fri, 5 Jan 2024 18:02:48 +0100
Subject: [PATCH] docs: add PicoFieldErrors

---
 src/components/list/ListField.mock.tsx |  7 +++----
 src/scenarios/PicoFieldErrors.tsx      | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 src/scenarios/PicoFieldErrors.tsx

diff --git a/src/components/list/ListField.mock.tsx b/src/components/list/ListField.mock.tsx
index dd98430..e80c6ef 100644
--- a/src/components/list/ListField.mock.tsx
+++ b/src/components/list/ListField.mock.tsx
@@ -1,7 +1,8 @@
 import { ReactNode } from "react";
 
-import { FieldErrors, FieldLabel } from "..";
+import { FieldLabel } from "..";
 import { ListAtomItems, ListAtomValue } from "../../atoms/list-atom";
+import { PicoFieldErrors } from "../../scenarios/PicoFieldErrors";
 
 import { List, ListProps } from ".";
 
@@ -16,9 +17,7 @@ export const ListField = <Fields extends ListAtomItems>({
     <>
       <FieldLabel field={field} label={label} />
       <List field={field} {...listProps} />
-      <div style={{ marginBottom: 16, color: "var(--del-color)" }}>
-        <FieldErrors field={field} />
-      </div>
+      <PicoFieldErrors field={field} />
     </>
   );
 };
diff --git a/src/scenarios/PicoFieldErrors.tsx b/src/scenarios/PicoFieldErrors.tsx
new file mode 100644
index 0000000..9a8be21
--- /dev/null
+++ b/src/scenarios/PicoFieldErrors.tsx
@@ -0,0 +1,17 @@
+import { FieldErrors, FieldErrorsProps } from "../components";
+
+const style = { color: "var(--del-color)" };
+
+export const PicoFieldErrors = (props: Omit<FieldErrorsProps, "children">) => (
+  <FieldErrors {...props}>
+    {({ errors }) => (
+      <>
+        {errors.map((error, index) => (
+          <p key={index} style={style}>
+            {error}
+          </p>
+        ))}
+      </>
+    )}
+  </FieldErrors>
+);