@charcoal-ui/react 4.3.0 → 4.4.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 (40) hide show
  1. package/dist/components/MultiSelect/context.d.ts +14 -0
  2. package/dist/components/MultiSelect/context.d.ts.map +1 -0
  3. package/dist/components/MultiSelect/index.d.ts +38 -0
  4. package/dist/components/MultiSelect/index.d.ts.map +1 -0
  5. package/dist/index.cjs.js +318 -216
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.css +111 -0
  8. package/dist/index.css.map +1 -1
  9. package/dist/index.d.ts +1 -0
  10. package/dist/index.d.ts.map +1 -1
  11. package/dist/index.esm.js +281 -181
  12. package/dist/index.esm.js.map +1 -1
  13. package/dist/layered.css +111 -0
  14. package/dist/layered.css.map +1 -1
  15. package/package.json +6 -7
  16. package/src/components/Button/__snapshots__/index.story.storyshot +89 -71
  17. package/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot +50 -53
  18. package/src/components/Checkbox/__snapshots__/index.story.storyshot +108 -102
  19. package/src/components/Clickable/__snapshots__/index.story.storyshot +19 -17
  20. package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot +45 -54
  21. package/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot +238 -275
  22. package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot +28 -50
  23. package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +780 -1158
  24. package/src/components/Icon/__snapshots__/index.story.storyshot +9 -7
  25. package/src/components/IconButton/__snapshots__/index.story.storyshot +43 -37
  26. package/src/components/LoadingSpinner/__snapshots__/index.story.storyshot +52 -64
  27. package/src/components/Modal/__snapshots__/index.story.storyshot +568 -716
  28. package/src/components/MultiSelect/__snapshots__/index.story.storyshot +531 -0
  29. package/src/components/MultiSelect/context.ts +23 -0
  30. package/src/components/MultiSelect/index.css +139 -0
  31. package/src/components/MultiSelect/index.story.tsx +118 -0
  32. package/src/components/MultiSelect/index.test.tsx +255 -0
  33. package/src/components/MultiSelect/index.tsx +153 -0
  34. package/src/components/Radio/__snapshots__/index.story.storyshot +313 -367
  35. package/src/components/SegmentedControl/__snapshots__/index.story.storyshot +116 -228
  36. package/src/components/Switch/__snapshots__/index.story.storyshot +74 -73
  37. package/src/components/TagItem/__snapshots__/index.story.storyshot +177 -193
  38. package/src/components/TextArea/__snapshots__/TextArea.story.storyshot +372 -533
  39. package/src/components/TextField/__snapshots__/TextField.story.storyshot +444 -583
  40. package/src/index.ts +6 -0
package/src/components/TextArea/__snapshots__/TextArea.story.storyshot CHANGED
@@ -1,692 +1,531 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/TextArea > AssistiveText 1`] = `
4
- <div
5
- data-dark={false}
6
- >
4
+ <div>
7
5
  <div
8
- aria-disabled={false}
9
- className="charcoal-text-area-root"
6
+ data-dark="false"
10
7
  >
11
8
  <div
12
- className="charcoal-field-label-root"
13
- style={
14
- Object {
15
- "border": 0,
16
- "clip": "rect(0 0 0 0)",
17
- "clipPath": "inset(50%)",
18
- "height": "1px",
19
- "margin": "-1px",
20
- "overflow": "hidden",
21
- "padding": 0,
22
- "position": "absolute",
23
- "whiteSpace": "nowrap",
24
- "width": "1px",
25
- }
26
- }
9
+ aria-disabled="false"
10
+ class="charcoal-text-area-root"
27
11
  >
28
- <label
29
- className="charcoal-field-label"
30
- htmlFor="test-id"
31
- id="test-id"
12
+ <div
13
+ class="charcoal-field-label-root"
14
+ style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
32
15
  >
33
- Label
34
- </label>
16
+ <label
17
+ class="charcoal-field-label"
18
+ for="test-id"
19
+ id="test-id"
20
+ >
21
+ Label
22
+ </label>
23
+ <div
24
+ class="charcoal-field-label-sub-label"
25
+ >
26
+ <span />
27
+ </div>
28
+ </div>
35
29
  <div
36
- className="charcoal-field-label-sub-label"
30
+ aria-invalid="false"
31
+ class="charcoal-text-area-container"
32
+ style="--charcoal-text-area-rows: 4;"
37
33
  >
38
- <span />
34
+ <textarea
35
+ aria-describedby="test-id"
36
+ aria-labelledby="test-id"
37
+ class="charcoal-text-area-textarea"
38
+ data-no-bottom-padding="false"
39
+ id="test-id"
40
+ rows="4"
41
+ />
39
42
  </div>
40
- </div>
41
- <div
42
- aria-invalid={false}
43
- className="charcoal-text-area-container"
44
- style={
45
- Object {
46
- "--charcoal-text-area-rows": "4",
47
- }
48
- }
49
- >
50
- <textarea
51
- aria-describedby="test-id"
52
- aria-labelledby="test-id"
53
- className="charcoal-text-area-textarea"
54
- data-no-bottom-padding={false}
55
- disabled={false}
43
+ <div
44
+ class="charcoal-text-field-assistive-text"
45
+ data-invalid="false"
56
46
  id="test-id"
57
- onChange={[Function]}
58
- rows={4}
59
- />
60
- </div>
61
- <div
62
- className="charcoal-text-field-assistive-text"
63
- data-invalid={false}
64
- id="test-id"
65
- >
66
- 説明が入ります
47
+ >
48
+ 説明が入ります
49
+ </div>
67
50
  </div>
68
51
  </div>
69
52
  </div>
70
53
  `;
71
54
 
72
55
  exports[`Storybook Tests > react/TextArea > AutoHeight 1`] = `
73
- <div
74
- data-dark={false}
75
- >
56
+ <div>
76
57
  <div
77
- aria-disabled={false}
78
- className="charcoal-text-area-root"
58
+ data-dark="false"
79
59
  >
80
60
  <div
81
- className="charcoal-field-label-root"
82
- style={
83
- Object {
84
- "border": 0,
85
- "clip": "rect(0 0 0 0)",
86
- "clipPath": "inset(50%)",
87
- "height": "1px",
88
- "margin": "-1px",
89
- "overflow": "hidden",
90
- "padding": 0,
91
- "position": "absolute",
92
- "whiteSpace": "nowrap",
93
- "width": "1px",
94
- }
95
- }
61
+ aria-disabled="false"
62
+ class="charcoal-text-area-root"
96
63
  >
97
- <label
98
- className="charcoal-field-label"
99
- htmlFor="test-id"
100
- id="test-id"
64
+ <div
65
+ class="charcoal-field-label-root"
66
+ style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
101
67
  >
102
- Label
103
- </label>
68
+ <label
69
+ class="charcoal-field-label"
70
+ for="test-id"
71
+ id="test-id"
72
+ >
73
+ Label
74
+ </label>
75
+ <div
76
+ class="charcoal-field-label-sub-label"
77
+ >
78
+ <span />
79
+ </div>
80
+ </div>
104
81
  <div
105
- className="charcoal-field-label-sub-label"
82
+ aria-invalid="false"
83
+ class="charcoal-text-area-container"
84
+ style="--charcoal-text-area-rows: 4;"
106
85
  >
107
- <span />
86
+ <textarea
87
+ aria-labelledby="test-id"
88
+ class="charcoal-text-area-textarea"
89
+ data-no-bottom-padding="false"
90
+ id="test-id"
91
+ rows="4"
92
+ />
108
93
  </div>
109
94
  </div>
110
- <div
111
- aria-invalid={false}
112
- className="charcoal-text-area-container"
113
- style={
114
- Object {
115
- "--charcoal-text-area-rows": "4",
116
- }
117
- }
118
- >
119
- <textarea
120
- aria-labelledby="test-id"
121
- className="charcoal-text-area-textarea"
122
- data-no-bottom-padding={false}
123
- disabled={false}
124
- id="test-id"
125
- onChange={[Function]}
126
- rows={4}
127
- />
128
- </div>
129
95
  </div>
130
96
  </div>
131
97
  `;
132
98
 
133
99
  exports[`Storybook Tests > react/TextArea > Default 1`] = `
134
- <div
135
- data-dark={false}
136
- >
100
+ <div>
137
101
  <div
138
- aria-disabled={false}
139
- className="charcoal-text-area-root"
102
+ data-dark="false"
140
103
  >
141
104
  <div
142
- className="charcoal-field-label-root"
143
- style={
144
- Object {
145
- "border": 0,
146
- "clip": "rect(0 0 0 0)",
147
- "clipPath": "inset(50%)",
148
- "height": "1px",
149
- "margin": "-1px",
150
- "overflow": "hidden",
151
- "padding": 0,
152
- "position": "absolute",
153
- "whiteSpace": "nowrap",
154
- "width": "1px",
155
- }
156
- }
105
+ aria-disabled="false"
106
+ class="charcoal-text-area-root"
157
107
  >
158
- <label
159
- className="charcoal-field-label"
160
- htmlFor="test-id"
161
- id="test-id"
108
+ <div
109
+ class="charcoal-field-label-root"
110
+ style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
162
111
  >
163
- Label
164
- </label>
112
+ <label
113
+ class="charcoal-field-label"
114
+ for="test-id"
115
+ id="test-id"
116
+ >
117
+ Label
118
+ </label>
119
+ <div
120
+ class="charcoal-field-label-sub-label"
121
+ >
122
+ <span>
123
+ <button
124
+ class="charcoal-clickable"
125
+ >
126
+ Text Link
127
+ </button>
128
+ </span>
129
+ </div>
130
+ </div>
165
131
  <div
166
- className="charcoal-field-label-sub-label"
132
+ aria-invalid="false"
133
+ class="charcoal-text-area-container"
134
+ style="--charcoal-text-area-rows: 4;"
167
135
  >
168
- <span>
169
- <button
170
- className="charcoal-clickable"
171
- onClick={[Function]}
172
- >
173
- Text Link
174
- </button>
175
- </span>
136
+ <textarea
137
+ aria-invalid="false"
138
+ aria-labelledby="test-id"
139
+ class="charcoal-text-area-textarea"
140
+ data-no-bottom-padding="false"
141
+ id="test-id"
142
+ placeholder="Text Area"
143
+ rows="4"
144
+ />
176
145
  </div>
177
146
  </div>
178
- <div
179
- aria-invalid={false}
180
- className="charcoal-text-area-container"
181
- style={
182
- Object {
183
- "--charcoal-text-area-rows": "4",
184
- }
185
- }
186
- >
187
- <textarea
188
- aria-invalid={false}
189
- aria-labelledby="test-id"
190
- className="charcoal-text-area-textarea"
191
- data-no-bottom-padding={false}
192
- disabled={false}
193
- id="test-id"
194
- onChange={[Function]}
195
- placeholder="Text Area"
196
- readOnly={false}
197
- rows={4}
198
- />
199
- </div>
200
147
  </div>
201
148
  </div>
202
149
  `;
203
150
 
204
151
  exports[`Storybook Tests > react/TextArea > Disabled 1`] = `
205
- <div
206
- data-dark={false}
207
- >
152
+ <div>
208
153
  <div
209
- aria-disabled={true}
210
- className="charcoal-text-area-root"
154
+ data-dark="false"
211
155
  >
212
156
  <div
213
- className="charcoal-field-label-root"
214
- style={
215
- Object {
216
- "border": 0,
217
- "clip": "rect(0 0 0 0)",
218
- "clipPath": "inset(50%)",
219
- "height": "1px",
220
- "margin": "-1px",
221
- "overflow": "hidden",
222
- "padding": 0,
223
- "position": "absolute",
224
- "whiteSpace": "nowrap",
225
- "width": "1px",
226
- }
227
- }
157
+ aria-disabled="true"
158
+ class="charcoal-text-area-root"
228
159
  >
229
- <label
230
- className="charcoal-field-label"
231
- htmlFor="test-id"
232
- id="test-id"
160
+ <div
161
+ class="charcoal-field-label-root"
162
+ style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
233
163
  >
234
- Label
235
- </label>
164
+ <label
165
+ class="charcoal-field-label"
166
+ for="test-id"
167
+ id="test-id"
168
+ >
169
+ Label
170
+ </label>
171
+ <div
172
+ class="charcoal-field-label-sub-label"
173
+ >
174
+ <span />
175
+ </div>
176
+ </div>
236
177
  <div
237
- className="charcoal-field-label-sub-label"
178
+ aria-disabled="true"
179
+ aria-invalid="false"
180
+ class="charcoal-text-area-container"
181
+ style="--charcoal-text-area-rows: 4;"
238
182
  >
239
- <span />
183
+ <textarea
184
+ aria-labelledby="test-id"
185
+ class="charcoal-text-area-textarea"
186
+ data-no-bottom-padding="false"
187
+ disabled=""
188
+ id="test-id"
189
+ rows="4"
190
+ />
240
191
  </div>
241
192
  </div>
242
- <div
243
- aria-disabled="true"
244
- aria-invalid={false}
245
- className="charcoal-text-area-container"
246
- style={
247
- Object {
248
- "--charcoal-text-area-rows": "4",
249
- }
250
- }
251
- >
252
- <textarea
253
- aria-labelledby="test-id"
254
- className="charcoal-text-area-textarea"
255
- data-no-bottom-padding={false}
256
- disabled={true}
257
- id="test-id"
258
- onChange={[Function]}
259
- rows={4}
260
- />
261
- </div>
262
193
  </div>
263
194
  </div>
264
195
  `;
265
196
 
266
197
  exports[`Storybook Tests > react/TextArea > Invalid 1`] = `
267
- <div
268
- data-dark={false}
269
- >
198
+ <div>
270
199
  <div
271
- aria-disabled={false}
272
- className="charcoal-text-area-root"
200
+ data-dark="false"
273
201
  >
274
202
  <div
275
- className="charcoal-field-label-root"
276
- style={
277
- Object {
278
- "border": 0,
279
- "clip": "rect(0 0 0 0)",
280
- "clipPath": "inset(50%)",
281
- "height": "1px",
282
- "margin": "-1px",
283
- "overflow": "hidden",
284
- "padding": 0,
285
- "position": "absolute",
286
- "whiteSpace": "nowrap",
287
- "width": "1px",
288
- }
289
- }
203
+ aria-disabled="false"
204
+ class="charcoal-text-area-root"
290
205
  >
291
- <label
292
- className="charcoal-field-label"
293
- htmlFor="test-id"
294
- id="test-id"
206
+ <div
207
+ class="charcoal-field-label-root"
208
+ style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
295
209
  >
296
- Label
297
- </label>
210
+ <label
211
+ class="charcoal-field-label"
212
+ for="test-id"
213
+ id="test-id"
214
+ >
215
+ Label
216
+ </label>
217
+ <div
218
+ class="charcoal-field-label-sub-label"
219
+ >
220
+ <span />
221
+ </div>
222
+ </div>
298
223
  <div
299
- className="charcoal-field-label-sub-label"
224
+ aria-invalid="true"
225
+ class="charcoal-text-area-container"
226
+ style="--charcoal-text-area-rows: 4;"
300
227
  >
301
- <span />
228
+ <textarea
229
+ aria-describedby="test-id"
230
+ aria-invalid="true"
231
+ aria-labelledby="test-id"
232
+ class="charcoal-text-area-textarea"
233
+ data-no-bottom-padding="false"
234
+ id="test-id"
235
+ rows="4"
236
+ />
302
237
  </div>
303
- </div>
304
- <div
305
- aria-invalid={true}
306
- className="charcoal-text-area-container"
307
- style={
308
- Object {
309
- "--charcoal-text-area-rows": "4",
310
- }
311
- }
312
- >
313
- <textarea
314
- aria-describedby="test-id"
315
- aria-invalid={true}
316
- aria-labelledby="test-id"
317
- className="charcoal-text-area-textarea"
318
- data-no-bottom-padding={false}
319
- disabled={false}
238
+ <div
239
+ class="charcoal-text-field-assistive-text"
240
+ data-invalid="true"
320
241
  id="test-id"
321
- onChange={[Function]}
322
- rows={4}
323
- />
324
- </div>
325
- <div
326
- className="charcoal-text-field-assistive-text"
327
- data-invalid={true}
328
- id="test-id"
329
- >
330
- エラーメッセージ
242
+ >
243
+ エラーメッセージ
244
+ </div>
331
245
  </div>
332
246
  </div>
333
247
  </div>
334
248
  `;
335
249
 
336
250
  exports[`Storybook Tests > react/TextArea > Label 1`] = `
337
- <div
338
- data-dark={false}
339
- >
251
+ <div>
340
252
  <div
341
- aria-disabled={false}
342
- className="charcoal-text-area-root"
253
+ data-dark="false"
343
254
  >
344
255
  <div
345
- className="charcoal-field-label-root"
256
+ aria-disabled="false"
257
+ class="charcoal-text-area-root"
346
258
  >
347
- <label
348
- className="charcoal-field-label"
349
- htmlFor="test-id"
350
- id="test-id"
259
+ <div
260
+ class="charcoal-field-label-root"
351
261
  >
352
- Label
353
- </label>
262
+ <label
263
+ class="charcoal-field-label"
264
+ for="test-id"
265
+ id="test-id"
266
+ >
267
+ Label
268
+ </label>
269
+ <div
270
+ class="charcoal-field-label-sub-label"
271
+ >
272
+ <span />
273
+ </div>
274
+ </div>
354
275
  <div
355
- className="charcoal-field-label-sub-label"
276
+ aria-invalid="false"
277
+ class="charcoal-text-area-container"
278
+ style="--charcoal-text-area-rows: 4;"
356
279
  >
357
- <span />
280
+ <textarea
281
+ aria-labelledby="test-id"
282
+ class="charcoal-text-area-textarea"
283
+ data-no-bottom-padding="false"
284
+ id="test-id"
285
+ rows="4"
286
+ />
358
287
  </div>
359
288
  </div>
360
- <div
361
- aria-invalid={false}
362
- className="charcoal-text-area-container"
363
- style={
364
- Object {
365
- "--charcoal-text-area-rows": "4",
366
- }
367
- }
368
- >
369
- <textarea
370
- aria-labelledby="test-id"
371
- className="charcoal-text-area-textarea"
372
- data-no-bottom-padding={false}
373
- disabled={false}
374
- id="test-id"
375
- onChange={[Function]}
376
- rows={4}
377
- />
378
- </div>
379
289
  </div>
380
290
  </div>
381
291
  `;
382
292
 
383
293
  exports[`Storybook Tests > react/TextArea > Placeholder 1`] = `
384
- <div
385
- data-dark={false}
386
- >
294
+ <div>
387
295
  <div
388
- aria-disabled={false}
389
- className="charcoal-text-area-root"
296
+ data-dark="false"
390
297
  >
391
298
  <div
392
- className="charcoal-field-label-root"
393
- style={
394
- Object {
395
- "border": 0,
396
- "clip": "rect(0 0 0 0)",
397
- "clipPath": "inset(50%)",
398
- "height": "1px",
399
- "margin": "-1px",
400
- "overflow": "hidden",
401
- "padding": 0,
402
- "position": "absolute",
403
- "whiteSpace": "nowrap",
404
- "width": "1px",
405
- }
406
- }
299
+ aria-disabled="false"
300
+ class="charcoal-text-area-root"
407
301
  >
408
- <label
409
- className="charcoal-field-label"
410
- htmlFor="test-id"
411
- id="test-id"
302
+ <div
303
+ class="charcoal-field-label-root"
304
+ style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
412
305
  >
413
- Label
414
- </label>
306
+ <label
307
+ class="charcoal-field-label"
308
+ for="test-id"
309
+ id="test-id"
310
+ >
311
+ Label
312
+ </label>
313
+ <div
314
+ class="charcoal-field-label-sub-label"
315
+ >
316
+ <span />
317
+ </div>
318
+ </div>
415
319
  <div
416
- className="charcoal-field-label-sub-label"
320
+ aria-invalid="false"
321
+ class="charcoal-text-area-container"
322
+ style="--charcoal-text-area-rows: 4;"
417
323
  >
418
- <span />
324
+ <textarea
325
+ aria-labelledby="test-id"
326
+ class="charcoal-text-area-textarea"
327
+ data-no-bottom-padding="false"
328
+ id="test-id"
329
+ placeholder="Placeholder"
330
+ rows="4"
331
+ />
419
332
  </div>
420
333
  </div>
421
- <div
422
- aria-invalid={false}
423
- className="charcoal-text-area-container"
424
- style={
425
- Object {
426
- "--charcoal-text-area-rows": "4",
427
- }
428
- }
429
- >
430
- <textarea
431
- aria-labelledby="test-id"
432
- className="charcoal-text-area-textarea"
433
- data-no-bottom-padding={false}
434
- disabled={false}
435
- id="test-id"
436
- onChange={[Function]}
437
- placeholder="Placeholder"
438
- rows={4}
439
- />
440
- </div>
441
334
  </div>
442
335
  </div>
443
336
  `;
444
337
 
445
338
  exports[`Storybook Tests > react/TextArea > ReadOnly 1`] = `
446
- <div
447
- data-dark={false}
448
- >
339
+ <div>
449
340
  <div
450
- aria-disabled={false}
451
- className="charcoal-text-area-root"
341
+ data-dark="false"
452
342
  >
453
343
  <div
454
- className="charcoal-field-label-root"
455
- style={
456
- Object {
457
- "border": 0,
458
- "clip": "rect(0 0 0 0)",
459
- "clipPath": "inset(50%)",
460
- "height": "1px",
461
- "margin": "-1px",
462
- "overflow": "hidden",
463
- "padding": 0,
464
- "position": "absolute",
465
- "whiteSpace": "nowrap",
466
- "width": "1px",
467
- }
468
- }
344
+ aria-disabled="false"
345
+ class="charcoal-text-area-root"
469
346
  >
470
- <label
471
- className="charcoal-field-label"
472
- htmlFor="test-id"
473
- id="test-id"
347
+ <div
348
+ class="charcoal-field-label-root"
349
+ style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
474
350
  >
475
- Label
476
- </label>
351
+ <label
352
+ class="charcoal-field-label"
353
+ for="test-id"
354
+ id="test-id"
355
+ >
356
+ Label
357
+ </label>
358
+ <div
359
+ class="charcoal-field-label-sub-label"
360
+ >
361
+ <span />
362
+ </div>
363
+ </div>
477
364
  <div
478
- className="charcoal-field-label-sub-label"
365
+ aria-invalid="false"
366
+ class="charcoal-text-area-container"
367
+ style="--charcoal-text-area-rows: 4;"
479
368
  >
480
- <span />
369
+ <textarea
370
+ aria-labelledby="test-id"
371
+ class="charcoal-text-area-textarea"
372
+ data-no-bottom-padding="false"
373
+ id="test-id"
374
+ readonly=""
375
+ rows="4"
376
+ >
377
+ 読み取り専用
378
+ </textarea>
481
379
  </div>
482
380
  </div>
483
- <div
484
- aria-invalid={false}
485
- className="charcoal-text-area-container"
486
- style={
487
- Object {
488
- "--charcoal-text-area-rows": "4",
489
- }
490
- }
491
- >
492
- <textarea
493
- aria-labelledby="test-id"
494
- className="charcoal-text-area-textarea"
495
- data-no-bottom-padding={false}
496
- disabled={false}
497
- id="test-id"
498
- onChange={[Function]}
499
- readOnly={true}
500
- rows={4}
501
- value="読み取り専用"
502
- />
503
- </div>
504
381
  </div>
505
382
  </div>
506
383
  `;
507
384
 
508
385
  exports[`Storybook Tests > react/TextArea > Required 1`] = `
509
- <div
510
- data-dark={false}
511
- >
386
+ <div>
512
387
  <div
513
- aria-disabled={false}
514
- className="charcoal-text-area-root"
388
+ data-dark="false"
515
389
  >
516
390
  <div
517
- className="charcoal-field-label-root"
518
- style={
519
- Object {
520
- "border": 0,
521
- "clip": "rect(0 0 0 0)",
522
- "clipPath": "inset(50%)",
523
- "height": "1px",
524
- "margin": "-1px",
525
- "overflow": "hidden",
526
- "padding": 0,
527
- "position": "absolute",
528
- "whiteSpace": "nowrap",
529
- "width": "1px",
530
- }
531
- }
391
+ aria-disabled="false"
392
+ class="charcoal-text-area-root"
532
393
  >
533
- <label
534
- className="charcoal-field-label"
535
- htmlFor="test-id"
536
- id="test-id"
537
- >
538
- Label
539
- </label>
540
394
  <div
541
- className="charcoal-field-label-required-text"
395
+ class="charcoal-field-label-root"
396
+ style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
542
397
  >
543
- *必須
398
+ <label
399
+ class="charcoal-field-label"
400
+ for="test-id"
401
+ id="test-id"
402
+ >
403
+ Label
404
+ </label>
405
+ <div
406
+ class="charcoal-field-label-required-text"
407
+ >
408
+ *必須
409
+ </div>
410
+ <div
411
+ class="charcoal-field-label-sub-label"
412
+ >
413
+ <span />
414
+ </div>
544
415
  </div>
545
416
  <div
546
- className="charcoal-field-label-sub-label"
417
+ aria-invalid="false"
418
+ class="charcoal-text-area-container"
419
+ style="--charcoal-text-area-rows: 4;"
547
420
  >
548
- <span />
421
+ <textarea
422
+ aria-labelledby="test-id"
423
+ class="charcoal-text-area-textarea"
424
+ data-no-bottom-padding="false"
425
+ id="test-id"
426
+ rows="4"
427
+ />
549
428
  </div>
550
429
  </div>
551
- <div
552
- aria-invalid={false}
553
- className="charcoal-text-area-container"
554
- style={
555
- Object {
556
- "--charcoal-text-area-rows": "4",
557
- }
558
- }
559
- >
560
- <textarea
561
- aria-labelledby="test-id"
562
- className="charcoal-text-area-textarea"
563
- data-no-bottom-padding={false}
564
- disabled={false}
565
- id="test-id"
566
- onChange={[Function]}
567
- rows={4}
568
- />
569
- </div>
570
430
  </div>
571
431
  </div>
572
432
  `;
573
433
 
574
434
  exports[`Storybook Tests > react/TextArea > ShowCount 1`] = `
575
- <div
576
- data-dark={false}
577
- >
435
+ <div>
578
436
  <div
579
- aria-disabled={false}
580
- className="charcoal-text-area-root"
437
+ data-dark="false"
581
438
  >
582
439
  <div
583
- className="charcoal-field-label-root"
584
- style={
585
- Object {
586
- "border": 0,
587
- "clip": "rect(0 0 0 0)",
588
- "clipPath": "inset(50%)",
589
- "height": "1px",
590
- "margin": "-1px",
591
- "overflow": "hidden",
592
- "padding": 0,
593
- "position": "absolute",
594
- "whiteSpace": "nowrap",
595
- "width": "1px",
596
- }
597
- }
440
+ aria-disabled="false"
441
+ class="charcoal-text-area-root"
598
442
  >
599
- <label
600
- className="charcoal-field-label"
601
- htmlFor="test-id"
602
- id="test-id"
603
- >
604
- Label
605
- </label>
606
443
  <div
607
- className="charcoal-field-label-sub-label"
444
+ class="charcoal-field-label-root"
445
+ style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
608
446
  >
609
- <span />
447
+ <label
448
+ class="charcoal-field-label"
449
+ for="test-id"
450
+ id="test-id"
451
+ >
452
+ Label
453
+ </label>
454
+ <div
455
+ class="charcoal-field-label-sub-label"
456
+ >
457
+ <span />
458
+ </div>
610
459
  </div>
611
- </div>
612
- <div
613
- aria-invalid={false}
614
- className="charcoal-text-area-container"
615
- style={
616
- Object {
617
- "--charcoal-text-area-rows": "5",
618
- }
619
- }
620
- >
621
- <textarea
622
- aria-labelledby="test-id"
623
- className="charcoal-text-area-textarea"
624
- data-no-bottom-padding={true}
625
- disabled={false}
626
- id="test-id"
627
- maxLength={100}
628
- onChange={[Function]}
629
- rows={4}
630
- />
631
- <span
632
- className="charcoal-text-area-counter"
460
+ <div
461
+ aria-invalid="false"
462
+ class="charcoal-text-area-container"
463
+ style="--charcoal-text-area-rows: 5;"
633
464
  >
634
- 0/100
635
- </span>
465
+ <textarea
466
+ aria-labelledby="test-id"
467
+ class="charcoal-text-area-textarea"
468
+ data-no-bottom-padding="true"
469
+ id="test-id"
470
+ maxlength="100"
471
+ rows="4"
472
+ />
473
+ <span
474
+ class="charcoal-text-area-counter"
475
+ >
476
+ 0/100
477
+ </span>
478
+ </div>
636
479
  </div>
637
480
  </div>
638
481
  </div>
639
482
  `;
640
483
 
641
484
  exports[`Storybook Tests > react/TextArea > SubLabel 1`] = `
642
- <div
643
- data-dark={false}
644
- >
485
+ <div>
645
486
  <div
646
- aria-disabled={false}
647
- className="charcoal-text-area-root"
487
+ data-dark="false"
648
488
  >
649
489
  <div
650
- className="charcoal-field-label-root"
490
+ aria-disabled="false"
491
+ class="charcoal-text-area-root"
651
492
  >
652
- <label
653
- className="charcoal-field-label"
654
- htmlFor="test-id"
655
- id="test-id"
493
+ <div
494
+ class="charcoal-field-label-root"
656
495
  >
657
- Label
658
- </label>
496
+ <label
497
+ class="charcoal-field-label"
498
+ for="test-id"
499
+ id="test-id"
500
+ >
501
+ Label
502
+ </label>
503
+ <div
504
+ class="charcoal-field-label-sub-label"
505
+ >
506
+ <span>
507
+ <button
508
+ class="charcoal-clickable"
509
+ >
510
+ Text Link
511
+ </button>
512
+ </span>
513
+ </div>
514
+ </div>
659
515
  <div
660
- className="charcoal-field-label-sub-label"
516
+ aria-invalid="false"
517
+ class="charcoal-text-area-container"
518
+ style="--charcoal-text-area-rows: 4;"
661
519
  >
662
- <span>
663
- <button
664
- className="charcoal-clickable"
665
- >
666
- Text Link
667
- </button>
668
- </span>
520
+ <textarea
521
+ aria-labelledby="test-id"
522
+ class="charcoal-text-area-textarea"
523
+ data-no-bottom-padding="false"
524
+ id="test-id"
525
+ rows="4"
526
+ />
669
527
  </div>
670
528
  </div>
671
- <div
672
- aria-invalid={false}
673
- className="charcoal-text-area-container"
674
- style={
675
- Object {
676
- "--charcoal-text-area-rows": "4",
677
- }
678
- }
679
- >
680
- <textarea
681
- aria-labelledby="test-id"
682
- className="charcoal-text-area-textarea"
683
- data-no-bottom-padding={false}
684
- disabled={false}
685
- id="test-id"
686
- onChange={[Function]}
687
- rows={4}
688
- />
689
- </div>
690
529
  </div>
691
530
  </div>
692
531
  `;