Merge pull request #537 from TheMcnafaha/replace-fieldsets

refactor(modal/examples): replaces fieldsets in example code

Author: thejackshelton

apps/website/src/routes/docs/headless/modal/examples/animation.tsx

@@ -32,24 +32,24 @@ export default component$(() => {
           <p class="mb-4 leading-5">
             You can update your profile here. Hit the save button when finished.
           </p>
-          <fieldset class="mb-1 flex items-baseline justify-between">
+          <div class="mb-1 flex items-baseline justify-between">
             <label for="name">Name</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-[10px]"
               id="name"
               type="text"
               placeholder="John Doe"
             />
-          </fieldset>
-          <fieldset class="flex items-baseline justify-between">
+          </div>
+          <div class="flex items-baseline justify-between">
             <label for="email">Email</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-3"
               id="email"
               type="text"
               placeholder="[email protected]"
             />
-          </fieldset>
+          </div>
         </ModalContent>
         <ModalFooter class="flex justify-end gap-4">
           <button

apps/website/src/routes/docs/headless/modal/examples/auto-focus.tsx

@@ -23,16 +23,16 @@ export default component$(() => {
           <p class="mb-4 leading-5">
             You can update your profile here. Hit the save button when finished.
           </p>
-          <fieldset class="mb-1 flex items-baseline justify-between">
+          <div class="mb-1 flex items-baseline justify-between">
             <label for="name">Name</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-[10px]"
               id="name"
               type="text"
               placeholder="John Doe"
             />
-          </fieldset>
-          <fieldset class="flex items-baseline justify-between">
+          </div>
+          <div class="flex items-baseline justify-between">
             <label for="email">Email</label>
             <input
               autoFocus
@@ -41,7 +41,7 @@ export default component$(() => {
               type="text"
               placeholder="[email protected]"
             />
-          </fieldset>
+          </div>
         </ModalContent>
         <ModalFooter class="flex justify-end gap-4">
           <button

apps/website/src/routes/docs/headless/modal/examples/backdrop-close.tsx

@@ -24,24 +24,24 @@ export default component$(() => {
           <p class="mb-4 leading-5">
             You can update your profile here. Hit the save button when finished.
           </p>
-          <fieldset class="mb-1 flex items-baseline justify-between">
+          <div class="mb-1 flex items-baseline justify-between">
             <label for="name">Name</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-[10px]"
               id="name"
               type="text"
               placeholder="John Doe"
             />
-          </fieldset>
-          <fieldset class="flex items-baseline justify-between">
+          </div>
+          <div class="flex items-baseline justify-between">
             <label for="email">Email</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-3"
               id="email"
               type="text"
               placeholder="[email protected]"
             />
-          </fieldset>
+          </div>
         </ModalContent>
         <ModalFooter class="flex justify-end gap-4">
           <button

apps/website/src/routes/docs/headless/modal/examples/backdrop.tsx

@@ -30,24 +30,24 @@ export default component$(() => {
           <p class="mb-4 leading-5">
             You can update your profile here. Hit the save button when finished.
           </p>
-          <fieldset class="mb-1 flex items-baseline justify-between">
+          <div class="mb-1 flex items-baseline justify-between">
             <label for="name">Name</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-[10px]"
               id="name"
               type="text"
               placeholder="John Doe"
             />
-          </fieldset>
-          <fieldset class="flex items-baseline justify-between">
+          </div>
+          <div class="flex items-baseline justify-between">
             <label for="email">Email</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-3"
               id="email"
               type="text"
               placeholder="[email protected]"
             />
-          </fieldset>
+          </div>
         </ModalContent>
         <ModalFooter class="flex justify-end gap-4">
           <button

apps/website/src/routes/docs/headless/modal/examples/bottom-sheet.tsx

@@ -12,23 +12,23 @@ export default component$(() => {
     .bottom-sheet::backdrop {
       background: hsla(0, 0%, 0%, 0.5);
     }
-    
+
     .bottom-sheet.modal-showing {
       animation: bottomSheetOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
-    
+
     .bottom-sheet.modal-showing::backdrop {
       animation: sheetFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
-    
+
     .bottom-sheet.modal-closing {
       animation: bottomSheetClose 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
-    
+
     .bottom-sheet.modal-closing::backdrop {
       animation: sheetFadeOut 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
-    
+
     @keyframes bottomSheetOpen {
       from {
         opacity: 0;
@@ -39,7 +39,7 @@ export default component$(() => {
         transform: translateY(0%);
       }
     }
-    
+
     @keyframes bottomSheetClose {
       from {
         opacity: 1;
@@ -50,7 +50,7 @@ export default component$(() => {
         transform: translateY(100%);
       }
     }
-    
+
     @keyframes sheetFadeIn {
       from {
         opacity: 0;
@@ -59,7 +59,7 @@ export default component$(() => {
         opacity: 1;
       }
     }
-    
+
     @keyframes sheetFadeOut {
       from {
         opacity: 1;
@@ -68,7 +68,7 @@ export default component$(() => {
         opacity: 0;
       }
     }
-    
+
     `);
 
   return (
@@ -92,24 +92,24 @@ export default component$(() => {
           <p class="mb-4 leading-5">
             You can update your profile here. Hit the save button when finished.
           </p>
-          <fieldset class="mb-1 flex items-baseline justify-between">
+          <div class="mb-1 flex items-baseline justify-between">
             <label for="name">Name</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-[10px]"
               id="name"
               type="text"
               placeholder="John Doe"
             />
-          </fieldset>
-          <fieldset class="flex items-baseline justify-between">
+          </div>
+          <div class="flex items-baseline justify-between">
             <label for="email">Email</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-3"
               id="email"
               type="text"
               placeholder="[email protected]"
             />
-          </fieldset>
+          </div>
         </ModalContent>
         <ModalFooter class="flex justify-end gap-4">
           <button

apps/website/src/routes/docs/headless/modal/examples/inspect.tsx

@@ -23,24 +23,24 @@ export default component$(() => {
           <p class="mb-4 leading-5">
             You can update your profile here. Hit the save button when finished.
           </p>
-          <fieldset class="mb-1 flex items-baseline justify-between">
+          <div class="mb-1 flex items-baseline justify-between">
             <label for="name">Name</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-[10px]"
               id="name"
               type="text"
               placeholder="John Doe"
             />
-          </fieldset>
-          <fieldset class="flex items-baseline justify-between">
+          </div>
+          <div class="flex items-baseline justify-between">
             <label for="email">Email</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-3"
               id="email"
               type="text"
               placeholder="[email protected]"
             />
-          </fieldset>
+          </div>
         </ModalContent>
         <ModalFooter class="flex justify-end gap-4">
           <button

apps/website/src/routes/docs/headless/modal/examples/main.tsx

@@ -24,24 +24,24 @@ export default component$(() => {
           <p class="mb-4 leading-5">
             You can update your profile here. Hit the save button when finished.
           </p>
-          <fieldset class="mb-1 flex items-baseline justify-between">
+          <div class="mb-1 flex items-baseline justify-between">
             <label for="name">Name</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-[10px]"
               id="name"
               type="text"
               placeholder="John Doe"
             />
-          </fieldset>
-          <fieldset class="flex items-baseline justify-between">
+          </div>
+          <div class="flex items-baseline justify-between">
             <label for="email">Email</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-3"
               id="email"
               type="text"
               placeholder="[email protected]"
             />
-          </fieldset>
+          </div>
         </ModalContent>
         <ModalFooter class="flex justify-end gap-4">
           <button

apps/website/src/routes/docs/headless/modal/examples/sheet.tsx

@@ -12,23 +12,23 @@ export default component$(() => {
   .sheet::backdrop {
     background: hsla(0, 0%, 0%, 0.5);
   }
-  
+
   .sheet.modal-showing {
     animation: sheetOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
   }
-  
+
   .sheet.modal-showing::backdrop {
     animation: sheetFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
   }
-  
+
   .sheet.modal-closing {
     animation: sheetClose 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
   }
-  
+
   .sheet.modal-closing::backdrop {
     animation: sheetFadeOut 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
   }
-  
+
   @keyframes sheetOpen {
     from {
       opacity: 0;
@@ -39,7 +39,7 @@ export default component$(() => {
       transform: translateX(0%);
     }
   }
-  
+
   @keyframes sheetClose {
     from {
       opacity: 1;
@@ -50,7 +50,7 @@ export default component$(() => {
       transform: translateX(100%);
     }
   }
-  
+
   @keyframes sheetFadeIn {
     from {
       opacity: 0;
@@ -59,7 +59,7 @@ export default component$(() => {
       opacity: 1;
     }
   }
-  
+
   @keyframes sheetFadeOut {
     from {
       opacity: 1;
@@ -68,7 +68,7 @@ export default component$(() => {
       opacity: 0;
     }
   }
-  
+
   `);
 
   return (
@@ -92,24 +92,24 @@ export default component$(() => {
           <p class="mb-4 leading-5">
             You can update your profile here. Hit the save button when finished.
           </p>
-          <fieldset class="mb-1 flex items-baseline justify-between">
+          <div class="mb-1 flex items-baseline justify-between">
             <label for="name">Name</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-[10px]"
               id="name"
               type="text"
               placeholder="John Doe"
             />
-          </fieldset>
-          <fieldset class="flex items-baseline justify-between">
+          </div>
+          <div class="flex items-baseline justify-between">
             <label for="email">Email</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-3"
               id="email"
               type="text"
               placeholder="[email protected]"
             />
-          </fieldset>
+          </div>
         </ModalContent>
         <ModalFooter class="flex justify-end gap-4">
           <button

apps/website/src/routes/docs/headless/modal/examples/transition.tsx

@@ -22,7 +22,7 @@ export default component$(() => {
     .my-transition.modal-showing, .my-transition.modal-showing::backdrop {
         opacity: 1;
     }
-    
+
     .my-transition.modal-closing, .my-transition.modal-closing::backdrop {
         opacity: 0;
     }
@@ -49,24 +49,24 @@ export default component$(() => {
           <p class="mb-4 leading-5">
             You can update your profile here. Hit the save button when finished.
           </p>
-          <fieldset class="mb-1 flex items-baseline justify-between">
+          <div class="mb-1 flex items-baseline justify-between">
             <label for="name">Name</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-[10px]"
               id="name"
               type="text"
               placeholder="John Doe"
             />
-          </fieldset>
-          <fieldset class="flex items-baseline justify-between">
+          </div>
+          <div class="flex items-baseline justify-between">
             <label for="email">Email</label>
             <input
               class="bg-background text-foreground mt-2 rounded-sm px-4 py-3"
               id="email"
               type="text"
               placeholder="[email protected]"
             />
-          </fieldset>
+          </div>
         </ModalContent>
         <ModalFooter class="flex justify-end gap-4">
           <button