@charcoal-ui/react 6.0.0-beta.1 → 6.0.0-beta.2

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 (28) hide show
  1. package/dist/components/Icon/index.d.ts +14 -1
  2. package/dist/components/Icon/index.d.ts.map +1 -1
  3. package/dist/components/Pagination/index.d.ts.map +1 -1
  4. package/dist/index.cjs +2 -2
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.css +1 -3
  7. package/dist/index.js +2 -2
  8. package/dist/index.js.map +1 -1
  9. package/dist/layered.css +1 -3
  10. package/dist/layered.css.map +1 -1
  11. package/package.json +5 -5
  12. package/src/__tests__/css-output.test.ts +1 -2
  13. package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot +2 -0
  14. package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +26 -13
  15. package/src/components/HintText/__snapshots__/index.story.storyshot +4 -0
  16. package/src/components/Icon/__snapshots__/index.story.storyshot +2 -0
  17. package/src/components/Icon/index.browser.test.tsx +280 -0
  18. package/src/components/Icon/index.test.tsx +94 -0
  19. package/src/components/Icon/index.tsx +49 -4
  20. package/src/components/IconButton/__snapshots__/index.story.storyshot +6 -0
  21. package/src/components/Modal/__snapshots__/index.story.storyshot +12 -2
  22. package/src/components/MultiSelect/__snapshots__/index.story.storyshot +32 -0
  23. package/src/components/MultiSelect/index.tsx +1 -1
  24. package/src/components/Pagination/__snapshots__/index.css.snap +1 -4
  25. package/src/components/Pagination/index.css +1 -3
  26. package/src/components/Pagination/index.tsx +2 -1
  27. package/src/components/TagItem/__snapshots__/index.story.storyshot +2 -0
  28. package/src/components/TextField/__snapshots__/TextField.story.storyshot +2 -0
package/src/components/MultiSelect/__snapshots__/index.story.storyshot CHANGED
@@ -30,7 +30,9 @@ exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
30
30
  data-overlay="false"
31
31
  >
32
32
  <pixiv-icon
33
+ class="charcoal-icon"
33
34
  name="24/Check"
35
+ style="--charcoal-icon-size: 16px;"
34
36
  unsafe-non-guideline-scale="0.6666666666666666"
35
37
  />
36
38
  </div>
@@ -59,7 +61,9 @@ exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
59
61
  data-overlay="false"
60
62
  >
61
63
  <pixiv-icon
64
+ class="charcoal-icon"
62
65
  name="24/Check"
66
+ style="--charcoal-icon-size: 16px;"
63
67
  unsafe-non-guideline-scale="0.6666666666666666"
64
68
  />
65
69
  </div>
@@ -89,7 +93,9 @@ exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
89
93
  data-overlay="false"
90
94
  >
91
95
  <pixiv-icon
96
+ class="charcoal-icon"
92
97
  name="24/Check"
98
+ style="--charcoal-icon-size: 16px;"
93
99
  unsafe-non-guideline-scale="0.6666666666666666"
94
100
  />
95
101
  </div>
@@ -118,7 +124,9 @@ exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
118
124
  data-overlay="false"
119
125
  >
120
126
  <pixiv-icon
127
+ class="charcoal-icon"
121
128
  name="24/Check"
129
+ style="--charcoal-icon-size: 16px;"
122
130
  unsafe-non-guideline-scale="0.6666666666666666"
123
131
  />
124
132
  </div>
@@ -162,7 +170,9 @@ exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
162
170
  data-overlay="false"
163
171
  >
164
172
  <pixiv-icon
173
+ class="charcoal-icon"
165
174
  name="24/Check"
175
+ style="--charcoal-icon-size: 16px;"
166
176
  unsafe-non-guideline-scale="0.6666666666666666"
167
177
  />
168
178
  </div>
@@ -191,7 +201,9 @@ exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
191
201
  data-overlay="false"
192
202
  >
193
203
  <pixiv-icon
204
+ class="charcoal-icon"
194
205
  name="24/Check"
206
+ style="--charcoal-icon-size: 16px;"
195
207
  unsafe-non-guideline-scale="0.6666666666666666"
196
208
  />
197
209
  </div>
@@ -220,7 +232,9 @@ exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
220
232
  data-overlay="false"
221
233
  >
222
234
  <pixiv-icon
235
+ class="charcoal-icon"
223
236
  name="24/Check"
237
+ style="--charcoal-icon-size: 16px;"
224
238
  unsafe-non-guideline-scale="0.6666666666666666"
225
239
  />
226
240
  </div>
@@ -249,7 +263,9 @@ exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
249
263
  data-overlay="false"
250
264
  >
251
265
  <pixiv-icon
266
+ class="charcoal-icon"
252
267
  name="24/Check"
268
+ style="--charcoal-icon-size: 16px;"
253
269
  unsafe-non-guideline-scale="0.6666666666666666"
254
270
  />
255
271
  </div>
@@ -293,7 +309,9 @@ exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
293
309
  data-overlay="true"
294
310
  >
295
311
  <pixiv-icon
312
+ class="charcoal-icon"
296
313
  name="24/Check"
314
+ style="--charcoal-icon-size: 16px;"
297
315
  unsafe-non-guideline-scale="0.6666666666666666"
298
316
  />
299
317
  </div>
@@ -322,7 +340,9 @@ exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
322
340
  data-overlay="true"
323
341
  >
324
342
  <pixiv-icon
343
+ class="charcoal-icon"
325
344
  name="24/Check"
345
+ style="--charcoal-icon-size: 16px;"
326
346
  unsafe-non-guideline-scale="0.6666666666666666"
327
347
  />
328
348
  </div>
@@ -351,7 +371,9 @@ exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
351
371
  data-overlay="true"
352
372
  >
353
373
  <pixiv-icon
374
+ class="charcoal-icon"
354
375
  name="24/Check"
376
+ style="--charcoal-icon-size: 16px;"
355
377
  unsafe-non-guideline-scale="0.6666666666666666"
356
378
  />
357
379
  </div>
@@ -380,7 +402,9 @@ exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
380
402
  data-overlay="true"
381
403
  >
382
404
  <pixiv-icon
405
+ class="charcoal-icon"
383
406
  name="24/Check"
407
+ style="--charcoal-icon-size: 16px;"
384
408
  unsafe-non-guideline-scale="0.6666666666666666"
385
409
  />
386
410
  </div>
@@ -424,7 +448,9 @@ exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
424
448
  data-overlay="false"
425
449
  >
426
450
  <pixiv-icon
451
+ class="charcoal-icon"
427
452
  name="24/Check"
453
+ style="--charcoal-icon-size: 16px;"
428
454
  unsafe-non-guideline-scale="0.6666666666666666"
429
455
  />
430
456
  </div>
@@ -454,7 +480,9 @@ exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
454
480
  data-overlay="false"
455
481
  >
456
482
  <pixiv-icon
483
+ class="charcoal-icon"
457
484
  name="24/Check"
485
+ style="--charcoal-icon-size: 16px;"
458
486
  unsafe-non-guideline-scale="0.6666666666666666"
459
487
  />
460
488
  </div>
@@ -484,7 +512,9 @@ exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
484
512
  data-overlay="false"
485
513
  >
486
514
  <pixiv-icon
515
+ class="charcoal-icon"
487
516
  name="24/Check"
517
+ style="--charcoal-icon-size: 16px;"
488
518
  unsafe-non-guideline-scale="0.6666666666666666"
489
519
  />
490
520
  </div>
@@ -514,7 +544,9 @@ exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
514
544
  data-overlay="false"
515
545
  >
516
546
  <pixiv-icon
547
+ class="charcoal-icon"
517
548
  name="24/Check"
549
+ style="--charcoal-icon-size: 16px;"
518
550
  unsafe-non-guideline-scale="0.6666666666666666"
519
551
  />
520
552
  </div>
package/src/components/MultiSelect/index.tsx CHANGED
@@ -76,7 +76,7 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
76
76
  aria-invalid={invalid}
77
77
  aria-hidden
78
78
  >
79
- <Icon name="24/Check" unsafe-non-guideline-scale={16 / 24} />
79
+ <Icon name="24/Check" fixedSize={16} />
80
80
  </div>
81
81
  {Boolean(children) && (
82
82
  <div className="charcoal-multi-select-label">{children}</div>
package/src/components/Pagination/__snapshots__/index.css.snap CHANGED
@@ -95,11 +95,8 @@
95
95
  }
96
96
  /* stylelint-enable no-descending-specificity */
97
97
 
98
- /* Kept flat: different root class from .charcoal-pagination-button */
99
-
100
- .charcoal-pagination-nav-button[hidden] {
98
+ .charcoal-pagination-nav-button[data-hidden] {
101
99
  visibility: hidden;
102
- display: block;
103
100
  }
104
101
 
105
102
  .charcoal-pagination-spacer, .charcoal-pagination-spacer:hover, .charcoal-pagination-spacer:active {
package/src/components/Pagination/index.css CHANGED
@@ -103,10 +103,8 @@
103
103
  }
104
104
  /* stylelint-enable no-descending-specificity */
105
105
 
106
- /* Kept flat: different root class from .charcoal-pagination-button */
107
- .charcoal-pagination-nav-button[hidden] {
106
+ .charcoal-pagination-nav-button[data-hidden] {
108
107
  visibility: hidden;
109
- display: block;
110
108
  }
111
109
 
112
110
  .charcoal-pagination-spacer {
package/src/components/Pagination/index.tsx CHANGED
@@ -44,7 +44,8 @@ function NavButton({ direction, ariaLabel }: NavButtonProps) {
44
44
  <IconButton
45
45
  icon={isPrev ? '24/Prev' : '24/Next'}
46
46
  size={size}
47
- hidden={disabled}
47
+ /* Use data-hidden, not [hidden]: Tailwind preflight's `[hidden] { display: none !important }` would clobber `visibility: hidden` and collapse the layout space. */
48
+ data-hidden={disabled || undefined}
48
49
  aria-label={ariaLabel}
49
50
  {...(isLinkMode && makeUrl
50
51
  ? {
package/src/components/TagItem/__snapshots__/index.story.storyshot CHANGED
@@ -24,7 +24,9 @@ exports[`Storybook Tests > react/TagItem > Active 1`] = `
24
24
  </span>
25
25
  </div>
26
26
  <pixiv-icon
27
+ class="charcoal-icon"
27
28
  name="16/Remove"
29
+ style="--charcoal-icon-size: 16px;"
28
30
  />
29
31
  </button>
30
32
  </div>
package/src/components/TextField/__snapshots__/TextField.story.storyshot CHANGED
@@ -424,7 +424,9 @@ exports[`Storybook Tests > react/TextField > Prefix 1`] = `
424
424
  style="display: flex; align-items: center;"
425
425
  >
426
426
  <pixiv-icon
427
+ class="charcoal-icon"
427
428
  name="16/Search"
429
+ style="--charcoal-icon-size: 16px;"
428
430
  />
429
431
  </div>
430
432
  </div>