Skip to content

Commit

Permalink
Merge pull request #1582 from Mandily/styleguide_form_rules
Browse files Browse the repository at this point in the history
Styleguide form rules
gmacdougall authored Jul 1, 2017
2 parents 671f186 + 6608ea5 commit 0ff0780
Showing 13 changed files with 159 additions and 11 deletions.
Original file line number Diff line number Diff line change
@@ -26,7 +26,8 @@
flex: 1;
}

ul {
ul.example,
ul.example ul {
list-style: none;
padding-left: 0;
}
@@ -64,10 +65,6 @@
margin: 4rem 0;
}

&-section {
@include clearfix;
}

&-section-header {
@include margin(7rem 0 3rem);
border-bottom: 1px solid darken($color-7, 10%);
@@ -88,13 +85,13 @@
}

.half {
width: 50%;
float: left;
display: inline-block;
width: 49%;
padding-right: 1rem;
vertical-align: top;

+ .half {
float: none;
margin-left: 50%;
display: inline-block;
padding-right: 0;
padding-left: 1rem;
}
4 changes: 4 additions & 0 deletions backend/app/controllers/spree/admin/style_guide_controller.rb
Original file line number Diff line number Diff line change
@@ -15,6 +15,10 @@ def index
],
forms: [
'building_forms',
'buttons',
'helper_text',
'inputs',
'labels',
'validation'
],
components: [
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<p>This content is related to the current Solidus layout and it's forms, and does not apply to building pages with Bootstrap. The "Building Forms" section will be removed once all new Bootstrap layouts have been implemented in Solidus core.</p>
<%- snippet = capture do %>
<form id="table-filter">
<fieldset>
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<ul>
<li>Display form buttons at the bottom of the group, after the form inputs.</li>
<li>Primary action buttons and icons should be one style, secondary actions a second style, and destroy actions a third style.</li>
<li>Display search buttons and upload image buttons attached to the left side of the text field they accompany.</li>
<li>Allow users to submit a search form with the enter key when the cursor is inside of the search field.</li>
</ul>
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<ul>
<li>Include a "i" icon and tooltip beside form labels with supplementary information.</li>
<li>Display input restrictions below form labels and above inputs (example: max 100 characters or specific formats).</li>
<li>Use helpful text like 'select a taxon' in dropdowns that don't have anything selected.</li>
<li>Don't display placeholder text inside text fields and boxes.</li>
<li>Display a progress/loading message or graphic if it takes a long time to submit a form.</li>
</ul>






Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<div class=half>
<h4>Grouping and layout</h4>
<ul>
<li>Group inputs associated with one function within a background container.</li>
<li>Layout inputs in a logical order. Try to group similar input types to make it easier to fill out.</li>
<li>Display form fields side by side only if they're reasonably related. Don't do it just to fill the space.</li>
<li>Display date range fields side by side (and shorter than other text field types).</li>
<li>Stack radio buttons and checkboxes. Use more space between them if they aren't a group of similar items.</li>
</ul>
</div>

<div class="half">
<h4>Specific field types</h4>
<ul>
<li>Mark mandatory fields with an *.</li>
<li>Use radio buttons instead of dropdown lists for small finite lists and toggles.</li>
<li>Display a calendar icon in the right of date picker fields. When either the icon or the field is clicked, a calendar picker should appear.</li>
<li>Display a downwards pointing arrow in all dropdown lists, and Select2 dropdown fields.</li>
<li>Include a way for users to access a plain text version of their password in a password field.</li>
</ul>
</div>

<h4>Input widths</h4>
<p>Size a text field or a text box so that it's indicative of how much text goes inside of it.</p>
<table>
<tr>
<th>Input type</th>
<th>2/3 column<br>(main content area)</th>
<th>1/3 column<br>(secondary content area)</th>
<th>1/2 column<br>(main content, small screen)</th>
<th>1 column<br>(main & secondary content, small screen)
</tr>
<tr>
<td>text field - 'normal'</td>
<td>full, half, or quarter width</td>
<td>full or half width</td>
<td>full or half width</td>
<td>full width</td>
</tr>
<tr>
<td>text field - date picker</td>
<td>half width</td>
<td>full width</td>
<td>full width</td>
<td>full width</td>
</tr>
<tr>
<td>text field - multi selects </td>
<td>full width</td>
<td>full width</td>
<td>full width</td>
<td>full width</td>
</tr>
<tr>
<td>2 text fields - date range</td>
<td>full width</td>
<td>full width</td>
<td>full width</td>
<td>full width</td>
</tr>
<tr>
<td>text box</td>
<td>full width</td>
<td>full width</td>
<td>full width</td>
<td>full width</td>
</tr>
<tr>
<td>select box ('regular' and select2)</td>
<td>full, half, or quarter width</td>
<td>full or half width</td>
<td>full or half width</td>
<td>full width</td>
</tr>
<tr>
<td>checkbox - single</td>
<td>full width</td>
<td>full width</td>
<td>full width</td>
<td>full width</td>
</tr>
<tr>
<td>checkbox - list</td>
<td>full width</td>
<td>full width</td>
<td>full width</td>
<td>full width</td>
</tr>
<tr>
<td>radio button - list</td>
<td>full width</td>
<td>full width</td>
<td>full width</td>
<td>full width</td>
</tr>
</table>
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<ul>
<li>Left align field labels and do not include colons.</li>
<li>Display field labels above text fields, text boxes and drop downs, and to the right of checkboxes and radio buttons.</li>
<li>Labels should be in sentence casing (first letter of the first word is uppercase, the rest are lowercase).</li>
<li>Do not add underlines to labels.</li>
</ul>
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
<ul>
<li>Validate mandatory fields client-side to make sure content is present.</li>
<li>Display field labels in red when there is an error in their respective field.</li>
<li>Outline inputs in red when there is an error inside.</li>
<li>Display validation text in red and below the input it is referring to. It should be closer to that input than anything else on the page.</li>
</ul>

<div class="errorExplanation">
<h2>2 errors prohibited this record from being saved:</h2>
<p>There were problems with the following fields:</p>
@@ -7,7 +14,7 @@
</ul>
</div>

<div class="field withError">
<div class="field withError half">
<span class="field_with_errors"><label for="user_name">Name</label></span>
<span class="field_with_errors"><input class="fullwidth" type="text" name="user[name]" id="user_name"></span>
<span class="formError">can't be blank</span>
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<ul>
<li>This one has a main column on the left and secondary column on the right for information to describe what happens in each section of the form. I expect this one will be used more often than the other.</li>
<li>Use this for forms that would benefit from a little extra explanation of how to use the section.</li>
<li>Use this for forms that have minimal fields and have many equal priority items in them.</li>
<li>Try to use this form layout first before using the next one.</li>
</ul>




Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<ul>
<li>This one has a main column on the left and secondary column on the right for form things.</li>
<li>Use this for dense, self explanatory forms that have secondary information to them like timing on a product or promotion.</li>
</ul>
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<ul>
<li>Display all table functions outside the table to the right.</li>
<li>Display form submit buttons outside of the table at the bottom.</li>
</ul>
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
Unordered lists have been stripped of all padding and margin.
</p>

<ul>
<ul class="example">
<li>Unordered list of things</li>
<li>List item
<ul>

0 comments on commit 0ff0780

Please sign in to comment.