@primer/components 31.0.0-rc.ee65b7f1 → 31.0.0

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 (815) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/browser.esm.js +12 -7
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +12 -7
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.js +3 -3
  7. package/lib/Button/Button.js +1 -1
  8. package/lib/Button/ButtonInvisible.js +1 -1
  9. package/lib/Button/ButtonTableList.js +1 -1
  10. package/lib/Pagination/Pagination.js +1 -1
  11. package/lib/_TextInputWrapper.js +1 -1
  12. package/lib-esm/ActionList/Item.js +3 -3
  13. package/lib-esm/Button/Button.js +1 -1
  14. package/lib-esm/Button/ButtonInvisible.js +1 -1
  15. package/lib-esm/Button/ButtonTableList.js +1 -1
  16. package/lib-esm/Pagination/Pagination.js +1 -1
  17. package/lib-esm/_TextInputWrapper.js +1 -1
  18. package/package.json +1 -1
  19. package/.changeset/README.md +0 -8
  20. package/.changeset/config.json +0 -10
  21. package/.devcontainer/devcontainer.json +0 -8
  22. package/.eslintrc.json +0 -137
  23. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -38
  24. package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +0 -41
  25. package/.github/dependabot.yml +0 -18
  26. package/.github/pull_request_template.md +0 -18
  27. package/.github/workflows/ci.yml +0 -31
  28. package/.github/workflows/deploy_preview.yml +0 -47
  29. package/.github/workflows/deploy_production.yml +0 -70
  30. package/.github/workflows/release.yml +0 -35
  31. package/.github/workflows/release_canary.yml +0 -70
  32. package/.github/workflows/release_candidate.yml +0 -60
  33. package/.github/workflows/size.yml +0 -13
  34. package/.github/workflows/stale.yml +0 -26
  35. package/.gitignore +0 -10
  36. package/.npmrc +0 -4
  37. package/.nvmrc +0 -1
  38. package/.storybook/main.js +0 -11
  39. package/.storybook/preview.js +0 -113
  40. package/.vscode/launch.json +0 -21
  41. package/.vscode/settings.json +0 -13
  42. package/@types/@styled-system/index.d.ts +0 -0
  43. package/@types/@styled-system/prop-types/index.d.ts +0 -1
  44. package/@types/@styled-system/props/index.d.ts +0 -1
  45. package/@types/jest-styled-components/index.d.ts +0 -1
  46. package/CODEOWNERS +0 -2
  47. package/babel-defines.js +0 -13
  48. package/babel.config.js +0 -39
  49. package/contributor-docs/CODE_OF_CONDUCT.md +0 -76
  50. package/contributor-docs/CONTRIBUTING.md +0 -274
  51. package/contributor-docs/adrs/adr-001-typescript.md +0 -23
  52. package/contributor-docs/adrs/adr-002-behavior-isolation.md +0 -108
  53. package/contributor-docs/behaviors.md +0 -132
  54. package/contributor-docs/component-contents-api-patterns.md +0 -316
  55. package/contributor-docs/principles.md +0 -39
  56. package/docs/.eslintrc +0 -0
  57. package/docs/.gitignore +0 -91
  58. package/docs/components/PropsList.js +0 -5
  59. package/docs/components/State.js +0 -9
  60. package/docs/components/constants.js +0 -34
  61. package/docs/components/index.js +0 -2
  62. package/docs/content/ActionList.mdx +0 -99
  63. package/docs/content/ActionMenu.mdx +0 -80
  64. package/docs/content/AnchoredOverlay.mdx +0 -37
  65. package/docs/content/Autocomplete.mdx +0 -627
  66. package/docs/content/Avatar.mdx +0 -33
  67. package/docs/content/AvatarStack.mdx +0 -37
  68. package/docs/content/BorderBox.md +0 -46
  69. package/docs/content/Box.md +0 -74
  70. package/docs/content/BranchName.md +0 -18
  71. package/docs/content/Breadcrumbs.md +0 -52
  72. package/docs/content/Buttons.md +0 -56
  73. package/docs/content/CircleBadge.md +0 -45
  74. package/docs/content/CircleOcticon.md +0 -18
  75. package/docs/content/CounterLabel.md +0 -32
  76. package/docs/content/Details.md +0 -105
  77. package/docs/content/Dialog.md +0 -108
  78. package/docs/content/Dialog2.mdx +0 -179
  79. package/docs/content/Dropdown.md +0 -72
  80. package/docs/content/DropdownMenu.mdx +0 -49
  81. package/docs/content/FilterList.md +0 -44
  82. package/docs/content/FilteredSearch.md +0 -39
  83. package/docs/content/Flash.md +0 -44
  84. package/docs/content/Flex.md +0 -58
  85. package/docs/content/FormGroup.md +0 -46
  86. package/docs/content/Grid.md +0 -59
  87. package/docs/content/Header.md +0 -79
  88. package/docs/content/Heading.md +0 -22
  89. package/docs/content/Label.md +0 -42
  90. package/docs/content/LabelGroup.md +0 -31
  91. package/docs/content/Link.md +0 -37
  92. package/docs/content/Overlay.mdx +0 -94
  93. package/docs/content/Pagehead.md +0 -27
  94. package/docs/content/Pagination.md +0 -187
  95. package/docs/content/PointerBox.md +0 -81
  96. package/docs/content/Popover.md +0 -137
  97. package/docs/content/Portal.mdx +0 -78
  98. package/docs/content/Position.md +0 -100
  99. package/docs/content/ProgressBar.mdx +0 -29
  100. package/docs/content/SelectMenu.md +0 -435
  101. package/docs/content/SelectPanel.mdx +0 -67
  102. package/docs/content/SideNav.md +0 -179
  103. package/docs/content/Spinner.mdx +0 -32
  104. package/docs/content/StateLabel.md +0 -35
  105. package/docs/content/StyledOcticon.md +0 -36
  106. package/docs/content/SubNav.md +0 -102
  107. package/docs/content/TabNav.md +0 -50
  108. package/docs/content/Text.md +0 -31
  109. package/docs/content/TextInput.md +0 -34
  110. package/docs/content/TextInputTokens.mdx +0 -89
  111. package/docs/content/TextInputWithTokens.mdx +0 -97
  112. package/docs/content/Timeline.md +0 -138
  113. package/docs/content/Token.mdx +0 -381
  114. package/docs/content/Tooltip.md +0 -41
  115. package/docs/content/Truncate.md +0 -64
  116. package/docs/content/UnderlineNav.md +0 -53
  117. package/docs/content/anchoredPosition.mdx +0 -163
  118. package/docs/content/core-concepts.md +0 -70
  119. package/docs/content/focusTrap.mdx +0 -103
  120. package/docs/content/focusZone.mdx +0 -145
  121. package/docs/content/getting-started.md +0 -138
  122. package/docs/content/index.md +0 -33
  123. package/docs/content/linting.md +0 -35
  124. package/docs/content/overriding-styles.mdx +0 -82
  125. package/docs/content/philosophy.md +0 -23
  126. package/docs/content/primer-theme.md +0 -89
  127. package/docs/content/ssr.mdx +0 -43
  128. package/docs/content/system-props.mdx +0 -37
  129. package/docs/content/theme-reference.md +0 -16
  130. package/docs/content/theming.md +0 -249
  131. package/docs/content/useOnEscapePress.mdx +0 -56
  132. package/docs/content/useOnOutsideClick.mdx +0 -57
  133. package/docs/content/useOpenAndCloseFocus.mdx +0 -49
  134. package/docs/content/useOverlay.mdx +0 -62
  135. package/docs/content/useSafeTimeout.mdx +0 -32
  136. package/docs/gatsby-config.js +0 -30
  137. package/docs/gatsby-node.js +0 -101
  138. package/docs/package-lock.json +0 -20756
  139. package/docs/package.json +0 -36
  140. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +0 -23
  141. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +0 -41
  142. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +0 -54
  143. package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +0 -133
  144. package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +0 -1411
  145. package/docs/src/props.js +0 -77
  146. package/jest.config.js +0 -13
  147. package/lib/__tests__/ActionList.test.d.ts +0 -1
  148. package/lib/__tests__/ActionList.test.js +0 -69
  149. package/lib/__tests__/ActionList.types.test.d.ts +0 -6
  150. package/lib/__tests__/ActionList.types.test.js +0 -69
  151. package/lib/__tests__/ActionMenu.test.d.ts +0 -1
  152. package/lib/__tests__/ActionMenu.test.js +0 -151
  153. package/lib/__tests__/AnchoredOverlay.test.d.ts +0 -1
  154. package/lib/__tests__/AnchoredOverlay.test.js +0 -160
  155. package/lib/__tests__/Autocomplete.test.d.ts +0 -1
  156. package/lib/__tests__/Autocomplete.test.js +0 -528
  157. package/lib/__tests__/Avatar.test.d.ts +0 -1
  158. package/lib/__tests__/Avatar.test.js +0 -67
  159. package/lib/__tests__/AvatarStack.test.d.ts +0 -1
  160. package/lib/__tests__/AvatarStack.test.js +0 -71
  161. package/lib/__tests__/BorderBox.test.d.ts +0 -1
  162. package/lib/__tests__/BorderBox.test.js +0 -58
  163. package/lib/__tests__/Box.test.d.ts +0 -1
  164. package/lib/__tests__/Box.test.js +0 -78
  165. package/lib/__tests__/BranchName.test.d.ts +0 -1
  166. package/lib/__tests__/BranchName.test.js +0 -36
  167. package/lib/__tests__/Breadcrumbs.test.d.ts +0 -1
  168. package/lib/__tests__/Breadcrumbs.test.js +0 -37
  169. package/lib/__tests__/BreadcrumbsItem.test.d.ts +0 -1
  170. package/lib/__tests__/BreadcrumbsItem.test.js +0 -49
  171. package/lib/__tests__/Button.test.d.ts +0 -1
  172. package/lib/__tests__/Button.test.js +0 -143
  173. package/lib/__tests__/Caret.test.d.ts +0 -1
  174. package/lib/__tests__/Caret.test.js +0 -52
  175. package/lib/__tests__/CircleBadge.test.d.ts +0 -1
  176. package/lib/__tests__/CircleBadge.test.js +0 -83
  177. package/lib/__tests__/CircleOcticon.test.d.ts +0 -1
  178. package/lib/__tests__/CircleOcticon.test.js +0 -71
  179. package/lib/__tests__/ConfirmationDialog.test.d.ts +0 -1
  180. package/lib/__tests__/ConfirmationDialog.test.js +0 -134
  181. package/lib/__tests__/CounterLabel.test.d.ts +0 -1
  182. package/lib/__tests__/CounterLabel.test.js +0 -58
  183. package/lib/__tests__/Details.test.d.ts +0 -1
  184. package/lib/__tests__/Details.test.js +0 -117
  185. package/lib/__tests__/Dialog.test.d.ts +0 -1
  186. package/lib/__tests__/Dialog.test.js +0 -184
  187. package/lib/__tests__/Dropdown.test.d.ts +0 -1
  188. package/lib/__tests__/Dropdown.test.js +0 -63
  189. package/lib/__tests__/DropdownMenu.test.d.ts +0 -1
  190. package/lib/__tests__/DropdownMenu.test.js +0 -150
  191. package/lib/__tests__/FilterList.test.d.ts +0 -1
  192. package/lib/__tests__/FilterList.test.js +0 -36
  193. package/lib/__tests__/FilterListItem.test.d.ts +0 -1
  194. package/lib/__tests__/FilterListItem.test.js +0 -46
  195. package/lib/__tests__/FilteredSearch.test.d.ts +0 -1
  196. package/lib/__tests__/FilteredSearch.test.js +0 -36
  197. package/lib/__tests__/Flash.test.d.ts +0 -1
  198. package/lib/__tests__/Flash.test.js +0 -62
  199. package/lib/__tests__/Flex.test.d.ts +0 -1
  200. package/lib/__tests__/Flex.test.js +0 -74
  201. package/lib/__tests__/FormGroup.test.d.ts +0 -1
  202. package/lib/__tests__/FormGroup.test.js +0 -54
  203. package/lib/__tests__/Grid.test.d.ts +0 -1
  204. package/lib/__tests__/Grid.test.js +0 -104
  205. package/lib/__tests__/Header.test.d.ts +0 -1
  206. package/lib/__tests__/Header.test.js +0 -58
  207. package/lib/__tests__/Heading.test.d.ts +0 -1
  208. package/lib/__tests__/Heading.test.js +0 -109
  209. package/lib/__tests__/Label.test.d.ts +0 -1
  210. package/lib/__tests__/Label.test.js +0 -46
  211. package/lib/__tests__/LabelGroup.test.d.ts +0 -1
  212. package/lib/__tests__/LabelGroup.test.js +0 -38
  213. package/lib/__tests__/Link.test.d.ts +0 -1
  214. package/lib/__tests__/Link.test.js +0 -70
  215. package/lib/__tests__/Merge.types.test.d.ts +0 -30
  216. package/lib/__tests__/Merge.types.test.js +0 -27
  217. package/lib/__tests__/Overlay.test.d.ts +0 -1
  218. package/lib/__tests__/Overlay.test.js +0 -145
  219. package/lib/__tests__/Pagehead.test.d.ts +0 -1
  220. package/lib/__tests__/Pagehead.test.js +0 -37
  221. package/lib/__tests__/Pagination/Pagination.test.d.ts +0 -1
  222. package/lib/__tests__/Pagination/Pagination.test.js +0 -47
  223. package/lib/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
  224. package/lib/__tests__/Pagination/PaginationModel.test.js +0 -186
  225. package/lib/__tests__/PointerBox.test.d.ts +0 -1
  226. package/lib/__tests__/PointerBox.test.js +0 -46
  227. package/lib/__tests__/Popover.test.d.ts +0 -1
  228. package/lib/__tests__/Popover.test.js +0 -66
  229. package/lib/__tests__/Portal.test.d.ts +0 -1
  230. package/lib/__tests__/Portal.test.js +0 -124
  231. package/lib/__tests__/Position.test.d.ts +0 -1
  232. package/lib/__tests__/Position.test.js +0 -143
  233. package/lib/__tests__/ProgressBar.test.d.ts +0 -1
  234. package/lib/__tests__/ProgressBar.test.js +0 -68
  235. package/lib/__tests__/SelectMenu.test.d.ts +0 -1
  236. package/lib/__tests__/SelectMenu.test.js +0 -155
  237. package/lib/__tests__/SelectPanel.test.d.ts +0 -1
  238. package/lib/__tests__/SelectPanel.test.js +0 -80
  239. package/lib/__tests__/SideNav.test.d.ts +0 -1
  240. package/lib/__tests__/SideNav.test.js +0 -71
  241. package/lib/__tests__/Spinner.test.d.ts +0 -1
  242. package/lib/__tests__/Spinner.test.js +0 -53
  243. package/lib/__tests__/StateLabel.test.d.ts +0 -1
  244. package/lib/__tests__/StateLabel.test.js +0 -71
  245. package/lib/__tests__/StyledOcticon.test.d.ts +0 -1
  246. package/lib/__tests__/StyledOcticon.test.js +0 -40
  247. package/lib/__tests__/SubNav.test.d.ts +0 -1
  248. package/lib/__tests__/SubNav.test.js +0 -62
  249. package/lib/__tests__/SubNavLink.test.d.ts +0 -1
  250. package/lib/__tests__/SubNavLink.test.js +0 -49
  251. package/lib/__tests__/TabNav.test.d.ts +0 -1
  252. package/lib/__tests__/TabNav.test.js +0 -49
  253. package/lib/__tests__/Text.test.d.ts +0 -1
  254. package/lib/__tests__/Text.test.js +0 -105
  255. package/lib/__tests__/TextInput.test.d.ts +0 -1
  256. package/lib/__tests__/TextInput.test.js +0 -78
  257. package/lib/__tests__/TextInputWithTokens.test.d.ts +0 -1
  258. package/lib/__tests__/TextInputWithTokens.test.js +0 -389
  259. package/lib/__tests__/ThemeProvider.test.d.ts +0 -1
  260. package/lib/__tests__/ThemeProvider.test.js +0 -444
  261. package/lib/__tests__/Timeline.test.d.ts +0 -1
  262. package/lib/__tests__/Timeline.test.js +0 -75
  263. package/lib/__tests__/Token.test.d.ts +0 -1
  264. package/lib/__tests__/Token.test.js +0 -180
  265. package/lib/__tests__/Tooltip.test.d.ts +0 -1
  266. package/lib/__tests__/Tooltip.test.js +0 -69
  267. package/lib/__tests__/Truncate.test.d.ts +0 -1
  268. package/lib/__tests__/Truncate.test.js +0 -63
  269. package/lib/__tests__/UnderlineNav.test.d.ts +0 -1
  270. package/lib/__tests__/UnderlineNav.test.js +0 -72
  271. package/lib/__tests__/UnderlineNavLink.test.d.ts +0 -1
  272. package/lib/__tests__/UnderlineNavLink.test.js +0 -51
  273. package/lib/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
  274. package/lib/__tests__/behaviors/anchoredPosition.test.js +0 -390
  275. package/lib/__tests__/behaviors/focusTrap.test.d.ts +0 -1
  276. package/lib/__tests__/behaviors/focusTrap.test.js +0 -234
  277. package/lib/__tests__/behaviors/focusZone.test.d.ts +0 -1
  278. package/lib/__tests__/behaviors/focusZone.test.js +0 -570
  279. package/lib/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
  280. package/lib/__tests__/behaviors/iterateFocusableElements.test.js +0 -55
  281. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
  282. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -226
  283. package/lib/__tests__/filterObject.test.d.ts +0 -1
  284. package/lib/__tests__/filterObject.test.js +0 -30
  285. package/lib/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
  286. package/lib/__tests__/hooks/useAnchoredPosition.test.js +0 -54
  287. package/lib/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
  288. package/lib/__tests__/hooks/useOnEscapePress.test.js +0 -32
  289. package/lib/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
  290. package/lib/__tests__/hooks/useOnOutsideClick.test.js +0 -87
  291. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
  292. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -60
  293. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
  294. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -45
  295. package/lib/__tests__/theme.test.d.ts +0 -1
  296. package/lib/__tests__/theme.test.js +0 -36
  297. package/lib/__tests__/themeGet.test.d.ts +0 -1
  298. package/lib/__tests__/themeGet.test.js +0 -25
  299. package/lib/__tests__/useSafeTimeout.test.d.ts +0 -1
  300. package/lib/__tests__/useSafeTimeout.test.js +0 -45
  301. package/lib/stories/ActionList.stories.js +0 -453
  302. package/lib/stories/ActionMenu.stories.js +0 -338
  303. package/lib/stories/AnchoredOverlay.stories.js +0 -127
  304. package/lib/stories/Autocomplete.stories.js +0 -608
  305. package/lib/stories/AvatarStack.stories.js +0 -49
  306. package/lib/stories/Button.stories.js +0 -114
  307. package/lib/stories/ConfirmationDialog.stories.js +0 -111
  308. package/lib/stories/Dialog.stories.js +0 -265
  309. package/lib/stories/DropdownMenu.stories.js +0 -122
  310. package/lib/stories/IssueLabelToken.stories.js +0 -165
  311. package/lib/stories/Overlay.stories.js +0 -204
  312. package/lib/stories/Portal.stories.js +0 -104
  313. package/lib/stories/ProfileToken.stories.js +0 -162
  314. package/lib/stories/SelectPanel.stories.js +0 -399
  315. package/lib/stories/TextInputWithTokens.stories.js +0 -235
  316. package/lib/stories/ThemeProvider.stories.js +0 -102
  317. package/lib/stories/Token.stories.js +0 -159
  318. package/lib/stories/useAnchoredPosition.stories.js +0 -351
  319. package/lib/stories/useFocusTrap.stories.js +0 -356
  320. package/lib/stories/useFocusZone.stories.js +0 -599
  321. package/lib-esm/__tests__/ActionList.test.d.ts +0 -1
  322. package/lib-esm/__tests__/ActionList.test.js +0 -57
  323. package/lib-esm/__tests__/ActionList.types.test.d.ts +0 -6
  324. package/lib-esm/__tests__/ActionList.types.test.js +0 -45
  325. package/lib-esm/__tests__/ActionMenu.test.d.ts +0 -1
  326. package/lib-esm/__tests__/ActionMenu.test.js +0 -139
  327. package/lib-esm/__tests__/AnchoredOverlay.test.d.ts +0 -1
  328. package/lib-esm/__tests__/AnchoredOverlay.test.js +0 -134
  329. package/lib-esm/__tests__/Autocomplete.test.d.ts +0 -1
  330. package/lib-esm/__tests__/Autocomplete.test.js +0 -494
  331. package/lib-esm/__tests__/Avatar.test.d.ts +0 -1
  332. package/lib-esm/__tests__/Avatar.test.js +0 -56
  333. package/lib-esm/__tests__/AvatarStack.test.d.ts +0 -1
  334. package/lib-esm/__tests__/AvatarStack.test.js +0 -58
  335. package/lib-esm/__tests__/BorderBox.test.d.ts +0 -1
  336. package/lib-esm/__tests__/BorderBox.test.js +0 -47
  337. package/lib-esm/__tests__/Box.test.d.ts +0 -1
  338. package/lib-esm/__tests__/Box.test.js +0 -67
  339. package/lib-esm/__tests__/BranchName.test.d.ts +0 -1
  340. package/lib-esm/__tests__/BranchName.test.js +0 -26
  341. package/lib-esm/__tests__/Breadcrumbs.test.d.ts +0 -1
  342. package/lib-esm/__tests__/Breadcrumbs.test.js +0 -27
  343. package/lib-esm/__tests__/BreadcrumbsItem.test.d.ts +0 -1
  344. package/lib-esm/__tests__/BreadcrumbsItem.test.js +0 -39
  345. package/lib-esm/__tests__/Button.test.d.ts +0 -1
  346. package/lib-esm/__tests__/Button.test.js +0 -133
  347. package/lib-esm/__tests__/Caret.test.d.ts +0 -1
  348. package/lib-esm/__tests__/Caret.test.js +0 -42
  349. package/lib-esm/__tests__/CircleBadge.test.d.ts +0 -1
  350. package/lib-esm/__tests__/CircleBadge.test.js +0 -70
  351. package/lib-esm/__tests__/CircleOcticon.test.d.ts +0 -1
  352. package/lib-esm/__tests__/CircleOcticon.test.js +0 -59
  353. package/lib-esm/__tests__/ConfirmationDialog.test.d.ts +0 -1
  354. package/lib-esm/__tests__/ConfirmationDialog.test.js +0 -113
  355. package/lib-esm/__tests__/CounterLabel.test.d.ts +0 -1
  356. package/lib-esm/__tests__/CounterLabel.test.js +0 -47
  357. package/lib-esm/__tests__/Details.test.d.ts +0 -1
  358. package/lib-esm/__tests__/Details.test.js +0 -107
  359. package/lib-esm/__tests__/Dialog.test.d.ts +0 -1
  360. package/lib-esm/__tests__/Dialog.test.js +0 -171
  361. package/lib-esm/__tests__/Dropdown.test.d.ts +0 -1
  362. package/lib-esm/__tests__/Dropdown.test.js +0 -53
  363. package/lib-esm/__tests__/DropdownMenu.test.d.ts +0 -1
  364. package/lib-esm/__tests__/DropdownMenu.test.js +0 -137
  365. package/lib-esm/__tests__/FilterList.test.d.ts +0 -1
  366. package/lib-esm/__tests__/FilterList.test.js +0 -26
  367. package/lib-esm/__tests__/FilterListItem.test.d.ts +0 -1
  368. package/lib-esm/__tests__/FilterListItem.test.js +0 -36
  369. package/lib-esm/__tests__/FilteredSearch.test.d.ts +0 -1
  370. package/lib-esm/__tests__/FilteredSearch.test.js +0 -26
  371. package/lib-esm/__tests__/Flash.test.d.ts +0 -1
  372. package/lib-esm/__tests__/Flash.test.js +0 -51
  373. package/lib-esm/__tests__/Flex.test.d.ts +0 -1
  374. package/lib-esm/__tests__/Flex.test.js +0 -64
  375. package/lib-esm/__tests__/FormGroup.test.d.ts +0 -1
  376. package/lib-esm/__tests__/FormGroup.test.js +0 -44
  377. package/lib-esm/__tests__/Grid.test.d.ts +0 -1
  378. package/lib-esm/__tests__/Grid.test.js +0 -94
  379. package/lib-esm/__tests__/Header.test.d.ts +0 -1
  380. package/lib-esm/__tests__/Header.test.js +0 -48
  381. package/lib-esm/__tests__/Heading.test.d.ts +0 -1
  382. package/lib-esm/__tests__/Heading.test.js +0 -99
  383. package/lib-esm/__tests__/Label.test.d.ts +0 -1
  384. package/lib-esm/__tests__/Label.test.js +0 -36
  385. package/lib-esm/__tests__/LabelGroup.test.d.ts +0 -1
  386. package/lib-esm/__tests__/LabelGroup.test.js +0 -26
  387. package/lib-esm/__tests__/Link.test.d.ts +0 -1
  388. package/lib-esm/__tests__/Link.test.js +0 -60
  389. package/lib-esm/__tests__/Merge.types.test.d.ts +0 -30
  390. package/lib-esm/__tests__/Merge.types.test.js +0 -14
  391. package/lib-esm/__tests__/Overlay.test.d.ts +0 -1
  392. package/lib-esm/__tests__/Overlay.test.js +0 -123
  393. package/lib-esm/__tests__/Pagehead.test.d.ts +0 -1
  394. package/lib-esm/__tests__/Pagehead.test.js +0 -26
  395. package/lib-esm/__tests__/Pagination/Pagination.test.d.ts +0 -1
  396. package/lib-esm/__tests__/Pagination/Pagination.test.js +0 -35
  397. package/lib-esm/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
  398. package/lib-esm/__tests__/Pagination/PaginationModel.test.js +0 -182
  399. package/lib-esm/__tests__/PointerBox.test.d.ts +0 -1
  400. package/lib-esm/__tests__/PointerBox.test.js +0 -36
  401. package/lib-esm/__tests__/Popover.test.d.ts +0 -1
  402. package/lib-esm/__tests__/Popover.test.js +0 -53
  403. package/lib-esm/__tests__/Portal.test.d.ts +0 -1
  404. package/lib-esm/__tests__/Portal.test.js +0 -104
  405. package/lib-esm/__tests__/Position.test.d.ts +0 -1
  406. package/lib-esm/__tests__/Position.test.js +0 -133
  407. package/lib-esm/__tests__/ProgressBar.test.d.ts +0 -1
  408. package/lib-esm/__tests__/ProgressBar.test.js +0 -58
  409. package/lib-esm/__tests__/SelectMenu.test.d.ts +0 -1
  410. package/lib-esm/__tests__/SelectMenu.test.js +0 -145
  411. package/lib-esm/__tests__/SelectPanel.test.d.ts +0 -1
  412. package/lib-esm/__tests__/SelectPanel.test.js +0 -65
  413. package/lib-esm/__tests__/SideNav.test.d.ts +0 -1
  414. package/lib-esm/__tests__/SideNav.test.js +0 -60
  415. package/lib-esm/__tests__/Spinner.test.d.ts +0 -1
  416. package/lib-esm/__tests__/Spinner.test.js +0 -43
  417. package/lib-esm/__tests__/StateLabel.test.d.ts +0 -1
  418. package/lib-esm/__tests__/StateLabel.test.js +0 -61
  419. package/lib-esm/__tests__/StyledOcticon.test.d.ts +0 -1
  420. package/lib-esm/__tests__/StyledOcticon.test.js +0 -29
  421. package/lib-esm/__tests__/SubNav.test.d.ts +0 -1
  422. package/lib-esm/__tests__/SubNav.test.js +0 -50
  423. package/lib-esm/__tests__/SubNavLink.test.d.ts +0 -1
  424. package/lib-esm/__tests__/SubNavLink.test.js +0 -39
  425. package/lib-esm/__tests__/TabNav.test.d.ts +0 -1
  426. package/lib-esm/__tests__/TabNav.test.js +0 -39
  427. package/lib-esm/__tests__/Text.test.d.ts +0 -1
  428. package/lib-esm/__tests__/Text.test.js +0 -93
  429. package/lib-esm/__tests__/TextInput.test.d.ts +0 -1
  430. package/lib-esm/__tests__/TextInput.test.js +0 -68
  431. package/lib-esm/__tests__/TextInputWithTokens.test.d.ts +0 -1
  432. package/lib-esm/__tests__/TextInputWithTokens.test.js +0 -341
  433. package/lib-esm/__tests__/ThemeProvider.test.d.ts +0 -1
  434. package/lib-esm/__tests__/ThemeProvider.test.js +0 -408
  435. package/lib-esm/__tests__/Timeline.test.d.ts +0 -1
  436. package/lib-esm/__tests__/Timeline.test.js +0 -65
  437. package/lib-esm/__tests__/Token.test.d.ts +0 -1
  438. package/lib-esm/__tests__/Token.test.js +0 -166
  439. package/lib-esm/__tests__/Tooltip.test.d.ts +0 -1
  440. package/lib-esm/__tests__/Tooltip.test.js +0 -59
  441. package/lib-esm/__tests__/Truncate.test.d.ts +0 -1
  442. package/lib-esm/__tests__/Truncate.test.js +0 -53
  443. package/lib-esm/__tests__/UnderlineNav.test.d.ts +0 -1
  444. package/lib-esm/__tests__/UnderlineNav.test.js +0 -60
  445. package/lib-esm/__tests__/UnderlineNavLink.test.d.ts +0 -1
  446. package/lib-esm/__tests__/UnderlineNavLink.test.js +0 -41
  447. package/lib-esm/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
  448. package/lib-esm/__tests__/behaviors/anchoredPosition.test.js +0 -388
  449. package/lib-esm/__tests__/behaviors/focusTrap.test.d.ts +0 -1
  450. package/lib-esm/__tests__/behaviors/focusTrap.test.js +0 -227
  451. package/lib-esm/__tests__/behaviors/focusZone.test.d.ts +0 -1
  452. package/lib-esm/__tests__/behaviors/focusZone.test.js +0 -487
  453. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
  454. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.js +0 -48
  455. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
  456. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -224
  457. package/lib-esm/__tests__/filterObject.test.d.ts +0 -1
  458. package/lib-esm/__tests__/filterObject.test.js +0 -27
  459. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
  460. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.js +0 -46
  461. package/lib-esm/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
  462. package/lib-esm/__tests__/hooks/useOnEscapePress.test.js +0 -23
  463. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
  464. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.js +0 -68
  465. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
  466. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -52
  467. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
  468. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -36
  469. package/lib-esm/__tests__/theme.test.d.ts +0 -1
  470. package/lib-esm/__tests__/theme.test.js +0 -33
  471. package/lib-esm/__tests__/themeGet.test.d.ts +0 -1
  472. package/lib-esm/__tests__/themeGet.test.js +0 -22
  473. package/lib-esm/__tests__/useSafeTimeout.test.d.ts +0 -1
  474. package/lib-esm/__tests__/useSafeTimeout.test.js +0 -39
  475. package/lib-esm/stories/ActionList.stories.js +0 -394
  476. package/lib-esm/stories/ActionMenu.stories.js +0 -293
  477. package/lib-esm/stories/AnchoredOverlay.stories.js +0 -101
  478. package/lib-esm/stories/Autocomplete.stories.js +0 -549
  479. package/lib-esm/stories/AvatarStack.stories.js +0 -32
  480. package/lib-esm/stories/Button.stories.js +0 -78
  481. package/lib-esm/stories/ConfirmationDialog.stories.js +0 -86
  482. package/lib-esm/stories/Dialog.stories.js +0 -240
  483. package/lib-esm/stories/DropdownMenu.stories.js +0 -94
  484. package/lib-esm/stories/IssueLabelToken.stories.js +0 -139
  485. package/lib-esm/stories/Overlay.stories.js +0 -173
  486. package/lib-esm/stories/Portal.stories.js +0 -68
  487. package/lib-esm/stories/ProfileToken.stories.js +0 -136
  488. package/lib-esm/stories/SelectPanel.stories.js +0 -334
  489. package/lib-esm/stories/TextInputWithTokens.stories.js +0 -196
  490. package/lib-esm/stories/ThemeProvider.stories.js +0 -83
  491. package/lib-esm/stories/Token.stories.js +0 -133
  492. package/lib-esm/stories/useAnchoredPosition.stories.js +0 -313
  493. package/lib-esm/stories/useFocusTrap.stories.js +0 -309
  494. package/lib-esm/stories/useFocusZone.stories.js +0 -554
  495. package/migrating.md +0 -250
  496. package/now.json +0 -17
  497. package/package-lock.json +0 -29369
  498. package/rollup.config.js +0 -36
  499. package/script/build +0 -19
  500. package/script/build-storybook +0 -10
  501. package/script/setup +0 -12
  502. package/src/ActionList/Divider.tsx +0 -25
  503. package/src/ActionList/Group.tsx +0 -45
  504. package/src/ActionList/Header.tsx +0 -74
  505. package/src/ActionList/Item.tsx +0 -483
  506. package/src/ActionList/List.tsx +0 -258
  507. package/src/ActionList/index.ts +0 -21
  508. package/src/ActionMenu.tsx +0 -106
  509. package/src/AnchoredOverlay/AnchoredOverlay.tsx +0 -191
  510. package/src/AnchoredOverlay/index.ts +0 -2
  511. package/src/Autocomplete/Autocomplete.tsx +0 -103
  512. package/src/Autocomplete/AutocompleteContext.tsx +0 -19
  513. package/src/Autocomplete/AutocompleteInput.tsx +0 -179
  514. package/src/Autocomplete/AutocompleteMenu.tsx +0 -341
  515. package/src/Autocomplete/AutocompleteOverlay.tsx +0 -68
  516. package/src/Autocomplete/index.ts +0 -2
  517. package/src/Avatar.tsx +0 -46
  518. package/src/AvatarPair.tsx +0 -35
  519. package/src/AvatarStack.tsx +0 -159
  520. package/src/BaseStyles.tsx +0 -53
  521. package/src/BorderBox.tsx +0 -18
  522. package/src/Box.tsx +0 -54
  523. package/src/BranchName.tsx +0 -19
  524. package/src/Breadcrumbs.tsx +0 -101
  525. package/src/Button/Button.tsx +0 -40
  526. package/src/Button/ButtonBase.tsx +0 -43
  527. package/src/Button/ButtonClose.tsx +0 -40
  528. package/src/Button/ButtonDanger.tsx +0 -43
  529. package/src/Button/ButtonGroup.tsx +0 -55
  530. package/src/Button/ButtonInvisible.tsx +0 -27
  531. package/src/Button/ButtonOutline.tsx +0 -43
  532. package/src/Button/ButtonPrimary.tsx +0 -41
  533. package/src/Button/ButtonStyles.tsx +0 -36
  534. package/src/Button/ButtonTableList.tsx +0 -58
  535. package/src/Button/index.ts +0 -16
  536. package/src/Caret.tsx +0 -133
  537. package/src/CircleBadge.tsx +0 -55
  538. package/src/CircleOcticon.tsx +0 -37
  539. package/src/CounterLabel.tsx +0 -52
  540. package/src/Details.tsx +0 -23
  541. package/src/Dialog/ConfirmationDialog.tsx +0 -184
  542. package/src/Dialog/Dialog.tsx +0 -432
  543. package/src/Dialog.tsx +0 -149
  544. package/src/Dropdown.tsx +0 -158
  545. package/src/DropdownMenu/DropdownButton.tsx +0 -15
  546. package/src/DropdownMenu/DropdownMenu.tsx +0 -115
  547. package/src/DropdownMenu/index.ts +0 -4
  548. package/src/DropdownStyles.ts +0 -128
  549. package/src/FilterList.tsx +0 -81
  550. package/src/FilteredActionList/FilteredActionList.tsx +0 -142
  551. package/src/FilteredActionList/index.ts +0 -2
  552. package/src/FilteredSearch.tsx +0 -28
  553. package/src/Flash.tsx +0 -77
  554. package/src/Flex.tsx +0 -15
  555. package/src/FormGroup.tsx +0 -27
  556. package/src/Grid.tsx +0 -15
  557. package/src/Header.tsx +0 -84
  558. package/src/Heading.tsx +0 -21
  559. package/src/Label.tsx +0 -75
  560. package/src/LabelGroup.tsx +0 -18
  561. package/src/Link.tsx +0 -46
  562. package/src/Overlay.tsx +0 -197
  563. package/src/Pagehead.tsx +0 -17
  564. package/src/Pagination/Pagination.tsx +0 -214
  565. package/src/Pagination/index.ts +0 -4
  566. package/src/Pagination/model.tsx +0 -187
  567. package/src/PointerBox.tsx +0 -31
  568. package/src/Popover.tsx +0 -236
  569. package/src/Portal/Portal.tsx +0 -96
  570. package/src/Portal/index.ts +0 -5
  571. package/src/Position.tsx +0 -63
  572. package/src/ProgressBar.tsx +0 -52
  573. package/src/SelectMenu/SelectMenu.tsx +0 -125
  574. package/src/SelectMenu/SelectMenuContext.tsx +0 -9
  575. package/src/SelectMenu/SelectMenuDivider.tsx +0 -25
  576. package/src/SelectMenu/SelectMenuFilter.tsx +0 -51
  577. package/src/SelectMenu/SelectMenuFooter.tsx +0 -28
  578. package/src/SelectMenu/SelectMenuHeader.tsx +0 -50
  579. package/src/SelectMenu/SelectMenuItem.tsx +0 -137
  580. package/src/SelectMenu/SelectMenuList.tsx +0 -42
  581. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +0 -24
  582. package/src/SelectMenu/SelectMenuModal.tsx +0 -121
  583. package/src/SelectMenu/SelectMenuTab.tsx +0 -88
  584. package/src/SelectMenu/SelectMenuTabPanel.tsx +0 -30
  585. package/src/SelectMenu/SelectMenuTabs.tsx +0 -44
  586. package/src/SelectMenu/hooks/useKeyboardNav.js +0 -90
  587. package/src/SelectMenu/index.ts +0 -15
  588. package/src/SelectPanel/SelectPanel.tsx +0 -173
  589. package/src/SelectPanel/index.ts +0 -2
  590. package/src/SideNav.tsx +0 -193
  591. package/src/Spinner.tsx +0 -59
  592. package/src/StateLabel.tsx +0 -102
  593. package/src/StyledOcticon.tsx +0 -24
  594. package/src/SubNav.tsx +0 -129
  595. package/src/TabNav.tsx +0 -77
  596. package/src/Text.tsx +0 -13
  597. package/src/TextInput.tsx +0 -68
  598. package/src/TextInputWithTokens.tsx +0 -271
  599. package/src/ThemeProvider.tsx +0 -176
  600. package/src/Timeline.tsx +0 -141
  601. package/src/Token/AvatarToken.tsx +0 -54
  602. package/src/Token/IssueLabelToken.tsx +0 -150
  603. package/src/Token/Token.tsx +0 -112
  604. package/src/Token/TokenBase.tsx +0 -134
  605. package/src/Token/_RemoveTokenButton.tsx +0 -98
  606. package/src/Token/_TokenTextContainer.tsx +0 -47
  607. package/src/Token/index.ts +0 -3
  608. package/src/Tooltip.tsx +0 -263
  609. package/src/Truncate.tsx +0 -36
  610. package/src/UnderlineNav.tsx +0 -110
  611. package/src/_TextInputWrapper.tsx +0 -105
  612. package/src/_UnstyledTextInput.tsx +0 -19
  613. package/src/__tests__/.eslintrc.json +0 -11
  614. package/src/__tests__/ActionList.test.tsx +0 -53
  615. package/src/__tests__/ActionList.types.test.tsx +0 -51
  616. package/src/__tests__/ActionMenu.test.tsx +0 -136
  617. package/src/__tests__/AnchoredOverlay.test.tsx +0 -150
  618. package/src/__tests__/Autocomplete.test.tsx +0 -444
  619. package/src/__tests__/Avatar.test.tsx +0 -44
  620. package/src/__tests__/AvatarStack.test.tsx +0 -48
  621. package/src/__tests__/BorderBox.test.tsx +0 -43
  622. package/src/__tests__/Box.test.tsx +0 -42
  623. package/src/__tests__/BranchName.test.tsx +0 -26
  624. package/src/__tests__/Breadcrumbs.test.tsx +0 -27
  625. package/src/__tests__/BreadcrumbsItem.test.tsx +0 -31
  626. package/src/__tests__/Button.test.tsx +0 -128
  627. package/src/__tests__/Caret.test.tsx +0 -36
  628. package/src/__tests__/CircleBadge.test.tsx +0 -66
  629. package/src/__tests__/CircleOcticon.test.tsx +0 -50
  630. package/src/__tests__/ConfirmationDialog.test.tsx +0 -120
  631. package/src/__tests__/CounterLabel.test.tsx +0 -50
  632. package/src/__tests__/Details.test.tsx +0 -115
  633. package/src/__tests__/Dialog.test.tsx +0 -155
  634. package/src/__tests__/Dropdown.test.tsx +0 -53
  635. package/src/__tests__/DropdownMenu.test.tsx +0 -136
  636. package/src/__tests__/FilterList.test.tsx +0 -26
  637. package/src/__tests__/FilterListItem.test.tsx +0 -31
  638. package/src/__tests__/FilteredSearch.test.tsx +0 -26
  639. package/src/__tests__/Flash.test.tsx +0 -45
  640. package/src/__tests__/Flex.test.tsx +0 -58
  641. package/src/__tests__/FormGroup.test.tsx +0 -38
  642. package/src/__tests__/Grid.test.tsx +0 -82
  643. package/src/__tests__/Header.test.tsx +0 -49
  644. package/src/__tests__/Heading.test.tsx +0 -91
  645. package/src/__tests__/Label.test.tsx +0 -34
  646. package/src/__tests__/LabelGroup.test.tsx +0 -30
  647. package/src/__tests__/Link.test.tsx +0 -47
  648. package/src/__tests__/Merge.types.test.ts +0 -39
  649. package/src/__tests__/Overlay.test.tsx +0 -103
  650. package/src/__tests__/Pagehead.test.tsx +0 -23
  651. package/src/__tests__/Pagination/Pagination.test.tsx +0 -30
  652. package/src/__tests__/Pagination/PaginationModel.test.tsx +0 -133
  653. package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +0 -184
  654. package/src/__tests__/PointerBox.test.tsx +0 -34
  655. package/src/__tests__/Popover.test.tsx +0 -68
  656. package/src/__tests__/Portal.test.tsx +0 -103
  657. package/src/__tests__/Position.test.tsx +0 -117
  658. package/src/__tests__/ProgressBar.test.tsx +0 -40
  659. package/src/__tests__/SelectMenu.test.tsx +0 -142
  660. package/src/__tests__/SelectPanel.test.tsx +0 -63
  661. package/src/__tests__/SideNav.test.tsx +0 -62
  662. package/src/__tests__/Spinner.test.tsx +0 -42
  663. package/src/__tests__/StateLabel.test.tsx +0 -48
  664. package/src/__tests__/StyledOcticon.test.tsx +0 -26
  665. package/src/__tests__/SubNav.test.tsx +0 -50
  666. package/src/__tests__/SubNavLink.test.tsx +0 -31
  667. package/src/__tests__/TabNav.test.tsx +0 -32
  668. package/src/__tests__/Text.test.tsx +0 -78
  669. package/src/__tests__/TextInput.test.tsx +0 -49
  670. package/src/__tests__/TextInputWithTokens.test.tsx +0 -262
  671. package/src/__tests__/ThemeProvider.test.tsx +0 -441
  672. package/src/__tests__/Timeline.test.tsx +0 -58
  673. package/src/__tests__/Token.test.tsx +0 -118
  674. package/src/__tests__/Tooltip.test.tsx +0 -52
  675. package/src/__tests__/Truncate.test.tsx +0 -43
  676. package/src/__tests__/UnderlineNav.test.tsx +0 -58
  677. package/src/__tests__/UnderlineNavLink.test.tsx +0 -31
  678. package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +0 -223
  679. package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +0 -80
  680. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +0 -332
  681. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +0 -3414
  682. package/src/__tests__/__snapshots__/Avatar.test.tsx.snap +0 -19
  683. package/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +0 -377
  684. package/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +0 -14
  685. package/src/__tests__/__snapshots__/Box.test.tsx.snap +0 -201
  686. package/src/__tests__/__snapshots__/BranchName.test.tsx.snap +0 -17
  687. package/src/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap +0 -29
  688. package/src/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +0 -79
  689. package/src/__tests__/__snapshots__/Button.test.tsx.snap +0 -832
  690. package/src/__tests__/__snapshots__/Caret.test.tsx.snap +0 -373
  691. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +0 -141
  692. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +0 -64
  693. package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +0 -89
  694. package/src/__tests__/__snapshots__/CounterLabel.test.tsx.snap +0 -22
  695. package/src/__tests__/__snapshots__/Details.test.tsx.snap +0 -15
  696. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +0 -200
  697. package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +0 -249
  698. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +0 -106
  699. package/src/__tests__/__snapshots__/FilterList.test.tsx.snap +0 -13
  700. package/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap +0 -80
  701. package/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap +0 -32
  702. package/src/__tests__/__snapshots__/Flash.test.tsx.snap +0 -32
  703. package/src/__tests__/__snapshots__/Flex.test.tsx.snap +0 -130
  704. package/src/__tests__/__snapshots__/FormGroup.test.tsx.snap +0 -25
  705. package/src/__tests__/__snapshots__/Grid.test.tsx.snap +0 -178
  706. package/src/__tests__/__snapshots__/Header.test.tsx.snap +0 -79
  707. package/src/__tests__/__snapshots__/Heading.test.tsx.snap +0 -13
  708. package/src/__tests__/__snapshots__/Label.test.tsx.snap +0 -74
  709. package/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap +0 -15
  710. package/src/__tests__/__snapshots__/Link.test.tsx.snap +0 -213
  711. package/src/__tests__/__snapshots__/Pagehead.test.tsx.snap +0 -15
  712. package/src/__tests__/__snapshots__/PointerBox.test.tsx.snap +0 -174
  713. package/src/__tests__/__snapshots__/Popover.test.tsx.snap +0 -4687
  714. package/src/__tests__/__snapshots__/Position.test.tsx.snap +0 -44
  715. package/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +0 -53
  716. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +0 -469
  717. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +0 -123
  718. package/src/__tests__/__snapshots__/SideNav.test.tsx.snap +0 -143
  719. package/src/__tests__/__snapshots__/Spinner.test.tsx.snap +0 -33
  720. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +0 -388
  721. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +0 -25
  722. package/src/__tests__/__snapshots__/SubNav.test.tsx.snap +0 -44
  723. package/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +0 -199
  724. package/src/__tests__/__snapshots__/TabNav.test.tsx.snap +0 -58
  725. package/src/__tests__/__snapshots__/Text.test.tsx.snap +0 -7
  726. package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +0 -440
  727. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +0 -5308
  728. package/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +0 -15
  729. package/src/__tests__/__snapshots__/Timeline.test.tsx.snap +0 -159
  730. package/src/__tests__/__snapshots__/Token.test.tsx.snap +0 -3787
  731. package/src/__tests__/__snapshots__/Tooltip.test.tsx.snap +0 -227
  732. package/src/__tests__/__snapshots__/Truncate.test.tsx.snap +0 -17
  733. package/src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap +0 -59
  734. package/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +0 -130
  735. package/src/__tests__/behaviors/anchoredPosition.test.ts +0 -295
  736. package/src/__tests__/behaviors/focusTrap.test.tsx +0 -236
  737. package/src/__tests__/behaviors/focusZone.test.tsx +0 -549
  738. package/src/__tests__/behaviors/iterateFocusableElements.test.tsx +0 -61
  739. package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts +0 -195
  740. package/src/__tests__/filterObject.test.ts +0 -54
  741. package/src/__tests__/hooks/useAnchoredPosition.test.tsx +0 -31
  742. package/src/__tests__/hooks/useOnEscapePress.test.tsx +0 -16
  743. package/src/__tests__/hooks/useOnOutsideClick.test.tsx +0 -48
  744. package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx +0 -48
  745. package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx +0 -39
  746. package/src/__tests__/theme.test.ts +0 -41
  747. package/src/__tests__/themeGet.test.ts +0 -15
  748. package/src/__tests__/useSafeTimeout.test.tsx +0 -36
  749. package/src/behaviors/anchoredPosition.ts +0 -442
  750. package/src/behaviors/focusTrap.ts +0 -184
  751. package/src/behaviors/focusZone.ts +0 -713
  752. package/src/behaviors/scrollIntoViewingArea.ts +0 -27
  753. package/src/constants.ts +0 -62
  754. package/src/hooks/index.ts +0 -11
  755. package/src/hooks/useAnchoredPosition.ts +0 -53
  756. package/src/hooks/useCombinedRefs.ts +0 -40
  757. package/src/hooks/useDetails.tsx +0 -54
  758. package/src/hooks/useDialog.ts +0 -121
  759. package/src/hooks/useFocusTrap.ts +0 -80
  760. package/src/hooks/useFocusZone.ts +0 -64
  761. package/src/hooks/useOnEscapePress.ts +0 -63
  762. package/src/hooks/useOnOutsideClick.tsx +0 -82
  763. package/src/hooks/useOpenAndCloseFocus.ts +0 -32
  764. package/src/hooks/useOverlay.tsx +0 -34
  765. package/src/hooks/useProvidedRefOrCreate.ts +0 -14
  766. package/src/hooks/useProvidedStateOrCreate.ts +0 -27
  767. package/src/hooks/useRenderForcingRef.ts +0 -22
  768. package/src/hooks/useResizeObserver.ts +0 -11
  769. package/src/hooks/useSafeTimeout.ts +0 -38
  770. package/src/hooks/useScrollFlash.ts +0 -21
  771. package/src/index.ts +0 -170
  772. package/src/polyfills/eventListenerSignal.ts +0 -66
  773. package/src/stories/ActionList.stories.tsx +0 -437
  774. package/src/stories/ActionMenu.stories.tsx +0 -322
  775. package/src/stories/AnchoredOverlay.stories.tsx +0 -117
  776. package/src/stories/Autocomplete.stories.tsx +0 -572
  777. package/src/stories/AvatarStack.stories.tsx +0 -37
  778. package/src/stories/Button.stories.tsx +0 -88
  779. package/src/stories/ConfirmationDialog.stories.tsx +0 -105
  780. package/src/stories/Dialog.stories.tsx +0 -240
  781. package/src/stories/DropdownMenu.stories.tsx +0 -84
  782. package/src/stories/IssueLabelToken.stories.tsx +0 -138
  783. package/src/stories/Overlay.stories.tsx +0 -213
  784. package/src/stories/Portal.stories.tsx +0 -109
  785. package/src/stories/ProfileToken.stories.tsx +0 -129
  786. package/src/stories/SelectPanel.stories.tsx +0 -353
  787. package/src/stories/TextInputWithTokens.stories.tsx +0 -146
  788. package/src/stories/ThemeProvider.stories.tsx +0 -104
  789. package/src/stories/Token.stories.tsx +0 -126
  790. package/src/stories/useAnchoredPosition.stories.tsx +0 -320
  791. package/src/stories/useFocusTrap.stories.tsx +0 -400
  792. package/src/stories/useFocusZone.stories.tsx +0 -663
  793. package/src/sx.ts +0 -9
  794. package/src/theme-preval.js +0 -79
  795. package/src/theme.ts +0 -3
  796. package/src/utils/deprecate.tsx +0 -73
  797. package/src/utils/isNumeric.tsx +0 -4
  798. package/src/utils/iterateFocusableElements.ts +0 -121
  799. package/src/utils/ssr.tsx +0 -1
  800. package/src/utils/test-deprecations.tsx +0 -19
  801. package/src/utils/test-helpers.tsx +0 -7
  802. package/src/utils/test-matchers.tsx +0 -109
  803. package/src/utils/testing.tsx +0 -242
  804. package/src/utils/theme.js +0 -64
  805. package/src/utils/types/AriaRole.ts +0 -71
  806. package/src/utils/types/ComponentProps.ts +0 -13
  807. package/src/utils/types/Flatten.ts +0 -4
  808. package/src/utils/types/MandateProps.ts +0 -19
  809. package/src/utils/types/Merge.ts +0 -20
  810. package/src/utils/types/index.ts +0 -5
  811. package/src/utils/uniqueId.ts +0 -6
  812. package/src/utils/userAgent.ts +0 -7
  813. package/stats.html +0 -3279
  814. package/tsconfig.build.json +0 -7
  815. package/tsconfig.json +0 -20
@@ -1,32 +0,0 @@
1
- ---
2
- title: Spinner
3
- status: Alpha
4
- description: Use spinners to let users know that content is being loaded.
5
- componentId: spinner
6
- source: https://github.com/primer/components/blob/main/src/Spinner.tsx
7
- ---
8
-
9
- import {Props} from '../src/props'
10
- import {Spinner} from '@primer/components'
11
-
12
- ```jsx live
13
- <Spinner />
14
- ```
15
-
16
- ## Props
17
-
18
- <Props of={Spinner} />
19
-
20
- ## Examples
21
-
22
- ### Small
23
-
24
- ```jsx live
25
- <Spinner size="small" />
26
- ```
27
-
28
- ### Large
29
-
30
- ```jsx live
31
- <Spinner size="large" />
32
- ```
@@ -1,35 +0,0 @@
1
- ---
2
- title: StateLabel
3
- ---
4
-
5
- Use StateLabel components to show the status of an issue or pull request.
6
-
7
- ## Default example
8
-
9
- ```jsx live
10
- <>
11
- <StateLabel status="issueOpened">Open</StateLabel>
12
- <StateLabel status="issueClosed">Closed</StateLabel>
13
- <StateLabel status="pullOpened">Open</StateLabel>
14
- <StateLabel status="pullClosed">Closed</StateLabel>
15
- <StateLabel status="pullMerged">Merged</StateLabel>
16
- <StateLabel status="draft">Draft</StateLabel>
17
- </>
18
- ```
19
-
20
- ## System props
21
-
22
- <Note variant="warning">
23
-
24
- System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
25
-
26
- </Note>
27
-
28
- StateLabel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
29
-
30
- ## Component props
31
-
32
- | Name | Type | Default | Description |
33
- | :------ | :----- | :------: | :------------------------------------------------------------------------------------------------ |
34
- | variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel. |
35
- | status | String | | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, or `draft`. |
@@ -1,36 +0,0 @@
1
- ---
2
- title: StyledOcticon
3
- tags: icon
4
- ---
5
-
6
- StyledOcticon renders an [Octicon](https://octicons.github.com) with common system props, including `color`, margin, and padding.
7
-
8
- ## Default example
9
-
10
- ```jsx live
11
- <>
12
- <StyledOcticon icon={CheckIcon} size={32} color="success.fg" mr={2} />
13
- <StyledOcticon icon={XIcon} size={32} color="danger.fg" />
14
- </>
15
- ```
16
-
17
- ## System props
18
-
19
- <Note variant="warning">
20
-
21
- System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
22
-
23
- </Note>
24
-
25
- StyledOcticon components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
26
-
27
- ## Component props
28
-
29
- StyledOcticon passes all of its props except the common system props down to the [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react#usage), including:
30
-
31
- | Name | Type | Default | Description |
32
- | :------------ | :-------- | :-----------: | :----------------------------------------------------------------------------------------------------------- |
33
- | ariaLabel | String | | Specifies the `aria-label` attribute, which is read verbatim by screen readers |
34
- | icon | Component | | [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react) used in the component |
35
- | size | Number | 16 | Sets the uniform `width` and `height` of the SVG element |
36
- | verticalAlign | String | `text-bottom` | Sets the `vertical-align` CSS property |
@@ -1,102 +0,0 @@
1
- ---
2
- title: SubNav
3
- ---
4
-
5
- Use the SubNav component for navigation on a dashboard-type interface with another set of navigation components above it. This helps distinguish navigation hierarchy.
6
-
7
- To use SubNav with [react-router](https://github.com/ReactTraining/react-router) or
8
- [react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
9
- `as={NavLink}` and omit the `selected` prop.
10
- This ensures that the NavLink gets `activeClassName='selected'`
11
-
12
- **Attention:** Make sure to properly label your `SubNav` with an `aria-label` to provide context about the type of navigation contained in `SubNav`.
13
-
14
- ## Default example
15
-
16
- ```jsx live
17
- <SubNav aria-label="Main">
18
- <SubNav.Links>
19
- <SubNav.Link href="#home" selected>
20
- Home
21
- </SubNav.Link>
22
- <SubNav.Link href="#documentation">Documentation</SubNav.Link>
23
- <SubNav.Link href="#support">Support</SubNav.Link>
24
- </SubNav.Links>
25
- </SubNav>
26
- ```
27
-
28
- ## SubNav with search example
29
-
30
- ```jsx live
31
- <SubNav aria-label="Main">
32
- <SubNav.Links>
33
- <SubNav.Link href="#home" selected>
34
- Home
35
- </SubNav.Link>
36
- <SubNav.Link href="#documentation">Documentation</SubNav.Link>
37
- <SubNav.Link href="#support">Support</SubNav.Link>
38
- </SubNav.Links>
39
-
40
- <TextInput type="search" icon={SearchIcon} sx={{width: 320}} />
41
- </SubNav>
42
- ```
43
-
44
- ## SubNav with filtered search example
45
-
46
- ```jsx live
47
- <SubNav aria-label="Main">
48
- <FilteredSearch>
49
- <Dropdown>
50
- <Dropdown.Button>Filter</Dropdown.Button>
51
- <Dropdown.Menu direction="sw">
52
- <Dropdown.Item>
53
- <a href="#">Item 1</a>
54
- </Dropdown.Item>
55
- <Dropdown.Item>
56
- <a href="#">Item 2</a>
57
- </Dropdown.Item>
58
- <Dropdown.Item>
59
- <a href="#">Item 3</a>
60
- </Dropdown.Item>
61
- </Dropdown.Menu>
62
- </Dropdown>
63
- <TextInput type="search" icon={SearchIcon} width={320} />
64
- </FilteredSearch>
65
- <SubNav.Links>
66
- <SubNav.Link href="#home" selected>
67
- Home
68
- </SubNav.Link>
69
- <SubNav.Link href="#documentation">Documentation</SubNav.Link>
70
- <SubNav.Link href="#support">Support</SubNav.Link>
71
- </SubNav.Links>
72
- </SubNav>
73
- ```
74
-
75
- ## System props
76
-
77
- <Note variant="warning">
78
-
79
- System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
80
-
81
- </Note>
82
-
83
- SubNav and SubNav.Link components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
84
-
85
- ## Component props
86
-
87
- ### SubNav
88
-
89
- | Prop name | Type | Description |
90
- | :--------- | :------ | :------------------------------------------------------------------------------------- |
91
- | actions | Node | Place another element, such as a button, to the opposite side of the navigation items. |
92
- | align | String | Use `right` to have navigation items aligned right. |
93
- | full | Boolean | Used to make navigation fill the width of the container. |
94
- | aria-label | String | Used to set the `aria-label` on the top level `<nav>` element. |
95
-
96
- ### SubNav.Link
97
-
98
- | Prop name | Type | Description |
99
- | :-------- | :------ | :----------------------------------------------- |
100
- | as | String | sets the HTML tag for the component |
101
- | href | String | URL to be used for the Link |
102
- | selected | Boolean | Used to style the link as selected or unselected |
@@ -1,50 +0,0 @@
1
- ---
2
- title: TabNav
3
- ---
4
-
5
- Use the TabNav component to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
6
-
7
- To use TabNav with [react-router](https://github.com/ReactTraining/react-router) or
8
- [react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
9
- `as={NavLink}` and omit the `selected` prop.
10
- This ensures that the NavLink gets `activeClassName='selected'`
11
-
12
- **Attention:** Make sure to properly label your `TabNav` with an `aria-label` to provide context about the type of navigation contained in `TabNav`.
13
-
14
- ## Default example
15
-
16
- ```jsx live
17
- <TabNav aria-label="Main">
18
- <TabNav.Link href="#home" selected>
19
- Home
20
- </TabNav.Link>
21
- <TabNav.Link href="#documentation">Documentation</TabNav.Link>
22
- <TabNav.Link href="#support">Support</TabNav.Link>
23
- </TabNav>
24
- ```
25
-
26
- ## System props
27
-
28
- <Note variant="warning">
29
-
30
- System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
31
-
32
- </Note>
33
-
34
- TabNav and TabNav.Link components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
35
-
36
- ## Component props
37
-
38
- ### TabNav
39
-
40
- | Prop name | Type | Description |
41
- | :--------- | :----- | :------------------------------------------------------------- |
42
- | aria-label | String | Used to set the `aria-label` on the top level `<nav>` element. |
43
-
44
- ### TabNav.Link
45
-
46
- | Prop name | Type | Description |
47
- | :-------- | :------ | :----------------------------------------------- |
48
- | as | String | sets the HTML tag for the component |
49
- | href | String | URL to be used for the Link |
50
- | selected | Boolean | Used to style the link as selected or unselected |
@@ -1,31 +0,0 @@
1
- ---
2
- title: Text
3
- ---
4
-
5
- The Text component is a wrapper component that will apply typography styles to the text inside.
6
-
7
- ## Default example
8
-
9
- ```jsx live
10
- <>
11
- <Text as='p' fontWeight="bold">bold</Text>
12
- <Text as='p' color="danger.fg">danger color</Text>
13
- <Text as='p' color="fg.onEmphasis" bg="neutral.emphasis" p={2}>inverse colors</Text>
14
- </>
15
- ```
16
-
17
- ## System props
18
-
19
- <Note variant="warning">
20
-
21
- System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
22
-
23
- </Note>
24
-
25
- Text components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
26
-
27
- ## Component props
28
-
29
- | Name | Type | Default | Description |
30
- | :--- | :----- | :-----: | :---------------------------------- |
31
- | as | String | `span` | Sets the HTML tag for the component |
@@ -1,34 +0,0 @@
1
- ---
2
- title: TextInput
3
- ---
4
-
5
- TextInput is a form component to add default styling to the native text input.
6
-
7
- **Note:** Don't forget to set `aria-label` to make the TextInput accessible to screen reader users.
8
-
9
- ## Default example
10
-
11
- ```jsx live
12
- <>
13
- <TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
14
-
15
- <TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
16
-
17
- <TextInput sx={{ml: 4}} icon={SearchIcon} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
18
- </>
19
- ```
20
-
21
- ## Component props
22
-
23
- Native `<input>` attributes are forwarded to the underlying React `input` component and are not listed below.
24
-
25
- | Name | Type | Default | Description |
26
- | :--------- | :------------------------------------------------------------------------ | :-----: | :------------------------------------------------------------------------------------ |
27
- | aria-label | String | | Required. Allows input to be accessible. |
28
- | block | Boolean | | Adds `display: block` to element |
29
- | contrast | Boolean | | Changes background color to a higher contrast color |
30
- | variant | String | | Can be either `small` or `large`. Creates a smaller or larger input than the default. |
31
- | width | String or Number | | Set the width of the input |
32
- | maxWidth | String or Number or [Array](https://styled-system.com/guides/array-props) | | Set the maximum width of the input |
33
- | minWidth | String or Number or [Array](https://styled-system.com/guides/array-props) | | Set the minimum width of the input |
34
- | icon | Node (pass Octicon react component) | | Icon to be used inside of input. Positioned on the left edge. |
@@ -1,89 +0,0 @@
1
- ---
2
- title: TextInputWithTokens
3
- status: Alpha
4
- source: https://github.com/primer/react/tree/main/src/TextInputWithTokens.tsx
5
- ---
6
-
7
- import {Props} from '../src/props'
8
- import {TextInputWithTokens} from '@primer/components'
9
-
10
- A `TextInputWithTokens` component is used to show multiple values in one field.
11
-
12
- It supports all of the features of a [TextInput](/TextInput) component, but it can render a list of [Tokens](/Token) next to the area a user types in.
13
-
14
- ## Basic Example
15
-
16
- ```javascript live noinline
17
- const BasicExample = () => {
18
- const [tokens, setTokens] = React.useState([
19
- {text: 'zero', id: 0},
20
- {text: 'one', id: 1},
21
- {text: 'two', id: 2}
22
- ])
23
- const onTokenRemove = tokenId => {
24
- setTokens(tokens.filter(token => token.id !== tokenId))
25
- }
26
-
27
- return (
28
- <>
29
- <Box as="label" display="block" htmlFor="inputWithTokens-basic">
30
- Basic example tokens
31
- </Box>
32
- <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} id="inputWithTokens-basic" />
33
- </>
34
- )
35
- }
36
-
37
- render(BasicExample)
38
- ```
39
-
40
- ## Component Props
41
-
42
- <Props of={TextInputWithTokens} />
43
-
44
- ## Adding and removing tokens
45
-
46
- The array passed to the `tokens` prop needs to be manually updated to add and remove tokens.
47
-
48
- The function passed to the `onRemoveToken` prop is called when:
49
-
50
- - Clicking the remove button in the token
51
- - Pressing the `Backspace` key when the input is empty
52
- - Selecting a token using the arrow keys or by clicking on a token and then pressing the `Backspace` key
53
-
54
- There is no function that gets called to "add" a token, so the user needs to be provided with a UI to select tokens.
55
-
56
- ## Custom token rendering
57
-
58
- By default, the `Token` component is used to render the tokens in the input. If this component does not make sense for the kinds of tokens you're rendering, you can pass a component to the `tokenComponent` prop
59
-
60
- Example: a `TextInputWithTokens` that renders tokens as `IssueLabelToken`:
61
-
62
- ```javascript live noinline
63
- const UsingIssueLabelTokens = () => {
64
- const [tokens, setTokens] = React.useState([
65
- {text: 'enhancement', id: 1, fillColor: '#a2eeef'},
66
- {text: 'bug', id: 2, fillColor: '#d73a4a'},
67
- {text: 'good first issue', id: 3, fillColor: '#0cf478'}
68
- ])
69
- const onTokenRemove = tokenId => {
70
- setTokens(tokens.filter(token => token.id !== tokenId))
71
- }
72
-
73
- return (
74
- <>
75
- <Box as="label" display="block" htmlFor="inputWithTokens-issueLabels">
76
- Issue labels
77
- </Box>
78
- <TextInputWithTokens
79
- tokenComponent={IssueLabelToken}
80
- tokens={tokens}
81
- onTokenRemove={onTokenRemove}
82
- id="inputWithTokens-issueLabels"
83
- />
84
- </>
85
- )
86
- }
87
-
88
- render(<UsingIssueLabelTokens />)
89
- ```
@@ -1,97 +0,0 @@
1
- ---
2
- title: TextInputWithTokens
3
- status: Alpha
4
- source: https://github.com/primer/react/tree/main/src/TextInputWithTokens.tsx
5
- ---
6
-
7
- import {Props} from '../src/props'
8
- import {TextInputWithTokens} from '@primer/components'
9
-
10
- A `TextInputWithTokens` component is used to show multiple values in one field.
11
-
12
- It supports all of the features of a [TextInput](/TextInput) component, but it can render a list of [Tokens](/Token) next to the area a user types in.
13
-
14
- ## Basic Example
15
-
16
- ```javascript live noinline
17
- const BasicExample = () => {
18
- const [tokens, setTokens] = React.useState([
19
- {text: 'zero', id: 0},
20
- {text: 'one', id: 1},
21
- {text: 'two', id: 2}
22
- ])
23
- const onTokenRemove = tokenId => {
24
- setTokens(tokens.filter(token => token.id !== tokenId))
25
- }
26
-
27
- return (
28
- <>
29
- <Box as="label" display="block" htmlFor="inputWithTokens-basic">
30
- Basic example tokens
31
- </Box>
32
- <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} id="inputWithTokens-basic" />
33
- </>
34
- )
35
- }
36
-
37
- render(BasicExample)
38
- ```
39
-
40
- ## Component Props
41
-
42
- | Name | Type | Default | Description |
43
- | :--------------------- | :------------------------------------ | :----------: | :------------------------------------------------------------------------------------------------------------------------ |
44
- | tokens | `TokenProps[]` | `undefined` | Required. The array of tokens to render |
45
- | onTokenRemove | `(tokenId: string \| number) => void` | `undefined` | Required. The function that gets called when a token is removed |
46
- | tokenComponent | `React.ComponentType<any>` | `Token` | Optional. The component used to render each token |
47
- | maxHeight | `React.CSSProperties['maxHeight']` | `undefined` | Optional. The maximum height of the component. If the content in the input exceeds this height, it will scroll vertically |
48
- | preventTokenWrapping | `boolean` | `false` | Optional. Whether tokens should render inline horizontally. By default, tokens wrap to new lines. |
49
- | size | `TokenSizeKeys` | `extralarge` | Optional. The size of the tokens |
50
- | hideTokenRemoveButtons | `boolean` | `false` | Optional. Whether the remove buttons should be rendered in the tokens |
51
-
52
- ## Adding and removing tokens
53
-
54
- The array passed to the `tokens` prop needs to be manually updated to add and remove tokens.
55
-
56
- The function passed to the `onRemoveToken` prop is called when:
57
-
58
- - Clicking the remove button in the token
59
- - Pressing the `Backspace` key when the input is empty
60
- - Selecting a token using the arrow keys or by clicking on a token and then pressing the `Backspace` key
61
-
62
- There is no function that gets called to "add" a token, so the user needs to be provided with a UI to select tokens.
63
-
64
- ## Custom token rendering
65
-
66
- By default, the `Token` component is used to render the tokens in the input. If this component does not make sense for the kinds of tokens you're rendering, you can pass a component to the `tokenComponent` prop
67
-
68
- Example: a `TextInputWithTokens` that renders tokens as `IssueLabelToken`:
69
-
70
- ```javascript live noinline
71
- const UsingIssueLabelTokens = () => {
72
- const [tokens, setTokens] = React.useState([
73
- {text: 'enhancement', id: 1, fillColor: '#a2eeef'},
74
- {text: 'bug', id: 2, fillColor: '#d73a4a'},
75
- {text: 'good first issue', id: 3, fillColor: '#0cf478'}
76
- ])
77
- const onTokenRemove = tokenId => {
78
- setTokens(tokens.filter(token => token.id !== tokenId))
79
- }
80
-
81
- return (
82
- <>
83
- <Box as="label" display="block" htmlFor="inputWithTokens-issueLabels">
84
- Issue labels
85
- </Box>
86
- <TextInputWithTokens
87
- tokenComponent={IssueLabelToken}
88
- tokens={tokens}
89
- onTokenRemove={onTokenRemove}
90
- id="inputWithTokens-issueLabels"
91
- />
92
- </>
93
- )
94
- }
95
-
96
- render(<UsingIssueLabelTokens />)
97
- ```
@@ -1,138 +0,0 @@
1
- ---
2
- title: Timeline
3
- ---
4
-
5
- The Timeline.Item component is used to display items on a vertical timeline, connected by Timeline.Badge elements.
6
-
7
- ## Example with in-line links
8
-
9
- ```jsx live
10
- <Timeline>
11
- <Timeline.Item>
12
- <Timeline.Badge>
13
- <StyledOcticon icon={FlameIcon} />
14
- </Timeline.Badge>
15
- <Timeline.Body>
16
- <Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
17
- Monalisa
18
- </Link>
19
- created one <Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
20
- hot potato
21
- </Link>
22
- <Link href="#" color="fg.muted" muted>
23
- Just now
24
- </Link>
25
- </Timeline.Body>
26
- </Timeline.Item>
27
- </Timeline>
28
- ```
29
-
30
- ## Default Color example
31
-
32
- The default Timeline.Badge color is dark text on a light grey background.
33
-
34
- ```jsx live
35
- <Timeline>
36
- <Timeline.Item>
37
- <Timeline.Badge>
38
- <StyledOcticon icon={FlameIcon} />
39
- </Timeline.Badge>
40
- <Timeline.Body>Default badge color</Timeline.Body>
41
- </Timeline.Item>
42
- </Timeline>
43
- ```
44
-
45
- ## Adding color to a Badge
46
-
47
- To have color variants, use the `bg` prop on the `Timeline.Badge`. If an icon is being used, set the `color` prop
48
- of the child `StyledOcticon` if necessary.
49
-
50
- ```jsx live
51
- <Timeline>
52
- <Timeline.Item>
53
- <Timeline.Badge sx={{bg: "danger.emphasis"}}>
54
- <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
55
- </Timeline.Badge>
56
- <Timeline.Body>Background used when closed events occur</Timeline.Body>
57
- </Timeline.Item>
58
- <Timeline.Item>
59
- <Timeline.Badge sx={{bg: "danger.emphasis"}}>
60
- <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
61
- </Timeline.Badge>
62
- <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
63
- </Timeline.Item>
64
- <Timeline.Item>
65
- <Timeline.Badge sx={{bg: "danger.emphasis"}}>
66
- <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
67
- </Timeline.Badge>
68
- <Timeline.Body>Background used when pull requests are merged</Timeline.Body>
69
- </Timeline.Item>
70
- </Timeline>
71
- ```
72
-
73
- ## Condensed items
74
-
75
- Timeline has a condensed prop that will reduce the vertical padding and remove the background from the badge item. These are most commonly used in commits. To condense a single item, remove the top or bottom padding with the `pt={0}` or `pb={0}` prop.
76
-
77
- ```jsx live
78
- <Timeline>
79
- <Timeline.Item condensed>
80
- <Timeline.Badge>
81
- <StyledOcticon icon={GitCommitIcon} />
82
- </Timeline.Badge>
83
- <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
84
- </Timeline.Item>
85
- <Timeline.Item condensed>
86
- <Timeline.Badge>
87
- <StyledOcticon icon={GitCommitIcon} />
88
- </Timeline.Badge>
89
- <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
90
- </Timeline.Item>
91
- </Timeline>
92
- ```
93
-
94
- ## Timeline Break
95
-
96
- To create a visual break in the timeline, use Timeline.Break. This adds a horizontal bar across the timeline to show that something has disrupted it. Usually this happens when a close or merged event occurs.
97
-
98
- ```jsx live
99
- <Timeline>
100
- <Timeline.Item>
101
- <Timeline.Badge sx={{bg: "danger.emphasis"}}>
102
- <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
103
- </Timeline.Badge>
104
- <Timeline.Body>Background used when closed events occur</Timeline.Body>
105
- </Timeline.Item>
106
- <Timeline.Break />
107
- <Timeline.Item>
108
- <Timeline.Badge sx={{bg: "success.emphasis"}}>
109
- <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
110
- </Timeline.Badge>
111
- <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
112
- </Timeline.Item>
113
- </Timeline>
114
- ```
115
-
116
- ## System props
117
-
118
- <Note variant="warning">
119
-
120
- System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
121
-
122
- </Note>
123
-
124
- Timeline and Timeline.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
125
-
126
- ## Component props
127
-
128
- ### Timeline
129
-
130
- | Prop name | Type | Description |
131
- | :---------- | :------ | :-------------------------------------------------------------------------------- |
132
- | clipSidebar | Boolean | Hides the sidebar above the first Timeline.Item and below the last Timeline.Item. |
133
-
134
- ### Timeline.Item
135
-
136
- | Prop name | Type | Description |
137
- | :-------- | :------ | :-------------------------------------------------------------------- |
138
- | condensed | Boolean | Reduces vertical padding and removes background from an item's badge. |