feat: update sys-form to use display: grid by default

src/components/sys-form-error.vue

@@ -22,6 +22,7 @@
     border: 1px solid var(--color-light-form-input-border);
     color: var(--color-light-form-input-background);
     display: block;
+    grid-column: 1 / -1;
     padding: 0.5rem;
   }
 </style>

src/components/sys-form-input.vue

@@ -8,7 +8,6 @@
   <validation-provider
     ref="provider"
     v-slot="{ errors, required, ariaInput, ariaMsg }"
-    :class="$style.formgroup"
     :disabled="disabled"
     :name="id"
     :rules="rules"
@@ -166,10 +165,3 @@
     }
   }
 </script>
-
-<style module>
-  .formgroup {
-    display: block;
-    margin: 0.6rem 0;
-  }
-</style>

src/components/sys-form-markdown.vue

@@ -181,11 +181,6 @@
 </script>
 
 <style module>
-  .formgroup {
-    display: block;
-    margin: 0.6rem 0;
-  }
-
   .label {
     display: flex;
     flex-wrap: nowrap;

src/components/sys-form-select.vue

@@ -5,7 +5,7 @@
  */
 
 <template>
-  <div :class="$style.formgroup">
+  <div>
     <sys-label :for="id">
       {{ label }}
     </sys-label>
@@ -102,10 +102,3 @@
     }
   }
 </script>
-
-<style module>
-  .formgroup {
-    display: block;
-    margin: 0.6rem 0;
-  }
-</style>

src/components/sys-form-textarea.vue

@@ -8,7 +8,6 @@
   <validation-provider
     ref="provider"
     v-slot="{ errors, required, ariaInput, ariaMsg }"
-    :class="$style.formgroup"
     :disabled="disabled"
     :name="id"
     :rules="rules"
@@ -160,10 +159,3 @@
     }
   }
 </script>
-
-<style module>
-  .formgroup {
-    display: block;
-    margin: 0.6rem 0;
-  }
-</style>

src/components/sys-form.stories.mdx

@@ -18,6 +18,23 @@ please take a look at the example storybooks.
 
 <Props of={SysForm} />
 
+## Styling
+
+By default, the form element is `display: grid`. This allows you to build some
+fancy multi line forms while avoiding a bunch of the messy margin properties.
+
+For this to work, if you are putting inputs next to each other, you need to
+explicit set the grid columns like so:
+
+```css
+form {
+  grid-template-columns: repeat(3, 1fr);
+}
+```
+
+If you do not do this, the bottom action buttons will not span to the end and
+look off.
+
 ### Normal
 
 This is how a basic form would look.

src/components/sys-form.vue

@@ -161,7 +161,12 @@
 
 <style module>
   .form {
-    display: block;
+    align-content: stretch;
+    align-items: stretch;
+    display: grid;
+    grid-gap: 0.4rem 1rem;
+    grid-template-columns: 1fr;
+    justify-content: stretch;
     margin: 0;
     min-width: calc(320px - 2rem);
     padding: 0;
@@ -172,7 +177,8 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
+    grid-column: 1 / -1;
     justify-content: flex-end;
-    margin: -0.4rem 0 0;
+    margin: -0.5rem 0;
   }
 </style>