@primer/components 0.0.0-202111320417 → 0.0.0-2021113205234

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 (277) hide show
  1. package/CHANGELOG.md +988 -0
  2. package/dist/browser.esm.js +2227 -2
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +2227 -2
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Header.js +1 -1
  7. package/lib/ActionList/Item.js +10 -10
  8. package/lib/ActionList/List.js +1 -1
  9. package/lib/ActionList2/Divider.d.ts +2 -3
  10. package/lib/ActionList2/Divider.js +5 -10
  11. package/lib/ActionList2/Item.js +6 -22
  12. package/lib/ActionList2/List.js +2 -12
  13. package/lib/ActionList2/Selection.js +0 -11
  14. package/lib/ActionList2/index.d.ts +2 -1
  15. package/lib/Autocomplete/Autocomplete.d.ts +1 -2
  16. package/lib/Autocomplete/AutocompleteInput.d.ts +1 -2
  17. package/lib/Autocomplete/AutocompleteMenu.js +6 -13
  18. package/lib/Avatar.d.ts +2 -1
  19. package/lib/Avatar.js +1 -1
  20. package/lib/BaseStyles.js +20 -2
  21. package/lib/BorderBox.js +1 -1
  22. package/lib/Box.js +1 -1
  23. package/lib/BranchName.d.ts +2 -1
  24. package/lib/BranchName.js +1 -1
  25. package/lib/Breadcrumbs.js +3 -3
  26. package/lib/Button/Button.d.ts +2 -2
  27. package/lib/Button/Button.js +1 -1
  28. package/lib/Button/ButtonClose.d.ts +2 -2
  29. package/lib/Button/ButtonDanger.d.ts +2 -2
  30. package/lib/Button/ButtonGroup.js +1 -1
  31. package/lib/Button/ButtonInvisible.d.ts +2 -2
  32. package/lib/Button/ButtonOutline.d.ts +2 -2
  33. package/lib/Button/ButtonPrimary.d.ts +2 -2
  34. package/lib/Checkbox.d.ts +1 -1
  35. package/lib/Checkbox.js +1 -1
  36. package/lib/CheckboxInputField.d.ts +11 -0
  37. package/lib/CheckboxInputField.js +73 -0
  38. package/lib/ChoiceFieldset/ChoiceFieldCaption.d.ts +3 -0
  39. package/lib/ChoiceFieldset/ChoiceFieldCaption.js +35 -0
  40. package/lib/ChoiceFieldset/ChoiceFieldLabel.d.ts +3 -0
  41. package/lib/ChoiceFieldset/ChoiceFieldLabel.js +35 -0
  42. package/lib/ChoiceFieldset/ChoiceFieldset.d.ts +65 -0
  43. package/lib/ChoiceFieldset/ChoiceFieldset.js +95 -0
  44. package/lib/ChoiceFieldset/ChoiceFieldsetDescription.d.ts +3 -0
  45. package/lib/ChoiceFieldset/ChoiceFieldsetDescription.js +29 -0
  46. package/lib/ChoiceFieldset/ChoiceFieldsetLegend.d.ts +9 -0
  47. package/lib/ChoiceFieldset/ChoiceFieldsetLegend.js +44 -0
  48. package/lib/ChoiceFieldset/ChoiceFieldsetList.d.ts +9 -0
  49. package/lib/ChoiceFieldset/ChoiceFieldsetList.js +80 -0
  50. package/lib/ChoiceFieldset/ChoiceFieldsetListContext.d.ts +19 -0
  51. package/lib/ChoiceFieldset/ChoiceFieldsetListContext.js +15 -0
  52. package/lib/ChoiceFieldset/ChoiceFieldsetListItem.d.ts +25 -0
  53. package/lib/ChoiceFieldset/ChoiceFieldsetListItem.js +75 -0
  54. package/lib/ChoiceFieldset/ChoiceFieldsetValidation.d.ts +6 -0
  55. package/lib/ChoiceFieldset/ChoiceFieldsetValidation.js +17 -0
  56. package/lib/ChoiceFieldset/index.d.ts +3 -0
  57. package/lib/ChoiceFieldset/index.js +23 -0
  58. package/lib/CircleOcticon.d.ts +35 -35
  59. package/lib/Details.d.ts +2 -1
  60. package/lib/Details.js +4 -2
  61. package/lib/Dialog.d.ts +37 -37
  62. package/lib/Dropdown.d.ts +72 -8
  63. package/lib/DropdownMenu/DropdownButton.d.ts +3 -6
  64. package/lib/FilterList.d.ts +1 -1
  65. package/lib/FilteredActionList/FilteredActionList.js +1 -1
  66. package/lib/Flex.js +1 -1
  67. package/lib/Heading.d.ts +2 -1
  68. package/lib/Heading.js +6 -1
  69. package/lib/LabelGroup.js +1 -1
  70. package/lib/Overlay.js +1 -1
  71. package/lib/Pagination/Pagination.js +2 -2
  72. package/lib/Position.d.ts +4 -4
  73. package/lib/Position.js +1 -1
  74. package/lib/ProgressBar.d.ts +11 -16
  75. package/lib/ProgressBar.js +10 -6
  76. package/lib/RadioInputField.d.ts +9 -0
  77. package/lib/RadioInputField.js +82 -0
  78. package/lib/SelectMenu/SelectMenu.d.ts +10 -11
  79. package/lib/SelectMenu/SelectMenu.js +1 -1
  80. package/lib/SelectMenu/SelectMenuFilter.js +1 -1
  81. package/lib/SelectMenu/SelectMenuFooter.js +1 -1
  82. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  83. package/lib/SelectMenu/SelectMenuItem.js +1 -1
  84. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  85. package/lib/SelectMenu/SelectMenuTab.js +1 -1
  86. package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
  87. package/lib/SelectMenu/SelectMenuTabs.js +1 -1
  88. package/lib/Spinner.d.ts +2 -1
  89. package/lib/Spinner.js +3 -1
  90. package/lib/StateLabel.js +1 -1
  91. package/lib/StyledOcticon.js +1 -1
  92. package/lib/SubNav.js +3 -3
  93. package/lib/TextInputField.d.ts +581 -0
  94. package/lib/TextInputField.js +66 -0
  95. package/lib/TextInputWithTokens.d.ts +1 -2
  96. package/lib/ThemeProvider.d.ts +0 -1
  97. package/lib/ThemeProvider.js +4 -17
  98. package/lib/Timeline.js +4 -4
  99. package/lib/Token/AvatarToken.d.ts +1 -1
  100. package/lib/Token/AvatarToken.js +1 -1
  101. package/lib/Token/IssueLabelToken.d.ts +1 -1
  102. package/lib/Token/Token.d.ts +1 -1
  103. package/lib/Token/TokenBase.js +1 -1
  104. package/lib/Tooltip.js +1 -1
  105. package/lib/UnderlineNav.js +2 -2
  106. package/lib/_InputCaption.d.ts +13 -0
  107. package/lib/_InputCaption.js +27 -0
  108. package/lib/_InputField/InputField.d.ts +39 -0
  109. package/lib/_InputField/InputField.js +90 -0
  110. package/lib/_InputField/InputFieldCaption.d.ts +3 -0
  111. package/lib/_InputField/InputFieldCaption.js +30 -0
  112. package/lib/_InputField/InputFieldLabel.d.ts +9 -0
  113. package/lib/_InputField/InputFieldLabel.js +34 -0
  114. package/lib/_InputField/InputFieldValidation.d.ts +6 -0
  115. package/lib/{ActionList2/MenuContext.js → _InputField/InputFieldValidation.js} +6 -4
  116. package/lib/_InputField/ToggleInputField.d.ts +13 -0
  117. package/lib/_InputField/ToggleInputField.js +71 -0
  118. package/lib/_InputField/ToggleInputLeadingVisual.d.ts +3 -0
  119. package/lib/_InputField/ToggleInputLeadingVisual.js +22 -0
  120. package/lib/_InputField/ValidationAnimationContainer.d.ts +6 -0
  121. package/lib/_InputField/ValidationAnimationContainer.js +48 -0
  122. package/lib/_InputField/index.d.ts +1 -0
  123. package/lib/_InputField/index.js +15 -0
  124. package/lib/_InputField/slots.d.ts +13 -0
  125. package/lib/_InputField/slots.js +17 -0
  126. package/lib/_InputLabel.d.ts +8 -0
  127. package/lib/_InputLabel.js +44 -0
  128. package/lib/_InputValidation.d.ts +8 -0
  129. package/lib/_InputValidation.js +56 -0
  130. package/lib/_VisuallyHidden.d.ts +6 -0
  131. package/lib/_VisuallyHidden.js +39 -0
  132. package/lib/drafts.d.ts +0 -1
  133. package/lib/drafts.js +0 -13
  134. package/lib/index.d.ts +4 -0
  135. package/lib/index.js +38 -0
  136. package/lib/utils/types/FormValidationStatus.d.ts +1 -0
  137. package/lib/utils/types/FormValidationStatus.js +1 -0
  138. package/lib-esm/ActionList/Header.js +1 -1
  139. package/lib-esm/ActionList/Item.js +10 -10
  140. package/lib-esm/ActionList/List.js +1 -1
  141. package/lib-esm/ActionList2/Divider.d.ts +2 -3
  142. package/lib-esm/ActionList2/Divider.js +5 -8
  143. package/lib-esm/ActionList2/Item.js +6 -20
  144. package/lib-esm/ActionList2/List.js +2 -10
  145. package/lib-esm/ActionList2/Selection.js +0 -9
  146. package/lib-esm/ActionList2/index.d.ts +2 -1
  147. package/lib-esm/Autocomplete/Autocomplete.d.ts +1 -2
  148. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +1 -2
  149. package/lib-esm/Autocomplete/AutocompleteMenu.js +3 -13
  150. package/lib-esm/Avatar.d.ts +2 -1
  151. package/lib-esm/Avatar.js +2 -2
  152. package/lib-esm/BaseStyles.js +20 -2
  153. package/lib-esm/BorderBox.js +1 -1
  154. package/lib-esm/Box.js +1 -1
  155. package/lib-esm/BranchName.d.ts +2 -1
  156. package/lib-esm/BranchName.js +2 -2
  157. package/lib-esm/Breadcrumbs.js +3 -3
  158. package/lib-esm/Button/Button.d.ts +2 -2
  159. package/lib-esm/Button/Button.js +1 -1
  160. package/lib-esm/Button/ButtonClose.d.ts +2 -2
  161. package/lib-esm/Button/ButtonDanger.d.ts +2 -2
  162. package/lib-esm/Button/ButtonGroup.js +1 -1
  163. package/lib-esm/Button/ButtonInvisible.d.ts +2 -2
  164. package/lib-esm/Button/ButtonOutline.d.ts +2 -2
  165. package/lib-esm/Button/ButtonPrimary.d.ts +2 -2
  166. package/lib-esm/Checkbox.d.ts +1 -1
  167. package/lib-esm/Checkbox.js +1 -1
  168. package/lib-esm/CheckboxInputField.d.ts +11 -0
  169. package/lib-esm/CheckboxInputField.js +56 -0
  170. package/lib-esm/ChoiceFieldset/ChoiceFieldCaption.d.ts +3 -0
  171. package/lib-esm/ChoiceFieldset/ChoiceFieldCaption.js +20 -0
  172. package/lib-esm/ChoiceFieldset/ChoiceFieldLabel.d.ts +3 -0
  173. package/lib-esm/ChoiceFieldset/ChoiceFieldLabel.js +20 -0
  174. package/lib-esm/ChoiceFieldset/ChoiceFieldset.d.ts +65 -0
  175. package/lib-esm/ChoiceFieldset/ChoiceFieldset.js +72 -0
  176. package/lib-esm/ChoiceFieldset/ChoiceFieldsetDescription.d.ts +3 -0
  177. package/lib-esm/ChoiceFieldset/ChoiceFieldsetDescription.js +17 -0
  178. package/lib-esm/ChoiceFieldset/ChoiceFieldsetLegend.d.ts +9 -0
  179. package/lib-esm/ChoiceFieldset/ChoiceFieldsetLegend.js +31 -0
  180. package/lib-esm/ChoiceFieldset/ChoiceFieldsetList.d.ts +9 -0
  181. package/lib-esm/ChoiceFieldset/ChoiceFieldsetList.js +63 -0
  182. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListContext.d.ts +19 -0
  183. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListContext.js +5 -0
  184. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListItem.d.ts +25 -0
  185. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListItem.js +51 -0
  186. package/lib-esm/ChoiceFieldset/ChoiceFieldsetValidation.d.ts +6 -0
  187. package/lib-esm/ChoiceFieldset/ChoiceFieldsetValidation.js +7 -0
  188. package/lib-esm/ChoiceFieldset/index.d.ts +3 -0
  189. package/lib-esm/ChoiceFieldset/index.js +2 -0
  190. package/lib-esm/CircleOcticon.d.ts +35 -35
  191. package/lib-esm/Details.d.ts +2 -1
  192. package/lib-esm/Details.js +3 -2
  193. package/lib-esm/Dialog.d.ts +37 -37
  194. package/lib-esm/Dropdown.d.ts +72 -8
  195. package/lib-esm/DropdownMenu/DropdownButton.d.ts +3 -6
  196. package/lib-esm/FilterList.d.ts +1 -1
  197. package/lib-esm/FilteredActionList/FilteredActionList.js +1 -1
  198. package/lib-esm/Flex.js +1 -1
  199. package/lib-esm/Heading.d.ts +2 -1
  200. package/lib-esm/Heading.js +6 -2
  201. package/lib-esm/LabelGroup.js +1 -1
  202. package/lib-esm/Overlay.js +1 -1
  203. package/lib-esm/Pagination/Pagination.js +2 -2
  204. package/lib-esm/Position.d.ts +4 -4
  205. package/lib-esm/Position.js +1 -1
  206. package/lib-esm/ProgressBar.d.ts +11 -16
  207. package/lib-esm/ProgressBar.js +11 -7
  208. package/lib-esm/RadioInputField.d.ts +9 -0
  209. package/lib-esm/RadioInputField.js +65 -0
  210. package/lib-esm/SelectMenu/SelectMenu.d.ts +10 -11
  211. package/lib-esm/SelectMenu/SelectMenu.js +1 -1
  212. package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
  213. package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
  214. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  215. package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
  216. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  217. package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
  218. package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
  219. package/lib-esm/SelectMenu/SelectMenuTabs.js +1 -1
  220. package/lib-esm/Spinner.d.ts +2 -1
  221. package/lib-esm/Spinner.js +2 -1
  222. package/lib-esm/StateLabel.js +1 -1
  223. package/lib-esm/StyledOcticon.js +1 -1
  224. package/lib-esm/SubNav.js +3 -3
  225. package/lib-esm/TextInputField.d.ts +581 -0
  226. package/lib-esm/TextInputField.js +50 -0
  227. package/lib-esm/TextInputWithTokens.d.ts +1 -2
  228. package/lib-esm/ThemeProvider.d.ts +0 -1
  229. package/lib-esm/ThemeProvider.js +4 -17
  230. package/lib-esm/Timeline.js +4 -4
  231. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  232. package/lib-esm/Token/AvatarToken.js +1 -1
  233. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  234. package/lib-esm/Token/Token.d.ts +1 -1
  235. package/lib-esm/Token/TokenBase.js +1 -1
  236. package/lib-esm/Tooltip.js +1 -1
  237. package/lib-esm/UnderlineNav.js +2 -2
  238. package/lib-esm/_InputCaption.d.ts +13 -0
  239. package/lib-esm/_InputCaption.js +16 -0
  240. package/lib-esm/_InputField/InputField.d.ts +39 -0
  241. package/lib-esm/_InputField/InputField.js +70 -0
  242. package/lib-esm/_InputField/InputFieldCaption.d.ts +3 -0
  243. package/lib-esm/_InputField/InputFieldCaption.js +18 -0
  244. package/lib-esm/_InputField/InputFieldLabel.d.ts +9 -0
  245. package/lib-esm/_InputField/InputFieldLabel.js +22 -0
  246. package/lib-esm/_InputField/InputFieldValidation.d.ts +6 -0
  247. package/lib-esm/_InputField/InputFieldValidation.js +7 -0
  248. package/lib-esm/_InputField/ToggleInputField.d.ts +13 -0
  249. package/lib-esm/_InputField/ToggleInputField.js +54 -0
  250. package/lib-esm/_InputField/ToggleInputLeadingVisual.d.ts +3 -0
  251. package/lib-esm/_InputField/ToggleInputLeadingVisual.js +11 -0
  252. package/lib-esm/_InputField/ValidationAnimationContainer.d.ts +6 -0
  253. package/lib-esm/_InputField/ValidationAnimationContainer.js +33 -0
  254. package/lib-esm/_InputField/index.d.ts +1 -0
  255. package/lib-esm/_InputField/index.js +1 -0
  256. package/lib-esm/_InputField/slots.d.ts +13 -0
  257. package/lib-esm/_InputField/slots.js +5 -0
  258. package/lib-esm/_InputLabel.d.ts +8 -0
  259. package/lib-esm/_InputLabel.js +32 -0
  260. package/lib-esm/_InputValidation.d.ts +8 -0
  261. package/lib-esm/_InputValidation.js +43 -0
  262. package/lib-esm/_VisuallyHidden.d.ts +6 -0
  263. package/lib-esm/_VisuallyHidden.js +26 -0
  264. package/lib-esm/drafts.d.ts +0 -1
  265. package/lib-esm/drafts.js +1 -2
  266. package/lib-esm/index.d.ts +4 -0
  267. package/lib-esm/index.js +4 -0
  268. package/lib-esm/utils/types/FormValidationStatus.d.ts +1 -0
  269. package/lib-esm/utils/types/FormValidationStatus.js +1 -0
  270. package/package.json +9 -15
  271. package/lib/ActionList2/MenuContext.d.ts +0 -10
  272. package/lib/ActionMenu2.d.ts +0 -313
  273. package/lib/ActionMenu2.js +0 -91
  274. package/lib-esm/ActionList2/MenuContext.d.ts +0 -10
  275. package/lib-esm/ActionList2/MenuContext.js +0 -3
  276. package/lib-esm/ActionMenu2.d.ts +0 -313
  277. package/lib-esm/ActionMenu2.js +0 -67
package/CHANGELOG.md ADDED
@@ -0,0 +1,988 @@
1
+ # @primer/components
2
+
3
+ ## 0.0.0-2021113205234
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1611](https://github.com/primer/react/pull/1611) [`7b7c1f83`](https://github.com/primer/react/commit/7b7c1f834c9fe762defd4384e35e3a528c18a905) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds TextInputField, CheckboxInputField, and RadioInputField components. Also adds a few internal (private to primer/react) components to support form fields
8
+
9
+ * [#1657](https://github.com/primer/react/pull/1657) [`a78625fe`](https://github.com/primer/react/commit/a78625fe68517e74d3d843fba9a76aa3e33d2f8b) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds ChoiceFieldset component
10
+
11
+ ### Patch Changes
12
+
13
+ - [#1668](https://github.com/primer/react/pull/1668) [`98dc6336`](https://github.com/primer/react/commit/98dc633674b793edfa4fbeb88fd239e6ca40544e) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Fix multiple selection svg by overriding global shape-rendering for github.com
14
+
15
+ * Fake entry to force publishing
16
+
17
+ - [#1596](https://github.com/primer/react/pull/1596) [`5c6dc644`](https://github.com/primer/react/commit/5c6dc644c1e68b36d309deac653aca189f1fa624) Thanks [@dmarcey](https://github.com/dmarcey)! - Fix alignment of items in ActionList (single-select) if some of the items have wrapping text.
18
+
19
+ ## 32.1.0
20
+
21
+ ### Minor Changes
22
+
23
+ - [#1606](https://github.com/primer/react/pull/1606) [`985120a6`](https://github.com/primer/react/commit/985120a61b62c1bbd1872d9a11e34fab407a4096) Thanks [@rezrah](https://github.com/rezrah)! - Adds a new Checkbox form component
24
+
25
+ ### Patch Changes
26
+
27
+ - [#1648](https://github.com/primer/react/pull/1648) [`8b40a0a9`](https://github.com/primer/react/commit/8b40a0a91f6804496f78c342be62607983ee4081) Thanks [@jfuchs](https://github.com/jfuchs)! - Fixed a bug with Overlay's type where DOM props were not allowed.
28
+
29
+ ## 32.0.1
30
+
31
+ ### Patch Changes
32
+
33
+ - [#1649](https://github.com/primer/react/pull/1649) [`b1315367`](https://github.com/primer/react/commit/b1315367858c6b4319ac601e5e324bb37331e4a3) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading primer/primitives@7.1.1
34
+
35
+ * [#1652](https://github.com/primer/react/pull/1652) [`47550d34`](https://github.com/primer/react/commit/47550d3400fec87a26eb74c8344dfbd71635a3f5) Thanks [@colebemis](https://github.com/colebemis)! - Fix preval of `theme-preval.js`
36
+
37
+ ## 32.0.0
38
+
39
+ ### Major Changes
40
+
41
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Truncate no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
42
+
43
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Timeline no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
44
+
45
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Dropdown no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
46
+
47
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Pagehead no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
48
+
49
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - LabelGroup no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
50
+
51
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Link no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
52
+
53
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Popover no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
54
+
55
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - StateLabel no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
56
+
57
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - CircleBadge no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
58
+
59
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - SelectMenu no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
60
+
61
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Header no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
62
+
63
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - UnderlineNav no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
64
+
65
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Overlay no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
66
+
67
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - StyledOcticon no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
68
+
69
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Dialog no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
70
+
71
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - TabNav no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
72
+
73
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - SubNav no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
74
+
75
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Dialog2 no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
76
+
77
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Buttons no longer accept styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
78
+
79
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Label no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
80
+
81
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Flash no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
82
+
83
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Tooltip no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
84
+
85
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Pagination no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
86
+
87
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - Breadcrumbs no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
88
+
89
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - FilteredSearch no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
90
+
91
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - SideNav no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
92
+
93
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - FilterList no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
94
+
95
+ * [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - CounterLabel no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
96
+
97
+ - [#1639](https://github.com/primer/react/pull/1639) [`8ce0eb92`](https://github.com/primer/react/commit/8ce0eb92d23e2d46760e8b77900e10e7c04da43e) Thanks [@jfuchs](https://github.com/jfuchs)! - FormGroup no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
98
+
99
+ ### Patch Changes
100
+
101
+ - [#1598](https://github.com/primer/react/pull/1598) [`3bb895f1`](https://github.com/primer/react/commit/3bb895f1a2cbd36d509f005524878d14218acb39) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Better semantics for accessibile ActionList.Group
102
+
103
+ * [#1601](https://github.com/primer/react/pull/1601) [`250e4b00`](https://github.com/primer/react/commit/250e4b00f4d996b6125d381bae2487b57156687c) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Use icon instead of input for multiple selection in ActionList
104
+
105
+ - [#1629](https://github.com/primer/react/pull/1629) [`47fdbf40`](https://github.com/primer/react/commit/47fdbf40c3b3e0b0efaa7d50e4c08e283eecc5ee) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Visual update for disabled Items to make them more obvious
106
+
107
+ * [#1486](https://github.com/primer/react/pull/1486) [`34cfca53`](https://github.com/primer/react/commit/34cfca53f8a85a5639b958c61a2474be7390d8a9) Thanks [@pksjce](https://github.com/pksjce)! - ActionList: Add focus and hover colors to all themes in Item using functional variables
108
+
109
+ ## 31.2.0
110
+
111
+ ### Minor Changes
112
+
113
+ - [#1544](https://github.com/primer/react/pull/1544) [`5b55b0ab`](https://github.com/primer/react/commit/5b55b0ab8ea06b077e141c02285c81b99e246b77) Thanks [@jfuchs](https://github.com/jfuchs)! - The sx prop now has types that will inform autocomplete for color and shadow values that are key paths into the theme.
114
+
115
+ * [#1517](https://github.com/primer/react/pull/1517) [`561c0bd3`](https://github.com/primer/react/commit/561c0bd371b8d2135fb1d69555abc424ab796f2d) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Add experimental `ActionList` with composable API
116
+
117
+ ### Patch Changes
118
+
119
+ - [#1599](https://github.com/primer/react/pull/1599) [`a2e195b0`](https://github.com/primer/react/commit/a2e195b0a26ce70f44aea38b009856c0089aae0e) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Better labels and description for accessible ActionList.Item
120
+
121
+ * [#1603](https://github.com/primer/react/pull/1603) [`f4057b89`](https://github.com/primer/react/commit/f4057b897cc4c23012fb1b1881cefacbb57e081d) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Improve keyboard accessibility with focus styles cross browser
122
+
123
+ - [#1583](https://github.com/primer/react/pull/1583) [`24b1ebbc`](https://github.com/primer/react/commit/24b1ebbc21ca2eaa92bd6b5b8c15ab0e7577f5a0) Thanks [@pksjce](https://github.com/pksjce)! - Add a utility to provide useIsoMorphicEffect function and use that instead of useLayoutEffect everywhere
124
+
125
+ * [#1592](https://github.com/primer/react/pull/1592) [`8d3d491f`](https://github.com/primer/react/commit/8d3d491fa3c9437b3a8f310e233b7009cae13095) Thanks [@rezrah](https://github.com/rezrah)! - Fixes a styling bug in TextInput components while using its `icon` and `block` props together
126
+
127
+ - [#1549](https://github.com/primer/react/pull/1549) [`f565840f`](https://github.com/primer/react/commit/f565840f2d879b987ef9df7cd046e146214ed5f5) Thanks [@michael-lefebvre](https://github.com/michael-lefebvre)! - Fix `auxiliaryText` in ActionList Group header
128
+
129
+ * [#1604](https://github.com/primer/react/pull/1604) [`d2090b5b`](https://github.com/primer/react/commit/d2090b5b0321df1a415054d9b6a4d407627a385f) Thanks [@japf](https://github.com/japf)! - Add support for draft issues to the StateLabel component
130
+
131
+ - [#1609](https://github.com/primer/react/pull/1609) [`5eb7ade9`](https://github.com/primer/react/commit/5eb7ade92082fda2a94b45828a32e25b07c039db) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Rename `@primer/components/unreleased` to `@primer/components/drafts` to avoid confusion when referring to it.
132
+
133
+ ## 31.1.0
134
+
135
+ ### Minor Changes
136
+
137
+ - [#1523](https://github.com/primer/react/pull/1523) [`56e2f159`](https://github.com/primer/react/commit/56e2f159b9d627564a7717e6961a6bfa355189b3) Thanks [@mperrotti](https://github.com/mperrotti)! - Add the ability to truncate tokens in the TextInputWithToken component when the input is not focused
138
+
139
+ ### Patch Changes
140
+
141
+ - [#1529](https://github.com/primer/react/pull/1529) [`da566044`](https://github.com/primer/react/commit/da566044649a114e23789e3ac90c022cdbf5eaeb) Thanks [@mperrotti](https://github.com/mperrotti)! - Fixes a bug in `TextInputWithTokens` where the next token would not receive focus after the user deleted the first token using the keyboard
142
+
143
+ * [#1526](https://github.com/primer/react/pull/1526) [`1378e771`](https://github.com/primer/react/commit/1378e771323a48e6084c5ffac7d93b54960f4a0e) Thanks [@mperrotti](https://github.com/mperrotti)! - replaces flexbox gap usage with margins
144
+
145
+ ## 31.0.1
146
+
147
+ ### Patch Changes
148
+
149
+ - [#1521](https://github.com/primer/react/pull/1521) [`28b5980c`](https://github.com/primer/react/commit/28b5980c64dc5e05cb3ddb0c8c5f18fa5d0c490c) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Add `trailingVisual` prop to ActionList/ActionMenu. Deprecate `trailingIcon` and `trailingText` props.
150
+
151
+ ## 31.0.0
152
+
153
+ ### Major Changes
154
+
155
+ - [#1514](https://github.com/primer/react/pull/1514) [`dc789025`](https://github.com/primer/react/commit/dc789025d4976e2f0863e1f377c4a834aab88e3a) Thanks [@colebemis](https://github.com/colebemis)! - Remove deprecated color variables by upgrading to @primer/primitives [v5](https://github.com/primer/primitives/pull/251)
156
+
157
+ **Note:** Install [`eslint-plugin-primer-react`](https://primer.style/react/linting) to ensure that you're not using any deprecated or removed color variables.
158
+
159
+ ### Patch Changes
160
+
161
+ - [#1512](https://github.com/primer/react/pull/1512) [`1e5ac406`](https://github.com/primer/react/commit/1e5ac406f8558a20248157a9bfe13ee4709890c8) Thanks [@pksjce](https://github.com/pksjce)! - Change disabled color from muted to custom primer disabled color
162
+
163
+ ## 30.3.0
164
+
165
+ ### Minor Changes
166
+
167
+ - [#1490](https://github.com/primer/react/pull/1490) [`c156b07a`](https://github.com/primer/react/commit/c156b07ab6f2f5ad6d35d1c4f89d8a7f37ad1cef) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds `Autocomplete`, `AutocompleteMenu`, `AutocompleteInput`, and `AutocompleteOverlay` components
168
+
169
+ * [#1489](https://github.com/primer/react/pull/1489) [`273ef29d`](https://github.com/primer/react/commit/273ef29d1d8f28bb856faba4da803e7ad0892c6e) Thanks [@mperrotti](https://github.com/mperrotti)! - Add alpha `TextInputWithTokens` component
170
+
171
+ - [#1488](https://github.com/primer/react/pull/1488) [`05ac5aab`](https://github.com/primer/react/commit/05ac5aabb6bf39150557732605f9ce0fb3b9d1ec) Thanks [@mperrotti](https://github.com/mperrotti)! - Add alpha `Token`, `AvatarToken`, `IssueLabelToken` components
172
+
173
+ ## 30.2.1
174
+
175
+ ### Patch Changes
176
+
177
+ - [#1500](https://github.com/primer/react/pull/1500) [`8c3531aa`](https://github.com/primer/react/commit/8c3531aa73c37770f961cbcfd94acbf1398f29bd) Thanks [@jfuchs](https://github.com/jfuchs)! - Fixed a bug where SelectPanel would not scroll with height:'auto'; maxHeight:'medium' passed to Overlay (https://github.com/github/primer/issues/333)
178
+
179
+ ## 30.2.0
180
+
181
+ ### Minor Changes
182
+
183
+ - [#1497](https://github.com/primer/react/pull/1497) [`b9d6a662`](https://github.com/primer/react/commit/b9d6a662390a66298a4b2171319029812f5ea88d) Thanks [@jfuchs](https://github.com/jfuchs)! - Updated ActionList's ItemInput type to accept DOM props for divs when renderItem is not provided
184
+
185
+ ## 30.1.0
186
+
187
+ ### Minor Changes
188
+
189
+ - [#1463](https://github.com/primer/react/pull/1463) [`bde3a034`](https://github.com/primer/react/commit/bde3a0344c713f15f5650b35195258901582bd41) Thanks [@jfuchs](https://github.com/jfuchs)! - `ActionList.item` accepts an `as` prop, allowing it to be a link, or (in combination with the renderItem prop) a Next.js or React Router link
190
+
191
+ ### Patch Changes
192
+
193
+ - [#1471](https://github.com/primer/react/pull/1471) [`f1cebb7e`](https://github.com/primer/react/commit/f1cebb7e9af297a7c466701454aac6dc1eb7b3a4) Thanks [@smockle](https://github.com/smockle)! - Change the button which receives focus when a 'ConfirmationDialog' opens from the secondary (e.g. 'Cancel') to the primary (e.g. 'OK'). Fixes github/primer#313.
194
+
195
+ ## 30.0.0
196
+
197
+ ### Major Changes
198
+
199
+ - [#1448](https://github.com/primer/react/pull/1448) [`1a39fb02`](https://github.com/primer/react/commit/1a39fb0284c5e19324d378629d09a343be4cde05) Thanks [@SferaDev](https://github.com/SferaDev)! - Remove `.Breadcrumb` classname from the root element of the `Breadcrumbs` component. This change shouldn't break anything unless you have styles, scripts, or tests that reference the `.Breadcrumb` classname.
200
+
201
+ * [#1468](https://github.com/primer/react/pull/1468) [`dc15763c`](https://github.com/primer/react/commit/dc15763c733994ea9baa3475139b9bf3c2111e5b) Thanks [@jfuchs](https://github.com/jfuchs)! - AvatarStack no longer accepts styled props or DOM props
202
+
203
+ ### Minor Changes
204
+
205
+ - [#1474](https://github.com/primer/react/pull/1474) [`c54156bc`](https://github.com/primer/react/commit/c54156bc43f87370f3e8cb23fd9ebf338b5082e4) Thanks [@colebemis](https://github.com/colebemis)! - Add `light_protanopia` and `dark_protanopia` color blind color schemes
206
+
207
+ ### Patch Changes
208
+
209
+ - [#1448](https://github.com/primer/react/pull/1448) [`1a39fb02`](https://github.com/primer/react/commit/1a39fb0284c5e19324d378629d09a343be4cde05) Thanks [@SferaDev](https://github.com/SferaDev)! - Rename `Breadcrumb` component to `Breadcrumbs`
210
+
211
+ * [#1470](https://github.com/primer/react/pull/1470) [`f2e29a08`](https://github.com/primer/react/commit/f2e29a08e2aab9e98a460eb073229933f6ae050b) Thanks [@pksjce](https://github.com/pksjce)! - Fix ActionList.Item color
212
+
213
+ ## 29.1.1
214
+
215
+ ### Patch Changes
216
+
217
+ - [#1441](https://github.com/primer/react/pull/1441) [`f3f5afb9`](https://github.com/primer/react/commit/f3f5afb9cf91e0ce3ea287351c871eb1559f1fa4) Thanks [@jfuchs](https://github.com/jfuchs)! - Fix type error where `css` is a required prop of some components by excluding storybook stories from TypeScript compilation for builds
218
+
219
+ * [#1446](https://github.com/primer/react/pull/1446) [`b4e5287c`](https://github.com/primer/react/commit/b4e5287cf1ec75a27e4b78b17425952e85f82f47) Thanks [@colebemis](https://github.com/colebemis)! - Fix filter input spacing in SelectPanel
220
+
221
+ ## 29.1.0
222
+
223
+ ### Minor Changes
224
+
225
+ - [#1412](https://github.com/primer/react/pull/1412) [`627cd3e9`](https://github.com/primer/react/commit/627cd3e95614ab4347e5acf456dd23588196ec87) Thanks [@colebemis](https://github.com/colebemis)! - Add `dark_high_contrast` color scheme
226
+
227
+ * [#1412](https://github.com/primer/react/pull/1412) [`627cd3e9`](https://github.com/primer/react/commit/627cd3e95614ab4347e5acf456dd23588196ec87) Thanks [@colebemis](https://github.com/colebemis)! - Add new [functional color variables](https://primer.style/primitives/colors) to the theme object.
228
+
229
+ **Tip:** Install [`eslint-plugin-primer-react`](https://primer.style/react/linting) to ensure that you're not using any deprecated color variables.
230
+
231
+ ## 29.0.0
232
+
233
+ ### Major Changes
234
+
235
+ - [#1414](https://github.com/primer/react/pull/1414) [`f4e1de6d`](https://github.com/primer/react/commit/f4e1de6dbe9d20dfcf2144d879294d189433a810) Thanks [@jfuchs](https://github.com/jfuchs)! - Removed system props support from `<TextInput>` and fixed its type definition.
236
+
237
+ ### Minor Changes
238
+
239
+ - [#1409](https://github.com/primer/react/pull/1409) [`90b17dd6`](https://github.com/primer/react/commit/90b17dd6447419ce1d661e5399b7ac193836ad1a) Thanks [@jfuchs](https://github.com/jfuchs)! - Use @react-aria/ssr for isomorphic ID generation.
240
+
241
+ ### Patch Changes
242
+
243
+ - [#1424](https://github.com/primer/react/pull/1424) [`7cf8d8b8`](https://github.com/primer/react/commit/7cf8d8b82a6387b1143c06e090cde8f87b4f3a33) Thanks [@jfuchs](https://github.com/jfuchs)! - Removed irregular styling on Timeline
244
+
245
+ * [#1403](https://github.com/primer/react/pull/1403) [`65cab2cc`](https://github.com/primer/react/commit/65cab2ccd5eae3dcc5d75cbd1a1fd78a6f78abf7) Thanks [@mathiasbosman](https://github.com/mathiasbosman)! - Fix the Timeline.Item layout
246
+
247
+ ## 28.5.0
248
+
249
+ ### Minor Changes
250
+
251
+ - [#1398](https://github.com/primer/react/pull/1398) [`e4dac575`](https://github.com/primer/react/commit/e4dac575420c05e5e7528fd004c85c54f1b9a450) Thanks [@jfuchs](https://github.com/jfuchs)! - Default portal containers created by primer are absolutely positioned at 0,0
252
+
253
+ * [#1385](https://github.com/primer/react/pull/1385) [`5470b61b`](https://github.com/primer/react/commit/5470b61b448aeb29e859766ca0ff7f9f8457c690) Thanks [@jfuchs](https://github.com/jfuchs)! - Make top and left position explicit props of Overlay handled separately from other styles
254
+
255
+ - [#1388](https://github.com/primer/react/pull/1388) [`83b888f0`](https://github.com/primer/react/commit/83b888f0b325f9370ede9c5d7ac8f70702d6e8ea) Thanks [@jfuchs](https://github.com/jfuchs)! - Overlay takes a portalContainerName prop. This allows overlays with an anchor inside a scrolling container to track with their anchor, so long as the specified portal is also inside that scrolling container.
256
+
257
+ ## 28.4.0
258
+
259
+ ### Minor Changes
260
+
261
+ - [#1381](https://github.com/primer/react/pull/1381) [`b31f0853`](https://github.com/primer/react/commit/b31f08533e9fd41ebc5dc0e109d09facd975287c) Thanks [@jfuchs](https://github.com/jfuchs)! - AnchoredOverlay positions are set directly on style property
262
+
263
+ ### Patch Changes
264
+
265
+ - [#1372](https://github.com/primer/react/pull/1372) [`23be0ed7`](https://github.com/primer/react/commit/23be0ed7aeff3cc21a678769eb5ba0ddf9a8d155) Thanks [@jfuchs](https://github.com/jfuchs)! - Extends DropdownMenu to allow anchorRef, open, and onOpenChange props.
266
+
267
+ * [#1386](https://github.com/primer/react/pull/1386) [`2ea30b43`](https://github.com/primer/react/commit/2ea30b43854a1dcf5e1c64c696a57d6e1c651bdf) Thanks [@colebemis](https://github.com/colebemis)! - Bump @primer/primitives dependency to 4.6.4
268
+
269
+ - [#1387](https://github.com/primer/react/pull/1387) [`6b4d52da`](https://github.com/primer/react/commit/6b4d52dacbed2e4452e780c01fc9e69d9f9511ee) Thanks [@jfuchs](https://github.com/jfuchs)! - Guard against MediaQueryList.addEventListener calls where unavailable and possibly fall back to .addListener
270
+
271
+ ## 28.3.2
272
+
273
+ ### Patch Changes
274
+
275
+ - [#1368](https://github.com/primer/react/pull/1368) [`36f156a0`](https://github.com/primer/react/commit/36f156a0e42e242489dc1046ea8592b049a88bd7) Thanks [@dgreif](https://github.com/dgreif)! - Allow `anchorRef` to be passed into `SelectPanel` if you want to use an external anchor
276
+
277
+ ## 28.3.1
278
+
279
+ ### Patch Changes
280
+
281
+ - [#1355](https://github.com/primer/react/pull/1355) [`3cc7be77`](https://github.com/primer/react/commit/3cc7be77d766b9161808898a0d2cc8373aee5a21) Thanks [@colebemis](https://github.com/colebemis)! - Replace octoface icon with spinner in SelectMenu component
282
+
283
+ ## 28.3.0
284
+
285
+ ### Minor Changes
286
+
287
+ - [#1315](https://github.com/primer/react/pull/1315) [`85d0202b`](https://github.com/primer/react/commit/85d0202b0edd553bcbb50f9b280caf13ce79dae3) Thanks [@VanAnderson](https://github.com/VanAnderson)! - `Box` now accepts all [styled system props](https://styled-system.com/table/).
288
+
289
+ * [#1316](https://github.com/primer/react/pull/1316) [`4c063317`](https://github.com/primer/react/commit/4c0633171170205c53ef7dc29e5d4104a8486059) Thanks [@VanAnderson](https://github.com/VanAnderson)! - The following components have been deprecated in favor of the `Box` component:
290
+
291
+ | Component | Replacement |
292
+ | ----------- | ------------------------------------------------------------------------------------------- |
293
+ | `Flex` | `<Box display="flex">` |
294
+ | `Grid` | `<Box display="grid">` |
295
+ | `Position` | `<Box>` |
296
+ | `Absolute` | `<Box position="absolute">` |
297
+ | `Fixed` | `<Box position="fixed">` |
298
+ | `Relative` | `<Box position="relative">` |
299
+ | `Sticky` | `<Box position="sticky">` |
300
+ | `BorderBox` | `<Box borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2}>` |
301
+
302
+ There is a codemod available to upgrade these components:
303
+
304
+ - TypeScript example:
305
+
306
+ ```shell
307
+ npx jscodeshift -t node_modules/@primer/react/codemods/deprecateUtilityComponents.js
308
+ --parser=tsx path/to/workspace/src/*.tsx
309
+ ```
310
+
311
+ - Babel example:
312
+
313
+ ```shell
314
+ npx jscodeshift -t node_modules/@primer/react/codemods/deprecateUtilityComponents.js
315
+ --parser=babel path/to/workspace/src/*.tsx
316
+ ```
317
+
318
+ - [#1336](https://github.com/primer/react/pull/1336) [`489a718b`](https://github.com/primer/react/commit/489a718b6b6d2892906bc2709e243195bf5fd91e) Thanks [@VanAnderson](https://github.com/VanAnderson)! - System props are deprecated in all components except `Box`. Move all system props into the [`sx` prop](https://primer.style/components/overriding-styles) instead. Example:
319
+
320
+ ```diff
321
+ - <Button mr={2}>...</Button>
322
+ + <Button sx={{mr: 2}}>...</Button>
323
+ ```
324
+
325
+ There is a codemod available to migrate from system props to the `sx` prop:
326
+
327
+ - TypeScript example:
328
+
329
+ ```shell
330
+ npx jscodeshift -t node_modules/@primer/react/codemods/removeSystemProps.js
331
+ --parser=tsx path/to/workspace/src/*.tsx
332
+ ```
333
+
334
+ - Babel example:
335
+
336
+ ```shell
337
+ npx jscodeshift -t node_modules/@primer/react/codemods/removeSystemProps.js
338
+ --parser=babel path/to/workspace/src/*.tsx
339
+ ```
340
+
341
+ ### Patch Changes
342
+
343
+ - [#1332](https://github.com/primer/react/pull/1332) [`ec11d7b8`](https://github.com/primer/react/commit/ec11d7b8a589742a41134d31f419b6b5d34ad026) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Side effects are properly declared in package.json
344
+
345
+ * [#1308](https://github.com/primer/react/pull/1308) [`a8f3ca6d`](https://github.com/primer/react/commit/a8f3ca6dbff5c2619e067ad5118fcb784f8525bc) Thanks [@dgreif](https://github.com/dgreif)! - Focus zones will now update active-descendant on `mousemove` over focusable elements. ActionList has been updated to handle direct (key press) vs indirect (`mousemove`, DOM change, etc.) changes to active-descendant, and will use a distinct background color for the directly activated items.
346
+
347
+ ## 28.2.5
348
+
349
+ ### Patch Changes
350
+
351
+ - [#1311](https://github.com/primer/react/pull/1311) [`6f0535df`](https://github.com/primer/react/commit/6f0535dfcf5c640da2322c68654cb369d8eafea0) Thanks [@lukewar](https://github.com/lukewar)! - Expose 'textInputProps' from the 'SelectPanel'
352
+
353
+ * [#1309](https://github.com/primer/react/pull/1309) [`dc17a49e`](https://github.com/primer/react/commit/dc17a49e6a8f2f71e689f4666bcf0384111deb36) Thanks [@colebemis](https://github.com/colebemis)! - Include all shadow variables in theme object
354
+
355
+ - [#1251](https://github.com/primer/react/pull/1251) [`528e9a41`](https://github.com/primer/react/commit/528e9a411eac6730e05ce39d22ba8982283b71a5) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Call `useOnOutsideClick` handlers in reverse order that they are registered, and allow propagation to stop if default is prevented or an non-outside click is detected.
356
+
357
+ * [#1312](https://github.com/primer/react/pull/1312) [`76a38432`](https://github.com/primer/react/commit/76a384328fc57b0cf9d3d92170de5ce071334121) Thanks [@smockle](https://github.com/smockle)! - Ensure clicking an `AnchoredOverlay`’s trigger allows it to close without immediately reopening.
358
+
359
+ ## 28.2.4
360
+
361
+ ### Patch Changes
362
+
363
+ - [#1293](https://github.com/primer/react/pull/1293) [`1148a718`](https://github.com/primer/react/commit/1148a718aa1db92fb90d15efc150aa4c0c2ef018) Thanks [@smockle](https://github.com/smockle)! - Restore "fix: Don’t focus first 'Item' of 'DropdownMenu' and 'SelectMenu' on open" by deferring the removal of a temporary `tabIndex` until focus moves within the container.
364
+
365
+ * [#1279](https://github.com/primer/react/pull/1279) [`bb38754f`](https://github.com/primer/react/commit/bb38754f9f5c9f1d2d6cfa03f2bf9984fbd3c82d) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Update overlay shadows
366
+
367
+ - [#1297](https://github.com/primer/react/pull/1297) [`5fb3683d`](https://github.com/primer/react/commit/5fb3683df6cc116975c729e83ce3c14b87ffaea1) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Bump @primer/primitives to 4.4.0
368
+
369
+ * [#1288](https://github.com/primer/react/pull/1288) [`15207119`](https://github.com/primer/react/commit/15207119d25a3d6b0b13294bb99dc4efd780a788) Thanks [@dgreif](https://github.com/dgreif)! - Focus zones with an `activeDescendantControl` will now activate the first descendant as soon as the control element is focused, rather than waiting for an up/down arrow press. Descendants stay active until the control element is blurred. This is a breaking change to `useFocusZone`, but this behavior is still considered to be in `alpha`.
370
+
371
+ - [#1292](https://github.com/primer/react/pull/1292) [`4b643818`](https://github.com/primer/react/commit/4b64381872eac9df00c53186782a370b0d6da638) Thanks [@dgreif](https://github.com/dgreif)! - Bump dependencies
372
+
373
+ * [#1279](https://github.com/primer/react/pull/1279) [`bb38754f`](https://github.com/primer/react/commit/bb38754f9f5c9f1d2d6cfa03f2bf9984fbd3c82d) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Update TextInput border color
374
+
375
+ ## 28.2.3
376
+
377
+ ### Patch Changes
378
+
379
+ - [`0ffc381c`](https://github.com/primer/react/commit/0ffc381c833219959ed3b99a9dd64fe56ac51036) [#1294](https://github.com/primer/react/pull/1294) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Revert first item focus fix for ActionList components.
380
+
381
+ ## 28.2.2
382
+
383
+ ### Patch Changes
384
+
385
+ - [`68877076`](https://github.com/primer/react/commit/68877076fcbbc1c4cd308f2e6f8f44290751efe4) [#1275](https://github.com/primer/react/pull/1275) Thanks [@VanAnderson](https://github.com/VanAnderson)! - data props can be used in overlayProps.
386
+
387
+ * [`2793ef48`](https://github.com/primer/react/commit/2793ef48d554e307e46442fcc198ed4adf8c137f) [#1286](https://github.com/primer/react/pull/1286) Thanks [@colebemis](https://github.com/colebemis)! - `ThemeProvider` now uses the first defined color scheme if passed an invalid color scheme name
388
+
389
+ - [`321b9a3d`](https://github.com/primer/react/commit/321b9a3d9e0ddf6755bd7299ea6cd42a52f427a9) [#1266](https://github.com/primer/react/pull/1266) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Anchored overlay can take an external anchorRef.
390
+
391
+ ## 28.2.1
392
+
393
+ ### Patch Changes
394
+
395
+ - [`f793ed00`](https://github.com/primer/react/commit/f793ed00e244de861f373cf0882397a1f640b046) [#1280](https://github.com/primer/react/pull/1280) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Export TexContainer from of ActionList/Item.
396
+
397
+ * [`2893326b`](https://github.com/primer/react/commit/2893326bc45fd841cd71ac46ca71cdaececa7343) [#1259](https://github.com/primer/react/pull/1259) Thanks [@smockle](https://github.com/smockle)! - Hide intra-'Item' dividers on ':hover' and ':focus'
398
+
399
+ ## 28.2.0
400
+
401
+ ### Minor Changes
402
+
403
+ - [`8368a83e`](https://github.com/primer/react/commit/8368a83efbc89aa73f9c775c25da62e34960c95c) [#1238](https://github.com/primer/react/pull/1238) Thanks [@dgreif](https://github.com/dgreif)! - New sizes for Overlay and Dialog. Sizes have been changed from abbreviations to full words. `xs` -> `xsmall`, `sm` -> `small`, `md` -> `medium`, `lg` -> `large`, `xl` -> `xlarge`. The sizing for `Overlay` has also been updated to provide a wider range of options. The original values for Overlay were based on the needs of Dialog, but Dialog is not reliant on Overlay so they don't need to have similar sizing. This is technically a breaking change, but is being released as a minor because these components are both still in `alpha` status.
404
+
405
+ ### Patch Changes
406
+
407
+ - [`a7fe32c8`](https://github.com/primer/react/commit/a7fe32c8ba42ad75a945185b5f358f274a21ef0e) [#1248](https://github.com/primer/react/pull/1248) Thanks [@dgreif](https://github.com/dgreif)! - Hide overflow from `Overlay`
408
+
409
+ * [`02e86095`](https://github.com/primer/react/commit/02e86095e6775f42c150c362e5281f0ffc332212) Thanks [@dgreif](https://github.com/dgreif)! - Allow `filterValue` to be provided to `SelectPanel`
410
+
411
+ - [`10df320b`](https://github.com/primer/react/commit/10df320bb4d2a3d7ad7e59722c0b8896eeef0357) [#1247](https://github.com/primer/react/pull/1247) Thanks [@dgreif](https://github.com/dgreif)! - Handle overflow and active-descendant scrolling within `SelectPanel`
412
+
413
+ * [`25d88c49`](https://github.com/primer/react/commit/25d88c49709f1c91c1a596fc77ed05e66cae083f) [#1253](https://github.com/primer/react/pull/1253) Thanks [@dgreif](https://github.com/dgreif)! - Correct font size and truncate for description within ActionList Items
414
+
415
+ - [`9cb715cd`](https://github.com/primer/react/commit/9cb715cd2a613a0cedae60e488d4f69449465a38) [#1258](https://github.com/primer/react/pull/1258) Thanks [@dgreif](https://github.com/dgreif)! - prevent focusTrap from causing a `blur` if trap container is not in DOM
416
+
417
+ * [`aa7d80fc`](https://github.com/primer/react/commit/aa7d80fcb70b5e7936eae13fd073f7c2163df7ec) [#1246](https://github.com/primer/react/pull/1246) Thanks [@dgreif](https://github.com/dgreif)! - Fix border radius on buttons and title `font-weight` in ConfirmationDialog
418
+
419
+ ## 28.1.1
420
+
421
+ ### Patch Changes
422
+
423
+ - [`ff177c88`](https://github.com/primer/react/commit/ff177c88200f2ebb8c27a8e41aeb869a8eddf95b) [#1242](https://github.com/primer/react/pull/1242) Thanks [@dgreif](https://github.com/dgreif)! - Use `Item` `index` as fallback key within `List` groups
424
+
425
+ * [`fb2fa6c2`](https://github.com/primer/react/commit/fb2fa6c2f40be51f4f7201b93e004bb7d2257110) [#1244](https://github.com/primer/react/pull/1244) Thanks [@dgreif](https://github.com/dgreif)! - Allow focus to move to an input outside an overlay on mousedown
426
+
427
+ - [`1519742f`](https://github.com/primer/react/commit/1519742fcffcad9d14c972bc8c1fdd8e575c956e) [#1243](https://github.com/primer/react/pull/1243) Thanks [@dgreif](https://github.com/dgreif)! - Use `active-descendant` to control focus in `SelectPanel`
428
+
429
+ * [`c1991318`](https://github.com/primer/react/commit/c1991318aa7ee5d021f458db26cd2597279cc4ba) [#1158](https://github.com/primer/react/pull/1158) Thanks [@dgreif](https://github.com/dgreif)! - Add background styles for focused action list items, instead of using default `outline`
430
+
431
+ ## 28.1.0
432
+
433
+ ### Minor Changes
434
+
435
+ - [`6800c609`](https://github.com/primer/react/commit/6800c609634d8227c6538a49bca3ef59d8b660a1) [#1232](https://github.com/primer/react/pull/1232) Thanks [@dgreif](https://github.com/dgreif)! - New `Spinner` Component
436
+
437
+ ### Patch Changes
438
+
439
+ - [`909ada5c`](https://github.com/primer/react/commit/909ada5c47c597f0260563c5030df0613051f618) [#1224](https://github.com/primer/react/pull/1224) Thanks [@dgreif](https://github.com/dgreif)! - Add `SelectPanel` alpha component
440
+
441
+ * [`0d26d2b0`](https://github.com/primer/react/commit/0d26d2b07d8ed242eec71fd05959d8cdd0e6f0ba) [#1240](https://github.com/primer/react/pull/1240) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Fix check Spacing on selected items for ActionList components.
442
+
443
+ - [`e009e321`](https://github.com/primer/react/commit/e009e321bf6c456ca6584650cd5f3ea35fe36003) [#1235](https://github.com/primer/react/pull/1235) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Dialog properly auto-focuses cancel button by default when originating from a FocusZone/FocusTrap.
444
+
445
+ ## 28.0.4
446
+
447
+ ### Patch Changes
448
+
449
+ - [`e1bde42b`](https://github.com/primer/react/commit/e1bde42b7a11d9f642132601a5c776a988926747) [#1228](https://github.com/primer/react/pull/1228) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Action Menu correctly fires onAction callback after close.
450
+
451
+ * [`961c07eb`](https://github.com/primer/react/commit/961c07ebc7cbf483029d5326bb8e56c78777028d) [#1227](https://github.com/primer/react/pull/1227) Thanks [@stephenotalora](https://github.com/stephenotalora)! - Change focus state style of `SideNav.Link`
452
+
453
+ - [`84c7e771`](https://github.com/primer/react/commit/84c7e771f8ac9bb707fbb977658e9e40620bc20c) [#1225](https://github.com/primer/react/pull/1225) Thanks [@dgreif](https://github.com/dgreif)! - handle complex child reordering within a focusZone
454
+
455
+ ## 28.0.3
456
+
457
+ ### Patch Changes
458
+
459
+ - [`c63fa4b5`](https://github.com/primer/react/commit/c63fa4b59bf5fa3e6f985b1d81b040efc8bc896c) [#1215](https://github.com/primer/react/pull/1215) Thanks [@dgreif](https://github.com/dgreif)! - Hide divider before `ActionList.Group`s with filled header
460
+
461
+ * [`a9260812`](https://github.com/primer/react/commit/a9260812ebaaa07747eb7cca40c6ff1c12892c49) [#1221](https://github.com/primer/react/pull/1221) Thanks [@dgreif](https://github.com/dgreif)! - Improved performance for lists in `ActionMenu` and `DropdownMenu`
462
+
463
+ - [`c63fa4b5`](https://github.com/primer/react/commit/c63fa4b59bf5fa3e6f985b1d81b040efc8bc896c) [#1215](https://github.com/primer/react/pull/1215) Thanks [@dgreif](https://github.com/dgreif)! - Align `Item` description to when rendered in-line
464
+
465
+ * [`c63fa4b5`](https://github.com/primer/react/commit/c63fa4b59bf5fa3e6f985b1d81b040efc8bc896c) [#1215](https://github.com/primer/react/pull/1215) Thanks [@dgreif](https://github.com/dgreif)! - Allow `focusZoneSettings` to be passed into `AnchoredOverlay`
466
+
467
+ - [`c63fa4b5`](https://github.com/primer/react/commit/c63fa4b59bf5fa3e6f985b1d81b040efc8bc896c) [#1215](https://github.com/primer/react/pull/1215) Thanks [@dgreif](https://github.com/dgreif)! - Add `selectionVariant: 'multiple'` for `Item`s. These will use a checkbox input instead of a checkmark icon for selected state
468
+
469
+ * [`d78af591`](https://github.com/primer/react/commit/d78af591971984a3a2d2707904eb235701d1c749) [#1214](https://github.com/primer/react/pull/1214) Thanks [@VanAnderson](https://github.com/VanAnderson)! - renderMenuItem in ActionMenu checks preventDefault for conditionally calling onClose
470
+
471
+ - [`4ab3d175`](https://github.com/primer/react/commit/4ab3d1752d14969fff222a4cf7fb2dcc1110d0fb) [#1222](https://github.com/primer/react/pull/1222) Thanks [@dgreif](https://github.com/dgreif)! - Trap focus in `AnchoredOverlay` as soon as it opens, regardless of the event that triggered it to open
472
+
473
+ * [`ff9ce6f1`](https://github.com/primer/react/commit/ff9ce6f108e29ac061b23e3338cb03e2f168f701) [#1217](https://github.com/primer/react/pull/1217) Thanks [@VanAnderson](https://github.com/VanAnderson)! - overlayProps passthrough from ActionMenu and DropdownMenu to AnchoredOverlay.
474
+
475
+ ## 28.0.2
476
+
477
+ ### Patch Changes
478
+
479
+ - [`d20a5996`](https://github.com/primer/react/commit/d20a5996aafdbc6446f13aaa7a489394926f083a) [#1209](https://github.com/primer/react/pull/1209) Thanks [@dgreif](https://github.com/dgreif)! - Allow Overlay height and width to be set through AnchoredOverlay
480
+ Allow ActionList Items to supply an `id` instead of `key`
481
+ Performance imporvements when ActionList is not given any groups
482
+ Enable focus zone as soon as AnchoredOverlay opens
483
+
484
+ * [`d29741ca`](https://github.com/primer/react/commit/d29741cab4bfa4249000e5b2479e99f5aeea3189) [#1196](https://github.com/primer/react/pull/1196) Thanks [@dgreif](https://github.com/dgreif)! - Allow custom `children` in `ActionItem`. `text` and `description` can still be provided as a shortcut, but `children` is now available if you need more control over the rending of the item, without sacrificing benefits from `Item` by using `renderItem`.
485
+
486
+ - [`4c2e1a2b`](https://github.com/primer/react/commit/4c2e1a2b449d3f762c530f70a5056e581404d3d8) [#1195](https://github.com/primer/react/pull/1195) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Export useConfirm hook and ConfirmationDialog component from index.
487
+
488
+ * [`3c13d039`](https://github.com/primer/react/commit/3c13d039466370a70ed1e0bf8c3af0860fe26702) [#1201](https://github.com/primer/react/pull/1201) Thanks [@T-Hugs](https://github.com/T-Hugs)! - Fix overlay position when using an AnchoredOverlay
489
+
490
+ - [`c9b4db79`](https://github.com/primer/react/commit/c9b4db79ec2b4360f23f42d3ab49f265a56e9447) [#1199](https://github.com/primer/react/pull/1199) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Action Menu can have its open state be controlled externally.
491
+
492
+ * [`3e759e59`](https://github.com/primer/react/commit/3e759e59b5af115e82cca2253c0caca9e400be24) [#1211](https://github.com/primer/react/pull/1211) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use preventDefault on AnchoredOverlay instead of stopPropagation.
493
+
494
+ - [`84e3c570`](https://github.com/primer/react/commit/84e3c5706fa313eab5605f551256c0dc34a8626d) [#1194](https://github.com/primer/react/pull/1194) Thanks [@dgreif](https://github.com/dgreif)! - Handle `onAction` for `DropdownMenu` Items
495
+
496
+ * [`7aeb53fe`](https://github.com/primer/react/commit/7aeb53fec23a80414f6c1db8b31c06beb2073dd2) [#1200](https://github.com/primer/react/pull/1200) Thanks [@dgreif](https://github.com/dgreif)! - Perform ActionMenu actions after overlay has closed. This allows the action to move focus if so desired, without the ActionMenu focus trap preventing focus from moving away.
497
+
498
+ - [`bba66fdd`](https://github.com/primer/react/commit/bba66fddb51be251456711e21e725b1034bae806) [#1206](https://github.com/primer/react/pull/1206) Thanks [@VanAnderson](https://github.com/VanAnderson)! - stopPropagation for mousedown and click in AnchoredOverlay based components
499
+
500
+ ## 28.0.1
501
+
502
+ ### Patch Changes
503
+
504
+ - [`b319ce43`](https://github.com/primer/react/commit/b319ce4396b11c185faee23f0884632806922303) [#1197](https://github.com/primer/react/pull/1197) Thanks [@dmarcey](https://github.com/dmarcey)! - Typescript declare files will now be published to the lib-esm directory, as well as lib
505
+
506
+ * [`17957f29`](https://github.com/primer/react/commit/17957f293542d6cbf5f8005698bb352f95d5c8f7) [#1192](https://github.com/primer/react/pull/1192) Thanks [@dgreif](https://github.com/dgreif)! - Add basic docs for `AnchoredOverlay`
507
+
508
+ ## 28.0.0
509
+
510
+ ### Major Changes
511
+
512
+ - [`5f85394d`](https://github.com/primer/react/commit/5f85394dc16f076080824d8fdb3bda06d01e29da) [#1157](https://github.com/primer/react/pull/1157) Thanks [@dgreif](https://github.com/dgreif)! - Removed `useMouseIntent` in favor of [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible). With the removal of `useMouseIntent`, the `intent-mouse` class will no longer be added to the `<body>`. Since `:focus-visible` is a relatively new psuedo-class, a polyfill is included. Any focused elements that meet the criteria for `:focus-visible` will also have a `focus-visible` class added to them by the polyfill.
513
+
514
+ ### Patch Changes
515
+
516
+ - [`f7857a06`](https://github.com/primer/react/commit/f7857a06031df339fa61d27f8ca717e4df95d5e5) [#1159](https://github.com/primer/react/pull/1159) Thanks [@hehex9](https://github.com/hehex9)! - Removed unused dependencies
517
+
518
+ ## 27.0.0
519
+
520
+ ### Major Changes
521
+
522
+ - [`db478205`](https://github.com/primer/react/commit/db478205bf467a118394e0519034bb87116dc85a) [#1147](https://github.com/primer/react/pull/1147) Thanks [@colebemis](https://github.com/colebemis)! - Type definitions are now being generated by TypeScript instead of manually maintained. These new type definitions may differ from the previous type definitions and cause breaking changes. If you experience any new TypeScript errors, feel free to create an [issue](https://github.com/primer/react/issues) or reach out in Slack (#design-systems).
523
+
524
+ ### Breaking changes
525
+
526
+ - The following types are no longer exported:
527
+
528
+ ```
529
+ BaseProps
530
+ UseDetailsProps
531
+ AnchoredPositionHookSettings
532
+ AnchorAlignment
533
+ AnchorSide
534
+ PositionSettings
535
+ PaginationHrefBuilder
536
+ PaginationPageChangeCallback
537
+ PositionComponentProps
538
+ ```
539
+
540
+ - Props are now defined with types instead of interfaces which means in some cases you may not be able to create interfaces that `extend` them. To work around this issue, you may need to convert your interfaces to types:
541
+
542
+ ```diff
543
+ import {BoxProps} from '@primer/react'
544
+
545
+ - interface MyFancyBox extends BoxProps {...}
546
+ + type MyFancyBox = BoxProps & {...}
547
+ ```
548
+
549
+ - Some components now expect more specific ref types. For example:
550
+
551
+ ```diff
552
+ - const ref = React.useRef<HTMLElement>(null)
553
+ + const ref = React.useRef<HTMLButtonElement>(null)
554
+
555
+ return <Button ref={ref}>...</Button>
556
+ ```
557
+
558
+ ## 26.0.0
559
+
560
+ ### Major Changes
561
+
562
+ - [`016a273f`](https://github.com/primer/react/commit/016a273fde30f0185e23309e1a39c1bc034174f8) [#1115](https://github.com/primer/react/pull/1115) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Removes deprecated presentational theme variables in favor of _functional variables_ for styling components that are consistent across multiple themes.
563
+
564
+ ## Migration guide
565
+
566
+ If you don't use any color-related system props (e.g. `color`, `bg`, `borderColor`), all components should work without changes. If you're using color-related system props, you'll need to update them to use the new functional variables. Reference the tables below to see how old variables map to new functional variables.
567
+
568
+ If you have any questions, feel free to reach out in the #design-systems channel.
569
+
570
+ #### Text
571
+
572
+ | `v25` | `v26` |
573
+ | ------------------------ | ------------------------ |
574
+ | `color="text.gray"` | `color="text.secondary"` |
575
+ | `color="text.grayLight"` | `color="text.tertiary"` |
576
+ | `color="text.grayDark"` | `color="text.primary"` |
577
+ | `color="text.red"` | `color="text.danger"` |
578
+ | `color="text.white"` | `color="text.inverse"` |
579
+ | `color="gray.6"` | `color="text.secondary"` |
580
+ | `color="gray.5"` | `color="text.tertiary"` |
581
+ | `color="gray.9"` | `color="text.primary"` |
582
+ | `color="red.6"` | `color="text.danger"` |
583
+ | `color="white"` | `color="text.inverse"` |
584
+ | `color="blue.5"` | `color="text.link"` |
585
+ | `color="gray.4"` | `color="text.disabled"` |
586
+ | `color="green.5"` | `color="text.success"` |
587
+ | `color="yellow.8"` | `color="text.warning"` |
588
+
589
+ #### Icon
590
+
591
+ | `v25` | `v25` |
592
+ | ------------------ | ------------------------ |
593
+ | `color="gray.9"` | `color="icon.primary"` |
594
+ | `color="gray.6"` | `color="icon.secondary"` |
595
+ | `color="gray.4"` | `color="icon.tertiary"` |
596
+ | `color="blue.5"` | `color="icon.info"` |
597
+ | `color="red.5"` | `color="icon.danger"` |
598
+ | `color="green.6"` | `color="icon.success"` |
599
+ | `color="yellow.8"` | `color="icon.warning"` |
600
+
601
+ #### Border
602
+
603
+ | `v25` | `v26` |
604
+ | --------------------------------- | ------------------------------- |
605
+ | `borderColor="border.blue"` | `borderColor="border.info"` |
606
+ | `borderColor="border.blueLight"` | n/a |
607
+ | `borderColor="border.grayLight"` | `borderColor="border.primary"` |
608
+ | `borderColor="border.grayDark"` | `borderColor="border.tertiary"` |
609
+ | `borderColor="border.grayDarker"` | n/a |
610
+ | `borderColor="border.green"` | `borderColor="border.success"` |
611
+ | `borderColor="border.greenLight"` | n/a |
612
+ | `borderColor="border.purple"` | n/a |
613
+ | `borderColor="border.red"` | `borderColor="border.danger"` |
614
+ | `borderColor="border.redLight"` | n/a |
615
+ | `borderColor="border.white"` | `borderColor="border.inverse"` |
616
+ | `borderColor="border.whiteFace"` | n/a |
617
+ | `borderColor="border.yellow"` | `borderColor="border.warning"` |
618
+ | `borderColor="border.blackFade"` | `borderColor="fade.fg15"` |
619
+ | `borderColor="border.whiteFade"` | `borderCOlor="fade.white15"` |
620
+ | `borderColor="blue.5"` | `borderColor="border.info"` |
621
+ | `borderColor="gray.2"` | `borderColor="border.primary"` |
622
+ | `borderColor="gray.3"` | `borderColor="border.tertiary"` |
623
+ | `borderColor="green.4"` | `borderColor="border.success"` |
624
+ | `borderColor="red.5"` | `borderColor="border.danger"` |
625
+ | `borderColor="white"` | `borderColor="border.inverse"` |
626
+
627
+ #### Background
628
+
629
+ | `v25` | `v26` |
630
+ | ------------------- | ------------------------ |
631
+ | `bg="white"` | `bg="bg.primary"` |
632
+ | `bg="bg.grayLight"` | `bg="bg.secondary"` |
633
+ | `bg="bg.gray"` | `bg="bg.tertiary"` |
634
+ | `bg="bg.grayDark"` | `bg="bg.canvasInverse"` |
635
+ | `bg="blue.0"` | `bg="bg.info"` |
636
+ | `bg="blue.5"` | `bg="bg.infoInverse"` |
637
+ | `bg="red.0"` | `bg="bg.danger"` |
638
+ | `bg="red.5"` | `bg="bg.dangerInverse"` |
639
+ | `bg="green.1"` | `bg="bg.success"` |
640
+ | `bg="green.5"` | `bg="bg.successInverse"` |
641
+
642
+ #### Labels
643
+
644
+ _Note the change in pluralization from 'labels' to 'label'._
645
+
646
+ | `v25` | `v26` |
647
+ | ----------------------------- | ------------------------------------- |
648
+ | `color="labels.grayDarkText"` | `color="label.primary.text` |
649
+ | `borderColor="labels.gray"` | `borderColor="label.primary.border` |
650
+ | `color="labels.grayText"` | `color="label.secondary.text` |
651
+ | `borderColor="labels.gray"` | `borderColor="label.secondary.border` |
652
+ | `color="labels.blueText"` | `color="label.info.text` |
653
+ | `borderColor="labels.blue"` | `borderColor="label.info.border` |
654
+ | `color="labels.greenText"` | `color="label.success.text` |
655
+ | `borderColor="labels.green"` | `borderColor="label.success.border` |
656
+ | `color="labels.yellowText"` | `color="label.warning.text` |
657
+ | `borderColor="labels.yellow"` | `borderColor="label.warning.border` |
658
+ | `color="labels.redText"` | `color="label.danger.text` |
659
+ | `borderColor="labels.red"` | `borderColor="label.danger.border` |
660
+ | `color="labels.orangeText"` | `color="label.primary.text` |
661
+ | `borderColor="labels.orange"` | `borderColor="label.primary.text` |
662
+ | `color="labels.pinkText"` | n/a |
663
+ | `borderColor="labels.pink"` | n/a |
664
+ | `color="labels.purpleText"` | n/a |
665
+ | `borderColor="labels.purple"` | n/a |
666
+
667
+ #### Counters
668
+
669
+ | `v25` | `v26` |
670
+ | --------------------- | -------------------- |
671
+ | `scheme="gray"` | `scheme="primary"` |
672
+ | `scheme="gray-light"` | `scheme="secondary"` |
673
+
674
+ #### Timeline
675
+
676
+ | `v25` | `v26` |
677
+ | ----------------------------------------- | ----------------------------- |
678
+ | `bg="red.5"` | `bg="prState.closed.bg"` |
679
+ | `bg="green.5"` | `bg="prState.open.bg"` |
680
+ | `bg="purple.5"` | `bg="prState.merged.bg"` |
681
+ | `bg="gray.5"` | `bg="prState.draft.bg"` |
682
+ | `color="white"` (context: closed PR icon) | `color="prState.closed.text"` |
683
+ | `color="white"` (context: open PR icon) | `color="prState.open.text"` |
684
+ | `color="white"` (context: merged PR icon) | `color="prState.merged.text"` |
685
+ | `color="white"` (context: merged PR icon) | `color="prState.draft.text"` |
686
+
687
+ ## 25.0.0
688
+
689
+ ### Major Changes
690
+
691
+ - [`8799f74a`](https://github.com/primer/react/commit/8799f74ad69911e9840d51a65d08237f3cb1f172) [#1112](https://github.com/primer/react/pull/1112) Thanks [@colebemis](https://github.com/colebemis)! - Primer React now supports color modes! 🎉
692
+
693
+ See the new [Theming](https://primer.style/components/theming) documentation for more details.
694
+
695
+ #### Breaking changes
696
+
697
+ - You'll need to replace the `ThemeProvider` from `styled-components` with the new Primer React `ThemeProvider`:
698
+
699
+ ```diff
700
+ - import {ThemeProvider} from 'styled-components'
701
+ - import {theme} from '@primer/react
702
+ + import {ThemeProvider} from '@primer/react'
703
+
704
+ function App() {
705
+ return (
706
+ - <ThemeProvider theme={theme}>
707
+ + <ThemeProvider>
708
+ <div>your app here...</div>
709
+ </ThemeProvider>
710
+ )
711
+ }
712
+ ```
713
+
714
+ - The structure of the theme object has changed to support color schemes:
715
+
716
+ ```diff
717
+ const theme = {
718
+ - colors,
719
+ - shadows,
720
+ + colorSchemes: {
721
+ + light: {
722
+ + colors,
723
+ + shadows,
724
+ + },
725
+ + dark: {...},
726
+ + dark_dimmed: {...},
727
+ + },
728
+ space,
729
+ fonts,
730
+ fontSizes,
731
+ fontWeights,
732
+ lineHeights,
733
+ borderWidths,
734
+ radii,
735
+ breakpoints,
736
+ sizes,
737
+ }
738
+ ```
739
+
740
+ - The `theme.colors` and `theme.shadows` objects are no longer available from the `theme` export. Use the `useTheme`hook instead:
741
+
742
+ ```diff
743
+ - import {theme} from '@primer/react'
744
+ + import {useTheme} from '@primer/react'
745
+
746
+ function Example() {
747
+ + const {theme} = useTheme()
748
+ const myColor = theme.colors.text.primary
749
+ ...
750
+ }
751
+ ```
752
+
753
+ ### Patch Changes
754
+
755
+ - [`360e3595`](https://github.com/primer/react/commit/360e3595a6e133e8caf391e7355f25b856936b12) [#1111](https://github.com/primer/react/pull/1111) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Update color variable used in ProgressBar (`state.success` → `bg.successInverse`)
756
+
757
+ * [`1b3d87d2`](https://github.com/primer/react/commit/1b3d87d27103b99dd02cbf61f88d93b7df80d5b1) [#1127](https://github.com/primer/react/pull/1127) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Bump @primer/primitives from 0.0.0-20211167520 to 0.0.0-20212178221
758
+
759
+ ## 24.0.0
760
+
761
+ ### Major Changes
762
+
763
+ - [`b9d9d245`](https://github.com/primer/react/commit/b9d9d2450c3f726fa0e6bc8cb43ba678df0c60ad) [#1068](https://github.com/primer/react/pull/1068) Thanks [@colebemis](https://github.com/colebemis)! - Remove propTypes in favor of TypeScript types
764
+
765
+ * [`beef075e`](https://github.com/primer/react/commit/beef075e0274396b77887adf0b912583fe564b3f) [#1094](https://github.com/primer/react/pull/1094) Thanks [@colebemis](https://github.com/colebemis)! - Components no longer have a default `theme` prop. To ensure components still render correctly, you'll need pass the Primer theme to a [styled-components](https://styled-components.com/) `<ThemeProvider>` at the root of your application:
766
+
767
+ ```jsx
768
+ import {ThemeProvider} from 'styled-components'
769
+ import {theme} from '@primer/react'
770
+
771
+ function App(props) {
772
+ return (
773
+ <div>
774
+ <ThemeProvider theme={theme}>
775
+ <div>your app here</div>
776
+ </ThemeProvider>
777
+ </div>
778
+ )
779
+ }
780
+ ```
781
+
782
+ ### Patch Changes
783
+
784
+ - [`397f3360`](https://github.com/primer/react/commit/397f3360f1e6486ae475394b5b4cef968a0cdb21) [#1106](https://github.com/primer/react/pull/1106) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in Pagination
785
+
786
+ * [`fa106ea9`](https://github.com/primer/react/commit/fa106ea9a43a8451efb648d1e3ec9df87577379c) [#1090](https://github.com/primer/react/pull/1090) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in BaseStyles
787
+
788
+ - [`fa106ea9`](https://github.com/primer/react/commit/fa106ea9a43a8451efb648d1e3ec9df87577379c) [#1090](https://github.com/primer/react/pull/1090) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in BranchName
789
+
790
+ * [`e93cf268`](https://github.com/primer/react/commit/e93cf268b9b8b25fee535dc4aa7d31c0b015d420) [#1092](https://github.com/primer/react/pull/1092) Thanks [@bscofield](https://github.com/bscofield)! - Use functional color variables in Caret, CircleBadge, Pagehead, ProgressBar, and Popover
791
+
792
+ - [`5a042778`](https://github.com/primer/react/commit/5a04277861a78d567b812e7b83c2977c61402247) [#1099](https://github.com/primer/react/pull/1099) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in FilterList
793
+
794
+ * [`a886bbcf`](https://github.com/primer/react/commit/a886bbcf765659a4742245d37c9f8d1327daca7a) [#1098](https://github.com/primer/react/pull/1098) Thanks [@bscofield](https://github.com/bscofield)! - Update SelectMenu and child components to use functional color variables
795
+
796
+ - [`f2c57794`](https://github.com/primer/react/commit/f2c57794dc8163eda974d37a4fbb939b631c82cc) [#1085](https://github.com/primer/react/pull/1085) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in SideNav
797
+
798
+ * [`756191e7`](https://github.com/primer/react/commit/756191e7d20ea46c83a591fd2cf7b2ab9c3ed0fc) [#1100](https://github.com/primer/react/pull/1100) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in ButtonOutline
799
+
800
+ - [`6b2dc95f`](https://github.com/primer/react/commit/6b2dc95f2b3e250e130ff7e36d18eda3cda94b4a) [#1085](https://github.com/primer/react/pull/1085) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in TabNav
801
+
802
+ * [`51d180ac`](https://github.com/primer/react/commit/51d180ace3562569910a80557904f138677b3262) [#1089](https://github.com/primer/react/pull/1089) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in Timeline
803
+
804
+ - [`51d180ac`](https://github.com/primer/react/commit/51d180ace3562569910a80557904f138677b3262) [#1089](https://github.com/primer/react/pull/1089) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in TextInput
805
+
806
+ * [`8f2b4d2e`](https://github.com/primer/react/commit/8f2b4d2e434d1af2eb6d5d3c7f566fae147033ee) [#1100](https://github.com/primer/react/pull/1100) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in ButtonPrimary
807
+
808
+ - [`51d180ac`](https://github.com/primer/react/commit/51d180ace3562569910a80557904f138677b3262) [#1089](https://github.com/primer/react/pull/1089) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in Link
809
+
810
+ * [`fa106ea9`](https://github.com/primer/react/commit/fa106ea9a43a8451efb648d1e3ec9df87577379c) [#1090](https://github.com/primer/react/pull/1090) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in BorderBox
811
+
812
+ - [`51d180ac`](https://github.com/primer/react/commit/51d180ace3562569910a80557904f138677b3262) [#1089](https://github.com/primer/react/pull/1089) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in Tooltip
813
+
814
+ * [`1fb750af`](https://github.com/primer/react/commit/1fb750afc9083466eadad76b3387967d466d336a) [#1097](https://github.com/primer/react/pull/1097) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in ButtonTableList
815
+
816
+ - [`ea21d8eb`](https://github.com/primer/react/commit/ea21d8eb99f710727b31d2c0f8ddc1d5f59d61cf) [#1102](https://github.com/primer/react/pull/1102) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in Flash
817
+
818
+ * [`51d180ac`](https://github.com/primer/react/commit/51d180ace3562569910a80557904f138677b3262) [#1089](https://github.com/primer/react/pull/1089) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in UnderlineNav
819
+
820
+ - [`44aa68e2`](https://github.com/primer/react/commit/44aa68e2e725bdb2a3be349d7bec3e18b3f17809) [#1101](https://github.com/primer/react/pull/1101) Thanks [@emplums](https://github.com/emplums)! - Forwards aria-label to correct component
821
+
822
+ * [`d0f38c3d`](https://github.com/primer/react/commit/d0f38c3d7bbcc7d57a8d459d8c61862102f89b1e) [#1102](https://github.com/primer/react/pull/1102) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in Header
823
+
824
+ - [`5df7723a`](https://github.com/primer/react/commit/5df7723afabe0d3bdd29e3eab8622586b3ab072a) [#1099](https://github.com/primer/react/pull/1099) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in DropdownStyles
825
+
826
+ * [`170876e6`](https://github.com/primer/react/commit/170876e6546a435faf7e0401d6fc8060a64b199d) [#1097](https://github.com/primer/react/pull/1097) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in Button
827
+
828
+ - [`c44ee363`](https://github.com/primer/react/commit/c44ee363e9d663b873ea721e42dac8e5366ebcd1) [#1085](https://github.com/primer/react/pull/1085) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in SubNav
829
+
830
+ * [`198e24ad`](https://github.com/primer/react/commit/198e24adef084b115441c72b80d3113f411a5fa5) [#1100](https://github.com/primer/react/pull/1100) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in ButtonDanger
831
+
832
+ - [`39371d98`](https://github.com/primer/react/commit/39371d98be5c7fa1bf2be5542a90d752bc330e2b) [#1099](https://github.com/primer/react/pull/1099) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in CounterLabel
833
+
834
+ * [`92597504`](https://github.com/primer/react/commit/9259750429913d7977746c55da5a397d591a4f45) [#1100](https://github.com/primer/react/pull/1100) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in ButtonClose
835
+
836
+ - [`fa106ea9`](https://github.com/primer/react/commit/fa106ea9a43a8451efb648d1e3ec9df87577379c) [#1090](https://github.com/primer/react/pull/1090) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in AvatarPair
837
+
838
+ * [`fa106ea9`](https://github.com/primer/react/commit/fa106ea9a43a8451efb648d1e3ec9df87577379c) [#1090](https://github.com/primer/react/pull/1090) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in AvatarStack
839
+
840
+ - [`565f1980`](https://github.com/primer/react/commit/565f19808c528a2d33042c339603ea76d6097d0c) [#1097](https://github.com/primer/react/pull/1097) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in Breadcrumb
841
+
842
+ * [`4e19045e`](https://github.com/primer/react/commit/4e19045ec1ca46ece0c029a193ed1863a8994030) [#1085](https://github.com/primer/react/pull/1085) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in StateLabel
843
+
844
+ - [`31025697`](https://github.com/primer/react/commit/31025697b61f80fc35442e66e73311269d0cdc48) [#1099](https://github.com/primer/react/pull/1099) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in Dialog
845
+
846
+ * [`67cc5b23`](https://github.com/primer/react/commit/67cc5b23fb5b968a7ecbebbca9671e65d4acfee6) [#1097](https://github.com/primer/react/pull/1097) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in ButtonInvisible
847
+
848
+ ## 23.2.1
849
+
850
+ ### Patch Changes
851
+
852
+ - [`a42162c0`](https://github.com/primer/react/commit/a42162c011fa3718a32124b79aecfe306f358298) [#1087](https://github.com/primer/react/pull/1087) Thanks [@emplums](https://github.com/emplums)! - Fix up styles in TabNav allowing for items positioned on the right end of TabNav
853
+
854
+ ## 23.2.0
855
+
856
+ ### Minor Changes
857
+
858
+ - [`b273f1f9`](https://github.com/primer/react/commit/b273f1f95fcb3e2224414d6a0be124e29701d439) [#1083](https://github.com/primer/react/pull/1083) Thanks [@emplums](https://github.com/emplums)! - Adds a `contrast` prop to TextInput
859
+
860
+ ### Patch Changes
861
+
862
+ - [`c50b9f93`](https://github.com/primer/react/commit/c50b9f93402e7898b2a30f6f7fd0159ed40a8e86) [#1059](https://github.com/primer/react/pull/1059) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Dropdown` to TypeScript
863
+
864
+ * [`681799fd`](https://github.com/primer/react/commit/681799fd996537f56b15169ce8ac801e68aff41b) [#1066](https://github.com/primer/react/pull/1066) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `useMouseIntent` to TypeScript
865
+
866
+ - [`eaeb2389`](https://github.com/primer/react/commit/eaeb2389738c1c366e41ddb7795b03c865359034) [#1055](https://github.com/primer/react/pull/1055) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `utils` to TypeScript
867
+
868
+ * [`106eb85e`](https://github.com/primer/react/commit/106eb85e969fa9ece03a789b1175346e8d53cb83) [#1060](https://github.com/primer/react/pull/1060) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `Dialog` to TypeScript
869
+
870
+ - [`f11e6ac6`](https://github.com/primer/react/commit/f11e6ac67ff675137e672a33d445678fd3b64b3a) [#1048](https://github.com/primer/react/pull/1048) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `SelectMenu` to TypeScript
871
+
872
+ * [`bb635a50`](https://github.com/primer/react/commit/bb635a5094baf6821e45a7a03c6582989ee86fd5) [#1058](https://github.com/primer/react/pull/1058) Thanks [@colebemis](https://github.com/colebemis)! - Migrate theme to TypeScript
873
+
874
+ - [`fabca94e`](https://github.com/primer/react/commit/fabca94ebc3b5429b5c541aeaac6eb508fd5f182) [#1047](https://github.com/primer/react/pull/1047) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `Pagination` to TypeScript
875
+
876
+ * [`c868bc96`](https://github.com/primer/react/commit/c868bc9613cb32d6fc0de009c75abdaa20c1bcdb) [#1074](https://github.com/primer/react/pull/1074) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Add functional color variables from Primer Primitives to theme object
877
+
878
+ ## 23.1.0
879
+
880
+ ### Minor Changes
881
+
882
+ - [`e0432b35`](https://github.com/primer/react/commit/e0432b35f152031be8e4a0830df5d228d7b14832) [#1041](https://github.com/primer/react/pull/1041) Thanks [@emplums](https://github.com/emplums)! - Adds new `useSafeTimeout` helper Hook
883
+
884
+ ### Patch Changes
885
+
886
+ - [`eaf57cf5`](https://github.com/primer/react/commit/eaf57cf514da106f9bd1b4de01f5fc037a84fa23) [#1054](https://github.com/primer/react/pull/1054) Thanks [@emplums](https://github.com/emplums)! - Fix border radius on ButtonClose
887
+
888
+ * [`57eba0da`](https://github.com/primer/react/commit/57eba0da8fea003d00fce781d05ac581616de391) [#1054](https://github.com/primer/react/pull/1054) Thanks [@emplums](https://github.com/emplums)! - Add ButtonInvisible focus styles
889
+
890
+ - [`e2c90dba`](https://github.com/primer/react/commit/e2c90dba38976c280f44544cd7bf5cbbc8816ee3) [#1049](https://github.com/primer/react/pull/1049) Thanks [@eintxaurtieta](https://github.com/eintxaurtieta)! - Added font-family:inherit to TextInput
891
+
892
+ * [`be82a500`](https://github.com/primer/react/commit/be82a50033e8392c2dd80f56df9f398397f45379) [#1046](https://github.com/primer/react/pull/1046) Thanks [@emplums](https://github.com/emplums)! - - Fixed Dropdown & Details types.
893
+
894
+ - [`7c4c726c`](https://github.com/primer/react/commit/7c4c726c822fafc524e9b6928a7f9d413e1a7bc8) [#1046](https://github.com/primer/react/pull/1046) Thanks [@emplums](https://github.com/emplums)! - - Added useDetails behavior back to Dropdown
895
+
896
+ ## 23.0.4
897
+
898
+ ### Patch Changes
899
+
900
+ - [`8de64e95`](https://github.com/primer/react/commit/8de64e9588dd4c545f7eca3a13d74d5f860e2b0e) [#1029](https://github.com/primer/react/pull/1029) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `TabNav` to TypeScript
901
+
902
+ * [`16aeca6b`](https://github.com/primer/react/commit/16aeca6bb37f1724037cd83db580eee69c473332) [#1032](https://github.com/primer/react/pull/1032) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `AvatarStack` to TypeScript
903
+
904
+ - [`4070310a`](https://github.com/primer/react/commit/4070310a334d8d37c5a1277f11298ef675ed1465) [#1026](https://github.com/primer/react/pull/1026) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `Details` to TypeScript
905
+
906
+ * [`8f483bd9`](https://github.com/primer/react/commit/8f483bd94bb9a09ca88e3f2a116c4396404627c3) [#1042](https://github.com/primer/react/pull/1042) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `PointerBox` to TypeScript
907
+
908
+ - [`c5d2b657`](https://github.com/primer/react/commit/c5d2b65725c7e584412430fd3156875b8e1714d8) [#1035](https://github.com/primer/react/pull/1035) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `CircleBadge` to TypeScript
909
+
910
+ * [`3fcdf25f`](https://github.com/primer/react/commit/3fcdf25fc7c2def336dec4f5b34f518b2dbff903) [#1040](https://github.com/primer/react/pull/1040) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `SideNav` to TypeScript
911
+
912
+ - [`ff02c038`](https://github.com/primer/react/commit/ff02c038cdeef9cbeb8d050b3c5a951ccdbb9574) [#1033](https://github.com/primer/react/pull/1033) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Tooltip` to TypeScript
913
+
914
+ * [`0d62f260`](https://github.com/primer/react/commit/0d62f260672453a7509173b5b6d02778cf73a3e8) [#1030](https://github.com/primer/react/pull/1030) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Caret` to TypeScript
915
+
916
+ - [`d1785f4c`](https://github.com/primer/react/commit/d1785f4cd312eff66f4a0b897aaf22aff11441bc) [#1038](https://github.com/primer/react/pull/1038) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `SubNav` to TypeScript
917
+
918
+ * [`058e7919`](https://github.com/primer/react/commit/058e791936399b1e08c31bfa18c772015da587c7) [#1036](https://github.com/primer/react/pull/1036) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `CircleOcticon` to TypeScript
919
+
920
+ - [`9b71bf38`](https://github.com/primer/react/commit/9b71bf387aad9f3cd3802594fd3cccc473b46661) [#998](https://github.com/primer/react/pull/998) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Position` to TypeScript
921
+
922
+ * [`b2ac3010`](https://github.com/primer/react/commit/b2ac301092e37a319ddc10440f929425da066f69) [#1037](https://github.com/primer/react/pull/1037) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Timeline` to TypeScript
923
+
924
+ - [`ef25d019`](https://github.com/primer/react/commit/ef25d01961d20fd590dd3abcef10c87fd26135be) [#1031](https://github.com/primer/react/pull/1031) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `AvatarPair` to TypeScript
925
+
926
+ * [`62f45a12`](https://github.com/primer/react/commit/62f45a12fbd87d18adbc611a6410734f9fd16ab9) [#1028](https://github.com/primer/react/pull/1028) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `TextInput` to TypeScript
927
+
928
+ - [`a4dce5da`](https://github.com/primer/react/commit/a4dce5daecdf65ce2ea8e55f962e5843b2b10e26) [#1017](https://github.com/primer/react/pull/1017) Thanks [@smockle](https://github.com/smockle)! - Migrate button components to TypeScript
929
+
930
+ * [`cc36e6b4`](https://github.com/primer/react/commit/cc36e6b410600994d46af864cec7b83314a6987c) [#1034](https://github.com/primer/react/pull/1034) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Popover` to TypeScript
931
+
932
+ - [`11340814`](https://github.com/primer/react/commit/113408140bef3d47a023925aa975273e264959ac) [#1020](https://github.com/primer/react/pull/1020) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `Header` to TypeScript
933
+
934
+ ## 23.0.3
935
+
936
+ ### Patch Changes
937
+
938
+ - [`3e0110bc`](https://github.com/primer/react/commit/3e0110bc942ba080c8c7bbaf1778b88b3cc25570) [#995](https://github.com/primer/react/pull/995) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Flash` to TypeScript
939
+
940
+ * [`b0cea82e`](https://github.com/primer/react/commit/b0cea82e27e72f2bd351c14721e0d70343c98ebd) [#1003](https://github.com/primer/react/pull/1003) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Truncate` to TypeScript
941
+
942
+ - [`f9a7e78a`](https://github.com/primer/react/commit/f9a7e78a0e512be90cc349483ed6fab2010e1765) [#987](https://github.com/primer/react/pull/987) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `ProgressBar` to TypeScript
943
+
944
+ * [`d848b9e0`](https://github.com/primer/react/commit/d848b9e054a0f96648ddd02b13ac9c19f56ecb42) [#993](https://github.com/primer/react/pull/993) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `StyledOcticon` to TypeScript
945
+
946
+ - [`73bced4b`](https://github.com/primer/react/commit/73bced4bdf70b71137e1d4c349db232842efcdee) [#1015](https://github.com/primer/react/pull/1015) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `FilterList` to TypeScript
947
+
948
+ * [`fcd773c4`](https://github.com/primer/react/commit/fcd773c4212062b2957dd3befba90ac034dd3fe5) [#1009](https://github.com/primer/react/pull/1009) Thanks [@emplums](https://github.com/emplums)! - Upgrade Octicons to 11.3.0
949
+
950
+ - [`b9671ca2`](https://github.com/primer/react/commit/b9671ca28bbcf9521882f9ca2fed986c426a8833) [#1005](https://github.com/primer/react/pull/1005) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `CounterLabel` to TypeScript
951
+
952
+ * [`1fb77ac3`](https://github.com/primer/react/commit/1fb77ac3b0ed60dee0481bd14f069f913d37cfdd) [#1012](https://github.com/primer/react/pull/1012) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Breadcrumb` to TypeScript
953
+
954
+ - [`91002078`](https://github.com/primer/react/commit/91002078bc173134e7c94541fe5388fca0baefa5) [#1008](https://github.com/primer/react/pull/1008) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `StateLabel` to TypeScript
955
+
956
+ * [`3a3c81a4`](https://github.com/primer/react/commit/3a3c81a4e71a88249d08a02d26575c7d00e35fa3) [#984](https://github.com/primer/react/pull/984) Thanks [@bscofield](https://github.com/bscofield)! - Migrate `Avatar` to TypeScript
957
+
958
+ - [`df2920f5`](https://github.com/primer/react/commit/df2920f5e80e6f73d423f1e1dd468994a5894618) [#1014](https://github.com/primer/react/pull/1014) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `UnderlineNav` to TypeScript
959
+
960
+ * [`b947aff2`](https://github.com/primer/react/commit/b947aff26f26d46ebe8f7bb4b930863ba1b05eaa) [#1006](https://github.com/primer/react/pull/1006) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `FilteredSearch` to TypeScript
961
+
962
+ - [`2e71f70f`](https://github.com/primer/react/commit/2e71f70f2113de273b9c41a667f2fc9b539a01de) [#1011](https://github.com/primer/react/pull/1011) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `Link` to TypeScript
963
+
964
+ ## 23.0.2
965
+
966
+ ### Patch Changes
967
+
968
+ - [`7128403c`](https://github.com/primer/react/commit/7128403c488a2cfefda3743d7f92be8142071bc8) [#979](https://github.com/primer/react/pull/979) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Text` to TypeScript
969
+
970
+ * [`fe16e21c`](https://github.com/primer/react/commit/fe16e21cb3a67d424cdbb663ea2d13e2397eb42c) [#982](https://github.com/primer/react/pull/982) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `BaseStyles` to TypeScript
971
+
972
+ - [`ee806857`](https://github.com/primer/react/commit/ee8068579106d34309faa1a0c44e1ed25edafb59) [#975](https://github.com/primer/react/pull/975) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Heading` to TypeScript
973
+
974
+ * [`25315571`](https://github.com/primer/react/commit/2531557171cd2e39b980a456d42e15880e16256f) [#976](https://github.com/primer/react/pull/976) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Label` to TypeScript
975
+
976
+ - [`4076bf4e`](https://github.com/primer/react/commit/4076bf4e173d997c46ba1130c5f0f86f04952790) [#986](https://github.com/primer/react/pull/986) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Flex` to TypeScript
977
+
978
+ * [`397a46fe`](https://github.com/primer/react/commit/397a46fe1edee9c2bb71e6ceedafff8dc4e76cb2) [#976](https://github.com/primer/react/pull/976) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `LabelGroup` to TypeScript
979
+
980
+ - [`e841e158`](https://github.com/primer/react/commit/e841e158dcc557169fce19c78d5d90af5fef6af6) [#983](https://github.com/primer/react/pull/983) Thanks [@shiftkey](https://github.com/shiftkey)! - Add supported `htmlFor` prop to `FormGroupLabelProps` type definition
981
+
982
+ * [`dc0df4b2`](https://github.com/primer/react/commit/dc0df4b209d952b121f04fc86d0f2984a6e661cf) [#973](https://github.com/primer/react/pull/973) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `BorderBox` to TypeScript
983
+
984
+ - [`0cac0042`](https://github.com/primer/react/commit/0cac00426d4d29c51d9f110f091aac06c49ec054) [#974](https://github.com/primer/react/pull/974) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `BranchName` to TypeScript
985
+
986
+ * [`755a1a5c`](https://github.com/primer/react/commit/755a1a5c19f6d6298f9c6785b50fed71aaea59ad) [#977](https://github.com/primer/react/pull/977) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Pagehead` to TypeScript
987
+
988
+ - [`34ff4885`](https://github.com/primer/react/commit/34ff4885311686699fbb6d2e3fab0337bad3d016) [#989](https://github.com/primer/react/pull/989) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Grid` to TypeScript