feat: form group spacing tidy

etchteam · Feb 9, 2024 · 1b5d080 · 1b5d080
1 parent f867ccb
commit 1b5d080
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/components/composition/FormGroup/FormGroup.css b/components/composition/FormGroup/FormGroup.css
@@ -1,16 +1,21 @@
 diamond-form-group {
   display: grid;
-  gap: var(--diamond-spacing);
+  gap: var(--diamond-spacing-sm);
 
-  &[orientation='horizontal'] {
-    grid-template-columns: 1fr 1fr;
+  label {
+    /* Negate the extra label height to account for the form group gap */
+    margin-block: calc(
+      (var(--diamond-label-height) / var(--diamond-font-line-height) / 4) * -1
+    );
+  }
 
-    :first-child {
-      grid-column: 1;
-    }
+  @media (width >= 768px) {
+    &[orientation='horizontal'] {
+      grid-template-columns: 1fr 1fr;
 
-    :not(:first-child) {
-      grid-column: 2;
+      :not(:first-child) {
+        grid-column: 2;
+      }
     }
   }
 }
diff --git a/components/composition/FormGroup/FormGroup.stories.ts b/components/composition/FormGroup/FormGroup.stories.ts
@@ -21,28 +21,30 @@ export default {
 export const FormGroup: StoryObj = {
   render: (args) => html`
     <diamond-form-group orientation="${args.orientation}">
-      <label for="name">Form group</label>
+      <label for="name">Form group label</label>
       <diamond-input>
         <input id="name" type="text" />
       </diamond-input>
+      <p>Help text</p>
     </diamond-form-group>
   `,
 };
 
 export const ComposingElements: StoryObj = {
   render: () => html`
     <diamond-form-group orientation="horizontal">
-      <diamond-grid>
+      <diamond-grid align-items="center">
         <diamond-grid-item grow="grow">
-          <label for="name">Form group</label>
+          <label for="composing-elements">Form group label</label>
         </diamond-grid-item>
         <diamond-grid-item>
           <svg
             viewBox="0 0 24 24"
             stroke="currentColor"
+            fill="none"
             width="24"
             height="24"
-            aria-hidden="true"
+            aria-label="A random icon for example placement"
           >
             <path
               d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
@@ -51,7 +53,7 @@ export const ComposingElements: StoryObj = {
         </diamond-grid-item>
       </diamond-grid>
       <diamond-input>
-        <input id="name" type="text" />
+        <input id="composing-elements" type="text" />
       </diamond-input>
       <p>Help text</p>
     </diamond-form-group>