@primer/components 32.0.1 → 32.0.2-rc.859381a1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (1003) hide show
  1. package/.changeset/README.md +8 -0
  2. package/.changeset/config.json +10 -0
  3. package/.devcontainer/devcontainer.json +8 -0
  4. package/.eslintrc.json +137 -0
  5. package/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
  6. package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +41 -0
  7. package/.github/dependabot.yml +18 -0
  8. package/.github/pull_request_template.md +18 -0
  9. package/.github/workflows/check_for_changeset.yml +25 -0
  10. package/.github/workflows/ci.yml +31 -0
  11. package/.github/workflows/deploy_preview.yml +47 -0
  12. package/.github/workflows/deploy_production.yml +70 -0
  13. package/.github/workflows/release.yml +35 -0
  14. package/.github/workflows/release_canary.yml +70 -0
  15. package/.github/workflows/release_candidate.yml +60 -0
  16. package/.github/workflows/size.yml +13 -0
  17. package/.github/workflows/stale.yml +26 -0
  18. package/.gitignore +10 -0
  19. package/.npmrc +4 -0
  20. package/.nvmrc +1 -0
  21. package/.storybook/main.js +9 -0
  22. package/.storybook/preview.js +117 -0
  23. package/.vscode/launch.json +21 -0
  24. package/.vscode/settings.json +13 -0
  25. package/@types/@styled-system/index.d.ts +0 -0
  26. package/@types/@styled-system/prop-types/index.d.ts +1 -0
  27. package/@types/@styled-system/props/index.d.ts +1 -0
  28. package/@types/jest-styled-components/index.d.ts +1 -0
  29. package/CHANGELOG.md +6 -0
  30. package/CODEOWNERS +2 -0
  31. package/babel-defines.js +13 -0
  32. package/babel.config.js +39 -0
  33. package/contributor-docs/CODE_OF_CONDUCT.md +76 -0
  34. package/contributor-docs/CONTRIBUTING.md +274 -0
  35. package/contributor-docs/adrs/adr-001-typescript.md +23 -0
  36. package/contributor-docs/adrs/adr-002-behavior-isolation.md +108 -0
  37. package/contributor-docs/adrs/adr-003-prop-norms.md +72 -0
  38. package/contributor-docs/behaviors.md +132 -0
  39. package/contributor-docs/component-contents-api-patterns.md +316 -0
  40. package/contributor-docs/principles.md +39 -0
  41. package/dist/browser.esm.js.map +1 -1
  42. package/dist/browser.umd.js.map +1 -1
  43. package/docs/.eslintrc +0 -0
  44. package/docs/.gitignore +91 -0
  45. package/docs/components/PropsList.js +5 -0
  46. package/docs/components/State.js +9 -0
  47. package/docs/components/constants.js +34 -0
  48. package/docs/components/index.js +2 -0
  49. package/docs/content/ActionList.mdx +99 -0
  50. package/docs/content/ActionList2.mdx +359 -0
  51. package/docs/content/ActionMenu.mdx +80 -0
  52. package/docs/content/AnchoredOverlay.mdx +37 -0
  53. package/docs/content/Autocomplete.mdx +657 -0
  54. package/docs/content/Avatar.mdx +33 -0
  55. package/docs/content/AvatarStack.mdx +37 -0
  56. package/docs/content/BorderBox.md +46 -0
  57. package/docs/content/Box.mdx +96 -0
  58. package/docs/content/BranchName.md +18 -0
  59. package/docs/content/Breadcrumbs.md +47 -0
  60. package/docs/content/Buttons.md +46 -0
  61. package/docs/content/CircleBadge.md +35 -0
  62. package/docs/content/CircleOcticon.md +18 -0
  63. package/docs/content/CounterLabel.md +22 -0
  64. package/docs/content/Details.md +105 -0
  65. package/docs/content/Dialog.md +105 -0
  66. package/docs/content/Dialog2.mdx +180 -0
  67. package/docs/content/Dropdown.md +65 -0
  68. package/docs/content/DropdownMenu.mdx +49 -0
  69. package/docs/content/FilterList.md +37 -0
  70. package/docs/content/FilteredSearch.md +32 -0
  71. package/docs/content/Flash.md +35 -0
  72. package/docs/content/Flex.md +58 -0
  73. package/docs/content/FormGroup.md +38 -0
  74. package/docs/content/Grid.md +59 -0
  75. package/docs/content/Header.md +77 -0
  76. package/docs/content/Heading.md +22 -0
  77. package/docs/content/Label.md +49 -0
  78. package/docs/content/LabelGroup.md +21 -0
  79. package/docs/content/Link.md +28 -0
  80. package/docs/content/Overlay.mdx +85 -0
  81. package/docs/content/Pagehead.md +18 -0
  82. package/docs/content/Pagination.md +178 -0
  83. package/docs/content/PointerBox.md +81 -0
  84. package/docs/content/Popover.md +129 -0
  85. package/docs/content/Portal.mdx +78 -0
  86. package/docs/content/Position.md +100 -0
  87. package/docs/content/ProgressBar.mdx +29 -0
  88. package/docs/content/SelectMenu.md +371 -0
  89. package/docs/content/SelectPanel.mdx +67 -0
  90. package/docs/content/SideNav.md +171 -0
  91. package/docs/content/Spinner.mdx +32 -0
  92. package/docs/content/StateLabel.md +27 -0
  93. package/docs/content/StyledOcticon.md +27 -0
  94. package/docs/content/SubNav.md +100 -0
  95. package/docs/content/TabNav.md +42 -0
  96. package/docs/content/Text.md +31 -0
  97. package/docs/content/TextInput.md +34 -0
  98. package/docs/content/TextInputTokens.mdx +89 -0
  99. package/docs/content/TextInputWithTokens.mdx +211 -0
  100. package/docs/content/Timeline.md +148 -0
  101. package/docs/content/Token.mdx +381 -0
  102. package/docs/content/Tooltip.md +32 -0
  103. package/docs/content/Truncate.md +55 -0
  104. package/docs/content/UnderlineNav.md +45 -0
  105. package/docs/content/anchoredPosition.mdx +163 -0
  106. package/docs/content/core-concepts.md +70 -0
  107. package/docs/content/focusTrap.mdx +103 -0
  108. package/docs/content/focusZone.mdx +145 -0
  109. package/docs/content/getting-started.md +138 -0
  110. package/docs/content/index.md +33 -0
  111. package/docs/content/linting.md +35 -0
  112. package/docs/content/overriding-styles.mdx +82 -0
  113. package/docs/content/philosophy.md +23 -0
  114. package/docs/content/primer-theme.md +89 -0
  115. package/docs/content/ssr.mdx +43 -0
  116. package/docs/content/system-props.mdx +37 -0
  117. package/docs/content/theme-reference.md +16 -0
  118. package/docs/content/theming.md +272 -0
  119. package/docs/content/useOnEscapePress.mdx +56 -0
  120. package/docs/content/useOnOutsideClick.mdx +57 -0
  121. package/docs/content/useOpenAndCloseFocus.mdx +49 -0
  122. package/docs/content/useOverlay.mdx +62 -0
  123. package/docs/content/useSafeTimeout.mdx +32 -0
  124. package/docs/gatsby-config.js +30 -0
  125. package/docs/gatsby-node.js +101 -0
  126. package/docs/package-lock.json +20867 -0
  127. package/docs/package.json +36 -0
  128. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +21 -0
  129. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +41 -0
  130. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +73 -0
  131. package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +133 -0
  132. package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +1411 -0
  133. package/docs/src/component-checklist.js +81 -0
  134. package/docs/src/props.js +77 -0
  135. package/jest.config.js +13 -0
  136. package/lib/Overlay.d.ts +5 -3
  137. package/lib/__tests__/ActionList.test.d.ts +1 -0
  138. package/lib/__tests__/ActionList.test.js +69 -0
  139. package/lib/__tests__/ActionList.types.test.d.ts +6 -0
  140. package/lib/__tests__/ActionList.types.test.js +69 -0
  141. package/lib/__tests__/ActionList2.test.d.ts +1 -0
  142. package/lib/__tests__/ActionList2.test.js +53 -0
  143. package/lib/__tests__/ActionMenu.test.d.ts +1 -0
  144. package/lib/__tests__/ActionMenu.test.js +151 -0
  145. package/lib/__tests__/AnchoredOverlay.test.d.ts +1 -0
  146. package/lib/__tests__/AnchoredOverlay.test.js +162 -0
  147. package/lib/__tests__/Autocomplete.test.d.ts +1 -0
  148. package/lib/__tests__/Autocomplete.test.js +528 -0
  149. package/lib/__tests__/Avatar.test.d.ts +1 -0
  150. package/lib/__tests__/Avatar.test.js +67 -0
  151. package/lib/__tests__/AvatarStack.test.d.ts +1 -0
  152. package/lib/__tests__/AvatarStack.test.js +71 -0
  153. package/lib/__tests__/BorderBox.test.d.ts +1 -0
  154. package/lib/__tests__/BorderBox.test.js +58 -0
  155. package/lib/__tests__/Box.test.d.ts +1 -0
  156. package/lib/__tests__/Box.test.js +78 -0
  157. package/lib/__tests__/BranchName.test.d.ts +1 -0
  158. package/lib/__tests__/BranchName.test.js +36 -0
  159. package/lib/__tests__/Breadcrumbs.test.d.ts +1 -0
  160. package/lib/__tests__/Breadcrumbs.test.js +40 -0
  161. package/lib/__tests__/Breadcrumbs.types.test.d.ts +3 -0
  162. package/lib/__tests__/Breadcrumbs.types.test.js +25 -0
  163. package/lib/__tests__/BreadcrumbsItem.test.d.ts +1 -0
  164. package/lib/__tests__/BreadcrumbsItem.test.js +49 -0
  165. package/lib/__tests__/Button.test.d.ts +1 -0
  166. package/lib/__tests__/Button.test.js +147 -0
  167. package/lib/__tests__/Caret.test.d.ts +1 -0
  168. package/lib/__tests__/Caret.test.js +52 -0
  169. package/lib/__tests__/CircleBadge.test.d.ts +1 -0
  170. package/lib/__tests__/CircleBadge.test.js +83 -0
  171. package/lib/__tests__/CircleBadge.types.test.d.ts +3 -0
  172. package/lib/__tests__/CircleBadge.types.test.js +28 -0
  173. package/lib/__tests__/CircleOcticon.test.d.ts +1 -0
  174. package/lib/__tests__/CircleOcticon.test.js +71 -0
  175. package/lib/__tests__/ConfirmationDialog.test.d.ts +1 -0
  176. package/lib/__tests__/ConfirmationDialog.test.js +134 -0
  177. package/lib/__tests__/CounterLabel.test.d.ts +1 -0
  178. package/lib/__tests__/CounterLabel.test.js +58 -0
  179. package/lib/__tests__/CounterLabel.types.test.d.ts +3 -0
  180. package/lib/__tests__/CounterLabel.types.test.js +28 -0
  181. package/lib/__tests__/Details.test.d.ts +1 -0
  182. package/lib/__tests__/Details.test.js +117 -0
  183. package/lib/__tests__/Dialog.test.d.ts +1 -0
  184. package/lib/__tests__/Dialog.test.js +184 -0
  185. package/lib/__tests__/Dialog.types.test.d.ts +3 -0
  186. package/lib/__tests__/Dialog.types.test.js +28 -0
  187. package/lib/__tests__/Dialog2.types.test.d.ts +3 -0
  188. package/lib/__tests__/Dialog2.types.test.js +31 -0
  189. package/lib/__tests__/Dropdown.test.d.ts +1 -0
  190. package/lib/__tests__/Dropdown.test.js +63 -0
  191. package/lib/__tests__/Dropdown.types.test.d.ts +3 -0
  192. package/lib/__tests__/Dropdown.types.test.js +31 -0
  193. package/lib/__tests__/DropdownMenu.test.d.ts +1 -0
  194. package/lib/__tests__/DropdownMenu.test.js +150 -0
  195. package/lib/__tests__/FilterList.test.d.ts +1 -0
  196. package/lib/__tests__/FilterList.test.js +36 -0
  197. package/lib/__tests__/FilterList.types.test.d.ts +3 -0
  198. package/lib/__tests__/FilterList.types.test.js +27 -0
  199. package/lib/__tests__/FilterListItem.test.d.ts +1 -0
  200. package/lib/__tests__/FilterListItem.test.js +46 -0
  201. package/lib/__tests__/FilteredSearch.test.d.ts +1 -0
  202. package/lib/__tests__/FilteredSearch.test.js +36 -0
  203. package/lib/__tests__/FilteredSearch.types.test.d.ts +3 -0
  204. package/lib/__tests__/FilteredSearch.types.test.js +28 -0
  205. package/lib/__tests__/Flash.test.d.ts +1 -0
  206. package/lib/__tests__/Flash.test.js +62 -0
  207. package/lib/__tests__/Flash.types.test.d.ts +3 -0
  208. package/lib/__tests__/Flash.types.test.js +28 -0
  209. package/lib/__tests__/Flex.test.d.ts +1 -0
  210. package/lib/__tests__/Flex.test.js +74 -0
  211. package/lib/__tests__/FormGroup.test.d.ts +1 -0
  212. package/lib/__tests__/FormGroup.test.js +54 -0
  213. package/lib/__tests__/FormGroup.types.test.d.ts +3 -0
  214. package/lib/__tests__/FormGroup.types.test.js +28 -0
  215. package/lib/__tests__/Grid.test.d.ts +1 -0
  216. package/lib/__tests__/Grid.test.js +104 -0
  217. package/lib/__tests__/Header.test.d.ts +1 -0
  218. package/lib/__tests__/Header.test.js +58 -0
  219. package/lib/__tests__/Header.types.test.d.ts +3 -0
  220. package/lib/__tests__/Header.types.test.js +29 -0
  221. package/lib/__tests__/Heading.test.d.ts +1 -0
  222. package/lib/__tests__/Heading.test.js +109 -0
  223. package/lib/__tests__/KeyPaths.types.test.d.ts +11 -0
  224. package/lib/__tests__/KeyPaths.types.test.js +10 -0
  225. package/lib/__tests__/Label.test.d.ts +1 -0
  226. package/lib/__tests__/Label.test.js +46 -0
  227. package/lib/__tests__/Label.types.test.d.ts +3 -0
  228. package/lib/__tests__/Label.types.test.js +28 -0
  229. package/lib/__tests__/LabelGroup.test.d.ts +1 -0
  230. package/lib/__tests__/LabelGroup.test.js +38 -0
  231. package/lib/__tests__/LabelGroup.types.test.d.ts +3 -0
  232. package/lib/__tests__/LabelGroup.types.test.js +28 -0
  233. package/lib/__tests__/Link.test.d.ts +1 -0
  234. package/lib/__tests__/Link.test.js +76 -0
  235. package/lib/__tests__/Link.types.test.d.ts +3 -0
  236. package/lib/__tests__/Link.types.test.js +28 -0
  237. package/lib/__tests__/Merge.types.test.d.ts +30 -0
  238. package/lib/__tests__/Merge.types.test.js +27 -0
  239. package/lib/__tests__/NewButton.test.d.ts +1 -0
  240. package/lib/__tests__/NewButton.test.js +95 -0
  241. package/lib/__tests__/Overlay.test.d.ts +1 -0
  242. package/lib/__tests__/Overlay.test.js +145 -0
  243. package/lib/__tests__/Overlay.types.test.d.ts +6 -0
  244. package/lib/__tests__/Overlay.types.test.js +73 -0
  245. package/lib/__tests__/Pagehead.test.d.ts +1 -0
  246. package/lib/__tests__/Pagehead.test.js +37 -0
  247. package/lib/__tests__/Pagehead.types.test.d.ts +3 -0
  248. package/lib/__tests__/Pagehead.types.test.js +28 -0
  249. package/lib/__tests__/Pagination/Pagination.test.d.ts +1 -0
  250. package/lib/__tests__/Pagination/Pagination.test.js +47 -0
  251. package/lib/__tests__/Pagination/PaginationModel.test.d.ts +1 -0
  252. package/lib/__tests__/Pagination/PaginationModel.test.js +186 -0
  253. package/lib/__tests__/Pagination.types.test.d.ts +3 -0
  254. package/lib/__tests__/Pagination.types.test.js +33 -0
  255. package/lib/__tests__/PointerBox.test.d.ts +1 -0
  256. package/lib/__tests__/PointerBox.test.js +46 -0
  257. package/lib/__tests__/Popover.test.d.ts +1 -0
  258. package/lib/__tests__/Popover.test.js +66 -0
  259. package/lib/__tests__/Popover.types.test.d.ts +3 -0
  260. package/lib/__tests__/Popover.types.test.js +27 -0
  261. package/lib/__tests__/Portal.test.d.ts +1 -0
  262. package/lib/__tests__/Portal.test.js +124 -0
  263. package/lib/__tests__/Position.test.d.ts +1 -0
  264. package/lib/__tests__/Position.test.js +143 -0
  265. package/lib/__tests__/ProgressBar.test.d.ts +1 -0
  266. package/lib/__tests__/ProgressBar.test.js +68 -0
  267. package/lib/__tests__/SelectMenu.test.d.ts +1 -0
  268. package/lib/__tests__/SelectMenu.test.js +155 -0
  269. package/lib/__tests__/SelectMenu.types.test.d.ts +3 -0
  270. package/lib/__tests__/SelectMenu.types.test.js +47 -0
  271. package/lib/__tests__/SelectPanel.test.d.ts +1 -0
  272. package/lib/__tests__/SelectPanel.test.js +80 -0
  273. package/lib/__tests__/SelectPanel.types.test.d.ts +3 -0
  274. package/lib/__tests__/SelectPanel.types.test.js +44 -0
  275. package/lib/__tests__/SideNav.test.d.ts +1 -0
  276. package/lib/__tests__/SideNav.test.js +71 -0
  277. package/lib/__tests__/SideNav.types.test.d.ts +3 -0
  278. package/lib/__tests__/SideNav.types.test.js +28 -0
  279. package/lib/__tests__/Spinner.test.d.ts +1 -0
  280. package/lib/__tests__/Spinner.test.js +53 -0
  281. package/lib/__tests__/StateLabel.test.d.ts +1 -0
  282. package/lib/__tests__/StateLabel.test.js +71 -0
  283. package/lib/__tests__/StateLabel.types.test.d.ts +3 -0
  284. package/lib/__tests__/StateLabel.types.test.js +28 -0
  285. package/lib/__tests__/StyledOcticon.test.d.ts +1 -0
  286. package/lib/__tests__/StyledOcticon.test.js +40 -0
  287. package/lib/__tests__/StyledOcticon.types.test.d.ts +3 -0
  288. package/lib/__tests__/StyledOcticon.types.test.js +32 -0
  289. package/lib/__tests__/SubNav.test.d.ts +1 -0
  290. package/lib/__tests__/SubNav.test.js +62 -0
  291. package/lib/__tests__/SubNav.types.test.d.ts +3 -0
  292. package/lib/__tests__/SubNav.types.test.js +27 -0
  293. package/lib/__tests__/SubNavLink.test.d.ts +1 -0
  294. package/lib/__tests__/SubNavLink.test.js +49 -0
  295. package/lib/__tests__/TabNav.test.d.ts +1 -0
  296. package/lib/__tests__/TabNav.test.js +49 -0
  297. package/lib/__tests__/TabNav.types.test.d.ts +3 -0
  298. package/lib/__tests__/TabNav.types.test.js +25 -0
  299. package/lib/__tests__/Text.test.d.ts +1 -0
  300. package/lib/__tests__/Text.test.js +105 -0
  301. package/lib/__tests__/TextInput.test.d.ts +1 -0
  302. package/lib/__tests__/TextInput.test.js +78 -0
  303. package/lib/__tests__/TextInputWithTokens.test.d.ts +1 -0
  304. package/lib/__tests__/TextInputWithTokens.test.js +572 -0
  305. package/lib/__tests__/ThemeProvider.test.d.ts +1 -0
  306. package/lib/__tests__/ThemeProvider.test.js +444 -0
  307. package/lib/__tests__/Timeline.test.d.ts +1 -0
  308. package/lib/__tests__/Timeline.test.js +75 -0
  309. package/lib/__tests__/Timeline.types.test.d.ts +3 -0
  310. package/lib/__tests__/Timeline.types.test.js +31 -0
  311. package/lib/__tests__/Token.test.d.ts +1 -0
  312. package/lib/__tests__/Token.test.js +180 -0
  313. package/lib/__tests__/Tooltip.test.d.ts +1 -0
  314. package/lib/__tests__/Tooltip.test.js +69 -0
  315. package/lib/__tests__/Tooltip.types.test.d.ts +3 -0
  316. package/lib/__tests__/Tooltip.types.test.js +28 -0
  317. package/lib/__tests__/Truncate.test.d.ts +1 -0
  318. package/lib/__tests__/Truncate.test.js +63 -0
  319. package/lib/__tests__/Truncate.types.test.d.ts +3 -0
  320. package/lib/__tests__/Truncate.types.test.js +31 -0
  321. package/lib/__tests__/UnderlineNav.test.d.ts +1 -0
  322. package/lib/__tests__/UnderlineNav.test.js +72 -0
  323. package/lib/__tests__/UnderlineNav.types.test.d.ts +3 -0
  324. package/lib/__tests__/UnderlineNav.types.test.js +25 -0
  325. package/lib/__tests__/UnderlineNavLink.test.d.ts +1 -0
  326. package/lib/__tests__/UnderlineNavLink.test.js +51 -0
  327. package/lib/__tests__/behaviors/anchoredPosition.test.d.ts +1 -0
  328. package/lib/__tests__/behaviors/anchoredPosition.test.js +390 -0
  329. package/lib/__tests__/behaviors/focusTrap.test.d.ts +1 -0
  330. package/lib/__tests__/behaviors/focusTrap.test.js +234 -0
  331. package/lib/__tests__/behaviors/focusZone.test.d.ts +1 -0
  332. package/lib/__tests__/behaviors/focusZone.test.js +570 -0
  333. package/lib/__tests__/behaviors/iterateFocusableElements.test.d.ts +1 -0
  334. package/lib/__tests__/behaviors/iterateFocusableElements.test.js +55 -0
  335. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +1 -0
  336. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +226 -0
  337. package/lib/__tests__/filterObject.test.d.ts +1 -0
  338. package/lib/__tests__/filterObject.test.js +30 -0
  339. package/lib/__tests__/hooks/useAnchoredPosition.test.d.ts +1 -0
  340. package/lib/__tests__/hooks/useAnchoredPosition.test.js +54 -0
  341. package/lib/__tests__/hooks/useOnEscapePress.test.d.ts +1 -0
  342. package/lib/__tests__/hooks/useOnEscapePress.test.js +32 -0
  343. package/lib/__tests__/hooks/useOnOutsideClick.test.d.ts +1 -0
  344. package/lib/__tests__/hooks/useOnOutsideClick.test.js +87 -0
  345. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +1 -0
  346. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.js +60 -0
  347. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +1 -0
  348. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.js +45 -0
  349. package/lib/__tests__/theme.test.d.ts +1 -0
  350. package/lib/__tests__/theme.test.js +36 -0
  351. package/lib/__tests__/themeGet.test.d.ts +1 -0
  352. package/lib/__tests__/themeGet.test.js +25 -0
  353. package/lib/__tests__/useSafeTimeout.test.d.ts +1 -0
  354. package/lib/__tests__/useSafeTimeout.test.js +45 -0
  355. package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
  356. package/lib/__tests__/utils/createSlots.test.js +75 -0
  357. package/lib/stories/ActionList.stories.js +454 -0
  358. package/lib/stories/ActionList2.stories.js +909 -0
  359. package/lib/stories/ActionMenu.stories.js +348 -0
  360. package/lib/stories/AnchoredOverlay.stories.js +127 -0
  361. package/lib/stories/Autocomplete.stories.js +619 -0
  362. package/lib/stories/AvatarStack.stories.js +49 -0
  363. package/lib/stories/Button.stories.js +125 -0
  364. package/lib/stories/ConfirmationDialog.stories.js +119 -0
  365. package/lib/stories/Dialog.stories.js +269 -0
  366. package/lib/stories/DropdownMenu.stories.js +122 -0
  367. package/lib/stories/IssueLabelToken.stories.js +165 -0
  368. package/lib/stories/NewButton.stories.js +230 -0
  369. package/lib/stories/Overlay.stories.js +204 -0
  370. package/lib/stories/Portal.stories.js +104 -0
  371. package/lib/stories/ProfileToken.stories.js +162 -0
  372. package/lib/stories/SelectPanel.stories.js +399 -0
  373. package/lib/stories/TextInput.stories.js +144 -0
  374. package/lib/stories/TextInputWithTokens.stories.js +252 -0
  375. package/lib/stories/ThemeProvider.stories.js +102 -0
  376. package/lib/stories/Token.stories.js +176 -0
  377. package/lib/stories/useAnchoredPosition.stories.js +351 -0
  378. package/lib/stories/useFocusTrap.stories.js +360 -0
  379. package/lib/stories/useFocusZone.stories.js +607 -0
  380. package/lib-esm/Overlay.d.ts +5 -3
  381. package/lib-esm/__tests__/ActionList.test.d.ts +1 -0
  382. package/lib-esm/__tests__/ActionList.test.js +57 -0
  383. package/lib-esm/__tests__/ActionList.types.test.d.ts +6 -0
  384. package/lib-esm/__tests__/ActionList.types.test.js +45 -0
  385. package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
  386. package/lib-esm/__tests__/ActionList2.test.js +41 -0
  387. package/lib-esm/__tests__/ActionMenu.test.d.ts +1 -0
  388. package/lib-esm/__tests__/ActionMenu.test.js +139 -0
  389. package/lib-esm/__tests__/AnchoredOverlay.test.d.ts +1 -0
  390. package/lib-esm/__tests__/AnchoredOverlay.test.js +136 -0
  391. package/lib-esm/__tests__/Autocomplete.test.d.ts +1 -0
  392. package/lib-esm/__tests__/Autocomplete.test.js +494 -0
  393. package/lib-esm/__tests__/Avatar.test.d.ts +1 -0
  394. package/lib-esm/__tests__/Avatar.test.js +56 -0
  395. package/lib-esm/__tests__/AvatarStack.test.d.ts +1 -0
  396. package/lib-esm/__tests__/AvatarStack.test.js +58 -0
  397. package/lib-esm/__tests__/BorderBox.test.d.ts +1 -0
  398. package/lib-esm/__tests__/BorderBox.test.js +47 -0
  399. package/lib-esm/__tests__/Box.test.d.ts +1 -0
  400. package/lib-esm/__tests__/Box.test.js +67 -0
  401. package/lib-esm/__tests__/BranchName.test.d.ts +1 -0
  402. package/lib-esm/__tests__/BranchName.test.js +26 -0
  403. package/lib-esm/__tests__/Breadcrumbs.test.d.ts +1 -0
  404. package/lib-esm/__tests__/Breadcrumbs.test.js +30 -0
  405. package/lib-esm/__tests__/Breadcrumbs.types.test.d.ts +3 -0
  406. package/lib-esm/__tests__/Breadcrumbs.types.test.js +12 -0
  407. package/lib-esm/__tests__/BreadcrumbsItem.test.d.ts +1 -0
  408. package/lib-esm/__tests__/BreadcrumbsItem.test.js +39 -0
  409. package/lib-esm/__tests__/Button.test.d.ts +1 -0
  410. package/lib-esm/__tests__/Button.test.js +137 -0
  411. package/lib-esm/__tests__/Caret.test.d.ts +1 -0
  412. package/lib-esm/__tests__/Caret.test.js +42 -0
  413. package/lib-esm/__tests__/CircleBadge.test.d.ts +1 -0
  414. package/lib-esm/__tests__/CircleBadge.test.js +70 -0
  415. package/lib-esm/__tests__/CircleBadge.types.test.d.ts +3 -0
  416. package/lib-esm/__tests__/CircleBadge.types.test.js +13 -0
  417. package/lib-esm/__tests__/CircleOcticon.test.d.ts +1 -0
  418. package/lib-esm/__tests__/CircleOcticon.test.js +59 -0
  419. package/lib-esm/__tests__/ConfirmationDialog.test.d.ts +1 -0
  420. package/lib-esm/__tests__/ConfirmationDialog.test.js +113 -0
  421. package/lib-esm/__tests__/CounterLabel.test.d.ts +1 -0
  422. package/lib-esm/__tests__/CounterLabel.test.js +47 -0
  423. package/lib-esm/__tests__/CounterLabel.types.test.d.ts +3 -0
  424. package/lib-esm/__tests__/CounterLabel.types.test.js +13 -0
  425. package/lib-esm/__tests__/Details.test.d.ts +1 -0
  426. package/lib-esm/__tests__/Details.test.js +107 -0
  427. package/lib-esm/__tests__/Dialog.test.d.ts +1 -0
  428. package/lib-esm/__tests__/Dialog.test.js +171 -0
  429. package/lib-esm/__tests__/Dialog.types.test.d.ts +3 -0
  430. package/lib-esm/__tests__/Dialog.types.test.js +13 -0
  431. package/lib-esm/__tests__/Dialog2.types.test.d.ts +3 -0
  432. package/lib-esm/__tests__/Dialog2.types.test.js +16 -0
  433. package/lib-esm/__tests__/Dropdown.test.d.ts +1 -0
  434. package/lib-esm/__tests__/Dropdown.test.js +53 -0
  435. package/lib-esm/__tests__/Dropdown.types.test.d.ts +3 -0
  436. package/lib-esm/__tests__/Dropdown.types.test.js +17 -0
  437. package/lib-esm/__tests__/DropdownMenu.test.d.ts +1 -0
  438. package/lib-esm/__tests__/DropdownMenu.test.js +137 -0
  439. package/lib-esm/__tests__/FilterList.test.d.ts +1 -0
  440. package/lib-esm/__tests__/FilterList.test.js +26 -0
  441. package/lib-esm/__tests__/FilterList.types.test.d.ts +3 -0
  442. package/lib-esm/__tests__/FilterList.types.test.js +13 -0
  443. package/lib-esm/__tests__/FilterListItem.test.d.ts +1 -0
  444. package/lib-esm/__tests__/FilterListItem.test.js +36 -0
  445. package/lib-esm/__tests__/FilteredSearch.test.d.ts +1 -0
  446. package/lib-esm/__tests__/FilteredSearch.test.js +26 -0
  447. package/lib-esm/__tests__/FilteredSearch.types.test.d.ts +3 -0
  448. package/lib-esm/__tests__/FilteredSearch.types.test.js +13 -0
  449. package/lib-esm/__tests__/Flash.test.d.ts +1 -0
  450. package/lib-esm/__tests__/Flash.test.js +51 -0
  451. package/lib-esm/__tests__/Flash.types.test.d.ts +3 -0
  452. package/lib-esm/__tests__/Flash.types.test.js +13 -0
  453. package/lib-esm/__tests__/Flex.test.d.ts +1 -0
  454. package/lib-esm/__tests__/Flex.test.js +64 -0
  455. package/lib-esm/__tests__/FormGroup.test.d.ts +1 -0
  456. package/lib-esm/__tests__/FormGroup.test.js +44 -0
  457. package/lib-esm/__tests__/FormGroup.types.test.d.ts +3 -0
  458. package/lib-esm/__tests__/FormGroup.types.test.js +13 -0
  459. package/lib-esm/__tests__/Grid.test.d.ts +1 -0
  460. package/lib-esm/__tests__/Grid.test.js +94 -0
  461. package/lib-esm/__tests__/Header.test.d.ts +1 -0
  462. package/lib-esm/__tests__/Header.test.js +48 -0
  463. package/lib-esm/__tests__/Header.types.test.d.ts +3 -0
  464. package/lib-esm/__tests__/Header.types.test.js +15 -0
  465. package/lib-esm/__tests__/Heading.test.d.ts +1 -0
  466. package/lib-esm/__tests__/Heading.test.js +99 -0
  467. package/lib-esm/__tests__/KeyPaths.types.test.d.ts +11 -0
  468. package/lib-esm/__tests__/KeyPaths.types.test.js +3 -0
  469. package/lib-esm/__tests__/Label.test.d.ts +1 -0
  470. package/lib-esm/__tests__/Label.test.js +36 -0
  471. package/lib-esm/__tests__/Label.types.test.d.ts +3 -0
  472. package/lib-esm/__tests__/Label.types.test.js +13 -0
  473. package/lib-esm/__tests__/LabelGroup.test.d.ts +1 -0
  474. package/lib-esm/__tests__/LabelGroup.test.js +26 -0
  475. package/lib-esm/__tests__/LabelGroup.types.test.d.ts +3 -0
  476. package/lib-esm/__tests__/LabelGroup.types.test.js +13 -0
  477. package/lib-esm/__tests__/Link.test.d.ts +1 -0
  478. package/lib-esm/__tests__/Link.test.js +66 -0
  479. package/lib-esm/__tests__/Link.types.test.d.ts +3 -0
  480. package/lib-esm/__tests__/Link.types.test.js +13 -0
  481. package/lib-esm/__tests__/Merge.types.test.d.ts +30 -0
  482. package/lib-esm/__tests__/Merge.types.test.js +14 -0
  483. package/lib-esm/__tests__/NewButton.test.d.ts +1 -0
  484. package/lib-esm/__tests__/NewButton.test.js +84 -0
  485. package/lib-esm/__tests__/Overlay.test.d.ts +1 -0
  486. package/lib-esm/__tests__/Overlay.test.js +123 -0
  487. package/lib-esm/__tests__/Overlay.types.test.d.ts +6 -0
  488. package/lib-esm/__tests__/Overlay.types.test.js +49 -0
  489. package/lib-esm/__tests__/Pagehead.test.d.ts +1 -0
  490. package/lib-esm/__tests__/Pagehead.test.js +26 -0
  491. package/lib-esm/__tests__/Pagehead.types.test.d.ts +3 -0
  492. package/lib-esm/__tests__/Pagehead.types.test.js +13 -0
  493. package/lib-esm/__tests__/Pagination/Pagination.test.d.ts +1 -0
  494. package/lib-esm/__tests__/Pagination/Pagination.test.js +35 -0
  495. package/lib-esm/__tests__/Pagination/PaginationModel.test.d.ts +1 -0
  496. package/lib-esm/__tests__/Pagination/PaginationModel.test.js +182 -0
  497. package/lib-esm/__tests__/Pagination.types.test.d.ts +3 -0
  498. package/lib-esm/__tests__/Pagination.types.test.js +18 -0
  499. package/lib-esm/__tests__/PointerBox.test.d.ts +1 -0
  500. package/lib-esm/__tests__/PointerBox.test.js +36 -0
  501. package/lib-esm/__tests__/Popover.test.d.ts +1 -0
  502. package/lib-esm/__tests__/Popover.test.js +53 -0
  503. package/lib-esm/__tests__/Popover.types.test.d.ts +3 -0
  504. package/lib-esm/__tests__/Popover.types.test.js +13 -0
  505. package/lib-esm/__tests__/Portal.test.d.ts +1 -0
  506. package/lib-esm/__tests__/Portal.test.js +104 -0
  507. package/lib-esm/__tests__/Position.test.d.ts +1 -0
  508. package/lib-esm/__tests__/Position.test.js +133 -0
  509. package/lib-esm/__tests__/ProgressBar.test.d.ts +1 -0
  510. package/lib-esm/__tests__/ProgressBar.test.js +58 -0
  511. package/lib-esm/__tests__/SelectMenu.test.d.ts +1 -0
  512. package/lib-esm/__tests__/SelectMenu.test.js +145 -0
  513. package/lib-esm/__tests__/SelectMenu.types.test.d.ts +3 -0
  514. package/lib-esm/__tests__/SelectMenu.types.test.js +33 -0
  515. package/lib-esm/__tests__/SelectPanel.test.d.ts +1 -0
  516. package/lib-esm/__tests__/SelectPanel.test.js +65 -0
  517. package/lib-esm/__tests__/SelectPanel.types.test.d.ts +3 -0
  518. package/lib-esm/__tests__/SelectPanel.types.test.js +29 -0
  519. package/lib-esm/__tests__/SideNav.test.d.ts +1 -0
  520. package/lib-esm/__tests__/SideNav.test.js +60 -0
  521. package/lib-esm/__tests__/SideNav.types.test.d.ts +3 -0
  522. package/lib-esm/__tests__/SideNav.types.test.js +13 -0
  523. package/lib-esm/__tests__/Spinner.test.d.ts +1 -0
  524. package/lib-esm/__tests__/Spinner.test.js +43 -0
  525. package/lib-esm/__tests__/StateLabel.test.d.ts +1 -0
  526. package/lib-esm/__tests__/StateLabel.test.js +61 -0
  527. package/lib-esm/__tests__/StateLabel.types.test.d.ts +3 -0
  528. package/lib-esm/__tests__/StateLabel.types.test.js +13 -0
  529. package/lib-esm/__tests__/StyledOcticon.test.d.ts +1 -0
  530. package/lib-esm/__tests__/StyledOcticon.test.js +29 -0
  531. package/lib-esm/__tests__/StyledOcticon.types.test.d.ts +3 -0
  532. package/lib-esm/__tests__/StyledOcticon.types.test.js +16 -0
  533. package/lib-esm/__tests__/SubNav.test.d.ts +1 -0
  534. package/lib-esm/__tests__/SubNav.test.js +50 -0
  535. package/lib-esm/__tests__/SubNav.types.test.d.ts +3 -0
  536. package/lib-esm/__tests__/SubNav.types.test.js +14 -0
  537. package/lib-esm/__tests__/SubNavLink.test.d.ts +1 -0
  538. package/lib-esm/__tests__/SubNavLink.test.js +39 -0
  539. package/lib-esm/__tests__/TabNav.test.d.ts +1 -0
  540. package/lib-esm/__tests__/TabNav.test.js +39 -0
  541. package/lib-esm/__tests__/TabNav.types.test.d.ts +3 -0
  542. package/lib-esm/__tests__/TabNav.types.test.js +12 -0
  543. package/lib-esm/__tests__/Text.test.d.ts +1 -0
  544. package/lib-esm/__tests__/Text.test.js +93 -0
  545. package/lib-esm/__tests__/TextInput.test.d.ts +1 -0
  546. package/lib-esm/__tests__/TextInput.test.js +68 -0
  547. package/lib-esm/__tests__/TextInputWithTokens.test.d.ts +1 -0
  548. package/lib-esm/__tests__/TextInputWithTokens.test.js +511 -0
  549. package/lib-esm/__tests__/ThemeProvider.test.d.ts +1 -0
  550. package/lib-esm/__tests__/ThemeProvider.test.js +408 -0
  551. package/lib-esm/__tests__/Timeline.test.d.ts +1 -0
  552. package/lib-esm/__tests__/Timeline.test.js +65 -0
  553. package/lib-esm/__tests__/Timeline.types.test.d.ts +3 -0
  554. package/lib-esm/__tests__/Timeline.types.test.js +18 -0
  555. package/lib-esm/__tests__/Token.test.d.ts +1 -0
  556. package/lib-esm/__tests__/Token.test.js +166 -0
  557. package/lib-esm/__tests__/Tooltip.test.d.ts +1 -0
  558. package/lib-esm/__tests__/Tooltip.test.js +59 -0
  559. package/lib-esm/__tests__/Tooltip.types.test.d.ts +3 -0
  560. package/lib-esm/__tests__/Tooltip.types.test.js +13 -0
  561. package/lib-esm/__tests__/Truncate.test.d.ts +1 -0
  562. package/lib-esm/__tests__/Truncate.test.js +53 -0
  563. package/lib-esm/__tests__/Truncate.types.test.d.ts +3 -0
  564. package/lib-esm/__tests__/Truncate.types.test.js +16 -0
  565. package/lib-esm/__tests__/UnderlineNav.test.d.ts +1 -0
  566. package/lib-esm/__tests__/UnderlineNav.test.js +60 -0
  567. package/lib-esm/__tests__/UnderlineNav.types.test.d.ts +3 -0
  568. package/lib-esm/__tests__/UnderlineNav.types.test.js +12 -0
  569. package/lib-esm/__tests__/UnderlineNavLink.test.d.ts +1 -0
  570. package/lib-esm/__tests__/UnderlineNavLink.test.js +41 -0
  571. package/lib-esm/__tests__/behaviors/anchoredPosition.test.d.ts +1 -0
  572. package/lib-esm/__tests__/behaviors/anchoredPosition.test.js +388 -0
  573. package/lib-esm/__tests__/behaviors/focusTrap.test.d.ts +1 -0
  574. package/lib-esm/__tests__/behaviors/focusTrap.test.js +227 -0
  575. package/lib-esm/__tests__/behaviors/focusZone.test.d.ts +1 -0
  576. package/lib-esm/__tests__/behaviors/focusZone.test.js +487 -0
  577. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.d.ts +1 -0
  578. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.js +48 -0
  579. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +1 -0
  580. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.js +224 -0
  581. package/lib-esm/__tests__/filterObject.test.d.ts +1 -0
  582. package/lib-esm/__tests__/filterObject.test.js +27 -0
  583. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.d.ts +1 -0
  584. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.js +46 -0
  585. package/lib-esm/__tests__/hooks/useOnEscapePress.test.d.ts +1 -0
  586. package/lib-esm/__tests__/hooks/useOnEscapePress.test.js +23 -0
  587. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.d.ts +1 -0
  588. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.js +68 -0
  589. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +1 -0
  590. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.js +52 -0
  591. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +1 -0
  592. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.js +36 -0
  593. package/lib-esm/__tests__/theme.test.d.ts +1 -0
  594. package/lib-esm/__tests__/theme.test.js +33 -0
  595. package/lib-esm/__tests__/themeGet.test.d.ts +1 -0
  596. package/lib-esm/__tests__/themeGet.test.js +22 -0
  597. package/lib-esm/__tests__/useSafeTimeout.test.d.ts +1 -0
  598. package/lib-esm/__tests__/useSafeTimeout.test.js +39 -0
  599. package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
  600. package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
  601. package/lib-esm/stories/ActionList.stories.js +395 -0
  602. package/lib-esm/stories/ActionList2.stories.js +797 -0
  603. package/lib-esm/stories/ActionMenu.stories.js +303 -0
  604. package/lib-esm/stories/AnchoredOverlay.stories.js +101 -0
  605. package/lib-esm/stories/Autocomplete.stories.js +560 -0
  606. package/lib-esm/stories/AvatarStack.stories.js +32 -0
  607. package/lib-esm/stories/Button.stories.js +86 -0
  608. package/lib-esm/stories/ConfirmationDialog.stories.js +94 -0
  609. package/lib-esm/stories/Dialog.stories.js +244 -0
  610. package/lib-esm/stories/DropdownMenu.stories.js +94 -0
  611. package/lib-esm/stories/IssueLabelToken.stories.js +139 -0
  612. package/lib-esm/stories/NewButton.stories.js +178 -0
  613. package/lib-esm/stories/Overlay.stories.js +173 -0
  614. package/lib-esm/stories/Portal.stories.js +68 -0
  615. package/lib-esm/stories/ProfileToken.stories.js +136 -0
  616. package/lib-esm/stories/SelectPanel.stories.js +334 -0
  617. package/lib-esm/stories/TextInput.stories.js +117 -0
  618. package/lib-esm/stories/TextInputWithTokens.stories.js +210 -0
  619. package/lib-esm/stories/ThemeProvider.stories.js +83 -0
  620. package/lib-esm/stories/Token.stories.js +146 -0
  621. package/lib-esm/stories/useAnchoredPosition.stories.js +313 -0
  622. package/lib-esm/stories/useFocusTrap.stories.js +313 -0
  623. package/lib-esm/stories/useFocusZone.stories.js +562 -0
  624. package/migrating.md +250 -0
  625. package/now.json +17 -0
  626. package/package-lock.json +66509 -0
  627. package/package.json +1 -1
  628. package/rollup.config.js +36 -0
  629. package/script/build +21 -0
  630. package/script/build-storybook +10 -0
  631. package/script/setup +12 -0
  632. package/src/ActionList/Divider.tsx +25 -0
  633. package/src/ActionList/Group.tsx +45 -0
  634. package/src/ActionList/Header.tsx +74 -0
  635. package/src/ActionList/Item.tsx +480 -0
  636. package/src/ActionList/List.tsx +258 -0
  637. package/src/ActionList/index.ts +21 -0
  638. package/src/ActionList2/Description.tsx +52 -0
  639. package/src/ActionList2/Divider.tsx +24 -0
  640. package/src/ActionList2/Group.tsx +103 -0
  641. package/src/ActionList2/Header.tsx +58 -0
  642. package/src/ActionList2/Item.tsx +246 -0
  643. package/src/ActionList2/LinkItem.tsx +49 -0
  644. package/src/ActionList2/List.tsx +55 -0
  645. package/src/ActionList2/Selection.tsx +60 -0
  646. package/src/ActionList2/Visuals.tsx +76 -0
  647. package/src/ActionList2/index.ts +39 -0
  648. package/src/ActionMenu.tsx +106 -0
  649. package/src/AnchoredOverlay/AnchoredOverlay.tsx +191 -0
  650. package/src/AnchoredOverlay/index.ts +2 -0
  651. package/src/Autocomplete/Autocomplete.tsx +103 -0
  652. package/src/Autocomplete/AutocompleteContext.tsx +19 -0
  653. package/src/Autocomplete/AutocompleteInput.tsx +179 -0
  654. package/src/Autocomplete/AutocompleteMenu.tsx +341 -0
  655. package/src/Autocomplete/AutocompleteOverlay.tsx +68 -0
  656. package/src/Autocomplete/index.ts +2 -0
  657. package/src/Avatar.tsx +46 -0
  658. package/src/AvatarPair.tsx +35 -0
  659. package/src/AvatarStack.tsx +159 -0
  660. package/src/BaseStyles.tsx +53 -0
  661. package/src/BorderBox.tsx +18 -0
  662. package/src/Box.tsx +54 -0
  663. package/src/BranchName.tsx +19 -0
  664. package/src/Breadcrumbs.tsx +101 -0
  665. package/src/Button/Button.tsx +39 -0
  666. package/src/Button/ButtonBase.tsx +39 -0
  667. package/src/Button/ButtonClose.tsx +36 -0
  668. package/src/Button/ButtonDanger.tsx +42 -0
  669. package/src/Button/ButtonGroup.tsx +55 -0
  670. package/src/Button/ButtonInvisible.tsx +31 -0
  671. package/src/Button/ButtonOutline.tsx +42 -0
  672. package/src/Button/ButtonPrimary.tsx +40 -0
  673. package/src/Button/ButtonStyles.tsx +36 -0
  674. package/src/Button/ButtonTableList.tsx +45 -0
  675. package/src/Button/index.ts +16 -0
  676. package/src/Caret.tsx +133 -0
  677. package/src/CircleBadge.tsx +53 -0
  678. package/src/CircleOcticon.tsx +37 -0
  679. package/src/CounterLabel.tsx +50 -0
  680. package/src/Details.tsx +23 -0
  681. package/src/Dialog/ConfirmationDialog.tsx +184 -0
  682. package/src/Dialog/Dialog.tsx +444 -0
  683. package/src/Dialog.tsx +145 -0
  684. package/src/Dropdown.tsx +154 -0
  685. package/src/DropdownMenu/DropdownButton.tsx +15 -0
  686. package/src/DropdownMenu/DropdownMenu.tsx +115 -0
  687. package/src/DropdownMenu/index.ts +4 -0
  688. package/src/DropdownStyles.ts +128 -0
  689. package/src/FilterList.tsx +75 -0
  690. package/src/FilteredActionList/FilteredActionList.tsx +142 -0
  691. package/src/FilteredActionList/index.ts +2 -0
  692. package/src/FilteredSearch.tsx +27 -0
  693. package/src/Flash.tsx +75 -0
  694. package/src/Flex.tsx +15 -0
  695. package/src/FormGroup.tsx +24 -0
  696. package/src/Grid.tsx +15 -0
  697. package/src/Header.tsx +74 -0
  698. package/src/Heading.tsx +21 -0
  699. package/src/Label.tsx +72 -0
  700. package/src/LabelGroup.tsx +17 -0
  701. package/src/Link.tsx +42 -0
  702. package/src/NewButton/button-counter.tsx +15 -0
  703. package/src/NewButton/button.tsx +283 -0
  704. package/src/NewButton/index.ts +10 -0
  705. package/src/NewButton/types.ts +36 -0
  706. package/src/Overlay.tsx +203 -0
  707. package/src/Pagehead.tsx +16 -0
  708. package/src/Pagination/Pagination.tsx +212 -0
  709. package/src/Pagination/index.ts +4 -0
  710. package/src/Pagination/model.tsx +187 -0
  711. package/src/PointerBox.tsx +31 -0
  712. package/src/Popover.tsx +225 -0
  713. package/src/Portal/Portal.tsx +97 -0
  714. package/src/Portal/index.ts +5 -0
  715. package/src/Position.tsx +63 -0
  716. package/src/ProgressBar.tsx +52 -0
  717. package/src/SelectMenu/SelectMenu.tsx +123 -0
  718. package/src/SelectMenu/SelectMenuContext.tsx +9 -0
  719. package/src/SelectMenu/SelectMenuDivider.tsx +24 -0
  720. package/src/SelectMenu/SelectMenuFilter.tsx +50 -0
  721. package/src/SelectMenu/SelectMenuFooter.tsx +27 -0
  722. package/src/SelectMenu/SelectMenuHeader.tsx +48 -0
  723. package/src/SelectMenu/SelectMenuItem.tsx +136 -0
  724. package/src/SelectMenu/SelectMenuList.tsx +41 -0
  725. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +25 -0
  726. package/src/SelectMenu/SelectMenuModal.tsx +119 -0
  727. package/src/SelectMenu/SelectMenuTab.tsx +87 -0
  728. package/src/SelectMenu/SelectMenuTabPanel.tsx +29 -0
  729. package/src/SelectMenu/SelectMenuTabs.tsx +43 -0
  730. package/src/SelectMenu/hooks/useKeyboardNav.js +90 -0
  731. package/src/SelectMenu/index.ts +15 -0
  732. package/src/SelectPanel/SelectPanel.tsx +173 -0
  733. package/src/SelectPanel/index.ts +2 -0
  734. package/src/SideNav.tsx +191 -0
  735. package/src/Spinner.tsx +59 -0
  736. package/src/StateLabel.tsx +112 -0
  737. package/src/StyledOcticon.tsx +22 -0
  738. package/src/SubNav.tsx +124 -0
  739. package/src/TabNav.tsx +73 -0
  740. package/src/Text.tsx +13 -0
  741. package/src/TextInput.tsx +68 -0
  742. package/src/TextInputWithTokens.tsx +351 -0
  743. package/src/ThemeProvider.tsx +176 -0
  744. package/src/Timeline.tsx +140 -0
  745. package/src/Token/AvatarToken.tsx +54 -0
  746. package/src/Token/IssueLabelToken.tsx +150 -0
  747. package/src/Token/Token.tsx +126 -0
  748. package/src/Token/TokenBase.tsx +129 -0
  749. package/src/Token/_RemoveTokenButton.tsx +111 -0
  750. package/src/Token/_TokenTextContainer.tsx +47 -0
  751. package/src/Token/index.ts +3 -0
  752. package/src/Tooltip.tsx +263 -0
  753. package/src/Truncate.tsx +31 -0
  754. package/src/UnderlineNav.tsx +107 -0
  755. package/src/_TextInputWrapper.tsx +113 -0
  756. package/src/_UnstyledTextInput.tsx +19 -0
  757. package/src/__tests__/.eslintrc.json +11 -0
  758. package/src/__tests__/ActionList.test.tsx +53 -0
  759. package/src/__tests__/ActionList.types.test.tsx +51 -0
  760. package/src/__tests__/ActionList2.test.tsx +47 -0
  761. package/src/__tests__/ActionMenu.test.tsx +136 -0
  762. package/src/__tests__/AnchoredOverlay.test.tsx +150 -0
  763. package/src/__tests__/Autocomplete.test.tsx +444 -0
  764. package/src/__tests__/Avatar.test.tsx +44 -0
  765. package/src/__tests__/AvatarStack.test.tsx +48 -0
  766. package/src/__tests__/BorderBox.test.tsx +43 -0
  767. package/src/__tests__/Box.test.tsx +42 -0
  768. package/src/__tests__/BranchName.test.tsx +26 -0
  769. package/src/__tests__/Breadcrumbs.test.tsx +27 -0
  770. package/src/__tests__/Breadcrumbs.types.test.tsx +22 -0
  771. package/src/__tests__/BreadcrumbsItem.test.tsx +31 -0
  772. package/src/__tests__/Button.test.tsx +128 -0
  773. package/src/__tests__/Caret.test.tsx +36 -0
  774. package/src/__tests__/CircleBadge.test.tsx +66 -0
  775. package/src/__tests__/CircleBadge.types.test.tsx +11 -0
  776. package/src/__tests__/CircleOcticon.test.tsx +50 -0
  777. package/src/__tests__/ConfirmationDialog.test.tsx +120 -0
  778. package/src/__tests__/CounterLabel.test.tsx +50 -0
  779. package/src/__tests__/CounterLabel.types.test.tsx +11 -0
  780. package/src/__tests__/Details.test.tsx +115 -0
  781. package/src/__tests__/Dialog.test.tsx +155 -0
  782. package/src/__tests__/Dialog.types.test.tsx +11 -0
  783. package/src/__tests__/Dialog2.types.test.tsx +11 -0
  784. package/src/__tests__/Dropdown.test.tsx +53 -0
  785. package/src/__tests__/Dropdown.types.test.tsx +21 -0
  786. package/src/__tests__/DropdownMenu.test.tsx +136 -0
  787. package/src/__tests__/FilterList.test.tsx +26 -0
  788. package/src/__tests__/FilterList.types.test.tsx +17 -0
  789. package/src/__tests__/FilterListItem.test.tsx +31 -0
  790. package/src/__tests__/FilteredSearch.test.tsx +26 -0
  791. package/src/__tests__/FilteredSearch.types.test.tsx +11 -0
  792. package/src/__tests__/Flash.test.tsx +45 -0
  793. package/src/__tests__/Flash.types.test.tsx +11 -0
  794. package/src/__tests__/Flex.test.tsx +58 -0
  795. package/src/__tests__/FormGroup.test.tsx +38 -0
  796. package/src/__tests__/FormGroup.types.test.tsx +11 -0
  797. package/src/__tests__/Grid.test.tsx +82 -0
  798. package/src/__tests__/Header.test.tsx +49 -0
  799. package/src/__tests__/Header.types.test.tsx +19 -0
  800. package/src/__tests__/Heading.test.tsx +91 -0
  801. package/src/__tests__/KeyPaths.types.test.ts +14 -0
  802. package/src/__tests__/Label.test.tsx +34 -0
  803. package/src/__tests__/Label.types.test.tsx +11 -0
  804. package/src/__tests__/LabelGroup.test.tsx +30 -0
  805. package/src/__tests__/LabelGroup.types.test.tsx +11 -0
  806. package/src/__tests__/Link.test.tsx +47 -0
  807. package/src/__tests__/Link.types.test.tsx +11 -0
  808. package/src/__tests__/Merge.types.test.ts +39 -0
  809. package/src/__tests__/NewButton.test.tsx +70 -0
  810. package/src/__tests__/Overlay.test.tsx +103 -0
  811. package/src/__tests__/Overlay.types.test.tsx +33 -0
  812. package/src/__tests__/Pagehead.test.tsx +23 -0
  813. package/src/__tests__/Pagehead.types.test.tsx +11 -0
  814. package/src/__tests__/Pagination/Pagination.test.tsx +30 -0
  815. package/src/__tests__/Pagination/PaginationModel.test.tsx +133 -0
  816. package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +184 -0
  817. package/src/__tests__/Pagination.types.test.tsx +11 -0
  818. package/src/__tests__/PointerBox.test.tsx +34 -0
  819. package/src/__tests__/Popover.test.tsx +68 -0
  820. package/src/__tests__/Popover.types.test.tsx +17 -0
  821. package/src/__tests__/Portal.test.tsx +103 -0
  822. package/src/__tests__/Position.test.tsx +117 -0
  823. package/src/__tests__/ProgressBar.test.tsx +40 -0
  824. package/src/__tests__/SelectMenu.test.tsx +142 -0
  825. package/src/__tests__/SelectMenu.types.test.tsx +37 -0
  826. package/src/__tests__/SelectPanel.test.tsx +63 -0
  827. package/src/__tests__/SelectPanel.types.test.tsx +31 -0
  828. package/src/__tests__/SideNav.test.tsx +62 -0
  829. package/src/__tests__/SideNav.types.test.tsx +11 -0
  830. package/src/__tests__/Spinner.test.tsx +42 -0
  831. package/src/__tests__/StateLabel.test.tsx +48 -0
  832. package/src/__tests__/StateLabel.types.test.tsx +11 -0
  833. package/src/__tests__/StyledOcticon.test.tsx +26 -0
  834. package/src/__tests__/StyledOcticon.types.test.tsx +12 -0
  835. package/src/__tests__/SubNav.test.tsx +50 -0
  836. package/src/__tests__/SubNav.types.test.tsx +25 -0
  837. package/src/__tests__/SubNavLink.test.tsx +31 -0
  838. package/src/__tests__/TabNav.test.tsx +32 -0
  839. package/src/__tests__/TabNav.types.test.tsx +22 -0
  840. package/src/__tests__/Text.test.tsx +78 -0
  841. package/src/__tests__/TextInput.test.tsx +49 -0
  842. package/src/__tests__/TextInputWithTokens.test.tsx +422 -0
  843. package/src/__tests__/ThemeProvider.test.tsx +441 -0
  844. package/src/__tests__/Timeline.test.tsx +58 -0
  845. package/src/__tests__/Timeline.types.test.tsx +31 -0
  846. package/src/__tests__/Token.test.tsx +118 -0
  847. package/src/__tests__/Tooltip.test.tsx +52 -0
  848. package/src/__tests__/Tooltip.types.test.tsx +11 -0
  849. package/src/__tests__/Truncate.test.tsx +43 -0
  850. package/src/__tests__/Truncate.types.test.tsx +11 -0
  851. package/src/__tests__/UnderlineNav.test.tsx +58 -0
  852. package/src/__tests__/UnderlineNav.types.test.tsx +22 -0
  853. package/src/__tests__/UnderlineNavLink.test.tsx +31 -0
  854. package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +223 -0
  855. package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
  856. package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +80 -0
  857. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +232 -0
  858. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +3888 -0
  859. package/src/__tests__/__snapshots__/Avatar.test.tsx.snap +19 -0
  860. package/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +377 -0
  861. package/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +14 -0
  862. package/src/__tests__/__snapshots__/Box.test.tsx.snap +201 -0
  863. package/src/__tests__/__snapshots__/BranchName.test.tsx.snap +17 -0
  864. package/src/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap +29 -0
  865. package/src/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +79 -0
  866. package/src/__tests__/__snapshots__/Button.test.tsx.snap +840 -0
  867. package/src/__tests__/__snapshots__/Caret.test.tsx.snap +373 -0
  868. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +142 -0
  869. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +65 -0
  870. package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +89 -0
  871. package/src/__tests__/__snapshots__/CounterLabel.test.tsx.snap +22 -0
  872. package/src/__tests__/__snapshots__/Details.test.tsx.snap +15 -0
  873. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +201 -0
  874. package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +249 -0
  875. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +107 -0
  876. package/src/__tests__/__snapshots__/FilterList.test.tsx.snap +13 -0
  877. package/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap +80 -0
  878. package/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap +32 -0
  879. package/src/__tests__/__snapshots__/Flash.test.tsx.snap +32 -0
  880. package/src/__tests__/__snapshots__/Flex.test.tsx.snap +130 -0
  881. package/src/__tests__/__snapshots__/FormGroup.test.tsx.snap +25 -0
  882. package/src/__tests__/__snapshots__/Grid.test.tsx.snap +178 -0
  883. package/src/__tests__/__snapshots__/Header.test.tsx.snap +79 -0
  884. package/src/__tests__/__snapshots__/Heading.test.tsx.snap +13 -0
  885. package/src/__tests__/__snapshots__/Label.test.tsx.snap +73 -0
  886. package/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap +15 -0
  887. package/src/__tests__/__snapshots__/Link.test.tsx.snap +212 -0
  888. package/src/__tests__/__snapshots__/NewButton.test.tsx.snap +305 -0
  889. package/src/__tests__/__snapshots__/Pagehead.test.tsx.snap +15 -0
  890. package/src/__tests__/__snapshots__/PointerBox.test.tsx.snap +174 -0
  891. package/src/__tests__/__snapshots__/Popover.test.tsx.snap +4687 -0
  892. package/src/__tests__/__snapshots__/Position.test.tsx.snap +44 -0
  893. package/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +53 -0
  894. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +473 -0
  895. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +124 -0
  896. package/src/__tests__/__snapshots__/SideNav.test.tsx.snap +143 -0
  897. package/src/__tests__/__snapshots__/Spinner.test.tsx.snap +33 -0
  898. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +395 -0
  899. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +26 -0
  900. package/src/__tests__/__snapshots__/SubNav.test.tsx.snap +44 -0
  901. package/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +199 -0
  902. package/src/__tests__/__snapshots__/TabNav.test.tsx.snap +58 -0
  903. package/src/__tests__/__snapshots__/Text.test.tsx.snap +7 -0
  904. package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +446 -0
  905. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +6045 -0
  906. package/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +15 -0
  907. package/src/__tests__/__snapshots__/Timeline.test.tsx.snap +159 -0
  908. package/src/__tests__/__snapshots__/Token.test.tsx.snap +3811 -0
  909. package/src/__tests__/__snapshots__/Tooltip.test.tsx.snap +227 -0
  910. package/src/__tests__/__snapshots__/Truncate.test.tsx.snap +17 -0
  911. package/src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap +59 -0
  912. package/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +130 -0
  913. package/src/__tests__/behaviors/anchoredPosition.test.ts +295 -0
  914. package/src/__tests__/behaviors/focusTrap.test.tsx +236 -0
  915. package/src/__tests__/behaviors/focusZone.test.tsx +549 -0
  916. package/src/__tests__/behaviors/iterateFocusableElements.test.tsx +61 -0
  917. package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts +195 -0
  918. package/src/__tests__/filterObject.test.ts +54 -0
  919. package/src/__tests__/hooks/useAnchoredPosition.test.tsx +31 -0
  920. package/src/__tests__/hooks/useOnEscapePress.test.tsx +16 -0
  921. package/src/__tests__/hooks/useOnOutsideClick.test.tsx +48 -0
  922. package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx +48 -0
  923. package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx +39 -0
  924. package/src/__tests__/theme.test.ts +41 -0
  925. package/src/__tests__/themeGet.test.ts +15 -0
  926. package/src/__tests__/useSafeTimeout.test.tsx +36 -0
  927. package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
  928. package/src/__tests__/utils/createSlots.test.tsx +74 -0
  929. package/src/behaviors/anchoredPosition.ts +442 -0
  930. package/src/behaviors/focusTrap.ts +184 -0
  931. package/src/behaviors/focusZone.ts +713 -0
  932. package/src/behaviors/scrollIntoViewingArea.ts +27 -0
  933. package/src/constants.ts +62 -0
  934. package/src/drafts.ts +10 -0
  935. package/src/hooks/index.ts +11 -0
  936. package/src/hooks/useAnchoredPosition.ts +54 -0
  937. package/src/hooks/useCombinedRefs.ts +40 -0
  938. package/src/hooks/useDetails.tsx +54 -0
  939. package/src/hooks/useDialog.ts +121 -0
  940. package/src/hooks/useFocusTrap.ts +80 -0
  941. package/src/hooks/useFocusZone.ts +64 -0
  942. package/src/hooks/useOnEscapePress.ts +63 -0
  943. package/src/hooks/useOnOutsideClick.tsx +82 -0
  944. package/src/hooks/useOpenAndCloseFocus.ts +32 -0
  945. package/src/hooks/useOverlay.tsx +34 -0
  946. package/src/hooks/useProvidedRefOrCreate.ts +14 -0
  947. package/src/hooks/useProvidedStateOrCreate.ts +27 -0
  948. package/src/hooks/useRenderForcingRef.ts +22 -0
  949. package/src/hooks/useResizeObserver.ts +11 -0
  950. package/src/hooks/useSafeTimeout.ts +38 -0
  951. package/src/hooks/useScrollFlash.ts +21 -0
  952. package/src/index.ts +172 -0
  953. package/src/polyfills/eventListenerSignal.ts +66 -0
  954. package/src/stories/ActionList.stories.tsx +436 -0
  955. package/src/stories/ActionList2.stories.tsx +1291 -0
  956. package/src/stories/ActionMenu.stories.tsx +331 -0
  957. package/src/stories/AnchoredOverlay.stories.tsx +117 -0
  958. package/src/stories/Autocomplete.stories.tsx +655 -0
  959. package/src/stories/AvatarStack.stories.tsx +37 -0
  960. package/src/stories/Button.stories.tsx +92 -0
  961. package/src/stories/ConfirmationDialog.stories.tsx +105 -0
  962. package/src/stories/Dialog.stories.tsx +240 -0
  963. package/src/stories/DropdownMenu.stories.tsx +84 -0
  964. package/src/stories/IssueLabelToken.stories.tsx +138 -0
  965. package/src/stories/NewButton.stories.tsx +201 -0
  966. package/src/stories/Overlay.stories.tsx +213 -0
  967. package/src/stories/Portal.stories.tsx +109 -0
  968. package/src/stories/ProfileToken.stories.tsx +129 -0
  969. package/src/stories/SelectPanel.stories.tsx +353 -0
  970. package/src/stories/TextInput.stories.tsx +113 -0
  971. package/src/stories/TextInputWithTokens.stories.tsx +155 -0
  972. package/src/stories/ThemeProvider.stories.tsx +104 -0
  973. package/src/stories/Token.stories.tsx +137 -0
  974. package/src/stories/useAnchoredPosition.stories.tsx +332 -0
  975. package/src/stories/useFocusTrap.stories.tsx +400 -0
  976. package/src/stories/useFocusZone.stories.tsx +663 -0
  977. package/src/sx.ts +24 -0
  978. package/src/theme-preval.js +80 -0
  979. package/src/theme.ts +89 -0
  980. package/src/utils/create-slots.tsx +96 -0
  981. package/src/utils/deprecate.tsx +73 -0
  982. package/src/utils/isNumeric.tsx +4 -0
  983. package/src/utils/iterateFocusableElements.ts +121 -0
  984. package/src/utils/ssr.tsx +1 -0
  985. package/src/utils/test-deprecations.tsx +19 -0
  986. package/src/utils/test-helpers.tsx +7 -0
  987. package/src/utils/test-matchers.tsx +109 -0
  988. package/src/utils/testing.tsx +242 -0
  989. package/src/utils/theme.js +64 -0
  990. package/src/utils/types/AriaRole.ts +71 -0
  991. package/src/utils/types/ComponentProps.ts +13 -0
  992. package/src/utils/types/Flatten.ts +4 -0
  993. package/src/utils/types/KeyPaths.ts +10 -0
  994. package/src/utils/types/MandateProps.ts +19 -0
  995. package/src/utils/types/Merge.ts +20 -0
  996. package/src/utils/types/index.ts +5 -0
  997. package/src/utils/uniqueId.ts +6 -0
  998. package/src/utils/use-force-update.ts +7 -0
  999. package/src/utils/useIsomorphicLayoutEffect.ts +10 -0
  1000. package/src/utils/userAgent.ts +7 -0
  1001. package/stats.html +3279 -0
  1002. package/tsconfig.build.json +7 -0
  1003. package/tsconfig.json +20 -0
@@ -0,0 +1,37 @@
1
+ ---
2
+ title: AvatarStack
3
+ ---
4
+
5
+ import {Props} from '../src/props'
6
+ import {AvatarStack} from '@primer/components'
7
+
8
+ AvatarStack is used to display more than one Avatar in an inline stack.
9
+
10
+ ### Default example
11
+
12
+ ```jsx live
13
+ <AvatarStack>
14
+ <Avatar alt="Primer" src="https://avatars.githubusercontent.com/primer" />
15
+ <Avatar alt="GitHub" src="https://avatars.githubusercontent.com/github" />
16
+ <Avatar alt="Atom" src="https://avatars.githubusercontent.com/atom" />
17
+ <Avatar alt="Desktop" src="https://avatars.githubusercontent.com/desktop" />
18
+ </AvatarStack>
19
+ ```
20
+
21
+ ### Right aligned
22
+
23
+ ```jsx live
24
+ <AvatarStack alignRight>
25
+ <Avatar alt="Primer" src="https://avatars.githubusercontent.com/primer" />
26
+ <Avatar alt="GitHub" src="https://avatars.githubusercontent.com/github" />
27
+ <Avatar alt="Atom" src="https://avatars.githubusercontent.com/atom" />
28
+ <Avatar alt="Desktop" src="https://avatars.githubusercontent.com/desktop" />
29
+ </AvatarStack>
30
+ ```
31
+
32
+ ## Props
33
+
34
+ | Name | Type | Default | Description |
35
+ | :--------- | :---------------- | :-----: | :----------------------------------- |
36
+ | alignRight | Boolean | | Creates right aligned AvatarStack |
37
+ | sx | SystemStyleObject | {} | Style to be applied to the component |
@@ -0,0 +1,46 @@
1
+ ---
2
+ title: BorderBox
3
+ status: Deprecated
4
+ ---
5
+
6
+ BorderBox is a Box component with a border. When no `borderColor` is present, the component defaults to a primary border.
7
+
8
+ ## Deprecation
9
+
10
+ Use [Box](/Box) instead.
11
+
12
+ **Before**
13
+
14
+ ```jsx
15
+ <BorderBox>Item 1</BorderBox>
16
+ ```
17
+
18
+ **After**
19
+
20
+ ```jsx
21
+ <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}>
22
+ Item 1
23
+ </Box>
24
+ ```
25
+
26
+ ## Default example
27
+
28
+ ```jsx live
29
+ <BorderBox>This is a BorderBox</BorderBox>
30
+ ```
31
+
32
+ Note that `BorderBox` has default props set for `borderWidth`, `borderStyle`, and `borderColor`. This means that you cannot use `border={0} borderBottom={1}` or similar patterns; instead, use individual properties like `borderWidth={0} borderBottomWidth={1}`.
33
+
34
+ ## System props
35
+
36
+ BorderBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props.
37
+
38
+ ## Component props
39
+
40
+ | Prop name | Type | Default | Description |
41
+ | :----------- | :--------------- | :---------------------------: | :------------------------------------------------------------ |
42
+ | borderWidth | String | '1px' | Sets the border, use theme values or provide your own. |
43
+ | borderStyle | String | 'solid' | Sets the border style, use theme values or provide your own. |
44
+ | borderColor | String | 'border.primary' (from theme) | Sets the border color, use theme values or provide your own. |
45
+ | borderRadius | String or Number | 2 (from theme) | Sets the border radius, use theme values or provide your own. |
46
+ | boxShadow | String | | Sets box shadow, use theme values or provide your own. |
@@ -0,0 +1,96 @@
1
+ ---
2
+ title: Box
3
+ status: Beta
4
+ description: A low-level utility component that accepts styled system props to enable custom theme-aware styling
5
+ source: https://github.com/primer/react/blob/main/src/Box.tsx
6
+ ---
7
+
8
+ import {Props} from '../src/props'
9
+ import {ComponentChecklist} from '../src/component-checklist'
10
+ import {Box} from '@primer/components'
11
+
12
+ ```jsx live
13
+ <Box color="fg.muted" bg="canvas.subtle" p={3}>
14
+ Hello
15
+ </Box>
16
+ ```
17
+
18
+ ## Props
19
+
20
+ <Props of={Box} />
21
+
22
+ Box also accepts all [styled system props](https://styled-system.com/table/).
23
+
24
+ ## Examples
25
+
26
+ ### Border on all sides
27
+
28
+ ```jsx live
29
+ <Box borderColor="border.default" borderWidth={1} borderStyle="solid" p={3}>
30
+ Hello
31
+ </Box>
32
+ ```
33
+
34
+ ### Border on one side
35
+
36
+ ```jsx live
37
+ <Box borderColor="border.default" borderBottomWidth={1} borderBottomStyle="solid" pb={3}>
38
+ Hello
39
+ </Box>
40
+ ```
41
+
42
+ ### Flexbox
43
+
44
+ Use Box to create [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) layouts.
45
+
46
+ ```jsx live
47
+ <Box display="flex">
48
+ <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
49
+ 1
50
+ </Box>
51
+ <Box flexGrow={1} p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
52
+ 2
53
+ </Box>
54
+ <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
55
+ 3
56
+ </Box>
57
+ </Box>
58
+ ```
59
+
60
+ ### Grid
61
+
62
+ Use Box to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids) layouts.
63
+
64
+ ```jsx live
65
+ <Box display="grid" gridTemplateColumns="1fr 1fr" gridGap={3}>
66
+ <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
67
+ 1
68
+ </Box>
69
+ <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
70
+ 2
71
+ </Box>
72
+ <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
73
+ 3
74
+ </Box>
75
+ </Box>
76
+ ```
77
+
78
+ ## Component status
79
+
80
+ <ComponentChecklist
81
+ items={{
82
+ propsDocumented: true,
83
+ noUnnecessaryDeps: true,
84
+ adaptsToThemes: true,
85
+ adaptsToScreenSizes: true,
86
+ fullTestCoverage: true,
87
+ usedInProduction: true,
88
+ usageExamplesDocumented: true,
89
+ designReviewed: null,
90
+ a11yReviewed: null,
91
+ stableApi: false,
92
+ addressedApiFeedback: false,
93
+ hasDesignGuidelines: null,
94
+ hasFigmaComponent: null
95
+ }}
96
+ />
@@ -0,0 +1,18 @@
1
+ ---
2
+ title: BranchName
3
+ ---
4
+
5
+ BranchName is a label-type component rendered as an `<a>` tag by default with monospace font.
6
+
7
+ ## Default example
8
+
9
+ ```jsx live live
10
+ <BranchName>a_new_feature_branch</BranchName>
11
+ ```
12
+
13
+ ## Component props
14
+
15
+ | Name | Type | Default | Description |
16
+ | :--- | :----- | :-----: | :---------------------------------- |
17
+ | as | String | `<a>` | sets the HTML tag for the component |
18
+ | href | String | | a URL to link the component to |
@@ -0,0 +1,47 @@
1
+ ---
2
+ title: Breadcrumbs
3
+ status: Alpha
4
+ source: https://github.com/primer/react/blob/main/src/Breadcrumbs.tsx
5
+ ---
6
+
7
+ Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:
8
+
9
+ - Are many levels deep on a site
10
+ - Do not have a section-level navigation
11
+ - May need the ability to quickly go back to the previous (parent) page
12
+
13
+ To use Breadcrumbs with [react-router](https://github.com/ReactTraining/react-router) or
14
+ [react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
15
+ `as={NavLink}` and omit the `selected` prop.
16
+ This ensures that the NavLink gets `activeClassName='selected'`
17
+
18
+ ## Default example
19
+
20
+ ```jsx live
21
+ <Breadcrumbs>
22
+ <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
23
+ <Breadcrumbs.Item href="/about">About</Breadcrumbs.Item>
24
+ <Breadcrumbs.Item href="/about/team" selected>
25
+ Team
26
+ </Breadcrumbs.Item>
27
+ </Breadcrumbs>
28
+ ```
29
+
30
+ ## Component props
31
+
32
+ ### Breadcrumbs
33
+
34
+ | Prop name | Type | Default | Description |
35
+ | :-------- | :---------------- | :-----: | :----------------------------------- |
36
+ | children | ReactNode | | The `Breadcrumbs.Item`s |
37
+ | className | string | | |
38
+ | sx | SystemStyleObject | `{}` | Style to be applied to the component |
39
+
40
+ ### Breadcrumbs.Item
41
+
42
+ | Prop name | Type | Default | Description |
43
+ | :-------- | :---------------- | :-----: | :----------------------------------------------- |
44
+ | as | string | `a` | Sets the HTML tag for the component |
45
+ | href | string | | URL to be used for the Link |
46
+ | selected | boolean | `false` | Used to style the link as selected or unselected |
47
+ | sx | SystemStyleObject | `{}` | Style to be applied to the component |
@@ -0,0 +1,46 @@
1
+ ---
2
+ title: Buttons
3
+ ---
4
+
5
+ `Button` is used for actions, like in forms, while `Link` is used for destinations, or moving from one page to another.
6
+
7
+ In special cases where you'd like to use a `<a>` styled like a Button, use `<Button as='a'>` and provide an `href`.
8
+
9
+ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `ButtonGroup` gets the same props as `Box`.
10
+
11
+ ## Default examples
12
+
13
+ ```jsx live
14
+ <>
15
+ <Button>Button</Button>
16
+ <ButtonDanger>Button Danger</ButtonDanger>
17
+ <ButtonOutline>Button Outline</ButtonOutline>
18
+ <ButtonPrimary>Button Primary</ButtonPrimary>
19
+ <ButtonInvisible>Button Invisible</ButtonInvisible>
20
+ <ButtonClose onClick={() => window.alert('button clicked')} />
21
+
22
+ <ButtonGroup display="block" my={2}>
23
+ <Button>Button</Button>
24
+ <Button>Button</Button>
25
+ <Button>Button</Button>
26
+ </ButtonGroup>
27
+
28
+ <ButtonTableList>Button Table List </ButtonTableList>
29
+ </>
30
+ ```
31
+
32
+ ## Component props
33
+
34
+ Native `<button>` HTML attributes are forwarded to the underlying React `button` component and are not listed below.
35
+
36
+ ### Button
37
+
38
+ | Prop name | Type | Default | Description |
39
+ | :-------- | :---------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------- |
40
+ | as | String | `button` | sets the HTML tag for the component |
41
+ | sx | SystemStyleObject | {} | Additional styles |
42
+ | variant | String | 'medium' | a value of `small`, `medium`, or `large` results in smaller or larger Button text size; no effect if `fontSize` prop is set |
43
+
44
+ ### ButtonGroup
45
+
46
+ `ButtonGroup` has access to the same props as `Box`
@@ -0,0 +1,35 @@
1
+ ---
2
+ title: CircleBadge
3
+ ---
4
+
5
+ Use CircleBadge to visually connect logos of third party services like in marketplace. Use CircleBadge.Icon to add an Octicon to the CircleBadge.
6
+
7
+ ## Default example
8
+
9
+ ```jsx live
10
+ <CircleBadge>
11
+ <CircleBadge.Icon icon={ZapIcon} />
12
+ </CircleBadge>
13
+ ```
14
+
15
+ ## Component props
16
+
17
+ ### CircleBadge
18
+
19
+ | Name | Type | Default | Description |
20
+ | :------ | :------ | :------: | :---------------------------------------------------------------------------------------------------------- |
21
+ | as | String | `div` | sets the HTML tag for the component |
22
+ | inline | Boolean | false | Styles the badge to display inline |
23
+ | size | Number | | sets the size of the badge in pixels; overrides any value for `variant` prop when set |
24
+ | variant | String | 'medium' | a value of `small`, `medium`, or `large` creates a smaller or larger badge; no effect if `size` prop is set |
25
+
26
+ ### CircleBadge.Icon
27
+
28
+ CircleBadge.Icon components receive all the same props at [StyledOcticon]. They are listed below for convenience:
29
+
30
+ | Name | Type | Default | Description |
31
+ | :------------ | :-------- | :-----------: | :----------------------------------------------------------------------------------------------------------- |
32
+ | ariaLabel | String | | Specifies the `aria-label` attribute, which is read verbatim by screen readers |
33
+ | icon | Component | | [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react) used in the component |
34
+ | size | Number | 16 | Sets the uniform `width` and `height` of the SVG element |
35
+ | verticalAlign | String | `text-bottom` | Sets the `vertical-align` CSS property |
@@ -0,0 +1,18 @@
1
+ ---
2
+ title: CircleOcticon
3
+ ---
4
+
5
+ CircleOcticon renders any Octicon with a circle background. CircleOcticons are most commonly used to represent the status of a pull request in the comment timeline.
6
+
7
+ ## Default example
8
+
9
+ ```jsx live
10
+ <CircleOcticon icon={CheckIcon} size={32} sx={{bg: "success.fg", color: "fg.onEmphasis"}} />
11
+ ```
12
+
13
+ ## Component props
14
+
15
+ | Name | Type | Default | Description |
16
+ | :--- | :------ | :-----: | :------------------------------------------------ |
17
+ | icon | Octicon | | Octicon component used in the component |
18
+ | size | Number | 32 | used to set the width and height of the component |
@@ -0,0 +1,22 @@
1
+ ---
2
+ title: CounterLabel
3
+ tags: pill
4
+ ---
5
+
6
+ Use the CounterLabel component to add a count to navigational elements and buttons.
7
+
8
+ ## Default example
9
+
10
+ ```jsx live
11
+ <>
12
+ <CounterLabel>12</CounterLabel>
13
+ <CounterLabel scheme="primary">13</CounterLabel>
14
+ <CounterLabel scheme="secondary">13</CounterLabel>
15
+ </>
16
+ ```
17
+
18
+ ## Component props
19
+
20
+ | Name | Type | Default | Description |
21
+ | :----- | :----- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
22
+ | scheme | String | | Pass in 'primary' for a darker background and inverse text, or 'gray-light' for a lighter background and primary text. Omitting the scheme prop renders the default counter scheme |
@@ -0,0 +1,105 @@
1
+ ---
2
+ title: Details & useDetails hook
3
+ ---
4
+
5
+ `Details` is a styled `details` element for use with the `useDetails` hook. The `useDetails` hook returns the `open` state, a `setOpen` function to manually change the open state, and **`getDetailsProps` which must be spread onto your `Details` element in order for `Details` to get receive the proper behaviors provided by the hook**. See Kent Dodd's article on this pattern [here](https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters).
6
+
7
+ The `useDetails` hook also takes a few configuration options as parameters which are noted in the table below.
8
+
9
+ You must use a `summary` element as your `Details` trigger button. To style your summary element like a [Button](./Button), you can use the `as` prop (see example below).
10
+
11
+ It's also possible to use the `useDetails` hook with components other than the Primer `Details`, such as a custom `Details` or `Modal` wrapper in your consuming application. All that matters is that the outer element is a `details` and it contains a `summary` for the button that opens and closes the component, and that `getDetailsProps` is properly spread onto the component rendering your `details` element.
12
+
13
+ ```jsx live
14
+ <State>
15
+ {([]) => {
16
+ const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
17
+ return (
18
+ <Details {...getDetailsProps()}>
19
+ <Button as="summary">Hello</Button>
20
+ This is some content
21
+ </Details>
22
+ )
23
+ }}
24
+ </State>
25
+ ```
26
+
27
+ You can use the `open` state returned from the hook to conditionally render content:
28
+
29
+ ```jsx live
30
+ <State>
31
+ {([]) => {
32
+ const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true})
33
+ return (
34
+ <Details {...getDetailsProps()}>
35
+ <Button as="summary">{open ? 'open' : 'close'}</Button>
36
+ This is some content
37
+ </Details>
38
+ )
39
+ }}
40
+ </State>
41
+ ```
42
+
43
+ You can also manually show/hide the content using the `setOpen` function returned from the hook. This can be useful if you have action items in the content of the component such as confirmation buttons:
44
+
45
+ ```jsx live
46
+ <State>
47
+ {([]) => {
48
+ const {getDetailsProps, setOpen} = useDetails({closeOnOutsideClick: true})
49
+ return (
50
+ <Details {...getDetailsProps()}>
51
+ <Button as="summary">Delete item</Button>
52
+ Are you sure?
53
+ <ButtonDanger onClick={() => setOpen(false)}>Yes I'm sure</ButtonDanger>
54
+ </Details>
55
+ )
56
+ }}
57
+ </State>
58
+ ```
59
+
60
+ In previous versions of Primer React Components, we allowed users to pass in a custom `onToggle` function. You can do this now by overriding the `onToggle` function returned in `getDetailsProps`. Please note that in most cases, you'll want the hook's handling of `onToggle` to be run as well, so that the internal state is properly updated. To do this, manually call the `onToggle` handler returned from `useDetails` before executing your custom `onToggle` code.
61
+
62
+ ```jsx live
63
+ <State>
64
+ {([]) => {
65
+ const {getDetailsProps, open, setOpen} = useDetails({closeOnOutsideClick: true})
66
+ const {onToggle, ...detailsProps} = getDetailsProps()
67
+ const customToggle = e => {
68
+ onToggle(e)
69
+ window.alert('hi')
70
+ }
71
+ return (
72
+ <Details {...detailsProps} onToggle={customToggle}>
73
+ <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
74
+ Hello World
75
+ </Details>
76
+ )
77
+ }}
78
+ </State>
79
+ ```
80
+
81
+ ## `Details` System props
82
+
83
+ <Note variant="warning">
84
+
85
+ System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
86
+
87
+ </Note>
88
+
89
+ Details components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
90
+
91
+ ## `useDetails` hook configuration options
92
+
93
+ | Name | Type | Default | Description |
94
+ | :------------------ | :-------- | :-----: | :------------------------------------------------------------------------ |
95
+ | defaultOpen | Boolean | | Sets the initial open/closed state |
96
+ | closeOnOutsideClick | Boolean | false | Sets whether or not element will close when the user clicks outside of it |
97
+ | ref | React ref | | optional ref to pass down to Details component |
98
+
99
+ ### Values returned by the `useDetails` hook
100
+
101
+ | Name | Type | Description |
102
+ | :-------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
103
+ | open | string | Whether or not Details is currently open |
104
+ | setOpen | function | Used to manually change the open state of the Details component |
105
+ | getDetailsProps | Object | Contains an `onToggle` function, the `ref` to pass down to `Details` and the `open` attribute. In most cases, you won't need to interact with any of these values directly, but if you'd like to override any of these yourself you may. |
@@ -0,0 +1,105 @@
1
+ ---
2
+ title: Dialog
3
+ ---
4
+
5
+ import State from '../components/State'
6
+
7
+ The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.
8
+
9
+ You'll need to manage the `isOpen` state in a wrapper component of your own and pass in a function to be used to close the Dialog. For documentation purposes only we've created a mock `State` to handle this, but you should handle the state in the component you consume `Dialog` in or in a wrapper component.
10
+
11
+ ### Accessibility
12
+
13
+ A few considerations must be made to ensure your use of the `Dialog` component is accessible:
14
+
15
+ - Always be sure to provide either `aria-labelledby` or `aria-label` to your `Dialog` component. In most cases you should use `aria-labelledby` and pass it the `id` of your `Dialog.Header`. If there is no text in your header, or you chose not to use a header, you can use `aria-label` to describe the purpose of the `Dialog`.
16
+
17
+ - Be sure to pass a ref to return the focus back to once the `Dialog` closes via the `returnFocusRef` prop. In most cases this should be the element that opened the Dialog. If you decide to manage focus within your application and want to bypass Primer React Components from doing so when the `Dialog` closes, you can omit the `returnFocusProp`.
18
+
19
+ ### Z-index
20
+
21
+ If you're running into z-index issues or are rendering the component inside of an absolutely positioned element, you can wrap your `Dialog` in a [React Portal](https://reactjs.org/docs/portals.html).
22
+
23
+ ### Examples
24
+
25
+ ```jsx live
26
+ <State default={false}>
27
+ {([isOpen, setIsOpen]) => {
28
+ const returnFocusRef = React.useRef(null)
29
+ return (
30
+ <>
31
+ <Button ref={returnFocusRef} onClick={() => setIsOpen(true)}>
32
+ Open
33
+ </Button>
34
+ <Dialog
35
+ returnFocusRef={returnFocusRef}
36
+ isOpen={isOpen}
37
+ onDismiss={() => setIsOpen(false)}
38
+ aria-labelledby="header-id"
39
+ >
40
+ <Dialog.Header id="header-id">Title</Dialog.Header>
41
+ <Box p={3}>
42
+ <Text fontFamily="sans-serif">Some content</Text>
43
+ </Box>
44
+ </Dialog>
45
+ </>
46
+ )
47
+ }}
48
+ </State>
49
+ ```
50
+
51
+ You can also pass any non-text content into the header:
52
+
53
+ ```jsx live
54
+ <State default={false}>
55
+ {([isOpen, setIsOpen]) => {
56
+ const returnFocusRef = React.useRef(null)
57
+ return (
58
+ <>
59
+ <Button ref={returnFocusRef} onClick={() => setIsOpen(true)}>
60
+ Open
61
+ </Button>
62
+ <Dialog
63
+ isOpen={isOpen}
64
+ returnFocusRef={returnFocusRef}
65
+ onDismiss={() => setIsOpen(false)}
66
+ aria-labelledby="label"
67
+ >
68
+ <Dialog.Header>
69
+ <ZapIcon />
70
+ </Dialog.Header>
71
+ <Box p={3}>
72
+ <Text id="label" fontFamily="sans-serif">
73
+ Are you sure you'd like to delete this issue?
74
+ </Text>
75
+ <Box display="flex" mt={3} justifyContent="flex-end">
76
+ <Button sx={{mr: 1}}>Cancel</Button>
77
+ <ButtonDanger>Delete</ButtonDanger>
78
+ </Box>
79
+ </Box>
80
+ </Dialog>
81
+ </>
82
+ )
83
+ }}
84
+ </State>
85
+ ```
86
+
87
+ ## Component props
88
+
89
+ ### Dialog
90
+
91
+ | Prop name | Type | Default | Description |
92
+ | :-------------- | :---------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
93
+ | isOpen | Boolean | | Set whether or not the dialog is shown |
94
+ | onDismiss | Function | | A user-provided function that should close the dialog |
95
+ | returnFocusRef | React ref | | The element to restore focus back to after the `Dialog` is closed |
96
+ | initialFocusRef | React ref | | Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused. |
97
+ | aria-labelledby | string | | Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both. |
98
+ | aria-label | string | | Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both. |
99
+ | sx | SystemStyleObject | {} | Style to be applied to the component |
100
+
101
+ ### Dialog.Header
102
+
103
+ | Prop name | Type | Default | Description |
104
+ | :-------- | :---------------- | :------ | :----------------------------------- |
105
+ | sx | SystemStyleObject | {} | Style to be applied to the component |