@primer/components 31.0.0-rc.f601fc1f → 31.0.2-rc.1e80de40

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 (57) hide show
  1. package/.github/workflows/check_for_changeset.yml +25 -0
  2. package/CHANGELOG.md +14 -2
  3. package/dist/browser.esm.js +40 -37
  4. package/dist/browser.esm.js.map +1 -1
  5. package/dist/browser.umd.js +34 -31
  6. package/dist/browser.umd.js.map +1 -1
  7. package/docs/content/Autocomplete.mdx +51 -21
  8. package/lib/ActionList/Item.js +3 -3
  9. package/lib/Button/Button.js +1 -1
  10. package/lib/Button/ButtonTableList.js +1 -1
  11. package/lib/Pagination/Pagination.js +1 -1
  12. package/lib/TextInputWithTokens.js +17 -10
  13. package/lib/Token/Token.js +13 -2
  14. package/lib/Token/TokenBase.js +0 -4
  15. package/lib/Token/_RemoveTokenButton.js +15 -2
  16. package/lib/_TextInputWrapper.js +1 -1
  17. package/lib/stories/Autocomplete.stories.js +67 -56
  18. package/lib/stories/Button.stories.js +12 -1
  19. package/lib/stories/useAnchoredPosition.stories.js +1 -1
  20. package/lib-esm/ActionList/Item.js +3 -3
  21. package/lib-esm/Button/Button.js +1 -1
  22. package/lib-esm/Button/ButtonTableList.js +1 -1
  23. package/lib-esm/Pagination/Pagination.js +1 -1
  24. package/lib-esm/TextInputWithTokens.js +17 -10
  25. package/lib-esm/Token/Token.js +13 -2
  26. package/lib-esm/Token/TokenBase.js +0 -4
  27. package/lib-esm/Token/_RemoveTokenButton.js +11 -2
  28. package/lib-esm/_TextInputWrapper.js +1 -1
  29. package/lib-esm/stories/Autocomplete.stories.js +67 -56
  30. package/lib-esm/stories/Button.stories.js +8 -0
  31. package/lib-esm/stories/useAnchoredPosition.stories.js +1 -1
  32. package/package-lock.json +6090 -7003
  33. package/package.json +6 -6
  34. package/src/ActionList/Item.tsx +3 -3
  35. package/src/Button/Button.tsx +1 -1
  36. package/src/Button/ButtonTableList.tsx +1 -1
  37. package/src/Pagination/Pagination.tsx +1 -1
  38. package/src/TextInputWithTokens.tsx +49 -40
  39. package/src/Token/Token.tsx +16 -2
  40. package/src/Token/TokenBase.tsx +0 -5
  41. package/src/Token/_RemoveTokenButton.tsx +15 -2
  42. package/src/_TextInputWrapper.tsx +1 -1
  43. package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +1 -1
  44. package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +1 -1
  45. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +3 -3
  46. package/src/__tests__/__snapshots__/Button.test.tsx.snap +3 -3
  47. package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +1 -1
  48. package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +1 -1
  49. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +1 -1
  50. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +1 -1
  51. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +1 -1
  52. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +3374 -3166
  53. package/src/__tests__/__snapshots__/Token.test.tsx.snap +31 -24
  54. package/src/stories/Autocomplete.stories.tsx +142 -59
  55. package/src/stories/Button.stories.tsx +4 -0
  56. package/src/stories/useAnchoredPosition.stories.tsx +13 -1
  57. package/stats.html +1 -1
package/src/__tests__/__snapshots__/Token.test.tsx.snap CHANGED
@@ -46,6 +46,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
46
46
  align-self: baseline;
47
47
  border: 0;
48
48
  border-radius: 999px;
49
+ margin-left: 4px;
49
50
  height: 16px;
50
51
  width: 16px;
51
52
  }
@@ -115,7 +116,6 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
115
116
  text-decoration: none;
116
117
  white-space: nowrap;
117
118
  font-size: 12px;
118
- gap: 4px;
119
119
  height: 16px;
120
120
  line-height: 16px;
121
121
  padding-left: 4px;
@@ -139,6 +139,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
139
139
  -ms-flex-negative: 0;
140
140
  flex-shrink: 0;
141
141
  line-height: 0;
142
+ margin-right: 4px;
142
143
  }
143
144
 
144
145
  .c2 {
@@ -157,6 +158,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
157
158
  >
158
159
  <span
159
160
  className="c1"
161
+ size="small"
160
162
  >
161
163
  <span
162
164
  className="c2"
@@ -254,6 +256,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
254
256
  align-self: baseline;
255
257
  border: 0;
256
258
  border-radius: 999px;
259
+ margin-left: 4px;
257
260
  height: 20px;
258
261
  width: 20px;
259
262
  }
@@ -323,7 +326,6 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
323
326
  text-decoration: none;
324
327
  white-space: nowrap;
325
328
  font-size: 12px;
326
- gap: 4px;
327
329
  height: 20px;
328
330
  line-height: 20px;
329
331
  padding-left: 8px;
@@ -347,6 +349,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
347
349
  -ms-flex-negative: 0;
348
350
  flex-shrink: 0;
349
351
  line-height: 0;
352
+ margin-right: 4px;
350
353
  }
351
354
 
352
355
  .c2 {
@@ -365,6 +368,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
365
368
  >
366
369
  <span
367
370
  className="c1"
371
+ size="medium"
368
372
  >
369
373
  <span
370
374
  className="c2"
@@ -462,6 +466,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
462
466
  align-self: baseline;
463
467
  border: 0;
464
468
  border-radius: 999px;
469
+ margin-left: 8px;
465
470
  height: 24px;
466
471
  width: 24px;
467
472
  }
@@ -531,7 +536,6 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
531
536
  text-decoration: none;
532
537
  white-space: nowrap;
533
538
  font-size: 12px;
534
- gap: 8px;
535
539
  height: 24px;
536
540
  line-height: 24px;
537
541
  padding-left: 8px;
@@ -555,6 +559,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
555
559
  -ms-flex-negative: 0;
556
560
  flex-shrink: 0;
557
561
  line-height: 0;
562
+ margin-right: 8px;
558
563
  }
559
564
 
560
565
  .c2 {
@@ -573,6 +578,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
573
578
  >
574
579
  <span
575
580
  className="c1"
581
+ size="large"
576
582
  >
577
583
  <span
578
584
  className="c2"
@@ -670,6 +676,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
670
676
  align-self: baseline;
671
677
  border: 0;
672
678
  border-radius: 999px;
679
+ margin-left: 8px;
673
680
  height: 32px;
674
681
  width: 32px;
675
682
  }
@@ -739,7 +746,6 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
739
746
  text-decoration: none;
740
747
  white-space: nowrap;
741
748
  font-size: 14px;
742
- gap: 8px;
743
749
  height: 32px;
744
750
  line-height: 32px;
745
751
  padding-left: 16px;
@@ -763,6 +769,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
763
769
  -ms-flex-negative: 0;
764
770
  flex-shrink: 0;
765
771
  line-height: 0;
772
+ margin-right: 8px;
766
773
  }
767
774
 
768
775
  .c2 {
@@ -781,6 +788,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
781
788
  >
782
789
  <span
783
790
  className="c1"
791
+ size="extralarge"
784
792
  >
785
793
  <span
786
794
  className="c2"
@@ -889,7 +897,6 @@ exports[`Token components AvatarToken renders consistently 1`] = `
889
897
  text-decoration: none;
890
898
  white-space: nowrap;
891
899
  font-size: 12px;
892
- gap: 4px;
893
900
  height: 20px;
894
901
  line-height: 20px;
895
902
  padding-left: 8px;
@@ -983,7 +990,6 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
983
990
  text-decoration: none;
984
991
  white-space: nowrap;
985
992
  font-size: 12px;
986
- gap: 4px;
987
993
  height: 20px;
988
994
  line-height: 20px;
989
995
  padding-left: 8px;
@@ -1006,6 +1012,7 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
1006
1012
  -ms-flex-negative: 0;
1007
1013
  flex-shrink: 0;
1008
1014
  line-height: 0;
1015
+ margin-right: 4px;
1009
1016
  }
1010
1017
 
1011
1018
  .c2 {
@@ -1022,6 +1029,7 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
1022
1029
  >
1023
1030
  <span
1024
1031
  className="c1"
1032
+ size="medium"
1025
1033
  >
1026
1034
  <span
1027
1035
  className="c2"
@@ -1090,6 +1098,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
1090
1098
  align-self: baseline;
1091
1099
  border: 0;
1092
1100
  border-radius: 999px;
1101
+ margin-left: 4px;
1093
1102
  height: 20px;
1094
1103
  width: 20px;
1095
1104
  }
@@ -1159,7 +1168,6 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
1159
1168
  text-decoration: none;
1160
1169
  white-space: nowrap;
1161
1170
  font-size: 12px;
1162
- gap: 4px;
1163
1171
  height: 20px;
1164
1172
  line-height: 20px;
1165
1173
  padding-left: 8px;
@@ -1183,6 +1191,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
1183
1191
  -ms-flex-negative: 0;
1184
1192
  flex-shrink: 0;
1185
1193
  line-height: 0;
1194
+ margin-right: 4px;
1186
1195
  }
1187
1196
 
1188
1197
  .c2 {
@@ -1201,6 +1210,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
1201
1210
  >
1202
1211
  <span
1203
1212
  className="c1"
1213
+ size="medium"
1204
1214
  >
1205
1215
  <span
1206
1216
  className="c2"
@@ -1270,7 +1280,6 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
1270
1280
  text-decoration: none;
1271
1281
  white-space: nowrap;
1272
1282
  font-size: 12px;
1273
- gap: 4px;
1274
1283
  height: 16px;
1275
1284
  line-height: 16px;
1276
1285
  padding-left: 4px;
@@ -1332,6 +1341,7 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
1332
1341
  align-self: baseline;
1333
1342
  border: 0;
1334
1343
  border-radius: 999px;
1344
+ margin-left: 4px;
1335
1345
  height: 16px;
1336
1346
  width: 16px;
1337
1347
  }
@@ -1446,7 +1456,6 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
1446
1456
  text-decoration: none;
1447
1457
  white-space: nowrap;
1448
1458
  font-size: 12px;
1449
- gap: 4px;
1450
1459
  height: 20px;
1451
1460
  line-height: 20px;
1452
1461
  padding-left: 8px;
@@ -1508,6 +1517,7 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
1508
1517
  align-self: baseline;
1509
1518
  border: 0;
1510
1519
  border-radius: 999px;
1520
+ margin-left: 4px;
1511
1521
  height: 20px;
1512
1522
  width: 20px;
1513
1523
  }
@@ -1622,7 +1632,6 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
1622
1632
  text-decoration: none;
1623
1633
  white-space: nowrap;
1624
1634
  font-size: 12px;
1625
- gap: 8px;
1626
1635
  height: 24px;
1627
1636
  line-height: 24px;
1628
1637
  padding-left: 8px;
@@ -1684,6 +1693,7 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
1684
1693
  align-self: baseline;
1685
1694
  border: 0;
1686
1695
  border-radius: 999px;
1696
+ margin-left: 8px;
1687
1697
  height: 24px;
1688
1698
  width: 24px;
1689
1699
  }
@@ -1798,7 +1808,6 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
1798
1808
  text-decoration: none;
1799
1809
  white-space: nowrap;
1800
1810
  font-size: 14px;
1801
- gap: 8px;
1802
1811
  height: 32px;
1803
1812
  line-height: 32px;
1804
1813
  padding-left: 16px;
@@ -1860,6 +1869,7 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
1860
1869
  align-self: baseline;
1861
1870
  border: 0;
1862
1871
  border-radius: 999px;
1872
+ margin-left: 8px;
1863
1873
  height: 32px;
1864
1874
  width: 32px;
1865
1875
  }
@@ -2013,7 +2023,6 @@ exports[`Token components IssueLabelToken renders consistently 1`] = `
2013
2023
  text-decoration: none;
2014
2024
  white-space: nowrap;
2015
2025
  font-size: 12px;
2016
- gap: 4px;
2017
2026
  height: 20px;
2018
2027
  line-height: 20px;
2019
2028
  padding-left: 8px;
@@ -2058,7 +2067,6 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
2058
2067
  text-decoration: none;
2059
2068
  white-space: nowrap;
2060
2069
  font-size: 12px;
2061
- gap: 4px;
2062
2070
  height: 20px;
2063
2071
  line-height: 20px;
2064
2072
  padding-left: 8px;
@@ -2120,6 +2128,7 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
2120
2128
  align-self: baseline;
2121
2129
  border: 0;
2122
2130
  border-radius: 999px;
2131
+ margin-left: 4px;
2123
2132
  height: 20px;
2124
2133
  width: 20px;
2125
2134
  }
@@ -2234,7 +2243,6 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
2234
2243
  text-decoration: none;
2235
2244
  white-space: nowrap;
2236
2245
  font-size: 12px;
2237
- gap: 4px;
2238
2246
  height: 20px;
2239
2247
  line-height: 20px;
2240
2248
  padding-left: 8px;
@@ -2296,6 +2304,7 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
2296
2304
  align-self: baseline;
2297
2305
  border: 0;
2298
2306
  border-radius: 999px;
2307
+ margin-left: 4px;
2299
2308
  height: 20px;
2300
2309
  width: 20px;
2301
2310
  }
@@ -2410,7 +2419,6 @@ exports[`Token components IssueLabelToken renders isSelected 1`] = `
2410
2419
  text-decoration: none;
2411
2420
  white-space: nowrap;
2412
2421
  font-size: 12px;
2413
- gap: 4px;
2414
2422
  height: 20px;
2415
2423
  line-height: 20px;
2416
2424
  padding-left: 8px;
@@ -2524,7 +2532,6 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
2524
2532
  text-decoration: none;
2525
2533
  white-space: nowrap;
2526
2534
  font-size: 12px;
2527
- gap: 4px;
2528
2535
  height: 20px;
2529
2536
  line-height: 20px;
2530
2537
  padding-left: 8px;
@@ -2586,6 +2593,7 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
2586
2593
  align-self: baseline;
2587
2594
  border: 0;
2588
2595
  border-radius: 999px;
2596
+ margin-left: 4px;
2589
2597
  height: 20px;
2590
2598
  width: 20px;
2591
2599
  }
@@ -2718,6 +2726,7 @@ exports[`Token components Token renders all sizes 1`] = `
2718
2726
  align-self: baseline;
2719
2727
  border: 0;
2720
2728
  border-radius: 999px;
2729
+ margin-left: 4px;
2721
2730
  height: 16px;
2722
2731
  width: 16px;
2723
2732
  }
@@ -2787,7 +2796,6 @@ exports[`Token components Token renders all sizes 1`] = `
2787
2796
  text-decoration: none;
2788
2797
  white-space: nowrap;
2789
2798
  font-size: 12px;
2790
- gap: 4px;
2791
2799
  height: 16px;
2792
2800
  line-height: 16px;
2793
2801
  padding-left: 4px;
@@ -2884,6 +2892,7 @@ exports[`Token components Token renders all sizes 2`] = `
2884
2892
  align-self: baseline;
2885
2893
  border: 0;
2886
2894
  border-radius: 999px;
2895
+ margin-left: 4px;
2887
2896
  height: 20px;
2888
2897
  width: 20px;
2889
2898
  }
@@ -2953,7 +2962,6 @@ exports[`Token components Token renders all sizes 2`] = `
2953
2962
  text-decoration: none;
2954
2963
  white-space: nowrap;
2955
2964
  font-size: 12px;
2956
- gap: 4px;
2957
2965
  height: 20px;
2958
2966
  line-height: 20px;
2959
2967
  padding-left: 8px;
@@ -3050,6 +3058,7 @@ exports[`Token components Token renders all sizes 3`] = `
3050
3058
  align-self: baseline;
3051
3059
  border: 0;
3052
3060
  border-radius: 999px;
3061
+ margin-left: 8px;
3053
3062
  height: 24px;
3054
3063
  width: 24px;
3055
3064
  }
@@ -3119,7 +3128,6 @@ exports[`Token components Token renders all sizes 3`] = `
3119
3128
  text-decoration: none;
3120
3129
  white-space: nowrap;
3121
3130
  font-size: 12px;
3122
- gap: 8px;
3123
3131
  height: 24px;
3124
3132
  line-height: 24px;
3125
3133
  padding-left: 8px;
@@ -3216,6 +3224,7 @@ exports[`Token components Token renders all sizes 4`] = `
3216
3224
  align-self: baseline;
3217
3225
  border: 0;
3218
3226
  border-radius: 999px;
3227
+ margin-left: 8px;
3219
3228
  height: 32px;
3220
3229
  width: 32px;
3221
3230
  }
@@ -3285,7 +3294,6 @@ exports[`Token components Token renders all sizes 4`] = `
3285
3294
  text-decoration: none;
3286
3295
  white-space: nowrap;
3287
3296
  font-size: 14px;
3288
- gap: 8px;
3289
3297
  height: 32px;
3290
3298
  line-height: 32px;
3291
3299
  padding-left: 16px;
@@ -3403,7 +3411,6 @@ exports[`Token components Token renders consistently 1`] = `
3403
3411
  text-decoration: none;
3404
3412
  white-space: nowrap;
3405
3413
  font-size: 12px;
3406
- gap: 4px;
3407
3414
  height: 20px;
3408
3415
  line-height: 20px;
3409
3416
  padding-left: 8px;
@@ -3487,7 +3494,6 @@ exports[`Token components Token renders isSelected 1`] = `
3487
3494
  text-decoration: none;
3488
3495
  white-space: nowrap;
3489
3496
  font-size: 12px;
3490
- gap: 4px;
3491
3497
  height: 20px;
3492
3498
  line-height: 20px;
3493
3499
  padding-left: 8px;
@@ -3573,7 +3579,6 @@ exports[`Token components Token renders with a leadingVisual 1`] = `
3573
3579
  text-decoration: none;
3574
3580
  white-space: nowrap;
3575
3581
  font-size: 12px;
3576
- gap: 4px;
3577
3582
  height: 20px;
3578
3583
  line-height: 20px;
3579
3584
  padding-left: 8px;
@@ -3594,6 +3599,7 @@ exports[`Token components Token renders with a leadingVisual 1`] = `
3594
3599
  -ms-flex-negative: 0;
3595
3600
  flex-shrink: 0;
3596
3601
  line-height: 0;
3602
+ margin-right: 4px;
3597
3603
  }
3598
3604
 
3599
3605
  <span
@@ -3603,6 +3609,7 @@ exports[`Token components Token renders with a leadingVisual 1`] = `
3603
3609
  >
3604
3610
  <span
3605
3611
  className="c1"
3612
+ size="medium"
3606
3613
  >
3607
3614
  <div
3608
3615
  style={
@@ -3656,6 +3663,7 @@ exports[`Token components Token renders with a remove button 1`] = `
3656
3663
  align-self: baseline;
3657
3664
  border: 0;
3658
3665
  border-radius: 999px;
3666
+ margin-left: 4px;
3659
3667
  height: 20px;
3660
3668
  width: 20px;
3661
3669
  }
@@ -3725,7 +3733,6 @@ exports[`Token components Token renders with a remove button 1`] = `
3725
3733
  text-decoration: none;
3726
3734
  white-space: nowrap;
3727
3735
  font-size: 12px;
3728
- gap: 4px;
3729
3736
  height: 20px;
3730
3737
  line-height: 20px;
3731
3738
  padding-left: 8px;