@primer/components 31.0.0-rc.dfe9dc6b → 31.0.1-rc.0f466271

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 (48) hide show
  1. package/.github/workflows/check_for_changeset.yml +25 -0
  2. package/CHANGELOG.md +10 -0
  3. package/dist/browser.esm.js +33 -28
  4. package/dist/browser.esm.js.map +1 -1
  5. package/dist/browser.umd.js +13 -8
  6. package/dist/browser.umd.js.map +1 -1
  7. package/docs/content/ActionList.mdx +2 -2
  8. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +3 -1
  9. package/lib/ActionList/Item.d.ts +6 -0
  10. package/lib/ActionList/Item.js +8 -4
  11. package/lib/Button/Button.js +1 -1
  12. package/lib/Button/ButtonInvisible.js +1 -1
  13. package/lib/Button/ButtonTableList.js +1 -1
  14. package/lib/Pagination/Pagination.js +1 -1
  15. package/lib/_TextInputWrapper.js +1 -1
  16. package/lib/stories/ActionList.stories.js +3 -2
  17. package/lib/stories/ActionMenu.stories.js +14 -2
  18. package/lib/stories/Button.stories.js +12 -1
  19. package/lib-esm/ActionList/Item.d.ts +6 -0
  20. package/lib-esm/ActionList/Item.js +8 -4
  21. package/lib-esm/Button/Button.js +1 -1
  22. package/lib-esm/Button/ButtonInvisible.js +1 -1
  23. package/lib-esm/Button/ButtonTableList.js +1 -1
  24. package/lib-esm/Pagination/Pagination.js +1 -1
  25. package/lib-esm/_TextInputWrapper.js +1 -1
  26. package/lib-esm/stories/ActionList.stories.js +3 -2
  27. package/lib-esm/stories/ActionMenu.stories.js +14 -2
  28. package/lib-esm/stories/Button.stories.js +8 -0
  29. package/package.json +1 -1
  30. package/src/ActionList/Item.tsx +17 -4
  31. package/src/Button/Button.tsx +1 -1
  32. package/src/Button/ButtonInvisible.tsx +7 -2
  33. package/src/Button/ButtonTableList.tsx +1 -1
  34. package/src/Pagination/Pagination.tsx +1 -1
  35. package/src/_TextInputWrapper.tsx +1 -1
  36. package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +1 -1
  37. package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +1 -1
  38. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +3 -3
  39. package/src/__tests__/__snapshots__/Button.test.tsx.snap +12 -4
  40. package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +1 -1
  41. package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +1 -1
  42. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +1 -1
  43. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +1 -1
  44. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +1 -1
  45. package/src/stories/ActionList.stories.tsx +3 -4
  46. package/src/stories/ActionMenu.stories.tsx +15 -3
  47. package/src/stories/Button.stories.tsx +4 -0
  48. package/stats.html +1 -1
package/src/__tests__/__snapshots__/Button.test.tsx.snap CHANGED
@@ -62,7 +62,7 @@ exports[`Button renders consistently 1`] = `
62
62
  }
63
63
 
64
64
  .c0:disabled {
65
- color: #57606a;
65
+ color: #8c959f;
66
66
  background-color: #f6f8fa;
67
67
  border-color: rgba(27,31,36,0.15);
68
68
  }
@@ -134,7 +134,7 @@ exports[`Button respects the "disabled" prop 1`] = `
134
134
  }
135
135
 
136
136
  .c0:disabled {
137
- color: #57606a;
137
+ color: #8c959f;
138
138
  background-color: #f6f8fa;
139
139
  border-color: rgba(27,31,36,0.15);
140
140
  }
@@ -472,13 +472,21 @@ exports[`ButtonInvisible renders correct disabled styles 1`] = `
472
472
  }
473
473
 
474
474
  .c0:disabled {
475
- color: #57606a;
475
+ color: #8c959f;
476
476
  }
477
477
 
478
478
  .c0:focus {
479
479
  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
480
480
  }
481
481
 
482
+ .c0:hover {
483
+ background-color: #f3f4f6;
484
+ }
485
+
486
+ .c0:active {
487
+ background-color: hsla(220,14%,94%,1);
488
+ }
489
+
482
490
  <button
483
491
  className="c0"
484
492
  disabled={true}
@@ -811,7 +819,7 @@ exports[`ButtonTableList renders consistently 1`] = `
811
819
 
812
820
  .c0:disabled,
813
821
  .c0:disabled:hover {
814
- color: rgba(#57606a,0.5);
822
+ color: #8c959f;
815
823
  cursor: default;
816
824
  }
817
825
 
package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap CHANGED
@@ -68,7 +68,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
68
68
  }
69
69
 
70
70
  .c1:disabled {
71
- color: #57606a;
71
+ color: #8c959f;
72
72
  background-color: #f6f8fa;
73
73
  border-color: rgba(27,31,36,0.15);
74
74
  }
package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap CHANGED
@@ -84,7 +84,7 @@ exports[`Dropdown.Button renders consistently 1`] = `
84
84
  }
85
85
 
86
86
  .c0:disabled {
87
- color: #57606a;
87
+ color: #8c959f;
88
88
  background-color: #f6f8fa;
89
89
  border-color: rgba(27,31,36,0.15);
90
90
  }
package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap CHANGED
@@ -62,7 +62,7 @@ exports[`DropdownMenu renders consistently 1`] = `
62
62
  }
63
63
 
64
64
  .c0:disabled {
65
- color: #57606a;
65
+ color: #8c959f;
66
66
  background-color: #f6f8fa;
67
67
  border-color: rgba(27,31,36,0.15);
68
68
  }
package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap CHANGED
@@ -62,7 +62,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
62
62
  }
63
63
 
64
64
  .c1:disabled {
65
- color: #57606a;
65
+ color: #8c959f;
66
66
  background-color: #f6f8fa;
67
67
  border-color: rgba(27,31,36,0.15);
68
68
  }
package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap CHANGED
@@ -68,7 +68,7 @@ exports[`SelectPanel renders consistently 1`] = `
68
68
  }
69
69
 
70
70
  .c1:disabled {
71
- color: #57606a;
71
+ color: #8c959f;
72
72
  background-color: #f6f8fa;
73
73
  border-color: rgba(27,31,36,0.15);
74
74
  }
package/src/stories/ActionList.stories.tsx CHANGED
@@ -338,21 +338,20 @@ export function SizeStressTestingStory(): JSX.Element {
338
338
  text: 'Block Description. Long text should wrap',
339
339
  description: 'This description is long, but it is block so it wraps',
340
340
  descriptionVariant: 'block',
341
- trailingIcon: ArrowLeftIcon,
342
-
341
+ trailingVisual: ArrowLeftIcon,
343
342
  showDivider: true
344
343
  },
345
344
  {
346
345
  leadingVisual: ArrowRightIcon,
347
346
  text: 'Inline Description',
348
347
  description: 'This description gets truncated because it is inline',
349
- trailingIcon: ArrowLeftIcon,
348
+ trailingVisual: ArrowLeftIcon,
350
349
  showDivider: true
351
350
  },
352
351
  {
353
352
  leadingVisual: ArrowRightIcon,
354
353
  text: 'Really long text without a description should wrap',
355
- trailingIcon: ArrowLeftIcon,
354
+ trailingIcon: ArrowLeftIcon, // backward compatible
356
355
  showDivider: true
357
356
  }
358
357
  ]}
package/src/stories/ActionMenu.stories.tsx CHANGED
@@ -150,7 +150,7 @@ export function ExternalOpenState(): JSX.Element {
150
150
  {
151
151
  text: 'Delete file',
152
152
  variant: 'danger',
153
- trailingText: '⌘D'
153
+ trailingVisual: '⌘D'
154
154
  }
155
155
  ]}
156
156
  />
@@ -188,8 +188,20 @@ export function ComplexListStory(): JSX.Element {
188
188
  text: 'repo:github/github',
189
189
  groupId: '1',
190
190
  renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />,
191
- trailingText: '⌘S',
192
- trailingIcon: ArrowRightIcon
191
+ trailingVisual: () => (
192
+ <>
193
+ ⌘S
194
+ <ArrowRightIcon />
195
+ </>
196
+ )
197
+ },
198
+ {
199
+ leadingVisual: SearchIcon,
200
+ text: 'repo:github/github',
201
+ groupId: '1',
202
+ renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />,
203
+ trailingText: '⌘S', // backward compatible
204
+ trailingIcon: ArrowRightIcon // backward compatible
193
205
  },
194
206
  {
195
207
  leadingVisual: NoteIcon,
package/src/stories/Button.stories.tsx CHANGED
@@ -77,6 +77,10 @@ export const buttonGroup = (args: StrictButtonStyleProps) => (
77
77
  export const buttonTableList = (args: ButtonStyleProps) => (
78
78
  <ButtonTableList {...args}>Button Table List</ButtonTableList>
79
79
  )
80
+ export const disabledButton = (args: ButtonStyleProps) => {
81
+ const props = {disabled: true, ...args}
82
+ return <Button {...props}>Disabled</Button>
83
+ }
80
84
 
81
85
  defaultButton.args = {variant: 'medium'}
82
86
  dangerButton.args = {variant: 'medium'}