@primer/components 31.2.1-rc.18690e3f → 31.2.1-rc.32ed6e21

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 (75) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/dist/browser.esm.js +194 -190
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +204 -200
  5. package/dist/browser.umd.js.map +1 -1
  6. package/docs/content/ActionList2.mdx +8 -7
  7. package/docs/content/{Box.md → Box.mdx} +22 -0
  8. package/docs/src/component-checklist.js +81 -0
  9. package/lib/ActionList/Item.js +27 -52
  10. package/lib/ActionList/Item.jsx +17 -40
  11. package/lib/ActionList2/Description.js +8 -4
  12. package/lib/ActionList2/Description.jsx +2 -3
  13. package/lib/ActionList2/Group.d.ts +28 -2
  14. package/lib/ActionList2/Group.js +55 -6
  15. package/lib/ActionList2/Group.jsx +33 -4
  16. package/lib/ActionList2/Item.js +6 -7
  17. package/lib/ActionList2/Item.jsx +5 -5
  18. package/lib/ActionList2/List.d.ts +1 -1
  19. package/lib/Autocomplete/Autocomplete.d.ts +3 -3
  20. package/lib/Autocomplete/AutocompleteInput.d.ts +3 -3
  21. package/lib/Button/ButtonClose.d.ts +2 -2
  22. package/lib/CircleOcticon.d.ts +1 -1
  23. package/lib/Dialog.d.ts +3 -3
  24. package/lib/Dropdown.d.ts +4 -4
  25. package/lib/DropdownMenu/DropdownButton.d.ts +2 -2
  26. package/lib/FilterList.d.ts +1 -1
  27. package/lib/NewButton/button.js +34 -42
  28. package/lib/NewButton/button.jsx +24 -23
  29. package/lib/Position.d.ts +4 -4
  30. package/lib/SelectMenu/SelectMenu.d.ts +11 -11
  31. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  32. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  33. package/lib/TextInputWithTokens.d.ts +3 -3
  34. package/lib/Timeline.d.ts +1 -1
  35. package/lib/Token/Token.d.ts +1 -1
  36. package/lib/stories/ActionList2.stories.js +4 -3
  37. package/lib/utils/testing.d.ts +6 -60
  38. package/lib-esm/ActionList/Item.js +28 -53
  39. package/lib-esm/ActionList2/Description.js +8 -4
  40. package/lib-esm/ActionList2/Group.d.ts +28 -2
  41. package/lib-esm/ActionList2/Group.js +52 -5
  42. package/lib-esm/ActionList2/Item.js +6 -7
  43. package/lib-esm/ActionList2/List.d.ts +1 -1
  44. package/lib-esm/Autocomplete/Autocomplete.d.ts +3 -3
  45. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +3 -3
  46. package/lib-esm/Button/ButtonClose.d.ts +2 -2
  47. package/lib-esm/CircleOcticon.d.ts +1 -1
  48. package/lib-esm/Dialog.d.ts +3 -3
  49. package/lib-esm/Dropdown.d.ts +4 -4
  50. package/lib-esm/DropdownMenu/DropdownButton.d.ts +2 -2
  51. package/lib-esm/FilterList.d.ts +1 -1
  52. package/lib-esm/NewButton/button.js +31 -42
  53. package/lib-esm/Position.d.ts +4 -4
  54. package/lib-esm/SelectMenu/SelectMenu.d.ts +11 -11
  55. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  56. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  57. package/lib-esm/TextInputWithTokens.d.ts +3 -3
  58. package/lib-esm/Timeline.d.ts +1 -1
  59. package/lib-esm/Token/Token.d.ts +1 -1
  60. package/lib-esm/stories/ActionList2.stories.js +4 -3
  61. package/lib-esm/theme-preval.js +66 -366
  62. package/lib-esm/utils/testing.d.ts +6 -60
  63. package/package-lock.json +7 -7
  64. package/package.json +2 -2
  65. package/src/ActionList/Item.tsx +17 -46
  66. package/src/ActionList2/Description.tsx +7 -4
  67. package/src/ActionList2/Group.tsx +76 -7
  68. package/src/ActionList2/Item.tsx +6 -5
  69. package/src/ActionList2/List.tsx +1 -1
  70. package/src/NewButton/button.tsx +82 -78
  71. package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +5 -5
  72. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +25 -25
  73. package/src/__tests__/__snapshots__/NewButton.test.tsx.snap +5 -0
  74. package/src/stories/ActionList2.stories.tsx +3 -3
  75. package/stats.html +1 -1
package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap CHANGED
@@ -436,20 +436,20 @@ Array [
436
436
  }
437
437
 
438
438
  .c4[data-is-active-descendant='activated-directly'] {
439
- background: rgba(54,77,100,0.16);
439
+ background: rgba(208,215,222,0.48);
440
440
  }
441
441
 
442
442
  .c4[data-is-active-descendant='activated-indirectly'] {
443
- background: rgba(46,77,108,0.06);
443
+ background: rgba(208,215,222,0.32);
444
444
  }
445
445
 
446
446
  .c4:focus {
447
- background: rgba(54,77,100,0.16);
447
+ background: rgba(208,215,222,0.48);
448
448
  outline: none;
449
449
  }
450
450
 
451
451
  .c4:active {
452
- background: rgba(54,77,100,0.16);
452
+ background: rgba(208,215,222,0.48);
453
453
  }
454
454
 
455
455
  .c5 {
@@ -530,7 +530,7 @@ Array [
530
530
 
531
531
  @media (hover:hover) and (pointer:fine) {
532
532
  .c4:hover {
533
- background: var(--item-hover-bg-override,rgba(46,77,108,0.06));
533
+ background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
534
534
  cursor: pointer;
535
535
  }
536
536
  }
@@ -1343,20 +1343,20 @@ Array [
1343
1343
  }
1344
1344
 
1345
1345
  .c4[data-is-active-descendant='activated-directly'] {
1346
- background: rgba(54,77,100,0.16);
1346
+ background: rgba(208,215,222,0.48);
1347
1347
  }
1348
1348
 
1349
1349
  .c4[data-is-active-descendant='activated-indirectly'] {
1350
- background: rgba(46,77,108,0.06);
1350
+ background: rgba(208,215,222,0.32);
1351
1351
  }
1352
1352
 
1353
1353
  .c4:focus {
1354
- background: rgba(54,77,100,0.16);
1354
+ background: rgba(208,215,222,0.48);
1355
1355
  outline: none;
1356
1356
  }
1357
1357
 
1358
1358
  .c4:active {
1359
- background: rgba(54,77,100,0.16);
1359
+ background: rgba(208,215,222,0.48);
1360
1360
  }
1361
1361
 
1362
1362
  .c5 {
@@ -1400,7 +1400,7 @@ Array [
1400
1400
 
1401
1401
  @media (hover:hover) and (pointer:fine) {
1402
1402
  .c4:hover {
1403
- background: var(--item-hover-bg-override,rgba(46,77,108,0.06));
1403
+ background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
1404
1404
  cursor: pointer;
1405
1405
  }
1406
1406
  }
@@ -2160,20 +2160,20 @@ Array [
2160
2160
  }
2161
2161
 
2162
2162
  .c4[data-is-active-descendant='activated-directly'] {
2163
- background: rgba(54,77,100,0.16);
2163
+ background: rgba(208,215,222,0.48);
2164
2164
  }
2165
2165
 
2166
2166
  .c4[data-is-active-descendant='activated-indirectly'] {
2167
- background: rgba(46,77,108,0.06);
2167
+ background: rgba(208,215,222,0.32);
2168
2168
  }
2169
2169
 
2170
2170
  .c4:focus {
2171
- background: rgba(54,77,100,0.16);
2171
+ background: rgba(208,215,222,0.48);
2172
2172
  outline: none;
2173
2173
  }
2174
2174
 
2175
2175
  .c4:active {
2176
- background: rgba(54,77,100,0.16);
2176
+ background: rgba(208,215,222,0.48);
2177
2177
  }
2178
2178
 
2179
2179
  .c5 {
@@ -2227,7 +2227,7 @@ Array [
2227
2227
 
2228
2228
  @media (hover:hover) and (pointer:fine) {
2229
2229
  .c4:hover {
2230
- background: var(--item-hover-bg-override,rgba(46,77,108,0.06));
2230
+ background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
2231
2231
  cursor: pointer;
2232
2232
  }
2233
2233
  }
@@ -2987,20 +2987,20 @@ Array [
2987
2987
  }
2988
2988
 
2989
2989
  .c4[data-is-active-descendant='activated-directly'] {
2990
- background: rgba(54,77,100,0.16);
2990
+ background: rgba(208,215,222,0.48);
2991
2991
  }
2992
2992
 
2993
2993
  .c4[data-is-active-descendant='activated-indirectly'] {
2994
- background: rgba(46,77,108,0.06);
2994
+ background: rgba(208,215,222,0.32);
2995
2995
  }
2996
2996
 
2997
2997
  .c4:focus {
2998
- background: rgba(54,77,100,0.16);
2998
+ background: rgba(208,215,222,0.48);
2999
2999
  outline: none;
3000
3000
  }
3001
3001
 
3002
3002
  .c4:active {
3003
- background: rgba(54,77,100,0.16);
3003
+ background: rgba(208,215,222,0.48);
3004
3004
  }
3005
3005
 
3006
3006
  .c1 {
@@ -3016,7 +3016,7 @@ Array [
3016
3016
 
3017
3017
  @media (hover:hover) and (pointer:fine) {
3018
3018
  .c4:hover {
3019
- background: var(--item-hover-bg-override,rgba(46,77,108,0.06));
3019
+ background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
3020
3020
  cursor: pointer;
3021
3021
  }
3022
3022
  }
@@ -3430,20 +3430,20 @@ Array [
3430
3430
  }
3431
3431
 
3432
3432
  .c4[data-is-active-descendant='activated-directly'] {
3433
- background: rgba(54,77,100,0.16);
3433
+ background: rgba(208,215,222,0.48);
3434
3434
  }
3435
3435
 
3436
3436
  .c4[data-is-active-descendant='activated-indirectly'] {
3437
- background: rgba(46,77,108,0.06);
3437
+ background: rgba(208,215,222,0.32);
3438
3438
  }
3439
3439
 
3440
3440
  .c4:focus {
3441
- background: rgba(54,77,100,0.16);
3441
+ background: rgba(208,215,222,0.48);
3442
3442
  outline: none;
3443
3443
  }
3444
3444
 
3445
3445
  .c4:active {
3446
- background: rgba(54,77,100,0.16);
3446
+ background: rgba(208,215,222,0.48);
3447
3447
  }
3448
3448
 
3449
3449
  .c1 {
@@ -3459,7 +3459,7 @@ Array [
3459
3459
 
3460
3460
  @media (hover:hover) and (pointer:fine) {
3461
3461
  .c4:hover {
3462
- background: var(--item-hover-bg-override,rgba(46,77,108,0.06));
3462
+ background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
3463
3463
  cursor: pointer;
3464
3464
  }
3465
3465
  }
package/src/__tests__/__snapshots__/NewButton.test.tsx.snap CHANGED
@@ -41,6 +41,7 @@ exports[`Button renders consistently 1`] = `
41
41
  }
42
42
 
43
43
  .c0:disabled {
44
+ cursor: default;
44
45
  color: #8c959f;
45
46
  background-color: btn.disabledBg;
46
47
  }
@@ -83,6 +84,7 @@ exports[`Button renders consistently 1`] = `
83
84
  >
84
85
  <span
85
86
  data-component="text"
87
+ hidden={false}
86
88
  />
87
89
  </button>
88
90
  `;
@@ -128,6 +130,7 @@ exports[`Button respects the "disabled" prop 1`] = `
128
130
  }
129
131
 
130
132
  .c0:disabled {
133
+ cursor: default;
131
134
  color: #8c959f;
132
135
  background-color: btn.disabledBg;
133
136
  }
@@ -171,6 +174,7 @@ exports[`Button respects the "disabled" prop 1`] = `
171
174
  >
172
175
  <span
173
176
  data-component="text"
177
+ hidden={false}
174
178
  >
175
179
  Disabled
176
180
  </span>
@@ -222,6 +226,7 @@ exports[`Button styles icon only button to make it a square 1`] = `
222
226
  }
223
227
 
224
228
  .c0:disabled {
229
+ cursor: default;
225
230
  color: #8c959f;
226
231
  background-color: btn.disabledBg;
227
232
  }
package/src/stories/ActionList2.stories.tsx CHANGED
@@ -318,8 +318,8 @@ export function GroupsStory(): JSX.Element {
318
318
  <>
319
319
  <h1>Groups</h1>
320
320
  <ErsatzOverlay>
321
- <ActionList selectionVariant="multiple" showDividers role="listbox" aria-label="Select reviewers">
322
- <ActionList.Group title="Suggestions" variant="filled">
321
+ <ActionList selectionVariant="multiple" showDividers aria-label="Select reviewers">
322
+ <ActionList.Group title="Suggestions" variant="filled" role="listbox">
323
323
  {users.slice(0, 2).map(user => (
324
324
  <ActionList.Item
325
325
  key={user.login}
@@ -336,7 +336,7 @@ export function GroupsStory(): JSX.Element {
336
336
  </ActionList.Item>
337
337
  ))}
338
338
  </ActionList.Group>
339
- <ActionList.Group title="Everyone" variant="filled">
339
+ <ActionList.Group title="Everyone" variant="filled" role="listbox">
340
340
  {users.slice(2).map(user => (
341
341
  <ActionList.Item
342
342
  role="option"