From c85ac3110de1e15dcb124d02a28f408fab5e4b44 Mon Sep 17 00:00:00 2001
From: Blake Kostner <git@btkostner.io>
Date: Fri, 8 May 2020 20:15:46 -0600
Subject: [PATCH] feat: update sys-form to use display: grid by default

---
 src/components/sys-form-error.vue    |  1 +
 src/components/sys-form-input.vue    |  8 --------
 src/components/sys-form-markdown.vue |  5 -----
 src/components/sys-form-select.vue   |  9 +--------
 src/components/sys-form-textarea.vue |  8 --------
 src/components/sys-form.stories.mdx  | 17 +++++++++++++++++
 src/components/sys-form.vue          | 10 ++++++++--
 7 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/components/sys-form-error.vue b/src/components/sys-form-error.vue
index b950a3b..7f8f18f 100644
--- a/src/components/sys-form-error.vue
+++ b/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>
diff --git a/src/components/sys-form-input.vue b/src/components/sys-form-input.vue
index bf9e0ff..756e9f6 100644
--- a/src/components/sys-form-input.vue
+++ b/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>
diff --git a/src/components/sys-form-markdown.vue b/src/components/sys-form-markdown.vue
index 271e71e..65f79c2 100644
--- a/src/components/sys-form-markdown.vue
+++ b/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;
diff --git a/src/components/sys-form-select.vue b/src/components/sys-form-select.vue
index 27441a1..25fa9ff 100644
--- a/src/components/sys-form-select.vue
+++ b/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>
diff --git a/src/components/sys-form-textarea.vue b/src/components/sys-form-textarea.vue
index 0f42b54..1eb28a0 100644
--- a/src/components/sys-form-textarea.vue
+++ b/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>
diff --git a/src/components/sys-form.stories.mdx b/src/components/sys-form.stories.mdx
index 36c8bd6..96c7760 100644
--- a/src/components/sys-form.stories.mdx
+++ b/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.
diff --git a/src/components/sys-form.vue b/src/components/sys-form.vue
index ee5d9f0..1654b9f 100644
--- a/src/components/sys-form.vue
+++ b/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>