Fixes help text bleeding through on box classification, adds full specimen sheet

dist/snow.css

@@ -75,7 +75,8 @@
       padding-left: 2em; }
   .formulate-input[data-classification='text'] input[type="color"] {
     height: 1.1em;
-    box-sizing: content-box; }
+    box-sizing: content-box;
+    width: auto; }
     .formulate-input[data-classification='text'] input[type="color"]::-webkit-color-swatch-wrapper {
       padding: 0 0 0 1.5em;
       display: flex;

examples/FormulateSpecimens.vue

@@ -1,19 +1,40 @@
 <template>
-  <div id="app">
+  <div
+    id="app"
+    class="specimen-list"
+  >
+    <SpecimenButton />
+    <SpecimenBox />
+    <SpecimenFile />
     <SpecimenGroup />
+    <SpecimenSelect />
+    <SpecimenSlider />
     <SpecimenText />
+    <SpecimenTextarea />
   </div>
 </template>
 
 <script>
 import SpecimenText from './specimens/SpecimenText'
+import SpecimenTextarea from './specimens/SpecimenTextarea'
 import SpecimenGroup from './specimens/SpecimenGroup'
+import SpecimenFile from './specimens/SpecimenFile'
+import SpecimenButton from './specimens/SpecimenButton'
+import SpecimenBox from './specimens/SpecimenBox'
+import SpecimenSlider from './specimens/SpecimenSlider'
+import SpecimenSelect from './specimens/SpecimenSelect'
 
 export default {
   name: 'App',
   components: {
+    SpecimenButton,
+    SpecimenBox,
     SpecimenText,
-    SpecimenGroup
+    SpecimenTextarea,
+    SpecimenGroup,
+    SpecimenFile,
+    SpecimenSlider,
+    SpecimenSelect
   },
   data () {
     return {
@@ -25,15 +46,62 @@ export default {
 <style lang="scss">
 @import '../themes/snow/snow.scss';
 body {
+  margin: 0;
+  padding: 0;
   font-family: $formulate-font-stack;
 }
-.specimens {
-  margin-bottom: 2em;
-  padding-bottom: 2em;
-  border-bottom: 1px solid gray;
+h2 {
+  display: block;
+  width: 100%;
+  position: sticky;
+  top: 0;
+  background-color: white;
+  padding: .5em 0;
+  color: $formulate-green;
+  border-bottom: 1px solid $formulate-gray;
+  margin: 2em 0 0 0;
+  z-index: 10;
+}
+.specimen-list {
+  padding: 1em;
+  max-width: 1200px;
+  margin: 0 auto;
+  @media (min-width: 756px) {
+    padding: 2em;
+  }
 
+}
+.specimens {
+  @media (min-width: 500px) {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
   &:last-child {
     border-bottom: 0;
   }
 }
+
+.specimen {
+  max-width: 400px;
+  padding: 1em;
+  box-sizing: border-box;
+
+  @media (min-width: 500px) {
+    width: 50%;
+    border-bottom: 1px solid $formulate-gray;
+    &:nth-of-type(odd) {
+      border-right: 1px solid $formulate-gray;
+    }
+  }
+
+  @media (min-width: 900px) {
+    width: 33.332%;
+    border-right: 1px solid $formulate-gray;
+
+    &:nth-of-type(3n) {
+      border-right: 0;
+    }
+  }
+}
 </style>

examples/specimens/SpecimenBox.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="specimens specimens--text">
+    <h2>Box classification</h2>
+    <div class="specimen">
+      <h3>Single Checkbox</h3>
+      <FormulateInput
+        type="checkbox"
+        label="Are you attractive?"
+        help="In your own opinion at least."
+      />
+    </div>
+    <div class="specimen">
+      <h3>Multi checkbox</h3>
+      <FormulateInput
+        type="checkbox"
+        label="Which recent U.S. president is your favorite?"
+        :options="{trump: 'Trump', obama: 'Obama', bush: 'Bush', clinton: 'Clinton'}"
+        help="Your selection will be transmitted directly to the NSA."
+      />
+    </div>
+    <div class="specimen">
+      <h3>Radio</h3>
+      <FormulateInput
+        type="radio"
+        label="What heavily body would you like to visit?"
+        :options="{moon: 'Moon', mars: 'Mars', venus: 'Venus', mercury: 'Mercury', sun: 'Sun'}"
+      />
+    </div>
+  </div>
+</template>

examples/specimens/SpecimenButton.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="specimens">
+    <h2>Button classification</h2>
+    <div class="specimen">
+      <h3>Button</h3>
+      <FormulateInput
+        label="Click me"
+        type="button"
+      />
+    </div>
+    <div class="specimen">
+      <h3>Submit</h3>
+      <FormulateInput
+        label="Submit me"
+        type="submit"
+      />
+    </div>
+  </div>
+</template>

examples/specimens/SpecimenFile.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="specimens specimens--text">
+    <h2>File classifications</h2>
+    <div class="specimen specimen">
+      <h3>Text</h3>
+      <FormulateInput
+        label="Upload a file"
+        type="file"
+        help="Select any file to upload"
+      />
+    </div>
+    <div class="specimen">
+      <h3>Image</h3>
+      <FormulateInput
+        label="What do you look like?"
+        type="image"
+        help="Select a picture to upload."
+      />
+    </div>
+  </div>
+</template>

examples/specimens/SpecimenGroup.vue

@@ -1,28 +1,27 @@
 <template>
   <div class="specimens specimens--group">
-    <h2>Non-repeatable group</h2>
-    <FormulateInput
-      type="group"
-    >
+    <h2>Group classification</h2>
+    <div class="specimen">
+      <h3>Non-repeatable group</h3>
       <FormulateInput
-        label="City"
-        type="text"
-        name="city"
-      />
+        type="group"
+      >
+        <FormulateInput
+          label="City"
+          type="text"
+          name="city"
+        />
+        <FormulateInput
+          label="State"
+          type="select"
+          :options="{NE: 'Nebraska', MO: 'Missouri', VA: 'Virginia'}"
+          placeholder="Select a state"
+        />
+      </FormulateInput>
+    </div>
+    <div class="specimen">
+      <h3>Repeatable group</h3>
       <FormulateInput
-        label="State"
-        type="select"
-        :options="{NE: 'Nebraska', MO: 'Missouri', VA: 'Virginia'}"
-        placeholder="Select a state"
-      />
-    </FormulateInput>
-    <h2>Repeatable group</h2>
-    <FormulateForm
-      v-model="formData"
-      @submit="save"
-    >
-      <FormulateInput
-        v-model="users"
         name="users"
         label="Invite some new users"
         type="group"
@@ -38,7 +37,6 @@
           validation="required"
         />
         <FormulateInput
-          v-model="email"
           name="email"
           label="Email address"
           type="email"
@@ -49,34 +47,11 @@
       <FormulateInput
         type="submit"
       />
-    </FormulateForm>
-    <!-- <span>Form Values</span>
-    <pre>{{ formData }}</pre>
-    <span>Save Values</span> -->
-    <pre>{{ saveValues }}</pre>
-    <!-- <pre>{{ email }}</pre>
-    <pre>{{ users }}</pre> -->
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  data () {
-    return {
-      formData: {
-      },
-      users: [
-        { name: 'Justin' },
-        {}
-      ],
-      email: 'justin@wearebraid.com',
-      saveValues: null
-    }
-  },
-  methods: {
-    save (values) {
-      this.saveValues = values
-    }
-  }
 }
 </script>

examples/specimens/SpecimenSelect.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="specimens specimens--text">
+    <h2>Select classification</h2>
+    <div class="specimen specimen--single">
+      <h3>Select</h3>
+      <FormulateInput
+        label="What planet is the hottest?"
+        type="select"
+        :options="{mercury: 'Mercury', venus: 'Venus', earth: 'Earth', mars: 'Mars'}"
+        help="Average temperature on the surface of the planet."
+      />
+    </div>
+  </div>
+</template>

examples/specimens/SpecimenSlider.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="specimens specimens--text">
+    <h2>Slider classification</h2>
+    <div class="specimen specimen--single">
+      <h3>Range</h3>
+      <FormulateInput
+        label="How far should we crank it up?"
+        type="range"
+        min="0"
+        max="11"
+        :show-value="true"
+        help="Whenever we’re allowed to have a party again..."
+      />
+    </div>
+  </div>
+</template>

examples/specimens/SpecimenText.vue

@@ -1,16 +1,117 @@
 <template>
   <div class="specimens specimens--text">
-    <FormulateInput
-      label="Username"
-      type="text"
-      placeholder="Username"
-      help="Select a username"
-    />
-    <FormulateInput
-      label="How old are you?"
-      type="number"
-      placeholder="25"
-      help="Select your age"
-    />
+    <h2>Text classifications</h2>
+    <div class="specimen">
+      <h3>Color</h3>
+      <FormulateInput
+        label="Pick a color?"
+        type="color"
+        help="Choose your favorite."
+      />
+    </div>
+    <div class="specimen">
+      <h3>Date</h3>
+      <FormulateInput
+        label="Select a day."
+        type="date"
+        help="Choose your birthday."
+      />
+    </div>
+    <div class="specimen">
+      <h3>Datetime-local</h3>
+      <FormulateInput
+        label="Select a day and time."
+        type="datetime-local"
+        help="When is the meeting?"
+      />
+    </div>
+    <div class="specimen">
+      <h3>Email</h3>
+      <FormulateInput
+        label="What is your email?"
+        type="email"
+        placeholder="placeholder@example.com"
+        help="What is your email address?"
+      />
+    </div>
+    <div class="specimen">
+      <h3>Month</h3>
+      <FormulateInput
+        label="Favorite month"
+        type="month"
+        help="When is Christmas?"
+      />
+    </div>
+    <div class="specimen">
+      <h3>Number</h3>
+      <FormulateInput
+        label="How old are you?"
+        type="number"
+        placeholder="25"
+        help="Select your age"
+      />
+    </div>
+    <div class="specimen">
+      <h3>Password</h3>
+      <FormulateInput
+        label="Enter a password."
+        type="password"
+        help="Choose something long and tricky."
+      />
+    </div>
+    <div class="specimen">
+      <h3>Search</h3>
+      <FormulateInput
+        label="But I still haven't found."
+        type="search"
+        placeholder="What im looking for..."
+        help="I have climbed the highest mountains."
+      />
+    </div>
+    <div class="specimen">
+      <h3>Tel</h3>
+      <FormulateInput
+        label="Oh you like Mike & Ikes?"
+        type="tel"
+        placeholder="Can I have you number..."
+        help="Can I have it?"
+      />
+    </div>
+    <div class="specimen">
+      <h3>Time</h3>
+      <FormulateInput
+        label="What time is dinner?"
+        type="time"
+        placeholder="Pick a time"
+        help="When will you eat your food?"
+      />
+    </div>
+    <div class="specimen">
+      <h3>Text</h3>
+      <FormulateInput
+        label="Username"
+        type="text"
+        placeholder="Username"
+        help="Select a username"
+      />
+    </div>
+    <div class="specimen">
+      <h3>Url</h3>
+      <FormulateInput
+        label="Personal website"
+        type="url"
+        placeholder="https://"
+        help="What is the url for your website?"
+      />
+    </div>
+    <div class="specimen">
+      <h3>Week</h3>
+      <FormulateInput
+        label="I don’t know who would use this field."
+        type="week"
+        placeholder="Pick a week"
+        help="What week is it?"
+      />
+    </div>
   </div>
 </template>

examples/specimens/SpecimenTextarea.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="specimens specimens--text">
+    <h2>Textarea classification</h2>
+    <div class="specimen specimen--single">
+      <h3>Textarea</h3>
+      <FormulateInput
+        label="What is your life story?"
+        type="textarea"
+        help="I want to hear all about it!"
+      />
+    </div>
+  </div>
+</template>

src/inputs/FormulateInputGroup.vue

@@ -75,6 +75,7 @@ export default {
         slotComponents,
         validationErrors,
         visibleValidationErrors,
+        help,
         ...context
       } = this.context
       return this.options.map(option => this.groupItemContext(

themes/snow/_inputs.scss

@@ -103,6 +103,7 @@
     input[type="color"] {
       height: 1.1em;
       box-sizing: content-box;
+      width: auto;
 
       @mixin color-swatch {
         display: block;