@launchpad-ui/form 0.6.4-alpha.1 → 0.6.5-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/package.json +3 -4
  2. package/dist/Checkbox.d.ts +0 -19
  3. package/dist/Checkbox.d.ts.map +0 -1
  4. package/dist/CompactTextField.d.ts +0 -20
  5. package/dist/CompactTextField.d.ts.map +0 -1
  6. package/dist/FieldError.d.ts +0 -12
  7. package/dist/FieldError.d.ts.map +0 -1
  8. package/dist/FieldSet.d.ts +0 -9
  9. package/dist/FieldSet.d.ts.map +0 -1
  10. package/dist/Form.d.ts +0 -11
  11. package/dist/Form.d.ts.map +0 -1
  12. package/dist/FormField.d.ts +0 -20
  13. package/dist/FormField.d.ts.map +0 -1
  14. package/dist/FormGroup.d.ts +0 -12
  15. package/dist/FormGroup.d.ts.map +0 -1
  16. package/dist/FormHint.d.ts +0 -9
  17. package/dist/FormHint.d.ts.map +0 -1
  18. package/dist/IconField.d.ts +0 -12
  19. package/dist/IconField.d.ts.map +0 -1
  20. package/dist/Label.d.ts +0 -12
  21. package/dist/Label.d.ts.map +0 -1
  22. package/dist/Radio.d.ts +0 -11
  23. package/dist/Radio.d.ts.map +0 -1
  24. package/dist/RadioGroup.d.ts +0 -42
  25. package/dist/RadioGroup.d.ts.map +0 -1
  26. package/dist/RequiredAsterisk.d.ts +0 -9
  27. package/dist/RequiredAsterisk.d.ts.map +0 -1
  28. package/dist/Select.d.ts +0 -9
  29. package/dist/Select.d.ts.map +0 -1
  30. package/dist/TextArea.d.ts +0 -11
  31. package/dist/TextArea.d.ts.map +0 -1
  32. package/dist/TextField.d.ts +0 -17
  33. package/dist/TextField.d.ts.map +0 -1
  34. package/dist/index.d.ts +0 -33
  35. package/dist/index.d.ts.map +0 -1
  36. package/dist/index.es.js +0 -468
  37. package/dist/index.es.js.map +0 -1
  38. package/dist/index.js +0 -468
  39. package/dist/index.js.map +0 -1
  40. package/dist/style.css +0 -402
  41. package/dist/utils/index.d.ts +0 -5
  42. package/dist/utils/index.d.ts.map +0 -1
package/dist/style.css DELETED
@@ -1,402 +0,0 @@
1
- .RequiredAsterisk {
2
- color: var(--color-system-red-700);
3
- }
4
- .Form-group {
5
- margin: 2rem 0;
6
- }
7
-
8
- /* The margin for .Form-group and the min-height of .Form-fieldError
9
- should be equal to avoid content shift when errors are shown */
10
-
11
- .Form--increasedErrorMargin .Form-group {
12
- margin: 2.8rem 0;
13
- }
14
-
15
- .Form--inline .Form-group {
16
- display: inline-block;
17
- vertical-align: middle;
18
- margin: 0;
19
- }
20
-
21
- .Form .Form-group:first-child {
22
- margin-top: 0;
23
- }
24
-
25
- .Form .Form-group:last-child {
26
- margin-bottom: 0;
27
- }
28
-
29
- .Form--inline .Form-group + .Form-group,
30
- .Form--inline .Form-group + .Button {
31
- margin-left: 1rem;
32
- }
33
-
34
- .Form-label {
35
- font-size: 1.3rem;
36
- font-family: var(--font-family-base);
37
- word-break: break-word;
38
- }
39
-
40
- .Form-label--disabled {
41
- color: var(--color-gray-800);
42
- }
43
-
44
- .Form-labelOptional {
45
- margin-left: 0.4em;
46
- color: var(--color-text-subtle-primary);
47
- fill: var(--color-text-subtle-primary);
48
- }
49
-
50
- .Form-group .Form-label {
51
- display: flex;
52
- align-items: center;
53
- margin-bottom: 0.2rem;
54
- }
55
-
56
- .u-d-inline .Form-label + .Form-label {
57
- margin-left: 1rem;
58
- }
59
-
60
- .Form-group .Form-label + .Form-label {
61
- margin-top: 0.5rem;
62
- }
63
-
64
- .Form .Form-error {
65
- background: var(--color-system-red-600);
66
- color: var(--color-white);
67
- font-weight: var(--font-weight-regular);
68
- padding: 0.7rem 1.4rem;
69
- border-radius: var(--border-radius);
70
- }
71
-
72
- .Form-fieldError {
73
- color: var(--color-system-red-600);
74
- font-size: 1.3rem;
75
- }
76
-
77
- /* The margin for .Form-group and the min-height of .Form-fieldError
78
- should be equal to avoid content shift when errors are shown */
79
-
80
- .Form--increasedErrorMargin .Form-fieldError {
81
- min-height: 2.8rem;
82
- }
83
-
84
- .Form-label .Form-fieldError {
85
- float: right;
86
- }
87
-
88
- .Form:not(.Form--inline) .Form-fieldError {
89
- display: block;
90
- padding-top: 0.5rem;
91
- text-align: left;
92
- }
93
-
94
- .Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError {
95
- padding-top: 0.1rem;
96
- padding-bottom: 0.5rem;
97
- }
98
-
99
- .Form .is-invalid .Form-label {
100
- color: var(--color-system-red-600);
101
- }
102
-
103
- ::-moz-placeholder {
104
- color: var(--color-gray-600);
105
- }
106
-
107
- ::placeholder {
108
- color: var(--color-gray-600);
109
- }
110
-
111
- .Form .is-invalid .Select-control,
112
- .Form .is-invalid .CustomSelect > div,
113
- .Form .is-invalid .FormInput {
114
- border-color: var(--color-system-red-600);
115
- }
116
-
117
- .Form--increasedErrorMargin .Form-group.is-invalid {
118
- margin-bottom: 0;
119
- }
120
-
121
- .Form--increasedErrorMargin .Form-group.is-invalid + .Form-group {
122
- margin-top: 0;
123
- }
124
-
125
- .Form--increasedErrorMargin .Form-group.is-invalid + .Form-hint {
126
- margin-top: 0;
127
- }
128
- /* stylelint-disable no-descending-specificity */
129
-
130
- .FormInput {
131
- display: block;
132
- width: 100%;
133
- padding: 0.6rem 1rem;
134
- font-size: 1.3rem;
135
- font-family: var(--font-family-base);
136
- line-height: var(--line-height-base);
137
- background-color: var(--color-background-field);
138
- color: var(--color-text);
139
- border: 1px solid var(--color-gray-500);
140
- border-radius: var(--border-radius);
141
- transition: all 100ms linear;
142
- }
143
-
144
- .FormInput:-moz-placeholder-shown {
145
- overflow: hidden;
146
- text-overflow: ellipsis;
147
- }
148
-
149
- .FormInput:placeholder-shown {
150
- overflow: hidden;
151
- text-overflow: ellipsis;
152
- }
153
-
154
- input.FormInput,
155
- select.FormInput {
156
- height: 3.2rem;
157
- }
158
-
159
- input.FormInput:-moz-read-only {
160
- background-color: var(--color-white-100);
161
- }
162
-
163
- .FormInput.is-disabled,
164
- input.FormInput:disabled,
165
- select.FormInput:disabled,
166
- input.FormInput:read-only {
167
- background-color: var(--color-white-100);
168
- }
169
-
170
- .FormInput.is-disabled:hover,
171
- .FormInput:disabled:hover {
172
- cursor: not-allowed;
173
- }
174
-
175
- textarea.FormInput {
176
- min-height: 2.5em;
177
- resize: none;
178
- }
179
-
180
- textarea.FormInput:-moz-read-only {
181
- background-color: var(--color-white-100);
182
- }
183
-
184
- textarea.FormInput:disabled,
185
- textarea.FormInput:read-only {
186
- background-color: var(--color-white-100);
187
- }
188
-
189
- input.FormInput::-webkit-autofill {
190
- box-shadow: 0 0 0 50px var(--color-background-field) inset;
191
- }
192
-
193
- /* Hide the type=search cancel button in Webkit for consistency */
194
-
195
- input[type='search']::-webkit-search-decoration,
196
- input[type='search']::-webkit-search-cancel-button,
197
- input[type='search']::-webkit-search-results-button,
198
- input[type='search']::-webkit-search-results-decoration {
199
- display: none;
200
- }
201
-
202
- /* Hide the type=search cancel button in IE for consistency */
203
-
204
- input[type='text']::-ms-clear,
205
- input[type='text']::-ms-reveal {
206
- display: none;
207
- width: 0;
208
- height: 0;
209
- }
210
-
211
- input[type='search']::-ms-clear,
212
- input[type='search']::-ms-reveal {
213
- display: none;
214
- width: 0;
215
- height: 0;
216
- }
217
-
218
- input[type='checkbox']:disabled {
219
- pointer-events: none;
220
- }
221
-
222
- input.FormInput--tiny {
223
- padding: 0.1rem 0.6rem;
224
- height: 2.4rem;
225
- }
226
-
227
- .FormInput.is-focused,
228
- .FormInput:focus {
229
- outline: 0;
230
- border-color: var(--color-focus);
231
- box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
232
- }
233
-
234
- .FormInput[readonly],
235
- .FormInput[readonly]:focus {
236
- color: var(--color-text-subtle-primary);
237
- border-color: var(--color-gray-500);
238
- box-shadow: none;
239
- }
240
-
241
- .Form-checkbox {
242
- align-self: flex-start; /* Default for .Form-label is center, but this looks bad on multi-line checkbox labels */
243
- flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */
244
- margin-right: 0.5rem;
245
- margin-top: 0.4rem;
246
- }
247
-
248
- .Form-radio {
249
- margin-right: 0.5rem;
250
- }
251
-
252
- .FormInput-select {
253
- -webkit-appearance: none;
254
- -moz-appearance: none;
255
- appearance: none;
256
- background: transparent;
257
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z" fill="%23646f7a"/></svg>');
258
- background-size: 2rem;
259
- background-repeat: no-repeat;
260
- background-position: right 0.4em top 50%, 0 0;
261
- padding-right: 2rem;
262
- }
263
-
264
- .FormInput-number {
265
- min-width: 4.5rem;
266
- }
267
-
268
- .FormInput-suffixContainer {
269
- display: inline-flex;
270
- border: 1px solid var(--color-gray-500);
271
- border-radius: var(--border-radius);
272
- overflow: hidden;
273
- transition: all 0.1s linear;
274
- }
275
-
276
- .FormInput-suffixContainer[focus-within] {
277
- border-color: var(--color-focus);
278
- box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
279
- }
280
-
281
- .FormInput-suffixContainer[focus-within] {
282
- border-color: var(--color-focus);
283
- box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
284
- }
285
-
286
- .FormInput-suffixContainer:focus-within {
287
- border-color: var(--color-focus);
288
- box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
289
- }
290
-
291
- .FormInput-suffixContainer .FormInput {
292
- border: none;
293
- border-radius: var(--border-radius) 0 0 var(--border-radius);
294
- }
295
-
296
- .FormInput-suffixContainer .FormInput:focus {
297
- box-shadow: none;
298
- }
299
-
300
- .FormInput-suffixContainer label.FormInput-suffix {
301
- padding: 0 2px;
302
- background-color: var(--color-gray-100);
303
- color: var(--color-gray-500);
304
- cursor: text;
305
- display: inline-flex;
306
- align-items: center;
307
- position: static;
308
- position: initial;
309
- }
310
-
311
- input.FormInput-suffix::-webkit-outer-spin-button,
312
- input.FormInput-suffix::-webkit-inner-spin-button {
313
- -webkit-appearance: none;
314
- appearance: none;
315
- margin: 0;
316
- }
317
-
318
- /* Firefox */
319
-
320
- input.FormInput-suffix[type='number'] {
321
- -webkit-appearance: textfield;
322
- -moz-appearance: textfield;
323
- appearance: textfield;
324
- }
325
-
326
- /* stylelint-enable no-descending-specificity */
327
- .CompactTextField {
328
- position: relative;
329
- width: 100%;
330
- }
331
-
332
- .CompactTextField .Form-label {
333
- position: absolute;
334
- top: -2px;
335
- left: 10px;
336
- padding: 0 3px;
337
- color: var(--color-text);
338
- opacity: 0;
339
- pointer-events: none;
340
- background-color: var(--color-background);
341
- transform-origin: 0 0; /* preserve left alignment after scaling */
342
- transition: all 100ms ease-in-out;
343
- z-index: 1; /* Fixes layout issue in Firefox */
344
- }
345
-
346
- .CompactTextField.is-active .Form-label {
347
- border-radius: var(--border-radius);
348
- opacity: 1;
349
- pointer-events: auto;
350
- transform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */
351
- }
352
- .FieldSet {
353
- border: none;
354
- margin: 2rem 0;
355
- padding: 0;
356
- }
357
- .Form-hint {
358
- display: block;
359
- margin-top: 0.3rem;
360
- font-size: 1.3rem;
361
- font-weight: var(--font-weight-regular);
362
- color: var(--color-text-subtle-primary);
363
- }
364
- .FormField-hint {
365
- margin: 0;
366
- font-size: 1.3rem;
367
- color: var(--color-text-subtle-primary);
368
- fill: var(--color-text-subtle-primary);
369
- }
370
-
371
- .Form .FormField .Form-label,
372
- .Form .FormField .is-invalid .Form-label {
373
- color: var(--color-text);
374
- }
375
-
376
- .FormField-errorMessage {
377
- color: var(--color-system-red-600);
378
- font-size: 1.3rem;
379
- }
380
-
381
- .FormField.Form-group {
382
- margin: 1rem 0;
383
- }
384
-
385
- .FormField.Form-group:first-child {
386
- margin-top: 0;
387
- }
388
- .IconField {
389
- position: relative;
390
- }
391
-
392
- .IconField .FormInput {
393
- padding-left: 3rem;
394
- }
395
-
396
- .FormInput ~ .Icon {
397
- position: absolute;
398
- fill: var(--color-gray-600);
399
- top: 50%;
400
- transform: translateY(-50%);
401
- left: 1rem;
402
- }
@@ -1,5 +0,0 @@
1
- declare type FieldPath = string | string[];
2
- declare const createFieldErrorId: (fieldIdentifier?: FieldPath) => string | undefined;
3
- export { createFieldErrorId };
4
- export type { FieldPath };
5
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,aAAK,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAEnC,QAAA,MAAM,kBAAkB,qBAAsB,SAAS,uBACe,CAAC;AAEvE,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,CAAC"}