TASK: Improve form rendering

#144
neos · Jul 22, 2022 · d84c19e · d84c19e
1 parent 094661d
commit d84c19e
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 29 deletions.
diff --git a/NodeTypes/Content/ContactForm/ContactForm.fusion b/NodeTypes/Content/ContactForm/ContactForm.fusion
@@ -7,28 +7,22 @@ prototype(Neos.Demo:Content.ContactForm) < prototype(Neos.Neos:ContentComponent)
         namespace = 'contact'
         process {
             content = afx`
-                <fieldset>
-                    <legend>Contact</legend>
-                    <Neos.Fusion.Form:FieldContainer label="Name" field.name="name" attributes.class="form-group clearfix">
-                        <div class="input">
-                            <Neos.Fusion.Form:Input attributes.class="form-control" />
-                        </div>
+                <fieldset class="space-y-6 mb-8">
+                    <legend class="text-2xl">Contact</legend>
+                    <Neos.Fusion.Form:FieldContainer label="Name" field.name="name" attributes.class="flex flex-col">
+                        <Neos.Fusion.Form:Input attributes.class="form-input" />
                     </Neos.Fusion.Form:FieldContainer>
-                    <Neos.Fusion.Form:FieldContainer label="Email" field.name="email" attributes.class="form-group clearfix">
-                        <div class="input">
-                            <Neos.Fusion.Form:Input attributes.class="form-control" />
-                        </div>
+                    <Neos.Fusion.Form:FieldContainer label="Email" field.name="email" attributes.class="flex flex-col">
+                        <Neos.Fusion.Form:Input attributes.class="form-input" />
                     </Neos.Fusion.Form:FieldContainer>
-                    <Neos.Fusion.Form:FieldContainer label="Message" field.name="message" attributes.class="form-group clearfix">
-                        <div class="input">
-                            <Neos.Fusion.Form:Textarea attributes.class="form-control" />
-                        </div>
+                    <Neos.Fusion.Form:FieldContainer label="Message" field.name="message" attributes.class="flex flex-col">
+                        <Neos.Fusion.Form:Textarea attributes.class="form-textarea" />
                     </Neos.Fusion.Form:FieldContainer>
                 </fieldset>
             `
 
             footer = afx`
-                <button type="submit" class="btn btn-primary">Submit</button>
+                <button type="submit">Submit</button>
             `
 
             schema {

diff --git a/NodeTypes/Content/Registration/Registration.fusion b/NodeTypes/Content/Registration/Registration.fusion
@@ -6,21 +6,21 @@ prototype(Neos.Demo:Content.Registration) < prototype(Neos.Fusion.Form:Runtime.R
 
     process {
         content = afx`
-            <div class="form-group">
-                <Neos.Fusion.Form:FieldContainer field.name="firstName" label="First Name" attributes.style="display:flex;flex-direction:column;justify-content:space-between;">
-                    <Neos.Fusion.Form:Input attributes.style="width:300px;margin-bottom:15px;" />
+            <fieldset class="space-y-6 mb-8 max-w-[300px]">
+                <Neos.Fusion.Form:FieldContainer field.name="firstName" label="First Name" attributes.class="flex flex-col">
+                    <Neos.Fusion.Form:Input attributes.class="form-input" />
                 </Neos.Fusion.Form:FieldContainer>
-                <Neos.Fusion.Form:FieldContainer field.name="lastName" label="Last Name" attributes.style="display:flex;flex-direction:column;justify-content:space-between;">
-                    <Neos.Fusion.Form:Input attributes.style="width:300px;margin-bottom:15px;" />
+                <Neos.Fusion.Form:FieldContainer field.name="lastName" label="Last Name" attributes.class="flex flex-col">
+                    <Neos.Fusion.Form:Input attributes.class="form-input" />
                 </Neos.Fusion.Form:FieldContainer>
-                <Neos.Fusion.Form:FieldContainer field.name="username" label="Username" attributes.style="display:flex;flex-direction:column;justify-content:space-between;">
+                <Neos.Fusion.Form:FieldContainer field.name="username" label="Username" attributes.class="flex flex-col">
+                    <Neos.Fusion.Form:Input attributes.class="form-input" />
                     <small>(lowercase letters and numbers only)</small>
-                    <Neos.Fusion.Form:Input attributes.style="width:300px;margin-bottom:15px;" />
                 </Neos.Fusion.Form:FieldContainer>
-                <Neos.Fusion.Form:FieldContainer field.name="password" label="Password" attributes.style="display:flex;flex-direction:column;justify-content:space-between;">
-                    <Neos.Fusion.Form:Password attributes.style="width:300px" />
+                <Neos.Fusion.Form:FieldContainer field.name="password" label="Password" attributes.class="flex flex-col">
+                    <Neos.Fusion.Form:Password attributes.class="form-input" />
                 </Neos.Fusion.Form:FieldContainer>
-            </div>
+            </fieldset>
         `
 
         schema {

diff --git a/Resources/Private/Fusion/Presentation/Template/Base/Base.pcss b/Resources/Private/Fusion/Presentation/Template/Base/Base.pcss
@@ -43,9 +43,20 @@
     outline-color: theme(colors.light);
   }
 
-  /* .prose .neos-contentcollection :where(p, figure):first-child {
-    margin-top: 0;
-  } */
+  button[type="submit"] {
+    min-width: theme(spacing.32);
+    background-color: theme(colors.light);
+    padding: theme(spacing.2) theme(spacing.4);
+    border: none;
+    color: theme(colors.white);
+    transition: background-color theme(transitionDuration.DEFAULT)
+      theme(transitionTimingFunction.DEFAULT);
+
+    &:hover,
+    &:focus {
+      background-color: theme(colors.dark);
+    }
+  }
 
   @media print {
     h1,
@@ -79,3 +90,9 @@
     }
   }
 }
+
+@layer utilities {
+  :is(.form-input, .form-multiselect, .form-select, .form-textarea):focus {
+    --tw-ring-color: theme(colors.light);
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -100,6 +100,9 @@ module.exports = {
                 light: 'rgb(var(--color-light) / <alpha-value>)',
                 dark: 'rgb(var(--color-dark) / <alpha-value>)',
             },
+            ringColor: {
+                DEFAULT: 'rgb(var(--color-light))',
+            },
             fontFamily: {
                 sans: ['Work Sans', ...defaultTheme.fontFamily.sans],
             },
@@ -164,7 +167,9 @@ module.exports = {
         },
     },
     plugins: [
-        require('@tailwindcss/forms'),
+        require('@tailwindcss/forms')({
+            strategy: 'class',
+        }),
         require('@tailwindcss/typography'),
         require('@tailwindcss/line-clamp'),
         plugin(({ addVariant, addUtilities }) => {