afeary.github.io/forms.html at master · afeary/afeary.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Unearth Design System: Forms</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="guide-files/forms.css">
    <link rel="stylesheet" href="guide-files/fonts.css">
</head>
<body>

	<header>
		<span class="unearth-logo">U</span>
		<span class="title">Unearth Design System: Forms</span>
	</header>
	<div class="container">
		<div class="group-header">Forms</div>
		<section>
			<div class="description">
				<div class="desc-header">Container:</div>
				<ul>
					<li>Background color should contrast with form components, e.g. $slate5</li>
					<li>Max-width may vary depending on context, but in general min-width should not be less than 280px</li>
					<li>Minimum padding of 24px within container helps to minimize cramping</li>
					<li>If height of form exceeds viewport height, submit button should pinned to bottom and form content scrolls behind</li>
				</ul>
				<div class="desc-header">Inputs:</div>
				<ul>
					<li>Label details:
						<ul>
							<li>13px/1/500 Museo Sans Rounded $slate2</li>
							<li>letter-spacing: 0.25px</li>
							<li>margin-bottom: 4px</li>
							<li>short label can be inset to conserve vertical space</li>
						</ul>
					</li>
					<li>Input details:
						<ul>
							<li>16px/1/500 Museo Sans Rounded $slate2</li>
							<li>placeholder text: $slate4</li>
							<li>optional tip text: 13/1/300, margin-top: 4px</li>
							<li>if input fails validation onBlur, display error state (label and border color: $red1) and message (replaces tip text if any)</li>
							<li>No edit permissions: background-color: $arctic2</li>
						</ul>
					</li>
				</ul>
				<div class="desc-header">Selects:</div>
				<ul>
					<li>Label details:
						<ul>
							<li>13px/1/500 Museo Sans Rounded $slate2</li>
							<li>letter-spacing: 0.25px</li>
							<li>margin-bottom: 4px</li>
						</ul>
					<li>Select details:
						<ul>
							<li>16px/1/500 Museo Sans Rounded $slate2</li>
							<li>placeholder text: $slate4</li>
							<li>use chevron-down-circle icon as select control affordance</li>
							<li>custom select options can include icons</li>
							<li>No edit permissions: background-color: $arctic2, chevron-down-circle: $slate5</li>
						</ul>
					</li>
				</ul>
				<div class="desc-header">Segmented Controls:</div>
				<ul>
					<li>Control Details:
						<ul>
							<li>Inset Label: 16px/1/500 Museo Sans Rounded $slate3</li>
							<li>background-color: $slate, box-shadow: inset 0 0 12px rgba(0,0,0,0.075), inset 0 0 1px 1px rgba(0,0,0,0.05)</li>
							<li>Active State: background-color $teal1</li>
						</ul>
					</li>
				</ul>
				<div class="desc-header">Text Areas:</div>
				<ul>
					<li>Label details:
						<ul>
							<li>13px/1/500 Museo Sans Rounded $slate2</li>
							<li>letter-spacing: 0.25px</li>
							<li>margin-bottom: 4px</li>
						</ul>
					</li>
					<li>Text Area details:
						<ul>
							<li>16px/1/500 Museo Sans Rounded $slate2</li>
							<li>placeholder text: $slate4</li>
							<li>No edit permissions: background-color: $arctic2</li>
						</ul>
					</li>
				</ul>
				<div class="desc-header">Checkboxes:</div>
				<ul>
					<li>Checkbox details:
						<ul>
							<li>width 20px; height 20px; border-radius 2px;</li>
							<li>Tap Target should wrap label as well</li>
						</ul>
					</li>
					<li>States:
						<ul>
							<li>Active/On: border-color $teal1; background-color $teal2; content: icon-check; font-size 10px;</li>
							<li>Inactive/Off: border-color $slate3; background-color $arctic1; box-shadow inset 0 0 6px rgba(0,0,0,0.05)</li>
							<li>Indeterminate: border-color $teal1; background-color $teal2; content: - </li>
						</ul>
					</li>
					<li>Label details:
						<ul>
							<li>14px/1/500 Museo Sans Rounded $slate2</li>
							<li>margin-left: 8px;</li>
						</ul>
					</li>
				</ul>
				<div class="desc-header">Buttons:</div>
				<ul>
					<li>Form buttons should never be out of the viewport, so wrap them in a form footer that is pinned to the bottom of the container</li>
					<li>Form footer should have visual contrast with form container, background-color: arctic2, box-shadow serves as a scrolling affordance</li>
					<li>Single Action:
						<ul>
							<li>Primary button styling</li>
							<li>center align button in form footer</li>
						</ul>
					</li>
					<li>Primary/Secondary button pair:
						<ul>
							<li>Constructive action on the right: primary button styling</li>
							<li>Destructive or Cancel action on the left: secondary button styling</li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="example">
				<div class="form single-action">
					<div class="form-scroll">
						<!-- start copy -->
						<div class="detail-block standard-input">
							<label>Input Label</label>
							<input type="text" placeholder="Optional placeholder text" />
							<div class="form-prompt">Optional tip text</div>
						</div>
						<!-- end copy -->
						<!-- start copy -->
						<div class="detail-block standard-input">
							<label class="input-error">Input Label</label>
							<input type="text" class="input-error" />
							<div class="form-error">Input does not pass validation message</div>
						</div>
						<!-- end copy -->
						<!-- start copy -->
						<div class="detail-block">
							<label class="inset-label">ID</label>
							<input type="text" class="has-inset-label" />
						</div>
						<!-- end copy -->
						<!-- start copy -->
						<div class="detail-block">
							<label>Select Label</label>
							<div class="select-wrapper">
								<select>
									<option value="Selected Option" selected="">Selected Option</option>
									<option value="Option">Option</option>
									<optgroup label="Option Group Label">
										<option value="Option">Option</option>
										<option value="Option">Option</option>
										<option value="Option">Option</option>
									</optgroup>
								</select>
							</div>
						</div>
						<!-- end copy -->
						<!-- start copy -->
						<div class="detail-block">
							<label>Radio Control</label>
							<div class="radio three-opts">
								<div class="radio-opt active"><span class="radio-circle"></span> <span class="radio-opt-label">None</span></div>
								<div class="radio-opt"><span class="radio-circle"></span> <span class="radio-opt-label">Option A</span></div>
								<div class="radio-opt"><span class="radio-circle"></span> <span class="radio-opt-label">Option B</span></div>
								<div class="radio-opt"><span class="radio-circle"></span> <span class="radio-opt-label">Option C</span></div>
							</div>
						</div>
						<!-- end copy -->
						<!-- start copy -->
						<div class="detail-block">
							<label>Segmented Control: 2 options</label>
							<div class="seg-control two-opts">
								<div class="seg-control-opt active">Option A</div>
								<div class="seg-control-opt">Option B</div>
							</div>
						</div>
						<!-- end copy -->
						<!-- start copy -->
						<div class="detail-block">
							<label>Segmented Control: 3 options</label>
							<div class="seg-control three-opts">
								<div class="seg-control-opt active">Option A</div>
								<div class="seg-control-opt">Option B</div>
								<div class="seg-control-opt">Option C</div>
							</div>
						</div>
						<!-- end copy -->
						<!-- start copy -->
						<div class="detail-block">
							<label>Text Area Label</label>
							<textarea placeholder="Optional placeholder text"></textarea>
						</div>
						<!-- end copy -->
					</div>
					<!-- start copy -->
					<div class="submit-button">
						<button type="submit" class="btn btn-primary btn-pill">
							<div class="spinner"></div>
							<span class="btn-label">Single Action</span>
						</button>
					</div>
					<!-- end copy -->
				</div>
				<br /><br /><br /><br />
				<div class="form form-alt">
					<div class="form-scroll">
						<!-- start copy -->
						<div class="detail-block standard-input">
							<label>Input Label</label>
							<input type="text" />
						</div>
						<!-- end copy -->
						<!-- start copy -->
						<div class="detail-block standard-input not-editable">
							<label>Input: No Permission to Edit</label>
							<input type="text" placeholder="You can look but can't touch" />
						</div>
						<!-- end copy -->
						<!-- start copy -->
						<div class="detail-block not-editable">
							<label>Select: No Permission to Edit</label>
							<div class="select-wrapper">
								<select>
									<option value="Selected Option" selected="">Can't change the selected option</option>
									<option value="Option">Option</option>
									<optgroup label="Option Group Label">
										<option value="Option">Option</option>
										<option value="Option">Option</option>
										<option value="Option">Option</option>
									</optgroup>
								</select>
							</div>
						</div>
						<!-- end copy -->
						<!-- start copy -->
						<div class="detail-block not-editable">
							<label>Text Area: No Permission to Edit</label>
							<textarea rows="4" placeholder="U Can't Touch This. Too hype can't touch this. Get me outta here. U can't touch this."></textarea>
						</div>
						<!-- end copy -->
						<!-- start copy -->
						<div class="detail-block">
							<i class="icon-checkbox active"></i><label class="checkbox-label">Active Item</label>
						</div>
						<div class="detail-block">
							<i class="icon-checkbox active"></i><label class="checkbox-label">Active Item with a very long name that breaks a line</label>
						</div>
						<div class="detail-block">
							<i class="icon-checkbox inactive"></i><label class="checkbox-label">Inactive Item</label>
						</div>
						<div class="detail-block">
							<i class="icon-checkbox indeterminate"></i><label class="checkbox-label">Indeterminate Item</label>
						</div>
						<!-- end copy -->
					</div>
					<!-- start copy -->
					<div class="btn-pair">
						<div class="btn btn-secondary btn-pill">Secondary</div>
						<div class="submit-button ">
							<button type="submit" class="btn btn-primary btn-pill   ">
								<div class="spinner"></div>
								<span class="btn-label">Primary</span>
							</button>
						</div>
					</div>
					<!-- end copy -->
				</div>
			</div>
		</section>
	</div>

</body>
</html>