From a9dece169d4ce42cbb5a1fdd2e454651abd11b10 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Mon, 19 Feb 2024 11:02:40 +0100
Subject: [PATCH] style: use new pico fieldset group in stories

---
 src/components/list/List.stories.tsx | 40 ++++++----------------------
 1 file changed, 8 insertions(+), 32 deletions(-)

diff --git a/src/components/list/List.stories.tsx b/src/components/list/List.stories.tsx
index 9b9eb91..a796e05 100644
--- a/src/components/list/List.stories.tsx
+++ b/src/components/list/List.stories.tsx
@@ -126,16 +126,10 @@ export const ListOfPrimitiveValues = listStory({
       builder: (value) => textField({ value }),
     }),
     children: ({ fields, RemoveButton }) => (
-      <div
-        style={{
-          display: "grid",
-          gridGap: 16,
-          gridTemplateColumns: "auto min-content",
-        }}
-      >
+      <fieldset role="group">
         <InputField atom={fields} component="input" />
         <RemoveButton />
-      </div>
+      </fieldset>
     ),
   },
 });
@@ -169,16 +163,10 @@ export const CustomAddButton = listStory({
       </button>
     ),
     children: ({ fields, RemoveButton }) => (
-      <div
-        style={{
-          display: "grid",
-          gridGap: 16,
-          gridTemplateColumns: "auto min-content",
-        }}
-      >
+      <fieldset role="group">
         <InputField atom={fields} component="input" />
         <RemoveButton />
-      </div>
+      </fieldset>
     ),
   },
 });
@@ -207,16 +195,10 @@ export const EmptyRenderProp = listStory({
       </article>
     ),
     children: ({ fields, RemoveButton }) => (
-      <div
-        style={{
-          display: "grid",
-          gridGap: 16,
-          gridTemplateColumns: "auto min-content",
-        }}
-      >
+      <fieldset role="group">
         <InputField atom={fields} component="input" />
         <RemoveButton />
-      </div>
+      </fieldset>
     ),
   },
 });
@@ -272,13 +254,7 @@ export const OrderingItems = listStory({
     }),
     AddButton: AddHobbyButton,
     children: ({ fields, moveUp, moveDown, RemoveButton }) => (
-      <div
-        style={{
-          display: "grid",
-          gridGap: 16,
-          gridTemplateColumns: "auto min-content min-content min-content",
-        }}
-      >
+      <fieldset role="group">
         <InputField atom={fields} component="input" />
         <button type="button" className="outline" onClick={moveUp}>
           Up
@@ -287,7 +263,7 @@ export const OrderingItems = listStory({
           Down
         </button>
         <RemoveButton />
-      </div>
+      </fieldset>
     ),
   },
 });