Fix #163

pattern/component/field-group/3-inline.php → pattern/component/field-group/3-collapse.php

@@ -1,9 +1,10 @@
 <?php /*
-Title: Inline Field Group
-Class: .field-group.field-group--inline
+Title: Field Group Collapsed Widths
+Class: .field-group.field-group--collapse
+Description: see component/field-group.scss
 */ ?>
 
-<div class="field-group field-group--inline">
+<div class="field-group field-group--collapse">
     <div class="field-group__field">
         <input type="checkbox" id="is_subscribed" name="is_subscribed" value="1" class="checkbox">
     </div>

pattern/component/field-group/4-inline.php

@@ -0,0 +1,12 @@
+<?php /*
+Title: Field Group Inline
+Class: .field-group.field-group--inline
+Description: Grids up at md, see component/field-group.scss
+*/ ?>
+
+<div class="field-group field-group--inline">
+    <label for="text" class="field-group__label required">Text Input</label>
+    <div class="field-group__field">
+        <input id="text" type="text" placeholder="Text Input">
+    </div>
+</div>

src/scss/component/_field-group.scss

@@ -14,22 +14,27 @@
     &:first-child {
         margin-top: 0;
     }
+
+    &__label {
+        margin-bottom: spacing(xs) !important;
+    }
 }
 
 
 // =============================================
-// Form field group scaffold
+// Form field group inline
 // =============================================
 
 @include breakpoint(screen(sm)) {
-    .field-group--scaffold {
+    .field-group--inline {
         @include flex;
-        flex-flow: wrap;
+        @include align-items(center);
         max-width: screen(sm,max);
 
         .field-group__label {
             width: 25%;
             max-width: 16em;
+            margin-bottom: 0;
         }
 
         .field-group__field {
@@ -44,19 +49,10 @@
 
 
 // =============================================
-// scaffold form
-// =============================================
-
-.scaffold-form .field-group:not(.field-group--inline) {
-    @extend .field-group--scaffold;
-}
-
-
-// =============================================
-// Inline field group
+// Collapse field group
 // =============================================
 
-.field-group--inline {
+.field-group--collapse {
     @include flex;
     @include justify-content(flex-start);