@primer/components 31.0.2-rc.1e80de40 → 31.1.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 (811) hide show
  1. package/CHANGELOG.md +8 -2
  2. package/dist/browser.esm.js +11 -10
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +31 -30
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/TextInputWithTokens.d.ts +4 -0
  7. package/lib/TextInputWithTokens.js +86 -20
  8. package/lib/_TextInputWrapper.js +1 -1
  9. package/lib-esm/TextInputWithTokens.d.ts +4 -0
  10. package/lib-esm/TextInputWithTokens.js +85 -21
  11. package/lib-esm/_TextInputWrapper.js +1 -1
  12. package/package.json +1 -1
  13. package/.changeset/README.md +0 -8
  14. package/.changeset/config.json +0 -10
  15. package/.devcontainer/devcontainer.json +0 -8
  16. package/.eslintrc.json +0 -137
  17. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -38
  18. package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +0 -41
  19. package/.github/dependabot.yml +0 -18
  20. package/.github/pull_request_template.md +0 -18
  21. package/.github/workflows/check_for_changeset.yml +0 -25
  22. package/.github/workflows/ci.yml +0 -31
  23. package/.github/workflows/deploy_preview.yml +0 -47
  24. package/.github/workflows/deploy_production.yml +0 -70
  25. package/.github/workflows/release.yml +0 -35
  26. package/.github/workflows/release_canary.yml +0 -70
  27. package/.github/workflows/release_candidate.yml +0 -60
  28. package/.github/workflows/size.yml +0 -13
  29. package/.github/workflows/stale.yml +0 -26
  30. package/.gitignore +0 -10
  31. package/.npmrc +0 -4
  32. package/.nvmrc +0 -1
  33. package/.storybook/main.js +0 -11
  34. package/.storybook/preview.js +0 -113
  35. package/.vscode/launch.json +0 -21
  36. package/.vscode/settings.json +0 -13
  37. package/@types/@styled-system/index.d.ts +0 -0
  38. package/@types/@styled-system/prop-types/index.d.ts +0 -1
  39. package/@types/@styled-system/props/index.d.ts +0 -1
  40. package/@types/jest-styled-components/index.d.ts +0 -1
  41. package/CODEOWNERS +0 -2
  42. package/babel-defines.js +0 -13
  43. package/babel.config.js +0 -39
  44. package/contributor-docs/CODE_OF_CONDUCT.md +0 -76
  45. package/contributor-docs/CONTRIBUTING.md +0 -274
  46. package/contributor-docs/adrs/adr-001-typescript.md +0 -23
  47. package/contributor-docs/adrs/adr-002-behavior-isolation.md +0 -108
  48. package/contributor-docs/adrs/adr-003-prop-norms.md +0 -72
  49. package/contributor-docs/behaviors.md +0 -132
  50. package/contributor-docs/component-contents-api-patterns.md +0 -316
  51. package/contributor-docs/principles.md +0 -39
  52. package/docs/.eslintrc +0 -0
  53. package/docs/.gitignore +0 -91
  54. package/docs/components/PropsList.js +0 -5
  55. package/docs/components/State.js +0 -9
  56. package/docs/components/constants.js +0 -34
  57. package/docs/components/index.js +0 -2
  58. package/docs/content/ActionList.mdx +0 -99
  59. package/docs/content/ActionMenu.mdx +0 -80
  60. package/docs/content/AnchoredOverlay.mdx +0 -37
  61. package/docs/content/Autocomplete.mdx +0 -657
  62. package/docs/content/Avatar.mdx +0 -33
  63. package/docs/content/AvatarStack.mdx +0 -37
  64. package/docs/content/BorderBox.md +0 -46
  65. package/docs/content/Box.md +0 -74
  66. package/docs/content/BranchName.md +0 -18
  67. package/docs/content/Breadcrumbs.md +0 -52
  68. package/docs/content/Buttons.md +0 -56
  69. package/docs/content/CircleBadge.md +0 -45
  70. package/docs/content/CircleOcticon.md +0 -18
  71. package/docs/content/CounterLabel.md +0 -32
  72. package/docs/content/Details.md +0 -105
  73. package/docs/content/Dialog.md +0 -108
  74. package/docs/content/Dialog2.mdx +0 -179
  75. package/docs/content/Dropdown.md +0 -72
  76. package/docs/content/DropdownMenu.mdx +0 -49
  77. package/docs/content/FilterList.md +0 -44
  78. package/docs/content/FilteredSearch.md +0 -39
  79. package/docs/content/Flash.md +0 -44
  80. package/docs/content/Flex.md +0 -58
  81. package/docs/content/FormGroup.md +0 -46
  82. package/docs/content/Grid.md +0 -59
  83. package/docs/content/Header.md +0 -79
  84. package/docs/content/Heading.md +0 -22
  85. package/docs/content/Label.md +0 -42
  86. package/docs/content/LabelGroup.md +0 -31
  87. package/docs/content/Link.md +0 -37
  88. package/docs/content/Overlay.mdx +0 -94
  89. package/docs/content/Pagehead.md +0 -27
  90. package/docs/content/Pagination.md +0 -187
  91. package/docs/content/PointerBox.md +0 -81
  92. package/docs/content/Popover.md +0 -137
  93. package/docs/content/Portal.mdx +0 -78
  94. package/docs/content/Position.md +0 -100
  95. package/docs/content/ProgressBar.mdx +0 -29
  96. package/docs/content/SelectMenu.md +0 -435
  97. package/docs/content/SelectPanel.mdx +0 -67
  98. package/docs/content/SideNav.md +0 -179
  99. package/docs/content/Spinner.mdx +0 -32
  100. package/docs/content/StateLabel.md +0 -35
  101. package/docs/content/StyledOcticon.md +0 -36
  102. package/docs/content/SubNav.md +0 -102
  103. package/docs/content/TabNav.md +0 -50
  104. package/docs/content/Text.md +0 -31
  105. package/docs/content/TextInput.md +0 -34
  106. package/docs/content/TextInputTokens.mdx +0 -89
  107. package/docs/content/TextInputWithTokens.mdx +0 -97
  108. package/docs/content/Timeline.md +0 -138
  109. package/docs/content/Token.mdx +0 -381
  110. package/docs/content/Tooltip.md +0 -41
  111. package/docs/content/Truncate.md +0 -64
  112. package/docs/content/UnderlineNav.md +0 -53
  113. package/docs/content/anchoredPosition.mdx +0 -163
  114. package/docs/content/core-concepts.md +0 -70
  115. package/docs/content/focusTrap.mdx +0 -103
  116. package/docs/content/focusZone.mdx +0 -145
  117. package/docs/content/getting-started.md +0 -138
  118. package/docs/content/index.md +0 -33
  119. package/docs/content/linting.md +0 -35
  120. package/docs/content/overriding-styles.mdx +0 -82
  121. package/docs/content/philosophy.md +0 -23
  122. package/docs/content/primer-theme.md +0 -89
  123. package/docs/content/ssr.mdx +0 -43
  124. package/docs/content/system-props.mdx +0 -37
  125. package/docs/content/theme-reference.md +0 -16
  126. package/docs/content/theming.md +0 -249
  127. package/docs/content/useOnEscapePress.mdx +0 -56
  128. package/docs/content/useOnOutsideClick.mdx +0 -57
  129. package/docs/content/useOpenAndCloseFocus.mdx +0 -49
  130. package/docs/content/useOverlay.mdx +0 -62
  131. package/docs/content/useSafeTimeout.mdx +0 -32
  132. package/docs/gatsby-config.js +0 -30
  133. package/docs/gatsby-node.js +0 -101
  134. package/docs/package-lock.json +0 -20756
  135. package/docs/package.json +0 -36
  136. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +0 -23
  137. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +0 -41
  138. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +0 -56
  139. package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +0 -133
  140. package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +0 -1411
  141. package/docs/src/props.js +0 -77
  142. package/jest.config.js +0 -13
  143. package/lib/__tests__/ActionList.test.d.ts +0 -1
  144. package/lib/__tests__/ActionList.test.js +0 -69
  145. package/lib/__tests__/ActionList.types.test.d.ts +0 -6
  146. package/lib/__tests__/ActionList.types.test.js +0 -69
  147. package/lib/__tests__/ActionMenu.test.d.ts +0 -1
  148. package/lib/__tests__/ActionMenu.test.js +0 -151
  149. package/lib/__tests__/AnchoredOverlay.test.d.ts +0 -1
  150. package/lib/__tests__/AnchoredOverlay.test.js +0 -160
  151. package/lib/__tests__/Autocomplete.test.d.ts +0 -1
  152. package/lib/__tests__/Autocomplete.test.js +0 -528
  153. package/lib/__tests__/Avatar.test.d.ts +0 -1
  154. package/lib/__tests__/Avatar.test.js +0 -67
  155. package/lib/__tests__/AvatarStack.test.d.ts +0 -1
  156. package/lib/__tests__/AvatarStack.test.js +0 -71
  157. package/lib/__tests__/BorderBox.test.d.ts +0 -1
  158. package/lib/__tests__/BorderBox.test.js +0 -58
  159. package/lib/__tests__/Box.test.d.ts +0 -1
  160. package/lib/__tests__/Box.test.js +0 -78
  161. package/lib/__tests__/BranchName.test.d.ts +0 -1
  162. package/lib/__tests__/BranchName.test.js +0 -36
  163. package/lib/__tests__/Breadcrumbs.test.d.ts +0 -1
  164. package/lib/__tests__/Breadcrumbs.test.js +0 -37
  165. package/lib/__tests__/BreadcrumbsItem.test.d.ts +0 -1
  166. package/lib/__tests__/BreadcrumbsItem.test.js +0 -49
  167. package/lib/__tests__/Button.test.d.ts +0 -1
  168. package/lib/__tests__/Button.test.js +0 -143
  169. package/lib/__tests__/Caret.test.d.ts +0 -1
  170. package/lib/__tests__/Caret.test.js +0 -52
  171. package/lib/__tests__/CircleBadge.test.d.ts +0 -1
  172. package/lib/__tests__/CircleBadge.test.js +0 -83
  173. package/lib/__tests__/CircleOcticon.test.d.ts +0 -1
  174. package/lib/__tests__/CircleOcticon.test.js +0 -71
  175. package/lib/__tests__/ConfirmationDialog.test.d.ts +0 -1
  176. package/lib/__tests__/ConfirmationDialog.test.js +0 -134
  177. package/lib/__tests__/CounterLabel.test.d.ts +0 -1
  178. package/lib/__tests__/CounterLabel.test.js +0 -58
  179. package/lib/__tests__/Details.test.d.ts +0 -1
  180. package/lib/__tests__/Details.test.js +0 -117
  181. package/lib/__tests__/Dialog.test.d.ts +0 -1
  182. package/lib/__tests__/Dialog.test.js +0 -184
  183. package/lib/__tests__/Dropdown.test.d.ts +0 -1
  184. package/lib/__tests__/Dropdown.test.js +0 -63
  185. package/lib/__tests__/DropdownMenu.test.d.ts +0 -1
  186. package/lib/__tests__/DropdownMenu.test.js +0 -150
  187. package/lib/__tests__/FilterList.test.d.ts +0 -1
  188. package/lib/__tests__/FilterList.test.js +0 -36
  189. package/lib/__tests__/FilterListItem.test.d.ts +0 -1
  190. package/lib/__tests__/FilterListItem.test.js +0 -46
  191. package/lib/__tests__/FilteredSearch.test.d.ts +0 -1
  192. package/lib/__tests__/FilteredSearch.test.js +0 -36
  193. package/lib/__tests__/Flash.test.d.ts +0 -1
  194. package/lib/__tests__/Flash.test.js +0 -62
  195. package/lib/__tests__/Flex.test.d.ts +0 -1
  196. package/lib/__tests__/Flex.test.js +0 -74
  197. package/lib/__tests__/FormGroup.test.d.ts +0 -1
  198. package/lib/__tests__/FormGroup.test.js +0 -54
  199. package/lib/__tests__/Grid.test.d.ts +0 -1
  200. package/lib/__tests__/Grid.test.js +0 -104
  201. package/lib/__tests__/Header.test.d.ts +0 -1
  202. package/lib/__tests__/Header.test.js +0 -58
  203. package/lib/__tests__/Heading.test.d.ts +0 -1
  204. package/lib/__tests__/Heading.test.js +0 -109
  205. package/lib/__tests__/Label.test.d.ts +0 -1
  206. package/lib/__tests__/Label.test.js +0 -46
  207. package/lib/__tests__/LabelGroup.test.d.ts +0 -1
  208. package/lib/__tests__/LabelGroup.test.js +0 -38
  209. package/lib/__tests__/Link.test.d.ts +0 -1
  210. package/lib/__tests__/Link.test.js +0 -70
  211. package/lib/__tests__/Merge.types.test.d.ts +0 -30
  212. package/lib/__tests__/Merge.types.test.js +0 -27
  213. package/lib/__tests__/Overlay.test.d.ts +0 -1
  214. package/lib/__tests__/Overlay.test.js +0 -145
  215. package/lib/__tests__/Pagehead.test.d.ts +0 -1
  216. package/lib/__tests__/Pagehead.test.js +0 -37
  217. package/lib/__tests__/Pagination/Pagination.test.d.ts +0 -1
  218. package/lib/__tests__/Pagination/Pagination.test.js +0 -47
  219. package/lib/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
  220. package/lib/__tests__/Pagination/PaginationModel.test.js +0 -186
  221. package/lib/__tests__/PointerBox.test.d.ts +0 -1
  222. package/lib/__tests__/PointerBox.test.js +0 -46
  223. package/lib/__tests__/Popover.test.d.ts +0 -1
  224. package/lib/__tests__/Popover.test.js +0 -66
  225. package/lib/__tests__/Portal.test.d.ts +0 -1
  226. package/lib/__tests__/Portal.test.js +0 -124
  227. package/lib/__tests__/Position.test.d.ts +0 -1
  228. package/lib/__tests__/Position.test.js +0 -143
  229. package/lib/__tests__/ProgressBar.test.d.ts +0 -1
  230. package/lib/__tests__/ProgressBar.test.js +0 -68
  231. package/lib/__tests__/SelectMenu.test.d.ts +0 -1
  232. package/lib/__tests__/SelectMenu.test.js +0 -155
  233. package/lib/__tests__/SelectPanel.test.d.ts +0 -1
  234. package/lib/__tests__/SelectPanel.test.js +0 -80
  235. package/lib/__tests__/SideNav.test.d.ts +0 -1
  236. package/lib/__tests__/SideNav.test.js +0 -71
  237. package/lib/__tests__/Spinner.test.d.ts +0 -1
  238. package/lib/__tests__/Spinner.test.js +0 -53
  239. package/lib/__tests__/StateLabel.test.d.ts +0 -1
  240. package/lib/__tests__/StateLabel.test.js +0 -71
  241. package/lib/__tests__/StyledOcticon.test.d.ts +0 -1
  242. package/lib/__tests__/StyledOcticon.test.js +0 -40
  243. package/lib/__tests__/SubNav.test.d.ts +0 -1
  244. package/lib/__tests__/SubNav.test.js +0 -62
  245. package/lib/__tests__/SubNavLink.test.d.ts +0 -1
  246. package/lib/__tests__/SubNavLink.test.js +0 -49
  247. package/lib/__tests__/TabNav.test.d.ts +0 -1
  248. package/lib/__tests__/TabNav.test.js +0 -49
  249. package/lib/__tests__/Text.test.d.ts +0 -1
  250. package/lib/__tests__/Text.test.js +0 -105
  251. package/lib/__tests__/TextInput.test.d.ts +0 -1
  252. package/lib/__tests__/TextInput.test.js +0 -78
  253. package/lib/__tests__/TextInputWithTokens.test.d.ts +0 -1
  254. package/lib/__tests__/TextInputWithTokens.test.js +0 -389
  255. package/lib/__tests__/ThemeProvider.test.d.ts +0 -1
  256. package/lib/__tests__/ThemeProvider.test.js +0 -444
  257. package/lib/__tests__/Timeline.test.d.ts +0 -1
  258. package/lib/__tests__/Timeline.test.js +0 -75
  259. package/lib/__tests__/Token.test.d.ts +0 -1
  260. package/lib/__tests__/Token.test.js +0 -180
  261. package/lib/__tests__/Tooltip.test.d.ts +0 -1
  262. package/lib/__tests__/Tooltip.test.js +0 -69
  263. package/lib/__tests__/Truncate.test.d.ts +0 -1
  264. package/lib/__tests__/Truncate.test.js +0 -63
  265. package/lib/__tests__/UnderlineNav.test.d.ts +0 -1
  266. package/lib/__tests__/UnderlineNav.test.js +0 -72
  267. package/lib/__tests__/UnderlineNavLink.test.d.ts +0 -1
  268. package/lib/__tests__/UnderlineNavLink.test.js +0 -51
  269. package/lib/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
  270. package/lib/__tests__/behaviors/anchoredPosition.test.js +0 -390
  271. package/lib/__tests__/behaviors/focusTrap.test.d.ts +0 -1
  272. package/lib/__tests__/behaviors/focusTrap.test.js +0 -234
  273. package/lib/__tests__/behaviors/focusZone.test.d.ts +0 -1
  274. package/lib/__tests__/behaviors/focusZone.test.js +0 -570
  275. package/lib/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
  276. package/lib/__tests__/behaviors/iterateFocusableElements.test.js +0 -55
  277. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
  278. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -226
  279. package/lib/__tests__/filterObject.test.d.ts +0 -1
  280. package/lib/__tests__/filterObject.test.js +0 -30
  281. package/lib/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
  282. package/lib/__tests__/hooks/useAnchoredPosition.test.js +0 -54
  283. package/lib/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
  284. package/lib/__tests__/hooks/useOnEscapePress.test.js +0 -32
  285. package/lib/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
  286. package/lib/__tests__/hooks/useOnOutsideClick.test.js +0 -87
  287. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
  288. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -60
  289. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
  290. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -45
  291. package/lib/__tests__/theme.test.d.ts +0 -1
  292. package/lib/__tests__/theme.test.js +0 -36
  293. package/lib/__tests__/themeGet.test.d.ts +0 -1
  294. package/lib/__tests__/themeGet.test.js +0 -25
  295. package/lib/__tests__/useSafeTimeout.test.d.ts +0 -1
  296. package/lib/__tests__/useSafeTimeout.test.js +0 -45
  297. package/lib/stories/ActionList.stories.js +0 -454
  298. package/lib/stories/ActionMenu.stories.js +0 -350
  299. package/lib/stories/AnchoredOverlay.stories.js +0 -127
  300. package/lib/stories/Autocomplete.stories.js +0 -619
  301. package/lib/stories/AvatarStack.stories.js +0 -49
  302. package/lib/stories/Button.stories.js +0 -125
  303. package/lib/stories/ConfirmationDialog.stories.js +0 -111
  304. package/lib/stories/Dialog.stories.js +0 -265
  305. package/lib/stories/DropdownMenu.stories.js +0 -122
  306. package/lib/stories/IssueLabelToken.stories.js +0 -165
  307. package/lib/stories/Overlay.stories.js +0 -204
  308. package/lib/stories/Portal.stories.js +0 -104
  309. package/lib/stories/ProfileToken.stories.js +0 -162
  310. package/lib/stories/SelectPanel.stories.js +0 -399
  311. package/lib/stories/TextInputWithTokens.stories.js +0 -235
  312. package/lib/stories/ThemeProvider.stories.js +0 -102
  313. package/lib/stories/Token.stories.js +0 -159
  314. package/lib/stories/useAnchoredPosition.stories.js +0 -351
  315. package/lib/stories/useFocusTrap.stories.js +0 -356
  316. package/lib/stories/useFocusZone.stories.js +0 -599
  317. package/lib-esm/__tests__/ActionList.test.d.ts +0 -1
  318. package/lib-esm/__tests__/ActionList.test.js +0 -57
  319. package/lib-esm/__tests__/ActionList.types.test.d.ts +0 -6
  320. package/lib-esm/__tests__/ActionList.types.test.js +0 -45
  321. package/lib-esm/__tests__/ActionMenu.test.d.ts +0 -1
  322. package/lib-esm/__tests__/ActionMenu.test.js +0 -139
  323. package/lib-esm/__tests__/AnchoredOverlay.test.d.ts +0 -1
  324. package/lib-esm/__tests__/AnchoredOverlay.test.js +0 -134
  325. package/lib-esm/__tests__/Autocomplete.test.d.ts +0 -1
  326. package/lib-esm/__tests__/Autocomplete.test.js +0 -494
  327. package/lib-esm/__tests__/Avatar.test.d.ts +0 -1
  328. package/lib-esm/__tests__/Avatar.test.js +0 -56
  329. package/lib-esm/__tests__/AvatarStack.test.d.ts +0 -1
  330. package/lib-esm/__tests__/AvatarStack.test.js +0 -58
  331. package/lib-esm/__tests__/BorderBox.test.d.ts +0 -1
  332. package/lib-esm/__tests__/BorderBox.test.js +0 -47
  333. package/lib-esm/__tests__/Box.test.d.ts +0 -1
  334. package/lib-esm/__tests__/Box.test.js +0 -67
  335. package/lib-esm/__tests__/BranchName.test.d.ts +0 -1
  336. package/lib-esm/__tests__/BranchName.test.js +0 -26
  337. package/lib-esm/__tests__/Breadcrumbs.test.d.ts +0 -1
  338. package/lib-esm/__tests__/Breadcrumbs.test.js +0 -27
  339. package/lib-esm/__tests__/BreadcrumbsItem.test.d.ts +0 -1
  340. package/lib-esm/__tests__/BreadcrumbsItem.test.js +0 -39
  341. package/lib-esm/__tests__/Button.test.d.ts +0 -1
  342. package/lib-esm/__tests__/Button.test.js +0 -133
  343. package/lib-esm/__tests__/Caret.test.d.ts +0 -1
  344. package/lib-esm/__tests__/Caret.test.js +0 -42
  345. package/lib-esm/__tests__/CircleBadge.test.d.ts +0 -1
  346. package/lib-esm/__tests__/CircleBadge.test.js +0 -70
  347. package/lib-esm/__tests__/CircleOcticon.test.d.ts +0 -1
  348. package/lib-esm/__tests__/CircleOcticon.test.js +0 -59
  349. package/lib-esm/__tests__/ConfirmationDialog.test.d.ts +0 -1
  350. package/lib-esm/__tests__/ConfirmationDialog.test.js +0 -113
  351. package/lib-esm/__tests__/CounterLabel.test.d.ts +0 -1
  352. package/lib-esm/__tests__/CounterLabel.test.js +0 -47
  353. package/lib-esm/__tests__/Details.test.d.ts +0 -1
  354. package/lib-esm/__tests__/Details.test.js +0 -107
  355. package/lib-esm/__tests__/Dialog.test.d.ts +0 -1
  356. package/lib-esm/__tests__/Dialog.test.js +0 -171
  357. package/lib-esm/__tests__/Dropdown.test.d.ts +0 -1
  358. package/lib-esm/__tests__/Dropdown.test.js +0 -53
  359. package/lib-esm/__tests__/DropdownMenu.test.d.ts +0 -1
  360. package/lib-esm/__tests__/DropdownMenu.test.js +0 -137
  361. package/lib-esm/__tests__/FilterList.test.d.ts +0 -1
  362. package/lib-esm/__tests__/FilterList.test.js +0 -26
  363. package/lib-esm/__tests__/FilterListItem.test.d.ts +0 -1
  364. package/lib-esm/__tests__/FilterListItem.test.js +0 -36
  365. package/lib-esm/__tests__/FilteredSearch.test.d.ts +0 -1
  366. package/lib-esm/__tests__/FilteredSearch.test.js +0 -26
  367. package/lib-esm/__tests__/Flash.test.d.ts +0 -1
  368. package/lib-esm/__tests__/Flash.test.js +0 -51
  369. package/lib-esm/__tests__/Flex.test.d.ts +0 -1
  370. package/lib-esm/__tests__/Flex.test.js +0 -64
  371. package/lib-esm/__tests__/FormGroup.test.d.ts +0 -1
  372. package/lib-esm/__tests__/FormGroup.test.js +0 -44
  373. package/lib-esm/__tests__/Grid.test.d.ts +0 -1
  374. package/lib-esm/__tests__/Grid.test.js +0 -94
  375. package/lib-esm/__tests__/Header.test.d.ts +0 -1
  376. package/lib-esm/__tests__/Header.test.js +0 -48
  377. package/lib-esm/__tests__/Heading.test.d.ts +0 -1
  378. package/lib-esm/__tests__/Heading.test.js +0 -99
  379. package/lib-esm/__tests__/Label.test.d.ts +0 -1
  380. package/lib-esm/__tests__/Label.test.js +0 -36
  381. package/lib-esm/__tests__/LabelGroup.test.d.ts +0 -1
  382. package/lib-esm/__tests__/LabelGroup.test.js +0 -26
  383. package/lib-esm/__tests__/Link.test.d.ts +0 -1
  384. package/lib-esm/__tests__/Link.test.js +0 -60
  385. package/lib-esm/__tests__/Merge.types.test.d.ts +0 -30
  386. package/lib-esm/__tests__/Merge.types.test.js +0 -14
  387. package/lib-esm/__tests__/Overlay.test.d.ts +0 -1
  388. package/lib-esm/__tests__/Overlay.test.js +0 -123
  389. package/lib-esm/__tests__/Pagehead.test.d.ts +0 -1
  390. package/lib-esm/__tests__/Pagehead.test.js +0 -26
  391. package/lib-esm/__tests__/Pagination/Pagination.test.d.ts +0 -1
  392. package/lib-esm/__tests__/Pagination/Pagination.test.js +0 -35
  393. package/lib-esm/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
  394. package/lib-esm/__tests__/Pagination/PaginationModel.test.js +0 -182
  395. package/lib-esm/__tests__/PointerBox.test.d.ts +0 -1
  396. package/lib-esm/__tests__/PointerBox.test.js +0 -36
  397. package/lib-esm/__tests__/Popover.test.d.ts +0 -1
  398. package/lib-esm/__tests__/Popover.test.js +0 -53
  399. package/lib-esm/__tests__/Portal.test.d.ts +0 -1
  400. package/lib-esm/__tests__/Portal.test.js +0 -104
  401. package/lib-esm/__tests__/Position.test.d.ts +0 -1
  402. package/lib-esm/__tests__/Position.test.js +0 -133
  403. package/lib-esm/__tests__/ProgressBar.test.d.ts +0 -1
  404. package/lib-esm/__tests__/ProgressBar.test.js +0 -58
  405. package/lib-esm/__tests__/SelectMenu.test.d.ts +0 -1
  406. package/lib-esm/__tests__/SelectMenu.test.js +0 -145
  407. package/lib-esm/__tests__/SelectPanel.test.d.ts +0 -1
  408. package/lib-esm/__tests__/SelectPanel.test.js +0 -65
  409. package/lib-esm/__tests__/SideNav.test.d.ts +0 -1
  410. package/lib-esm/__tests__/SideNav.test.js +0 -60
  411. package/lib-esm/__tests__/Spinner.test.d.ts +0 -1
  412. package/lib-esm/__tests__/Spinner.test.js +0 -43
  413. package/lib-esm/__tests__/StateLabel.test.d.ts +0 -1
  414. package/lib-esm/__tests__/StateLabel.test.js +0 -61
  415. package/lib-esm/__tests__/StyledOcticon.test.d.ts +0 -1
  416. package/lib-esm/__tests__/StyledOcticon.test.js +0 -29
  417. package/lib-esm/__tests__/SubNav.test.d.ts +0 -1
  418. package/lib-esm/__tests__/SubNav.test.js +0 -50
  419. package/lib-esm/__tests__/SubNavLink.test.d.ts +0 -1
  420. package/lib-esm/__tests__/SubNavLink.test.js +0 -39
  421. package/lib-esm/__tests__/TabNav.test.d.ts +0 -1
  422. package/lib-esm/__tests__/TabNav.test.js +0 -39
  423. package/lib-esm/__tests__/Text.test.d.ts +0 -1
  424. package/lib-esm/__tests__/Text.test.js +0 -93
  425. package/lib-esm/__tests__/TextInput.test.d.ts +0 -1
  426. package/lib-esm/__tests__/TextInput.test.js +0 -68
  427. package/lib-esm/__tests__/TextInputWithTokens.test.d.ts +0 -1
  428. package/lib-esm/__tests__/TextInputWithTokens.test.js +0 -341
  429. package/lib-esm/__tests__/ThemeProvider.test.d.ts +0 -1
  430. package/lib-esm/__tests__/ThemeProvider.test.js +0 -408
  431. package/lib-esm/__tests__/Timeline.test.d.ts +0 -1
  432. package/lib-esm/__tests__/Timeline.test.js +0 -65
  433. package/lib-esm/__tests__/Token.test.d.ts +0 -1
  434. package/lib-esm/__tests__/Token.test.js +0 -166
  435. package/lib-esm/__tests__/Tooltip.test.d.ts +0 -1
  436. package/lib-esm/__tests__/Tooltip.test.js +0 -59
  437. package/lib-esm/__tests__/Truncate.test.d.ts +0 -1
  438. package/lib-esm/__tests__/Truncate.test.js +0 -53
  439. package/lib-esm/__tests__/UnderlineNav.test.d.ts +0 -1
  440. package/lib-esm/__tests__/UnderlineNav.test.js +0 -60
  441. package/lib-esm/__tests__/UnderlineNavLink.test.d.ts +0 -1
  442. package/lib-esm/__tests__/UnderlineNavLink.test.js +0 -41
  443. package/lib-esm/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
  444. package/lib-esm/__tests__/behaviors/anchoredPosition.test.js +0 -388
  445. package/lib-esm/__tests__/behaviors/focusTrap.test.d.ts +0 -1
  446. package/lib-esm/__tests__/behaviors/focusTrap.test.js +0 -227
  447. package/lib-esm/__tests__/behaviors/focusZone.test.d.ts +0 -1
  448. package/lib-esm/__tests__/behaviors/focusZone.test.js +0 -487
  449. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
  450. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.js +0 -48
  451. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
  452. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -224
  453. package/lib-esm/__tests__/filterObject.test.d.ts +0 -1
  454. package/lib-esm/__tests__/filterObject.test.js +0 -27
  455. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
  456. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.js +0 -46
  457. package/lib-esm/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
  458. package/lib-esm/__tests__/hooks/useOnEscapePress.test.js +0 -23
  459. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
  460. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.js +0 -68
  461. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
  462. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -52
  463. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
  464. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -36
  465. package/lib-esm/__tests__/theme.test.d.ts +0 -1
  466. package/lib-esm/__tests__/theme.test.js +0 -33
  467. package/lib-esm/__tests__/themeGet.test.d.ts +0 -1
  468. package/lib-esm/__tests__/themeGet.test.js +0 -22
  469. package/lib-esm/__tests__/useSafeTimeout.test.d.ts +0 -1
  470. package/lib-esm/__tests__/useSafeTimeout.test.js +0 -39
  471. package/lib-esm/stories/ActionList.stories.js +0 -395
  472. package/lib-esm/stories/ActionMenu.stories.js +0 -305
  473. package/lib-esm/stories/AnchoredOverlay.stories.js +0 -101
  474. package/lib-esm/stories/Autocomplete.stories.js +0 -560
  475. package/lib-esm/stories/AvatarStack.stories.js +0 -32
  476. package/lib-esm/stories/Button.stories.js +0 -86
  477. package/lib-esm/stories/ConfirmationDialog.stories.js +0 -86
  478. package/lib-esm/stories/Dialog.stories.js +0 -240
  479. package/lib-esm/stories/DropdownMenu.stories.js +0 -94
  480. package/lib-esm/stories/IssueLabelToken.stories.js +0 -139
  481. package/lib-esm/stories/Overlay.stories.js +0 -173
  482. package/lib-esm/stories/Portal.stories.js +0 -68
  483. package/lib-esm/stories/ProfileToken.stories.js +0 -136
  484. package/lib-esm/stories/SelectPanel.stories.js +0 -334
  485. package/lib-esm/stories/TextInputWithTokens.stories.js +0 -196
  486. package/lib-esm/stories/ThemeProvider.stories.js +0 -83
  487. package/lib-esm/stories/Token.stories.js +0 -133
  488. package/lib-esm/stories/useAnchoredPosition.stories.js +0 -313
  489. package/lib-esm/stories/useFocusTrap.stories.js +0 -309
  490. package/lib-esm/stories/useFocusZone.stories.js +0 -554
  491. package/migrating.md +0 -250
  492. package/now.json +0 -17
  493. package/package-lock.json +0 -28456
  494. package/rollup.config.js +0 -36
  495. package/script/build +0 -19
  496. package/script/build-storybook +0 -10
  497. package/script/setup +0 -12
  498. package/src/ActionList/Divider.tsx +0 -25
  499. package/src/ActionList/Group.tsx +0 -45
  500. package/src/ActionList/Header.tsx +0 -74
  501. package/src/ActionList/Item.tsx +0 -496
  502. package/src/ActionList/List.tsx +0 -258
  503. package/src/ActionList/index.ts +0 -21
  504. package/src/ActionMenu.tsx +0 -106
  505. package/src/AnchoredOverlay/AnchoredOverlay.tsx +0 -191
  506. package/src/AnchoredOverlay/index.ts +0 -2
  507. package/src/Autocomplete/Autocomplete.tsx +0 -103
  508. package/src/Autocomplete/AutocompleteContext.tsx +0 -19
  509. package/src/Autocomplete/AutocompleteInput.tsx +0 -179
  510. package/src/Autocomplete/AutocompleteMenu.tsx +0 -341
  511. package/src/Autocomplete/AutocompleteOverlay.tsx +0 -68
  512. package/src/Autocomplete/index.ts +0 -2
  513. package/src/Avatar.tsx +0 -46
  514. package/src/AvatarPair.tsx +0 -35
  515. package/src/AvatarStack.tsx +0 -159
  516. package/src/BaseStyles.tsx +0 -53
  517. package/src/BorderBox.tsx +0 -18
  518. package/src/Box.tsx +0 -54
  519. package/src/BranchName.tsx +0 -19
  520. package/src/Breadcrumbs.tsx +0 -101
  521. package/src/Button/Button.tsx +0 -40
  522. package/src/Button/ButtonBase.tsx +0 -43
  523. package/src/Button/ButtonClose.tsx +0 -40
  524. package/src/Button/ButtonDanger.tsx +0 -43
  525. package/src/Button/ButtonGroup.tsx +0 -55
  526. package/src/Button/ButtonInvisible.tsx +0 -32
  527. package/src/Button/ButtonOutline.tsx +0 -43
  528. package/src/Button/ButtonPrimary.tsx +0 -41
  529. package/src/Button/ButtonStyles.tsx +0 -36
  530. package/src/Button/ButtonTableList.tsx +0 -58
  531. package/src/Button/index.ts +0 -16
  532. package/src/Caret.tsx +0 -133
  533. package/src/CircleBadge.tsx +0 -55
  534. package/src/CircleOcticon.tsx +0 -37
  535. package/src/CounterLabel.tsx +0 -52
  536. package/src/Details.tsx +0 -23
  537. package/src/Dialog/ConfirmationDialog.tsx +0 -184
  538. package/src/Dialog/Dialog.tsx +0 -432
  539. package/src/Dialog.tsx +0 -149
  540. package/src/Dropdown.tsx +0 -158
  541. package/src/DropdownMenu/DropdownButton.tsx +0 -15
  542. package/src/DropdownMenu/DropdownMenu.tsx +0 -115
  543. package/src/DropdownMenu/index.ts +0 -4
  544. package/src/DropdownStyles.ts +0 -128
  545. package/src/FilterList.tsx +0 -81
  546. package/src/FilteredActionList/FilteredActionList.tsx +0 -142
  547. package/src/FilteredActionList/index.ts +0 -2
  548. package/src/FilteredSearch.tsx +0 -28
  549. package/src/Flash.tsx +0 -77
  550. package/src/Flex.tsx +0 -15
  551. package/src/FormGroup.tsx +0 -27
  552. package/src/Grid.tsx +0 -15
  553. package/src/Header.tsx +0 -84
  554. package/src/Heading.tsx +0 -21
  555. package/src/Label.tsx +0 -75
  556. package/src/LabelGroup.tsx +0 -18
  557. package/src/Link.tsx +0 -46
  558. package/src/Overlay.tsx +0 -197
  559. package/src/Pagehead.tsx +0 -17
  560. package/src/Pagination/Pagination.tsx +0 -214
  561. package/src/Pagination/index.ts +0 -4
  562. package/src/Pagination/model.tsx +0 -187
  563. package/src/PointerBox.tsx +0 -31
  564. package/src/Popover.tsx +0 -236
  565. package/src/Portal/Portal.tsx +0 -96
  566. package/src/Portal/index.ts +0 -5
  567. package/src/Position.tsx +0 -63
  568. package/src/ProgressBar.tsx +0 -52
  569. package/src/SelectMenu/SelectMenu.tsx +0 -125
  570. package/src/SelectMenu/SelectMenuContext.tsx +0 -9
  571. package/src/SelectMenu/SelectMenuDivider.tsx +0 -25
  572. package/src/SelectMenu/SelectMenuFilter.tsx +0 -51
  573. package/src/SelectMenu/SelectMenuFooter.tsx +0 -28
  574. package/src/SelectMenu/SelectMenuHeader.tsx +0 -50
  575. package/src/SelectMenu/SelectMenuItem.tsx +0 -137
  576. package/src/SelectMenu/SelectMenuList.tsx +0 -42
  577. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +0 -24
  578. package/src/SelectMenu/SelectMenuModal.tsx +0 -121
  579. package/src/SelectMenu/SelectMenuTab.tsx +0 -88
  580. package/src/SelectMenu/SelectMenuTabPanel.tsx +0 -30
  581. package/src/SelectMenu/SelectMenuTabs.tsx +0 -44
  582. package/src/SelectMenu/hooks/useKeyboardNav.js +0 -90
  583. package/src/SelectMenu/index.ts +0 -15
  584. package/src/SelectPanel/SelectPanel.tsx +0 -173
  585. package/src/SelectPanel/index.ts +0 -2
  586. package/src/SideNav.tsx +0 -193
  587. package/src/Spinner.tsx +0 -59
  588. package/src/StateLabel.tsx +0 -102
  589. package/src/StyledOcticon.tsx +0 -24
  590. package/src/SubNav.tsx +0 -129
  591. package/src/TabNav.tsx +0 -77
  592. package/src/Text.tsx +0 -13
  593. package/src/TextInput.tsx +0 -68
  594. package/src/TextInputWithTokens.tsx +0 -280
  595. package/src/ThemeProvider.tsx +0 -176
  596. package/src/Timeline.tsx +0 -141
  597. package/src/Token/AvatarToken.tsx +0 -54
  598. package/src/Token/IssueLabelToken.tsx +0 -150
  599. package/src/Token/Token.tsx +0 -126
  600. package/src/Token/TokenBase.tsx +0 -129
  601. package/src/Token/_RemoveTokenButton.tsx +0 -111
  602. package/src/Token/_TokenTextContainer.tsx +0 -47
  603. package/src/Token/index.ts +0 -3
  604. package/src/Tooltip.tsx +0 -263
  605. package/src/Truncate.tsx +0 -36
  606. package/src/UnderlineNav.tsx +0 -110
  607. package/src/_TextInputWrapper.tsx +0 -105
  608. package/src/_UnstyledTextInput.tsx +0 -19
  609. package/src/__tests__/.eslintrc.json +0 -11
  610. package/src/__tests__/ActionList.test.tsx +0 -53
  611. package/src/__tests__/ActionList.types.test.tsx +0 -51
  612. package/src/__tests__/ActionMenu.test.tsx +0 -136
  613. package/src/__tests__/AnchoredOverlay.test.tsx +0 -150
  614. package/src/__tests__/Autocomplete.test.tsx +0 -444
  615. package/src/__tests__/Avatar.test.tsx +0 -44
  616. package/src/__tests__/AvatarStack.test.tsx +0 -48
  617. package/src/__tests__/BorderBox.test.tsx +0 -43
  618. package/src/__tests__/Box.test.tsx +0 -42
  619. package/src/__tests__/BranchName.test.tsx +0 -26
  620. package/src/__tests__/Breadcrumbs.test.tsx +0 -27
  621. package/src/__tests__/BreadcrumbsItem.test.tsx +0 -31
  622. package/src/__tests__/Button.test.tsx +0 -128
  623. package/src/__tests__/Caret.test.tsx +0 -36
  624. package/src/__tests__/CircleBadge.test.tsx +0 -66
  625. package/src/__tests__/CircleOcticon.test.tsx +0 -50
  626. package/src/__tests__/ConfirmationDialog.test.tsx +0 -120
  627. package/src/__tests__/CounterLabel.test.tsx +0 -50
  628. package/src/__tests__/Details.test.tsx +0 -115
  629. package/src/__tests__/Dialog.test.tsx +0 -155
  630. package/src/__tests__/Dropdown.test.tsx +0 -53
  631. package/src/__tests__/DropdownMenu.test.tsx +0 -136
  632. package/src/__tests__/FilterList.test.tsx +0 -26
  633. package/src/__tests__/FilterListItem.test.tsx +0 -31
  634. package/src/__tests__/FilteredSearch.test.tsx +0 -26
  635. package/src/__tests__/Flash.test.tsx +0 -45
  636. package/src/__tests__/Flex.test.tsx +0 -58
  637. package/src/__tests__/FormGroup.test.tsx +0 -38
  638. package/src/__tests__/Grid.test.tsx +0 -82
  639. package/src/__tests__/Header.test.tsx +0 -49
  640. package/src/__tests__/Heading.test.tsx +0 -91
  641. package/src/__tests__/Label.test.tsx +0 -34
  642. package/src/__tests__/LabelGroup.test.tsx +0 -30
  643. package/src/__tests__/Link.test.tsx +0 -47
  644. package/src/__tests__/Merge.types.test.ts +0 -39
  645. package/src/__tests__/Overlay.test.tsx +0 -103
  646. package/src/__tests__/Pagehead.test.tsx +0 -23
  647. package/src/__tests__/Pagination/Pagination.test.tsx +0 -30
  648. package/src/__tests__/Pagination/PaginationModel.test.tsx +0 -133
  649. package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +0 -184
  650. package/src/__tests__/PointerBox.test.tsx +0 -34
  651. package/src/__tests__/Popover.test.tsx +0 -68
  652. package/src/__tests__/Portal.test.tsx +0 -103
  653. package/src/__tests__/Position.test.tsx +0 -117
  654. package/src/__tests__/ProgressBar.test.tsx +0 -40
  655. package/src/__tests__/SelectMenu.test.tsx +0 -142
  656. package/src/__tests__/SelectPanel.test.tsx +0 -63
  657. package/src/__tests__/SideNav.test.tsx +0 -62
  658. package/src/__tests__/Spinner.test.tsx +0 -42
  659. package/src/__tests__/StateLabel.test.tsx +0 -48
  660. package/src/__tests__/StyledOcticon.test.tsx +0 -26
  661. package/src/__tests__/SubNav.test.tsx +0 -50
  662. package/src/__tests__/SubNavLink.test.tsx +0 -31
  663. package/src/__tests__/TabNav.test.tsx +0 -32
  664. package/src/__tests__/Text.test.tsx +0 -78
  665. package/src/__tests__/TextInput.test.tsx +0 -49
  666. package/src/__tests__/TextInputWithTokens.test.tsx +0 -262
  667. package/src/__tests__/ThemeProvider.test.tsx +0 -441
  668. package/src/__tests__/Timeline.test.tsx +0 -58
  669. package/src/__tests__/Token.test.tsx +0 -118
  670. package/src/__tests__/Tooltip.test.tsx +0 -52
  671. package/src/__tests__/Truncate.test.tsx +0 -43
  672. package/src/__tests__/UnderlineNav.test.tsx +0 -58
  673. package/src/__tests__/UnderlineNavLink.test.tsx +0 -31
  674. package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +0 -223
  675. package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +0 -80
  676. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +0 -332
  677. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +0 -3414
  678. package/src/__tests__/__snapshots__/Avatar.test.tsx.snap +0 -19
  679. package/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +0 -377
  680. package/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +0 -14
  681. package/src/__tests__/__snapshots__/Box.test.tsx.snap +0 -201
  682. package/src/__tests__/__snapshots__/BranchName.test.tsx.snap +0 -17
  683. package/src/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap +0 -29
  684. package/src/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +0 -79
  685. package/src/__tests__/__snapshots__/Button.test.tsx.snap +0 -840
  686. package/src/__tests__/__snapshots__/Caret.test.tsx.snap +0 -373
  687. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +0 -141
  688. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +0 -64
  689. package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +0 -89
  690. package/src/__tests__/__snapshots__/CounterLabel.test.tsx.snap +0 -22
  691. package/src/__tests__/__snapshots__/Details.test.tsx.snap +0 -15
  692. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +0 -200
  693. package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +0 -249
  694. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +0 -106
  695. package/src/__tests__/__snapshots__/FilterList.test.tsx.snap +0 -13
  696. package/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap +0 -80
  697. package/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap +0 -32
  698. package/src/__tests__/__snapshots__/Flash.test.tsx.snap +0 -32
  699. package/src/__tests__/__snapshots__/Flex.test.tsx.snap +0 -130
  700. package/src/__tests__/__snapshots__/FormGroup.test.tsx.snap +0 -25
  701. package/src/__tests__/__snapshots__/Grid.test.tsx.snap +0 -178
  702. package/src/__tests__/__snapshots__/Header.test.tsx.snap +0 -79
  703. package/src/__tests__/__snapshots__/Heading.test.tsx.snap +0 -13
  704. package/src/__tests__/__snapshots__/Label.test.tsx.snap +0 -74
  705. package/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap +0 -15
  706. package/src/__tests__/__snapshots__/Link.test.tsx.snap +0 -213
  707. package/src/__tests__/__snapshots__/Pagehead.test.tsx.snap +0 -15
  708. package/src/__tests__/__snapshots__/PointerBox.test.tsx.snap +0 -174
  709. package/src/__tests__/__snapshots__/Popover.test.tsx.snap +0 -4687
  710. package/src/__tests__/__snapshots__/Position.test.tsx.snap +0 -44
  711. package/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +0 -53
  712. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +0 -469
  713. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +0 -123
  714. package/src/__tests__/__snapshots__/SideNav.test.tsx.snap +0 -143
  715. package/src/__tests__/__snapshots__/Spinner.test.tsx.snap +0 -33
  716. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +0 -388
  717. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +0 -25
  718. package/src/__tests__/__snapshots__/SubNav.test.tsx.snap +0 -44
  719. package/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +0 -199
  720. package/src/__tests__/__snapshots__/TabNav.test.tsx.snap +0 -58
  721. package/src/__tests__/__snapshots__/Text.test.tsx.snap +0 -7
  722. package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +0 -440
  723. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +0 -5516
  724. package/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +0 -15
  725. package/src/__tests__/__snapshots__/Timeline.test.tsx.snap +0 -159
  726. package/src/__tests__/__snapshots__/Token.test.tsx.snap +0 -3794
  727. package/src/__tests__/__snapshots__/Tooltip.test.tsx.snap +0 -227
  728. package/src/__tests__/__snapshots__/Truncate.test.tsx.snap +0 -17
  729. package/src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap +0 -59
  730. package/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +0 -130
  731. package/src/__tests__/behaviors/anchoredPosition.test.ts +0 -295
  732. package/src/__tests__/behaviors/focusTrap.test.tsx +0 -236
  733. package/src/__tests__/behaviors/focusZone.test.tsx +0 -549
  734. package/src/__tests__/behaviors/iterateFocusableElements.test.tsx +0 -61
  735. package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts +0 -195
  736. package/src/__tests__/filterObject.test.ts +0 -54
  737. package/src/__tests__/hooks/useAnchoredPosition.test.tsx +0 -31
  738. package/src/__tests__/hooks/useOnEscapePress.test.tsx +0 -16
  739. package/src/__tests__/hooks/useOnOutsideClick.test.tsx +0 -48
  740. package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx +0 -48
  741. package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx +0 -39
  742. package/src/__tests__/theme.test.ts +0 -41
  743. package/src/__tests__/themeGet.test.ts +0 -15
  744. package/src/__tests__/useSafeTimeout.test.tsx +0 -36
  745. package/src/behaviors/anchoredPosition.ts +0 -442
  746. package/src/behaviors/focusTrap.ts +0 -184
  747. package/src/behaviors/focusZone.ts +0 -713
  748. package/src/behaviors/scrollIntoViewingArea.ts +0 -27
  749. package/src/constants.ts +0 -62
  750. package/src/hooks/index.ts +0 -11
  751. package/src/hooks/useAnchoredPosition.ts +0 -53
  752. package/src/hooks/useCombinedRefs.ts +0 -40
  753. package/src/hooks/useDetails.tsx +0 -54
  754. package/src/hooks/useDialog.ts +0 -121
  755. package/src/hooks/useFocusTrap.ts +0 -80
  756. package/src/hooks/useFocusZone.ts +0 -64
  757. package/src/hooks/useOnEscapePress.ts +0 -63
  758. package/src/hooks/useOnOutsideClick.tsx +0 -82
  759. package/src/hooks/useOpenAndCloseFocus.ts +0 -32
  760. package/src/hooks/useOverlay.tsx +0 -34
  761. package/src/hooks/useProvidedRefOrCreate.ts +0 -14
  762. package/src/hooks/useProvidedStateOrCreate.ts +0 -27
  763. package/src/hooks/useRenderForcingRef.ts +0 -22
  764. package/src/hooks/useResizeObserver.ts +0 -11
  765. package/src/hooks/useSafeTimeout.ts +0 -38
  766. package/src/hooks/useScrollFlash.ts +0 -21
  767. package/src/index.ts +0 -170
  768. package/src/polyfills/eventListenerSignal.ts +0 -66
  769. package/src/stories/ActionList.stories.tsx +0 -436
  770. package/src/stories/ActionMenu.stories.tsx +0 -334
  771. package/src/stories/AnchoredOverlay.stories.tsx +0 -117
  772. package/src/stories/Autocomplete.stories.tsx +0 -655
  773. package/src/stories/AvatarStack.stories.tsx +0 -37
  774. package/src/stories/Button.stories.tsx +0 -92
  775. package/src/stories/ConfirmationDialog.stories.tsx +0 -105
  776. package/src/stories/Dialog.stories.tsx +0 -240
  777. package/src/stories/DropdownMenu.stories.tsx +0 -84
  778. package/src/stories/IssueLabelToken.stories.tsx +0 -138
  779. package/src/stories/Overlay.stories.tsx +0 -213
  780. package/src/stories/Portal.stories.tsx +0 -109
  781. package/src/stories/ProfileToken.stories.tsx +0 -129
  782. package/src/stories/SelectPanel.stories.tsx +0 -353
  783. package/src/stories/TextInputWithTokens.stories.tsx +0 -146
  784. package/src/stories/ThemeProvider.stories.tsx +0 -104
  785. package/src/stories/Token.stories.tsx +0 -126
  786. package/src/stories/useAnchoredPosition.stories.tsx +0 -332
  787. package/src/stories/useFocusTrap.stories.tsx +0 -400
  788. package/src/stories/useFocusZone.stories.tsx +0 -663
  789. package/src/sx.ts +0 -9
  790. package/src/theme-preval.js +0 -79
  791. package/src/theme.ts +0 -3
  792. package/src/utils/deprecate.tsx +0 -73
  793. package/src/utils/isNumeric.tsx +0 -4
  794. package/src/utils/iterateFocusableElements.ts +0 -121
  795. package/src/utils/ssr.tsx +0 -1
  796. package/src/utils/test-deprecations.tsx +0 -19
  797. package/src/utils/test-helpers.tsx +0 -7
  798. package/src/utils/test-matchers.tsx +0 -109
  799. package/src/utils/testing.tsx +0 -242
  800. package/src/utils/theme.js +0 -64
  801. package/src/utils/types/AriaRole.ts +0 -71
  802. package/src/utils/types/ComponentProps.ts +0 -13
  803. package/src/utils/types/Flatten.ts +0 -4
  804. package/src/utils/types/MandateProps.ts +0 -19
  805. package/src/utils/types/Merge.ts +0 -20
  806. package/src/utils/types/index.ts +0 -5
  807. package/src/utils/uniqueId.ts +0 -6
  808. package/src/utils/userAgent.ts +0 -7
  809. package/stats.html +0 -3279
  810. package/tsconfig.build.json +0 -7
  811. package/tsconfig.json +0 -20
@@ -1,3794 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`Token components AvatarToken renders all sizes 1`] = `
4
- .c3 {
5
- display: inline-block;
6
- overflow: hidden;
7
- line-height: 1;
8
- vertical-align: middle;
9
- border-radius: 50%;
10
- width: 100%;
11
- height: 100%;
12
- }
13
-
14
- .c5 {
15
- background-color: transparent;
16
- font-family: inherit;
17
- color: currentColor;
18
- cursor: pointer;
19
- display: -webkit-inline-box;
20
- display: -webkit-inline-flex;
21
- display: -ms-inline-flexbox;
22
- display: inline-flex;
23
- -webkit-box-pack: center;
24
- -webkit-justify-content: center;
25
- -ms-flex-pack: center;
26
- justify-content: center;
27
- -webkit-align-items: center;
28
- -webkit-box-align: center;
29
- -ms-flex-align: center;
30
- align-items: center;
31
- -webkit-user-select: none;
32
- -moz-user-select: none;
33
- -ms-user-select: none;
34
- user-select: none;
35
- -webkit-appearance: none;
36
- -moz-appearance: none;
37
- appearance: none;
38
- -webkit-text-decoration: none;
39
- text-decoration: none;
40
- padding: 0;
41
- -webkit-transform: translate(1px,-1px);
42
- -ms-transform: translate(1px,-1px);
43
- transform: translate(1px,-1px);
44
- -webkit-align-self: baseline;
45
- -ms-flex-item-align: baseline;
46
- align-self: baseline;
47
- border: 0;
48
- border-radius: 999px;
49
- margin-left: 4px;
50
- height: 16px;
51
- width: 16px;
52
- }
53
-
54
- .c5:hover,
55
- .c5:focus {
56
- background-color: rgba(175,184,193,0.2);
57
- }
58
-
59
- .c5:active {
60
- background-color: rgba(234,238,242,0.5);
61
- }
62
-
63
- .c4 {
64
- -webkit-box-flex: 1;
65
- -webkit-flex-grow: 1;
66
- -ms-flex-positive: 1;
67
- flex-grow: 1;
68
- min-width: 0;
69
- overflow: hidden;
70
- text-overflow: ellipsis;
71
- white-space: nowrap;
72
- background: transparent;
73
- border: none;
74
- color: inherit;
75
- font: inherit;
76
- margin: 0;
77
- overflow: visible;
78
- padding: 0;
79
- width: auto;
80
- -webkit-font-smoothing: inherit;
81
- -moz-osx-font-smoothing: inherit;
82
- -webkit-appearance: none;
83
- line-height: 1;
84
- color: currentColor;
85
- -webkit-text-decoration: none;
86
- text-decoration: none;
87
- }
88
-
89
- .c4:is(a,button,[tabIndex='0']) {
90
- cursor: pointer;
91
- }
92
-
93
- .c4:is(a,button,[tabIndex='0']):after {
94
- content: '';
95
- position: absolute;
96
- left: 0;
97
- top: 0;
98
- right: 0;
99
- bottom: 0;
100
- }
101
-
102
- .c0 {
103
- -webkit-align-items: center;
104
- -webkit-box-align: center;
105
- -ms-flex-align: center;
106
- align-items: center;
107
- border-radius: 999px;
108
- cursor: auto;
109
- display: -webkit-inline-box;
110
- display: -webkit-inline-flex;
111
- display: -ms-inline-flexbox;
112
- display: inline-flex;
113
- font-weight: 600;
114
- font-family: inherit;
115
- -webkit-text-decoration: none;
116
- text-decoration: none;
117
- white-space: nowrap;
118
- font-size: 12px;
119
- height: 16px;
120
- line-height: 16px;
121
- padding-left: 4px;
122
- padding-right: 4px;
123
- padding-top: 0;
124
- padding-bottom: 0;
125
- padding-left: 4px;
126
- background-color: rgba(234,238,242,0.5);
127
- border-color: rgba(27,31,36,0.15);
128
- border-style: solid;
129
- border-width: 1px;
130
- color: #57606a;
131
- max-width: 100%;
132
- padding-right: 0;
133
- position: relative;
134
- padding-left: 4px;
135
- }
136
-
137
- .c1 {
138
- -webkit-flex-shrink: 0;
139
- -ms-flex-negative: 0;
140
- flex-shrink: 0;
141
- line-height: 0;
142
- margin-right: 4px;
143
- }
144
-
145
- .c2 {
146
- --spacing: calc(4px * 2);
147
- display: block;
148
- height: calc(16px - var(--spacing));
149
- width: calc(16px - var(--spacing));
150
- }
151
-
152
- <span
153
- aria-label="token, press backspace or delete to remove"
154
- className="c0"
155
- onKeyDown={[Function]}
156
- onRemove={[MockFunction]}
157
- size="small"
158
- >
159
- <span
160
- className="c1"
161
- size="small"
162
- >
163
- <span
164
- className="c2"
165
- >
166
- <img
167
- alt=""
168
- className="c3"
169
- height={16}
170
- size={16}
171
- src="https://avatars.githubusercontent.com/mperrotti"
172
- width={16}
173
- />
174
- </span>
175
- </span>
176
- <span
177
- className="c4"
178
- >
179
- token
180
- </span>
181
- <button
182
- aria-hidden="false"
183
- aria-label="Remove token"
184
- className="c5"
185
- onClick={[Function]}
186
- size="small"
187
- >
188
- <svg
189
- aria-hidden="true"
190
- className="octicon octicon-x"
191
- dangerouslySetInnerHTML={
192
- Object {
193
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
194
- }
195
- }
196
- fill="currentColor"
197
- height={12}
198
- role="img"
199
- style={
200
- Object {
201
- "display": "inline-block",
202
- "userSelect": "none",
203
- "verticalAlign": "text-bottom",
204
- }
205
- }
206
- viewBox="0 0 16 16"
207
- width={12}
208
- />
209
- </button>
210
- </span>
211
- `;
212
-
213
- exports[`Token components AvatarToken renders all sizes 2`] = `
214
- .c3 {
215
- display: inline-block;
216
- overflow: hidden;
217
- line-height: 1;
218
- vertical-align: middle;
219
- border-radius: 50%;
220
- width: 100%;
221
- height: 100%;
222
- }
223
-
224
- .c5 {
225
- background-color: transparent;
226
- font-family: inherit;
227
- color: currentColor;
228
- cursor: pointer;
229
- display: -webkit-inline-box;
230
- display: -webkit-inline-flex;
231
- display: -ms-inline-flexbox;
232
- display: inline-flex;
233
- -webkit-box-pack: center;
234
- -webkit-justify-content: center;
235
- -ms-flex-pack: center;
236
- justify-content: center;
237
- -webkit-align-items: center;
238
- -webkit-box-align: center;
239
- -ms-flex-align: center;
240
- align-items: center;
241
- -webkit-user-select: none;
242
- -moz-user-select: none;
243
- -ms-user-select: none;
244
- user-select: none;
245
- -webkit-appearance: none;
246
- -moz-appearance: none;
247
- appearance: none;
248
- -webkit-text-decoration: none;
249
- text-decoration: none;
250
- padding: 0;
251
- -webkit-transform: translate(1px,-1px);
252
- -ms-transform: translate(1px,-1px);
253
- transform: translate(1px,-1px);
254
- -webkit-align-self: baseline;
255
- -ms-flex-item-align: baseline;
256
- align-self: baseline;
257
- border: 0;
258
- border-radius: 999px;
259
- margin-left: 4px;
260
- height: 20px;
261
- width: 20px;
262
- }
263
-
264
- .c5:hover,
265
- .c5:focus {
266
- background-color: rgba(175,184,193,0.2);
267
- }
268
-
269
- .c5:active {
270
- background-color: rgba(234,238,242,0.5);
271
- }
272
-
273
- .c4 {
274
- -webkit-box-flex: 1;
275
- -webkit-flex-grow: 1;
276
- -ms-flex-positive: 1;
277
- flex-grow: 1;
278
- min-width: 0;
279
- overflow: hidden;
280
- text-overflow: ellipsis;
281
- white-space: nowrap;
282
- background: transparent;
283
- border: none;
284
- color: inherit;
285
- font: inherit;
286
- margin: 0;
287
- overflow: visible;
288
- padding: 0;
289
- width: auto;
290
- -webkit-font-smoothing: inherit;
291
- -moz-osx-font-smoothing: inherit;
292
- -webkit-appearance: none;
293
- line-height: 1;
294
- color: currentColor;
295
- -webkit-text-decoration: none;
296
- text-decoration: none;
297
- }
298
-
299
- .c4:is(a,button,[tabIndex='0']) {
300
- cursor: pointer;
301
- }
302
-
303
- .c4:is(a,button,[tabIndex='0']):after {
304
- content: '';
305
- position: absolute;
306
- left: 0;
307
- top: 0;
308
- right: 0;
309
- bottom: 0;
310
- }
311
-
312
- .c0 {
313
- -webkit-align-items: center;
314
- -webkit-box-align: center;
315
- -ms-flex-align: center;
316
- align-items: center;
317
- border-radius: 999px;
318
- cursor: auto;
319
- display: -webkit-inline-box;
320
- display: -webkit-inline-flex;
321
- display: -ms-inline-flexbox;
322
- display: inline-flex;
323
- font-weight: 600;
324
- font-family: inherit;
325
- -webkit-text-decoration: none;
326
- text-decoration: none;
327
- white-space: nowrap;
328
- font-size: 12px;
329
- height: 20px;
330
- line-height: 20px;
331
- padding-left: 8px;
332
- padding-right: 8px;
333
- padding-top: 0;
334
- padding-bottom: 0;
335
- padding-left: 4px;
336
- background-color: rgba(234,238,242,0.5);
337
- border-color: rgba(27,31,36,0.15);
338
- border-style: solid;
339
- border-width: 1px;
340
- color: #57606a;
341
- max-width: 100%;
342
- padding-right: 0;
343
- position: relative;
344
- padding-left: 4px;
345
- }
346
-
347
- .c1 {
348
- -webkit-flex-shrink: 0;
349
- -ms-flex-negative: 0;
350
- flex-shrink: 0;
351
- line-height: 0;
352
- margin-right: 4px;
353
- }
354
-
355
- .c2 {
356
- --spacing: calc(4px * 2);
357
- display: block;
358
- height: calc(20px - var(--spacing));
359
- width: calc(20px - var(--spacing));
360
- }
361
-
362
- <span
363
- aria-label="token, press backspace or delete to remove"
364
- className="c0"
365
- onKeyDown={[Function]}
366
- onRemove={[MockFunction]}
367
- size="medium"
368
- >
369
- <span
370
- className="c1"
371
- size="medium"
372
- >
373
- <span
374
- className="c2"
375
- >
376
- <img
377
- alt=""
378
- className="c3"
379
- height={20}
380
- size={20}
381
- src="https://avatars.githubusercontent.com/mperrotti"
382
- width={20}
383
- />
384
- </span>
385
- </span>
386
- <span
387
- className="c4"
388
- >
389
- token
390
- </span>
391
- <button
392
- aria-hidden="false"
393
- aria-label="Remove token"
394
- className="c5"
395
- onClick={[Function]}
396
- size="medium"
397
- >
398
- <svg
399
- aria-hidden="true"
400
- className="octicon octicon-x"
401
- dangerouslySetInnerHTML={
402
- Object {
403
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
404
- }
405
- }
406
- fill="currentColor"
407
- height={15}
408
- role="img"
409
- style={
410
- Object {
411
- "display": "inline-block",
412
- "userSelect": "none",
413
- "verticalAlign": "text-bottom",
414
- }
415
- }
416
- viewBox="0 0 16 16"
417
- width={15}
418
- />
419
- </button>
420
- </span>
421
- `;
422
-
423
- exports[`Token components AvatarToken renders all sizes 3`] = `
424
- .c3 {
425
- display: inline-block;
426
- overflow: hidden;
427
- line-height: 1;
428
- vertical-align: middle;
429
- border-radius: 50%;
430
- width: 100%;
431
- height: 100%;
432
- }
433
-
434
- .c5 {
435
- background-color: transparent;
436
- font-family: inherit;
437
- color: currentColor;
438
- cursor: pointer;
439
- display: -webkit-inline-box;
440
- display: -webkit-inline-flex;
441
- display: -ms-inline-flexbox;
442
- display: inline-flex;
443
- -webkit-box-pack: center;
444
- -webkit-justify-content: center;
445
- -ms-flex-pack: center;
446
- justify-content: center;
447
- -webkit-align-items: center;
448
- -webkit-box-align: center;
449
- -ms-flex-align: center;
450
- align-items: center;
451
- -webkit-user-select: none;
452
- -moz-user-select: none;
453
- -ms-user-select: none;
454
- user-select: none;
455
- -webkit-appearance: none;
456
- -moz-appearance: none;
457
- appearance: none;
458
- -webkit-text-decoration: none;
459
- text-decoration: none;
460
- padding: 0;
461
- -webkit-transform: translate(1px,-1px);
462
- -ms-transform: translate(1px,-1px);
463
- transform: translate(1px,-1px);
464
- -webkit-align-self: baseline;
465
- -ms-flex-item-align: baseline;
466
- align-self: baseline;
467
- border: 0;
468
- border-radius: 999px;
469
- margin-left: 8px;
470
- height: 24px;
471
- width: 24px;
472
- }
473
-
474
- .c5:hover,
475
- .c5:focus {
476
- background-color: rgba(175,184,193,0.2);
477
- }
478
-
479
- .c5:active {
480
- background-color: rgba(234,238,242,0.5);
481
- }
482
-
483
- .c4 {
484
- -webkit-box-flex: 1;
485
- -webkit-flex-grow: 1;
486
- -ms-flex-positive: 1;
487
- flex-grow: 1;
488
- min-width: 0;
489
- overflow: hidden;
490
- text-overflow: ellipsis;
491
- white-space: nowrap;
492
- background: transparent;
493
- border: none;
494
- color: inherit;
495
- font: inherit;
496
- margin: 0;
497
- overflow: visible;
498
- padding: 0;
499
- width: auto;
500
- -webkit-font-smoothing: inherit;
501
- -moz-osx-font-smoothing: inherit;
502
- -webkit-appearance: none;
503
- line-height: 1;
504
- color: currentColor;
505
- -webkit-text-decoration: none;
506
- text-decoration: none;
507
- }
508
-
509
- .c4:is(a,button,[tabIndex='0']) {
510
- cursor: pointer;
511
- }
512
-
513
- .c4:is(a,button,[tabIndex='0']):after {
514
- content: '';
515
- position: absolute;
516
- left: 0;
517
- top: 0;
518
- right: 0;
519
- bottom: 0;
520
- }
521
-
522
- .c0 {
523
- -webkit-align-items: center;
524
- -webkit-box-align: center;
525
- -ms-flex-align: center;
526
- align-items: center;
527
- border-radius: 999px;
528
- cursor: auto;
529
- display: -webkit-inline-box;
530
- display: -webkit-inline-flex;
531
- display: -ms-inline-flexbox;
532
- display: inline-flex;
533
- font-weight: 600;
534
- font-family: inherit;
535
- -webkit-text-decoration: none;
536
- text-decoration: none;
537
- white-space: nowrap;
538
- font-size: 12px;
539
- height: 24px;
540
- line-height: 24px;
541
- padding-left: 8px;
542
- padding-right: 8px;
543
- padding-top: 0;
544
- padding-bottom: 0;
545
- padding-left: 4px;
546
- background-color: rgba(234,238,242,0.5);
547
- border-color: rgba(27,31,36,0.15);
548
- border-style: solid;
549
- border-width: 1px;
550
- color: #57606a;
551
- max-width: 100%;
552
- padding-right: 0;
553
- position: relative;
554
- padding-left: 4px;
555
- }
556
-
557
- .c1 {
558
- -webkit-flex-shrink: 0;
559
- -ms-flex-negative: 0;
560
- flex-shrink: 0;
561
- line-height: 0;
562
- margin-right: 8px;
563
- }
564
-
565
- .c2 {
566
- --spacing: calc(4px * 2);
567
- display: block;
568
- height: calc(24px - var(--spacing));
569
- width: calc(24px - var(--spacing));
570
- }
571
-
572
- <span
573
- aria-label="token, press backspace or delete to remove"
574
- className="c0"
575
- onKeyDown={[Function]}
576
- onRemove={[MockFunction]}
577
- size="large"
578
- >
579
- <span
580
- className="c1"
581
- size="large"
582
- >
583
- <span
584
- className="c2"
585
- >
586
- <img
587
- alt=""
588
- className="c3"
589
- height={24}
590
- size={24}
591
- src="https://avatars.githubusercontent.com/mperrotti"
592
- width={24}
593
- />
594
- </span>
595
- </span>
596
- <span
597
- className="c4"
598
- >
599
- token
600
- </span>
601
- <button
602
- aria-hidden="false"
603
- aria-label="Remove token"
604
- className="c5"
605
- onClick={[Function]}
606
- size="large"
607
- >
608
- <svg
609
- aria-hidden="true"
610
- className="octicon octicon-x"
611
- dangerouslySetInnerHTML={
612
- Object {
613
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
614
- }
615
- }
616
- fill="currentColor"
617
- height={18}
618
- role="img"
619
- style={
620
- Object {
621
- "display": "inline-block",
622
- "userSelect": "none",
623
- "verticalAlign": "text-bottom",
624
- }
625
- }
626
- viewBox="0 0 16 16"
627
- width={18}
628
- />
629
- </button>
630
- </span>
631
- `;
632
-
633
- exports[`Token components AvatarToken renders all sizes 4`] = `
634
- .c3 {
635
- display: inline-block;
636
- overflow: hidden;
637
- line-height: 1;
638
- vertical-align: middle;
639
- border-radius: 50%;
640
- width: 100%;
641
- height: 100%;
642
- }
643
-
644
- .c5 {
645
- background-color: transparent;
646
- font-family: inherit;
647
- color: currentColor;
648
- cursor: pointer;
649
- display: -webkit-inline-box;
650
- display: -webkit-inline-flex;
651
- display: -ms-inline-flexbox;
652
- display: inline-flex;
653
- -webkit-box-pack: center;
654
- -webkit-justify-content: center;
655
- -ms-flex-pack: center;
656
- justify-content: center;
657
- -webkit-align-items: center;
658
- -webkit-box-align: center;
659
- -ms-flex-align: center;
660
- align-items: center;
661
- -webkit-user-select: none;
662
- -moz-user-select: none;
663
- -ms-user-select: none;
664
- user-select: none;
665
- -webkit-appearance: none;
666
- -moz-appearance: none;
667
- appearance: none;
668
- -webkit-text-decoration: none;
669
- text-decoration: none;
670
- padding: 0;
671
- -webkit-transform: translate(1px,-1px);
672
- -ms-transform: translate(1px,-1px);
673
- transform: translate(1px,-1px);
674
- -webkit-align-self: baseline;
675
- -ms-flex-item-align: baseline;
676
- align-self: baseline;
677
- border: 0;
678
- border-radius: 999px;
679
- margin-left: 8px;
680
- height: 32px;
681
- width: 32px;
682
- }
683
-
684
- .c5:hover,
685
- .c5:focus {
686
- background-color: rgba(175,184,193,0.2);
687
- }
688
-
689
- .c5:active {
690
- background-color: rgba(234,238,242,0.5);
691
- }
692
-
693
- .c4 {
694
- -webkit-box-flex: 1;
695
- -webkit-flex-grow: 1;
696
- -ms-flex-positive: 1;
697
- flex-grow: 1;
698
- min-width: 0;
699
- overflow: hidden;
700
- text-overflow: ellipsis;
701
- white-space: nowrap;
702
- background: transparent;
703
- border: none;
704
- color: inherit;
705
- font: inherit;
706
- margin: 0;
707
- overflow: visible;
708
- padding: 0;
709
- width: auto;
710
- -webkit-font-smoothing: inherit;
711
- -moz-osx-font-smoothing: inherit;
712
- -webkit-appearance: none;
713
- line-height: 1;
714
- color: currentColor;
715
- -webkit-text-decoration: none;
716
- text-decoration: none;
717
- }
718
-
719
- .c4:is(a,button,[tabIndex='0']) {
720
- cursor: pointer;
721
- }
722
-
723
- .c4:is(a,button,[tabIndex='0']):after {
724
- content: '';
725
- position: absolute;
726
- left: 0;
727
- top: 0;
728
- right: 0;
729
- bottom: 0;
730
- }
731
-
732
- .c0 {
733
- -webkit-align-items: center;
734
- -webkit-box-align: center;
735
- -ms-flex-align: center;
736
- align-items: center;
737
- border-radius: 999px;
738
- cursor: auto;
739
- display: -webkit-inline-box;
740
- display: -webkit-inline-flex;
741
- display: -ms-inline-flexbox;
742
- display: inline-flex;
743
- font-weight: 600;
744
- font-family: inherit;
745
- -webkit-text-decoration: none;
746
- text-decoration: none;
747
- white-space: nowrap;
748
- font-size: 14px;
749
- height: 32px;
750
- line-height: 32px;
751
- padding-left: 16px;
752
- padding-right: 16px;
753
- padding-top: 0;
754
- padding-bottom: 0;
755
- padding-left: 4px;
756
- background-color: rgba(234,238,242,0.5);
757
- border-color: rgba(27,31,36,0.15);
758
- border-style: solid;
759
- border-width: 1px;
760
- color: #57606a;
761
- max-width: 100%;
762
- padding-right: 0;
763
- position: relative;
764
- padding-left: 4px;
765
- }
766
-
767
- .c1 {
768
- -webkit-flex-shrink: 0;
769
- -ms-flex-negative: 0;
770
- flex-shrink: 0;
771
- line-height: 0;
772
- margin-right: 8px;
773
- }
774
-
775
- .c2 {
776
- --spacing: calc(4px * 2);
777
- display: block;
778
- height: calc(32px - var(--spacing));
779
- width: calc(32px - var(--spacing));
780
- }
781
-
782
- <span
783
- aria-label="token, press backspace or delete to remove"
784
- className="c0"
785
- onKeyDown={[Function]}
786
- onRemove={[MockFunction]}
787
- size="extralarge"
788
- >
789
- <span
790
- className="c1"
791
- size="extralarge"
792
- >
793
- <span
794
- className="c2"
795
- >
796
- <img
797
- alt=""
798
- className="c3"
799
- height={32}
800
- size={32}
801
- src="https://avatars.githubusercontent.com/mperrotti"
802
- width={32}
803
- />
804
- </span>
805
- </span>
806
- <span
807
- className="c4"
808
- >
809
- token
810
- </span>
811
- <button
812
- aria-hidden="false"
813
- aria-label="Remove token"
814
- className="c5"
815
- onClick={[Function]}
816
- size="extralarge"
817
- >
818
- <svg
819
- aria-hidden="true"
820
- className="octicon octicon-x"
821
- dangerouslySetInnerHTML={
822
- Object {
823
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
824
- }
825
- }
826
- fill="currentColor"
827
- height={24}
828
- role="img"
829
- style={
830
- Object {
831
- "display": "inline-block",
832
- "userSelect": "none",
833
- "verticalAlign": "text-bottom",
834
- }
835
- }
836
- viewBox="0 0 24 24"
837
- width={24}
838
- />
839
- </button>
840
- </span>
841
- `;
842
-
843
- exports[`Token components AvatarToken renders consistently 1`] = `
844
- .c1 {
845
- -webkit-box-flex: 1;
846
- -webkit-flex-grow: 1;
847
- -ms-flex-positive: 1;
848
- flex-grow: 1;
849
- min-width: 0;
850
- overflow: hidden;
851
- text-overflow: ellipsis;
852
- white-space: nowrap;
853
- background: transparent;
854
- border: none;
855
- color: inherit;
856
- font: inherit;
857
- margin: 0;
858
- overflow: visible;
859
- padding: 0;
860
- width: auto;
861
- -webkit-font-smoothing: inherit;
862
- -moz-osx-font-smoothing: inherit;
863
- -webkit-appearance: none;
864
- line-height: 1;
865
- color: currentColor;
866
- -webkit-text-decoration: none;
867
- text-decoration: none;
868
- }
869
-
870
- .c1:is(a,button,[tabIndex='0']) {
871
- cursor: pointer;
872
- }
873
-
874
- .c1:is(a,button,[tabIndex='0']):after {
875
- content: '';
876
- position: absolute;
877
- left: 0;
878
- top: 0;
879
- right: 0;
880
- bottom: 0;
881
- }
882
-
883
- .c0 {
884
- -webkit-align-items: center;
885
- -webkit-box-align: center;
886
- -ms-flex-align: center;
887
- align-items: center;
888
- border-radius: 999px;
889
- cursor: auto;
890
- display: -webkit-inline-box;
891
- display: -webkit-inline-flex;
892
- display: -ms-inline-flexbox;
893
- display: inline-flex;
894
- font-weight: 600;
895
- font-family: inherit;
896
- -webkit-text-decoration: none;
897
- text-decoration: none;
898
- white-space: nowrap;
899
- font-size: 12px;
900
- height: 20px;
901
- line-height: 20px;
902
- padding-left: 8px;
903
- padding-right: 8px;
904
- padding-top: 0;
905
- padding-bottom: 0;
906
- background-color: rgba(234,238,242,0.5);
907
- border-color: rgba(27,31,36,0.15);
908
- border-style: solid;
909
- border-width: 1px;
910
- color: #57606a;
911
- max-width: 100%;
912
- position: relative;
913
- }
914
-
915
- <span
916
- className="c0"
917
- onKeyDown={[Function]}
918
- size="medium"
919
- >
920
- <span
921
- className="c1"
922
- />
923
- </span>
924
- `;
925
-
926
- exports[`Token components AvatarToken renders isSelected 1`] = `
927
- .c3 {
928
- display: inline-block;
929
- overflow: hidden;
930
- line-height: 1;
931
- vertical-align: middle;
932
- border-radius: 50%;
933
- width: 100%;
934
- height: 100%;
935
- }
936
-
937
- .c4 {
938
- -webkit-box-flex: 1;
939
- -webkit-flex-grow: 1;
940
- -ms-flex-positive: 1;
941
- flex-grow: 1;
942
- min-width: 0;
943
- overflow: hidden;
944
- text-overflow: ellipsis;
945
- white-space: nowrap;
946
- background: transparent;
947
- border: none;
948
- color: inherit;
949
- font: inherit;
950
- margin: 0;
951
- overflow: visible;
952
- padding: 0;
953
- width: auto;
954
- -webkit-font-smoothing: inherit;
955
- -moz-osx-font-smoothing: inherit;
956
- -webkit-appearance: none;
957
- line-height: 1;
958
- color: currentColor;
959
- -webkit-text-decoration: none;
960
- text-decoration: none;
961
- }
962
-
963
- .c4:is(a,button,[tabIndex='0']) {
964
- cursor: pointer;
965
- }
966
-
967
- .c4:is(a,button,[tabIndex='0']):after {
968
- content: '';
969
- position: absolute;
970
- left: 0;
971
- top: 0;
972
- right: 0;
973
- bottom: 0;
974
- }
975
-
976
- .c0 {
977
- -webkit-align-items: center;
978
- -webkit-box-align: center;
979
- -ms-flex-align: center;
980
- align-items: center;
981
- border-radius: 999px;
982
- cursor: auto;
983
- display: -webkit-inline-box;
984
- display: -webkit-inline-flex;
985
- display: -ms-inline-flexbox;
986
- display: inline-flex;
987
- font-weight: 600;
988
- font-family: inherit;
989
- -webkit-text-decoration: none;
990
- text-decoration: none;
991
- white-space: nowrap;
992
- font-size: 12px;
993
- height: 20px;
994
- line-height: 20px;
995
- padding-left: 8px;
996
- padding-right: 8px;
997
- padding-top: 0;
998
- padding-bottom: 0;
999
- padding-left: 4px;
1000
- background-color: rgba(234,238,242,0.5);
1001
- border-color: #24292f;
1002
- border-style: solid;
1003
- border-width: 1px;
1004
- color: #24292f;
1005
- max-width: 100%;
1006
- position: relative;
1007
- padding-left: 4px;
1008
- }
1009
-
1010
- .c1 {
1011
- -webkit-flex-shrink: 0;
1012
- -ms-flex-negative: 0;
1013
- flex-shrink: 0;
1014
- line-height: 0;
1015
- margin-right: 4px;
1016
- }
1017
-
1018
- .c2 {
1019
- --spacing: calc(4px * 2);
1020
- display: block;
1021
- height: calc(20px - var(--spacing));
1022
- width: calc(20px - var(--spacing));
1023
- }
1024
-
1025
- <span
1026
- className="c0"
1027
- onKeyDown={[Function]}
1028
- size="medium"
1029
- >
1030
- <span
1031
- className="c1"
1032
- size="medium"
1033
- >
1034
- <span
1035
- className="c2"
1036
- >
1037
- <img
1038
- alt=""
1039
- className="c3"
1040
- height={20}
1041
- size={20}
1042
- src="https://avatars.githubusercontent.com/mperrotti"
1043
- width={20}
1044
- />
1045
- </span>
1046
- </span>
1047
- <span
1048
- className="c4"
1049
- >
1050
- token
1051
- </span>
1052
- </span>
1053
- `;
1054
-
1055
- exports[`Token components AvatarToken renders with a remove button 1`] = `
1056
- .c3 {
1057
- display: inline-block;
1058
- overflow: hidden;
1059
- line-height: 1;
1060
- vertical-align: middle;
1061
- border-radius: 50%;
1062
- width: 100%;
1063
- height: 100%;
1064
- }
1065
-
1066
- .c5 {
1067
- background-color: transparent;
1068
- font-family: inherit;
1069
- color: currentColor;
1070
- cursor: pointer;
1071
- display: -webkit-inline-box;
1072
- display: -webkit-inline-flex;
1073
- display: -ms-inline-flexbox;
1074
- display: inline-flex;
1075
- -webkit-box-pack: center;
1076
- -webkit-justify-content: center;
1077
- -ms-flex-pack: center;
1078
- justify-content: center;
1079
- -webkit-align-items: center;
1080
- -webkit-box-align: center;
1081
- -ms-flex-align: center;
1082
- align-items: center;
1083
- -webkit-user-select: none;
1084
- -moz-user-select: none;
1085
- -ms-user-select: none;
1086
- user-select: none;
1087
- -webkit-appearance: none;
1088
- -moz-appearance: none;
1089
- appearance: none;
1090
- -webkit-text-decoration: none;
1091
- text-decoration: none;
1092
- padding: 0;
1093
- -webkit-transform: translate(1px,-1px);
1094
- -ms-transform: translate(1px,-1px);
1095
- transform: translate(1px,-1px);
1096
- -webkit-align-self: baseline;
1097
- -ms-flex-item-align: baseline;
1098
- align-self: baseline;
1099
- border: 0;
1100
- border-radius: 999px;
1101
- margin-left: 4px;
1102
- height: 20px;
1103
- width: 20px;
1104
- }
1105
-
1106
- .c5:hover,
1107
- .c5:focus {
1108
- background-color: rgba(175,184,193,0.2);
1109
- }
1110
-
1111
- .c5:active {
1112
- background-color: rgba(234,238,242,0.5);
1113
- }
1114
-
1115
- .c4 {
1116
- -webkit-box-flex: 1;
1117
- -webkit-flex-grow: 1;
1118
- -ms-flex-positive: 1;
1119
- flex-grow: 1;
1120
- min-width: 0;
1121
- overflow: hidden;
1122
- text-overflow: ellipsis;
1123
- white-space: nowrap;
1124
- background: transparent;
1125
- border: none;
1126
- color: inherit;
1127
- font: inherit;
1128
- margin: 0;
1129
- overflow: visible;
1130
- padding: 0;
1131
- width: auto;
1132
- -webkit-font-smoothing: inherit;
1133
- -moz-osx-font-smoothing: inherit;
1134
- -webkit-appearance: none;
1135
- line-height: 1;
1136
- color: currentColor;
1137
- -webkit-text-decoration: none;
1138
- text-decoration: none;
1139
- }
1140
-
1141
- .c4:is(a,button,[tabIndex='0']) {
1142
- cursor: pointer;
1143
- }
1144
-
1145
- .c4:is(a,button,[tabIndex='0']):after {
1146
- content: '';
1147
- position: absolute;
1148
- left: 0;
1149
- top: 0;
1150
- right: 0;
1151
- bottom: 0;
1152
- }
1153
-
1154
- .c0 {
1155
- -webkit-align-items: center;
1156
- -webkit-box-align: center;
1157
- -ms-flex-align: center;
1158
- align-items: center;
1159
- border-radius: 999px;
1160
- cursor: auto;
1161
- display: -webkit-inline-box;
1162
- display: -webkit-inline-flex;
1163
- display: -ms-inline-flexbox;
1164
- display: inline-flex;
1165
- font-weight: 600;
1166
- font-family: inherit;
1167
- -webkit-text-decoration: none;
1168
- text-decoration: none;
1169
- white-space: nowrap;
1170
- font-size: 12px;
1171
- height: 20px;
1172
- line-height: 20px;
1173
- padding-left: 8px;
1174
- padding-right: 8px;
1175
- padding-top: 0;
1176
- padding-bottom: 0;
1177
- padding-left: 4px;
1178
- background-color: rgba(234,238,242,0.5);
1179
- border-color: rgba(27,31,36,0.15);
1180
- border-style: solid;
1181
- border-width: 1px;
1182
- color: #57606a;
1183
- max-width: 100%;
1184
- padding-right: 0;
1185
- position: relative;
1186
- padding-left: 4px;
1187
- }
1188
-
1189
- .c1 {
1190
- -webkit-flex-shrink: 0;
1191
- -ms-flex-negative: 0;
1192
- flex-shrink: 0;
1193
- line-height: 0;
1194
- margin-right: 4px;
1195
- }
1196
-
1197
- .c2 {
1198
- --spacing: calc(4px * 2);
1199
- display: block;
1200
- height: calc(20px - var(--spacing));
1201
- width: calc(20px - var(--spacing));
1202
- }
1203
-
1204
- <span
1205
- aria-label="token, press backspace or delete to remove"
1206
- className="c0"
1207
- onKeyDown={[Function]}
1208
- onRemove={[MockFunction]}
1209
- size="medium"
1210
- >
1211
- <span
1212
- className="c1"
1213
- size="medium"
1214
- >
1215
- <span
1216
- className="c2"
1217
- >
1218
- <img
1219
- alt=""
1220
- className="c3"
1221
- height={20}
1222
- size={20}
1223
- src="https://avatars.githubusercontent.com/mperrotti"
1224
- width={20}
1225
- />
1226
- </span>
1227
- </span>
1228
- <span
1229
- className="c4"
1230
- >
1231
- token
1232
- </span>
1233
- <button
1234
- aria-hidden="false"
1235
- aria-label="Remove token"
1236
- className="c5"
1237
- onClick={[Function]}
1238
- size="medium"
1239
- >
1240
- <svg
1241
- aria-hidden="true"
1242
- className="octicon octicon-x"
1243
- dangerouslySetInnerHTML={
1244
- Object {
1245
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
1246
- }
1247
- }
1248
- fill="currentColor"
1249
- height={15}
1250
- role="img"
1251
- style={
1252
- Object {
1253
- "display": "inline-block",
1254
- "userSelect": "none",
1255
- "verticalAlign": "text-bottom",
1256
- }
1257
- }
1258
- viewBox="0 0 16 16"
1259
- width={15}
1260
- />
1261
- </button>
1262
- </span>
1263
- `;
1264
-
1265
- exports[`Token components IssueLabelToken renders all sizes 1`] = `
1266
- .c0 {
1267
- -webkit-align-items: center;
1268
- -webkit-box-align: center;
1269
- -ms-flex-align: center;
1270
- align-items: center;
1271
- border-radius: 999px;
1272
- cursor: auto;
1273
- display: -webkit-inline-box;
1274
- display: -webkit-inline-flex;
1275
- display: -ms-inline-flexbox;
1276
- display: inline-flex;
1277
- font-weight: 600;
1278
- font-family: inherit;
1279
- -webkit-text-decoration: none;
1280
- text-decoration: none;
1281
- white-space: nowrap;
1282
- font-size: 12px;
1283
- height: 16px;
1284
- line-height: 16px;
1285
- padding-left: 4px;
1286
- padding-right: 4px;
1287
- padding-top: 0;
1288
- padding-bottom: 0;
1289
- --label-r: 153;
1290
- --label-g: 153;
1291
- --label-b: 153;
1292
- --label-h: 0;
1293
- --label-s: 0;
1294
- --label-l: 60;
1295
- --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
1296
- --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));
1297
- padding-right: 0;
1298
- position: relative;
1299
- --lightness-threshold: 0.453;
1300
- --border-threshold: 0.96;
1301
- --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1));
1302
- background: rgb(var(--label-r),var(--label-g),var(--label-b));
1303
- color: hsl(0,0%,calc(var(--lightness-switch) * 100%));
1304
- border-width: 1px;
1305
- border-style: solid;
1306
- border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));
1307
- }
1308
-
1309
- .c2 {
1310
- background-color: transparent;
1311
- font-family: inherit;
1312
- color: currentColor;
1313
- cursor: pointer;
1314
- display: -webkit-inline-box;
1315
- display: -webkit-inline-flex;
1316
- display: -ms-inline-flexbox;
1317
- display: inline-flex;
1318
- -webkit-box-pack: center;
1319
- -webkit-justify-content: center;
1320
- -ms-flex-pack: center;
1321
- justify-content: center;
1322
- -webkit-align-items: center;
1323
- -webkit-box-align: center;
1324
- -ms-flex-align: center;
1325
- align-items: center;
1326
- -webkit-user-select: none;
1327
- -moz-user-select: none;
1328
- -ms-user-select: none;
1329
- user-select: none;
1330
- -webkit-appearance: none;
1331
- -moz-appearance: none;
1332
- appearance: none;
1333
- -webkit-text-decoration: none;
1334
- text-decoration: none;
1335
- padding: 0;
1336
- -webkit-transform: translate(1px,-1px);
1337
- -ms-transform: translate(1px,-1px);
1338
- transform: translate(1px,-1px);
1339
- -webkit-align-self: baseline;
1340
- -ms-flex-item-align: baseline;
1341
- align-self: baseline;
1342
- border: 0;
1343
- border-radius: 999px;
1344
- margin-left: 4px;
1345
- height: 16px;
1346
- width: 16px;
1347
- }
1348
-
1349
- .c2:hover,
1350
- .c2:focus {
1351
- background-color: rgba(175,184,193,0.2);
1352
- }
1353
-
1354
- .c2:active {
1355
- background-color: rgba(234,238,242,0.5);
1356
- }
1357
-
1358
- .c1 {
1359
- -webkit-box-flex: 1;
1360
- -webkit-flex-grow: 1;
1361
- -ms-flex-positive: 1;
1362
- flex-grow: 1;
1363
- min-width: 0;
1364
- overflow: hidden;
1365
- text-overflow: ellipsis;
1366
- white-space: nowrap;
1367
- background: transparent;
1368
- border: none;
1369
- color: inherit;
1370
- font: inherit;
1371
- margin: 0;
1372
- overflow: visible;
1373
- padding: 0;
1374
- width: auto;
1375
- -webkit-font-smoothing: inherit;
1376
- -moz-osx-font-smoothing: inherit;
1377
- -webkit-appearance: none;
1378
- line-height: 1;
1379
- color: currentColor;
1380
- -webkit-text-decoration: none;
1381
- text-decoration: none;
1382
- }
1383
-
1384
- .c1:is(a,button,[tabIndex='0']) {
1385
- cursor: pointer;
1386
- }
1387
-
1388
- .c1:is(a,button,[tabIndex='0']):after {
1389
- content: '';
1390
- position: absolute;
1391
- left: 0;
1392
- top: 0;
1393
- right: 0;
1394
- bottom: 0;
1395
- }
1396
-
1397
- <span
1398
- aria-label="token, press backspace or delete to remove"
1399
- className="c0"
1400
- onKeyDown={[Function]}
1401
- onRemove={[MockFunction]}
1402
- size="small"
1403
- >
1404
- <span
1405
- className="c1"
1406
- >
1407
- token
1408
- </span>
1409
- <button
1410
- aria-hidden="false"
1411
- aria-label="Remove token"
1412
- className="c2"
1413
- onClick={[Function]}
1414
- size="small"
1415
- >
1416
- <svg
1417
- aria-hidden="true"
1418
- className="octicon octicon-x"
1419
- dangerouslySetInnerHTML={
1420
- Object {
1421
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
1422
- }
1423
- }
1424
- fill="currentColor"
1425
- height={12}
1426
- role="img"
1427
- style={
1428
- Object {
1429
- "display": "inline-block",
1430
- "userSelect": "none",
1431
- "verticalAlign": "text-bottom",
1432
- }
1433
- }
1434
- viewBox="0 0 16 16"
1435
- width={12}
1436
- />
1437
- </button>
1438
- </span>
1439
- `;
1440
-
1441
- exports[`Token components IssueLabelToken renders all sizes 2`] = `
1442
- .c0 {
1443
- -webkit-align-items: center;
1444
- -webkit-box-align: center;
1445
- -ms-flex-align: center;
1446
- align-items: center;
1447
- border-radius: 999px;
1448
- cursor: auto;
1449
- display: -webkit-inline-box;
1450
- display: -webkit-inline-flex;
1451
- display: -ms-inline-flexbox;
1452
- display: inline-flex;
1453
- font-weight: 600;
1454
- font-family: inherit;
1455
- -webkit-text-decoration: none;
1456
- text-decoration: none;
1457
- white-space: nowrap;
1458
- font-size: 12px;
1459
- height: 20px;
1460
- line-height: 20px;
1461
- padding-left: 8px;
1462
- padding-right: 8px;
1463
- padding-top: 0;
1464
- padding-bottom: 0;
1465
- --label-r: 153;
1466
- --label-g: 153;
1467
- --label-b: 153;
1468
- --label-h: 0;
1469
- --label-s: 0;
1470
- --label-l: 60;
1471
- --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
1472
- --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));
1473
- padding-right: 0;
1474
- position: relative;
1475
- --lightness-threshold: 0.453;
1476
- --border-threshold: 0.96;
1477
- --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1));
1478
- background: rgb(var(--label-r),var(--label-g),var(--label-b));
1479
- color: hsl(0,0%,calc(var(--lightness-switch) * 100%));
1480
- border-width: 1px;
1481
- border-style: solid;
1482
- border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));
1483
- }
1484
-
1485
- .c2 {
1486
- background-color: transparent;
1487
- font-family: inherit;
1488
- color: currentColor;
1489
- cursor: pointer;
1490
- display: -webkit-inline-box;
1491
- display: -webkit-inline-flex;
1492
- display: -ms-inline-flexbox;
1493
- display: inline-flex;
1494
- -webkit-box-pack: center;
1495
- -webkit-justify-content: center;
1496
- -ms-flex-pack: center;
1497
- justify-content: center;
1498
- -webkit-align-items: center;
1499
- -webkit-box-align: center;
1500
- -ms-flex-align: center;
1501
- align-items: center;
1502
- -webkit-user-select: none;
1503
- -moz-user-select: none;
1504
- -ms-user-select: none;
1505
- user-select: none;
1506
- -webkit-appearance: none;
1507
- -moz-appearance: none;
1508
- appearance: none;
1509
- -webkit-text-decoration: none;
1510
- text-decoration: none;
1511
- padding: 0;
1512
- -webkit-transform: translate(1px,-1px);
1513
- -ms-transform: translate(1px,-1px);
1514
- transform: translate(1px,-1px);
1515
- -webkit-align-self: baseline;
1516
- -ms-flex-item-align: baseline;
1517
- align-self: baseline;
1518
- border: 0;
1519
- border-radius: 999px;
1520
- margin-left: 4px;
1521
- height: 20px;
1522
- width: 20px;
1523
- }
1524
-
1525
- .c2:hover,
1526
- .c2:focus {
1527
- background-color: rgba(175,184,193,0.2);
1528
- }
1529
-
1530
- .c2:active {
1531
- background-color: rgba(234,238,242,0.5);
1532
- }
1533
-
1534
- .c1 {
1535
- -webkit-box-flex: 1;
1536
- -webkit-flex-grow: 1;
1537
- -ms-flex-positive: 1;
1538
- flex-grow: 1;
1539
- min-width: 0;
1540
- overflow: hidden;
1541
- text-overflow: ellipsis;
1542
- white-space: nowrap;
1543
- background: transparent;
1544
- border: none;
1545
- color: inherit;
1546
- font: inherit;
1547
- margin: 0;
1548
- overflow: visible;
1549
- padding: 0;
1550
- width: auto;
1551
- -webkit-font-smoothing: inherit;
1552
- -moz-osx-font-smoothing: inherit;
1553
- -webkit-appearance: none;
1554
- line-height: 1;
1555
- color: currentColor;
1556
- -webkit-text-decoration: none;
1557
- text-decoration: none;
1558
- }
1559
-
1560
- .c1:is(a,button,[tabIndex='0']) {
1561
- cursor: pointer;
1562
- }
1563
-
1564
- .c1:is(a,button,[tabIndex='0']):after {
1565
- content: '';
1566
- position: absolute;
1567
- left: 0;
1568
- top: 0;
1569
- right: 0;
1570
- bottom: 0;
1571
- }
1572
-
1573
- <span
1574
- aria-label="token, press backspace or delete to remove"
1575
- className="c0"
1576
- onKeyDown={[Function]}
1577
- onRemove={[MockFunction]}
1578
- size="medium"
1579
- >
1580
- <span
1581
- className="c1"
1582
- >
1583
- token
1584
- </span>
1585
- <button
1586
- aria-hidden="false"
1587
- aria-label="Remove token"
1588
- className="c2"
1589
- onClick={[Function]}
1590
- size="medium"
1591
- >
1592
- <svg
1593
- aria-hidden="true"
1594
- className="octicon octicon-x"
1595
- dangerouslySetInnerHTML={
1596
- Object {
1597
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
1598
- }
1599
- }
1600
- fill="currentColor"
1601
- height={15}
1602
- role="img"
1603
- style={
1604
- Object {
1605
- "display": "inline-block",
1606
- "userSelect": "none",
1607
- "verticalAlign": "text-bottom",
1608
- }
1609
- }
1610
- viewBox="0 0 16 16"
1611
- width={15}
1612
- />
1613
- </button>
1614
- </span>
1615
- `;
1616
-
1617
- exports[`Token components IssueLabelToken renders all sizes 3`] = `
1618
- .c0 {
1619
- -webkit-align-items: center;
1620
- -webkit-box-align: center;
1621
- -ms-flex-align: center;
1622
- align-items: center;
1623
- border-radius: 999px;
1624
- cursor: auto;
1625
- display: -webkit-inline-box;
1626
- display: -webkit-inline-flex;
1627
- display: -ms-inline-flexbox;
1628
- display: inline-flex;
1629
- font-weight: 600;
1630
- font-family: inherit;
1631
- -webkit-text-decoration: none;
1632
- text-decoration: none;
1633
- white-space: nowrap;
1634
- font-size: 12px;
1635
- height: 24px;
1636
- line-height: 24px;
1637
- padding-left: 8px;
1638
- padding-right: 8px;
1639
- padding-top: 0;
1640
- padding-bottom: 0;
1641
- --label-r: 153;
1642
- --label-g: 153;
1643
- --label-b: 153;
1644
- --label-h: 0;
1645
- --label-s: 0;
1646
- --label-l: 60;
1647
- --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
1648
- --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));
1649
- padding-right: 0;
1650
- position: relative;
1651
- --lightness-threshold: 0.453;
1652
- --border-threshold: 0.96;
1653
- --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1));
1654
- background: rgb(var(--label-r),var(--label-g),var(--label-b));
1655
- color: hsl(0,0%,calc(var(--lightness-switch) * 100%));
1656
- border-width: 1px;
1657
- border-style: solid;
1658
- border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));
1659
- }
1660
-
1661
- .c2 {
1662
- background-color: transparent;
1663
- font-family: inherit;
1664
- color: currentColor;
1665
- cursor: pointer;
1666
- display: -webkit-inline-box;
1667
- display: -webkit-inline-flex;
1668
- display: -ms-inline-flexbox;
1669
- display: inline-flex;
1670
- -webkit-box-pack: center;
1671
- -webkit-justify-content: center;
1672
- -ms-flex-pack: center;
1673
- justify-content: center;
1674
- -webkit-align-items: center;
1675
- -webkit-box-align: center;
1676
- -ms-flex-align: center;
1677
- align-items: center;
1678
- -webkit-user-select: none;
1679
- -moz-user-select: none;
1680
- -ms-user-select: none;
1681
- user-select: none;
1682
- -webkit-appearance: none;
1683
- -moz-appearance: none;
1684
- appearance: none;
1685
- -webkit-text-decoration: none;
1686
- text-decoration: none;
1687
- padding: 0;
1688
- -webkit-transform: translate(1px,-1px);
1689
- -ms-transform: translate(1px,-1px);
1690
- transform: translate(1px,-1px);
1691
- -webkit-align-self: baseline;
1692
- -ms-flex-item-align: baseline;
1693
- align-self: baseline;
1694
- border: 0;
1695
- border-radius: 999px;
1696
- margin-left: 8px;
1697
- height: 24px;
1698
- width: 24px;
1699
- }
1700
-
1701
- .c2:hover,
1702
- .c2:focus {
1703
- background-color: rgba(175,184,193,0.2);
1704
- }
1705
-
1706
- .c2:active {
1707
- background-color: rgba(234,238,242,0.5);
1708
- }
1709
-
1710
- .c1 {
1711
- -webkit-box-flex: 1;
1712
- -webkit-flex-grow: 1;
1713
- -ms-flex-positive: 1;
1714
- flex-grow: 1;
1715
- min-width: 0;
1716
- overflow: hidden;
1717
- text-overflow: ellipsis;
1718
- white-space: nowrap;
1719
- background: transparent;
1720
- border: none;
1721
- color: inherit;
1722
- font: inherit;
1723
- margin: 0;
1724
- overflow: visible;
1725
- padding: 0;
1726
- width: auto;
1727
- -webkit-font-smoothing: inherit;
1728
- -moz-osx-font-smoothing: inherit;
1729
- -webkit-appearance: none;
1730
- line-height: 1;
1731
- color: currentColor;
1732
- -webkit-text-decoration: none;
1733
- text-decoration: none;
1734
- }
1735
-
1736
- .c1:is(a,button,[tabIndex='0']) {
1737
- cursor: pointer;
1738
- }
1739
-
1740
- .c1:is(a,button,[tabIndex='0']):after {
1741
- content: '';
1742
- position: absolute;
1743
- left: 0;
1744
- top: 0;
1745
- right: 0;
1746
- bottom: 0;
1747
- }
1748
-
1749
- <span
1750
- aria-label="token, press backspace or delete to remove"
1751
- className="c0"
1752
- onKeyDown={[Function]}
1753
- onRemove={[MockFunction]}
1754
- size="large"
1755
- >
1756
- <span
1757
- className="c1"
1758
- >
1759
- token
1760
- </span>
1761
- <button
1762
- aria-hidden="false"
1763
- aria-label="Remove token"
1764
- className="c2"
1765
- onClick={[Function]}
1766
- size="large"
1767
- >
1768
- <svg
1769
- aria-hidden="true"
1770
- className="octicon octicon-x"
1771
- dangerouslySetInnerHTML={
1772
- Object {
1773
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
1774
- }
1775
- }
1776
- fill="currentColor"
1777
- height={18}
1778
- role="img"
1779
- style={
1780
- Object {
1781
- "display": "inline-block",
1782
- "userSelect": "none",
1783
- "verticalAlign": "text-bottom",
1784
- }
1785
- }
1786
- viewBox="0 0 16 16"
1787
- width={18}
1788
- />
1789
- </button>
1790
- </span>
1791
- `;
1792
-
1793
- exports[`Token components IssueLabelToken renders all sizes 4`] = `
1794
- .c0 {
1795
- -webkit-align-items: center;
1796
- -webkit-box-align: center;
1797
- -ms-flex-align: center;
1798
- align-items: center;
1799
- border-radius: 999px;
1800
- cursor: auto;
1801
- display: -webkit-inline-box;
1802
- display: -webkit-inline-flex;
1803
- display: -ms-inline-flexbox;
1804
- display: inline-flex;
1805
- font-weight: 600;
1806
- font-family: inherit;
1807
- -webkit-text-decoration: none;
1808
- text-decoration: none;
1809
- white-space: nowrap;
1810
- font-size: 14px;
1811
- height: 32px;
1812
- line-height: 32px;
1813
- padding-left: 16px;
1814
- padding-right: 16px;
1815
- padding-top: 0;
1816
- padding-bottom: 0;
1817
- --label-r: 153;
1818
- --label-g: 153;
1819
- --label-b: 153;
1820
- --label-h: 0;
1821
- --label-s: 0;
1822
- --label-l: 60;
1823
- --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
1824
- --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));
1825
- padding-right: 0;
1826
- position: relative;
1827
- --lightness-threshold: 0.453;
1828
- --border-threshold: 0.96;
1829
- --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1));
1830
- background: rgb(var(--label-r),var(--label-g),var(--label-b));
1831
- color: hsl(0,0%,calc(var(--lightness-switch) * 100%));
1832
- border-width: 1px;
1833
- border-style: solid;
1834
- border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));
1835
- }
1836
-
1837
- .c2 {
1838
- background-color: transparent;
1839
- font-family: inherit;
1840
- color: currentColor;
1841
- cursor: pointer;
1842
- display: -webkit-inline-box;
1843
- display: -webkit-inline-flex;
1844
- display: -ms-inline-flexbox;
1845
- display: inline-flex;
1846
- -webkit-box-pack: center;
1847
- -webkit-justify-content: center;
1848
- -ms-flex-pack: center;
1849
- justify-content: center;
1850
- -webkit-align-items: center;
1851
- -webkit-box-align: center;
1852
- -ms-flex-align: center;
1853
- align-items: center;
1854
- -webkit-user-select: none;
1855
- -moz-user-select: none;
1856
- -ms-user-select: none;
1857
- user-select: none;
1858
- -webkit-appearance: none;
1859
- -moz-appearance: none;
1860
- appearance: none;
1861
- -webkit-text-decoration: none;
1862
- text-decoration: none;
1863
- padding: 0;
1864
- -webkit-transform: translate(1px,-1px);
1865
- -ms-transform: translate(1px,-1px);
1866
- transform: translate(1px,-1px);
1867
- -webkit-align-self: baseline;
1868
- -ms-flex-item-align: baseline;
1869
- align-self: baseline;
1870
- border: 0;
1871
- border-radius: 999px;
1872
- margin-left: 8px;
1873
- height: 32px;
1874
- width: 32px;
1875
- }
1876
-
1877
- .c2:hover,
1878
- .c2:focus {
1879
- background-color: rgba(175,184,193,0.2);
1880
- }
1881
-
1882
- .c2:active {
1883
- background-color: rgba(234,238,242,0.5);
1884
- }
1885
-
1886
- .c1 {
1887
- -webkit-box-flex: 1;
1888
- -webkit-flex-grow: 1;
1889
- -ms-flex-positive: 1;
1890
- flex-grow: 1;
1891
- min-width: 0;
1892
- overflow: hidden;
1893
- text-overflow: ellipsis;
1894
- white-space: nowrap;
1895
- background: transparent;
1896
- border: none;
1897
- color: inherit;
1898
- font: inherit;
1899
- margin: 0;
1900
- overflow: visible;
1901
- padding: 0;
1902
- width: auto;
1903
- -webkit-font-smoothing: inherit;
1904
- -moz-osx-font-smoothing: inherit;
1905
- -webkit-appearance: none;
1906
- line-height: 1;
1907
- color: currentColor;
1908
- -webkit-text-decoration: none;
1909
- text-decoration: none;
1910
- }
1911
-
1912
- .c1:is(a,button,[tabIndex='0']) {
1913
- cursor: pointer;
1914
- }
1915
-
1916
- .c1:is(a,button,[tabIndex='0']):after {
1917
- content: '';
1918
- position: absolute;
1919
- left: 0;
1920
- top: 0;
1921
- right: 0;
1922
- bottom: 0;
1923
- }
1924
-
1925
- <span
1926
- aria-label="token, press backspace or delete to remove"
1927
- className="c0"
1928
- onKeyDown={[Function]}
1929
- onRemove={[MockFunction]}
1930
- size="extralarge"
1931
- >
1932
- <span
1933
- className="c1"
1934
- >
1935
- token
1936
- </span>
1937
- <button
1938
- aria-hidden="false"
1939
- aria-label="Remove token"
1940
- className="c2"
1941
- onClick={[Function]}
1942
- size="extralarge"
1943
- >
1944
- <svg
1945
- aria-hidden="true"
1946
- className="octicon octicon-x"
1947
- dangerouslySetInnerHTML={
1948
- Object {
1949
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
1950
- }
1951
- }
1952
- fill="currentColor"
1953
- height={24}
1954
- role="img"
1955
- style={
1956
- Object {
1957
- "display": "inline-block",
1958
- "userSelect": "none",
1959
- "verticalAlign": "text-bottom",
1960
- }
1961
- }
1962
- viewBox="0 0 24 24"
1963
- width={24}
1964
- />
1965
- </button>
1966
- </span>
1967
- `;
1968
-
1969
- exports[`Token components IssueLabelToken renders consistently 1`] = `
1970
- .c1 {
1971
- -webkit-box-flex: 1;
1972
- -webkit-flex-grow: 1;
1973
- -ms-flex-positive: 1;
1974
- flex-grow: 1;
1975
- min-width: 0;
1976
- overflow: hidden;
1977
- text-overflow: ellipsis;
1978
- white-space: nowrap;
1979
- background: transparent;
1980
- border: none;
1981
- color: inherit;
1982
- font: inherit;
1983
- margin: 0;
1984
- overflow: visible;
1985
- padding: 0;
1986
- width: auto;
1987
- -webkit-font-smoothing: inherit;
1988
- -moz-osx-font-smoothing: inherit;
1989
- -webkit-appearance: none;
1990
- line-height: 1;
1991
- color: currentColor;
1992
- -webkit-text-decoration: none;
1993
- text-decoration: none;
1994
- }
1995
-
1996
- .c1:is(a,button,[tabIndex='0']) {
1997
- cursor: pointer;
1998
- }
1999
-
2000
- .c1:is(a,button,[tabIndex='0']):after {
2001
- content: '';
2002
- position: absolute;
2003
- left: 0;
2004
- top: 0;
2005
- right: 0;
2006
- bottom: 0;
2007
- }
2008
-
2009
- .c0 {
2010
- -webkit-align-items: center;
2011
- -webkit-box-align: center;
2012
- -ms-flex-align: center;
2013
- align-items: center;
2014
- border-radius: 999px;
2015
- cursor: auto;
2016
- display: -webkit-inline-box;
2017
- display: -webkit-inline-flex;
2018
- display: -ms-inline-flexbox;
2019
- display: inline-flex;
2020
- font-weight: 600;
2021
- font-family: inherit;
2022
- -webkit-text-decoration: none;
2023
- text-decoration: none;
2024
- white-space: nowrap;
2025
- font-size: 12px;
2026
- height: 20px;
2027
- line-height: 20px;
2028
- padding-left: 8px;
2029
- padding-right: 8px;
2030
- padding-top: 0;
2031
- padding-bottom: 0;
2032
- background-color: rgba(234,238,242,0.5);
2033
- border-color: rgba(27,31,36,0.15);
2034
- border-style: solid;
2035
- border-width: 1px;
2036
- color: #57606a;
2037
- max-width: 100%;
2038
- position: relative;
2039
- }
2040
-
2041
- <span
2042
- className="c0"
2043
- onKeyDown={[Function]}
2044
- size="medium"
2045
- >
2046
- <span
2047
- className="c1"
2048
- />
2049
- </span>
2050
- `;
2051
-
2052
- exports[`Token components IssueLabelToken renders custom fill color 1`] = `
2053
- .c0 {
2054
- -webkit-align-items: center;
2055
- -webkit-box-align: center;
2056
- -ms-flex-align: center;
2057
- align-items: center;
2058
- border-radius: 999px;
2059
- cursor: auto;
2060
- display: -webkit-inline-box;
2061
- display: -webkit-inline-flex;
2062
- display: -ms-inline-flexbox;
2063
- display: inline-flex;
2064
- font-weight: 600;
2065
- font-family: inherit;
2066
- -webkit-text-decoration: none;
2067
- text-decoration: none;
2068
- white-space: nowrap;
2069
- font-size: 12px;
2070
- height: 20px;
2071
- line-height: 20px;
2072
- padding-left: 8px;
2073
- padding-right: 8px;
2074
- padding-top: 0;
2075
- padding-bottom: 0;
2076
- --label-r: 3;
2077
- --label-g: 102;
2078
- --label-b: 214;
2079
- --label-h: 212;
2080
- --label-s: 97;
2081
- --label-l: 43;
2082
- --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
2083
- --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));
2084
- padding-right: 0;
2085
- position: relative;
2086
- --lightness-threshold: 0.453;
2087
- --border-threshold: 0.96;
2088
- --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1));
2089
- background: rgb(var(--label-r),var(--label-g),var(--label-b));
2090
- color: hsl(0,0%,calc(var(--lightness-switch) * 100%));
2091
- border-width: 1px;
2092
- border-style: solid;
2093
- border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));
2094
- }
2095
-
2096
- .c2 {
2097
- background-color: transparent;
2098
- font-family: inherit;
2099
- color: currentColor;
2100
- cursor: pointer;
2101
- display: -webkit-inline-box;
2102
- display: -webkit-inline-flex;
2103
- display: -ms-inline-flexbox;
2104
- display: inline-flex;
2105
- -webkit-box-pack: center;
2106
- -webkit-justify-content: center;
2107
- -ms-flex-pack: center;
2108
- justify-content: center;
2109
- -webkit-align-items: center;
2110
- -webkit-box-align: center;
2111
- -ms-flex-align: center;
2112
- align-items: center;
2113
- -webkit-user-select: none;
2114
- -moz-user-select: none;
2115
- -ms-user-select: none;
2116
- user-select: none;
2117
- -webkit-appearance: none;
2118
- -moz-appearance: none;
2119
- appearance: none;
2120
- -webkit-text-decoration: none;
2121
- text-decoration: none;
2122
- padding: 0;
2123
- -webkit-transform: translate(1px,-1px);
2124
- -ms-transform: translate(1px,-1px);
2125
- transform: translate(1px,-1px);
2126
- -webkit-align-self: baseline;
2127
- -ms-flex-item-align: baseline;
2128
- align-self: baseline;
2129
- border: 0;
2130
- border-radius: 999px;
2131
- margin-left: 4px;
2132
- height: 20px;
2133
- width: 20px;
2134
- }
2135
-
2136
- .c2:hover,
2137
- .c2:focus {
2138
- background-color: rgba(175,184,193,0.2);
2139
- }
2140
-
2141
- .c2:active {
2142
- background-color: rgba(234,238,242,0.5);
2143
- }
2144
-
2145
- .c1 {
2146
- -webkit-box-flex: 1;
2147
- -webkit-flex-grow: 1;
2148
- -ms-flex-positive: 1;
2149
- flex-grow: 1;
2150
- min-width: 0;
2151
- overflow: hidden;
2152
- text-overflow: ellipsis;
2153
- white-space: nowrap;
2154
- background: transparent;
2155
- border: none;
2156
- color: inherit;
2157
- font: inherit;
2158
- margin: 0;
2159
- overflow: visible;
2160
- padding: 0;
2161
- width: auto;
2162
- -webkit-font-smoothing: inherit;
2163
- -moz-osx-font-smoothing: inherit;
2164
- -webkit-appearance: none;
2165
- line-height: 1;
2166
- color: currentColor;
2167
- -webkit-text-decoration: none;
2168
- text-decoration: none;
2169
- }
2170
-
2171
- .c1:is(a,button,[tabIndex='0']) {
2172
- cursor: pointer;
2173
- }
2174
-
2175
- .c1:is(a,button,[tabIndex='0']):after {
2176
- content: '';
2177
- position: absolute;
2178
- left: 0;
2179
- top: 0;
2180
- right: 0;
2181
- bottom: 0;
2182
- }
2183
-
2184
- <span
2185
- aria-label="token, press backspace or delete to remove"
2186
- className="c0"
2187
- onKeyDown={[Function]}
2188
- onRemove={[MockFunction]}
2189
- size="medium"
2190
- >
2191
- <span
2192
- className="c1"
2193
- >
2194
- token
2195
- </span>
2196
- <button
2197
- aria-hidden="false"
2198
- aria-label="Remove token"
2199
- className="c2"
2200
- onClick={[Function]}
2201
- size="medium"
2202
- >
2203
- <svg
2204
- aria-hidden="true"
2205
- className="octicon octicon-x"
2206
- dangerouslySetInnerHTML={
2207
- Object {
2208
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
2209
- }
2210
- }
2211
- fill="currentColor"
2212
- height={15}
2213
- role="img"
2214
- style={
2215
- Object {
2216
- "display": "inline-block",
2217
- "userSelect": "none",
2218
- "verticalAlign": "text-bottom",
2219
- }
2220
- }
2221
- viewBox="0 0 16 16"
2222
- width={15}
2223
- />
2224
- </button>
2225
- </span>
2226
- `;
2227
-
2228
- exports[`Token components IssueLabelToken renders default fill color 1`] = `
2229
- .c0 {
2230
- -webkit-align-items: center;
2231
- -webkit-box-align: center;
2232
- -ms-flex-align: center;
2233
- align-items: center;
2234
- border-radius: 999px;
2235
- cursor: auto;
2236
- display: -webkit-inline-box;
2237
- display: -webkit-inline-flex;
2238
- display: -ms-inline-flexbox;
2239
- display: inline-flex;
2240
- font-weight: 600;
2241
- font-family: inherit;
2242
- -webkit-text-decoration: none;
2243
- text-decoration: none;
2244
- white-space: nowrap;
2245
- font-size: 12px;
2246
- height: 20px;
2247
- line-height: 20px;
2248
- padding-left: 8px;
2249
- padding-right: 8px;
2250
- padding-top: 0;
2251
- padding-bottom: 0;
2252
- --label-r: 153;
2253
- --label-g: 153;
2254
- --label-b: 153;
2255
- --label-h: 0;
2256
- --label-s: 0;
2257
- --label-l: 60;
2258
- --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
2259
- --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));
2260
- padding-right: 0;
2261
- position: relative;
2262
- --lightness-threshold: 0.453;
2263
- --border-threshold: 0.96;
2264
- --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1));
2265
- background: rgb(var(--label-r),var(--label-g),var(--label-b));
2266
- color: hsl(0,0%,calc(var(--lightness-switch) * 100%));
2267
- border-width: 1px;
2268
- border-style: solid;
2269
- border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));
2270
- }
2271
-
2272
- .c2 {
2273
- background-color: transparent;
2274
- font-family: inherit;
2275
- color: currentColor;
2276
- cursor: pointer;
2277
- display: -webkit-inline-box;
2278
- display: -webkit-inline-flex;
2279
- display: -ms-inline-flexbox;
2280
- display: inline-flex;
2281
- -webkit-box-pack: center;
2282
- -webkit-justify-content: center;
2283
- -ms-flex-pack: center;
2284
- justify-content: center;
2285
- -webkit-align-items: center;
2286
- -webkit-box-align: center;
2287
- -ms-flex-align: center;
2288
- align-items: center;
2289
- -webkit-user-select: none;
2290
- -moz-user-select: none;
2291
- -ms-user-select: none;
2292
- user-select: none;
2293
- -webkit-appearance: none;
2294
- -moz-appearance: none;
2295
- appearance: none;
2296
- -webkit-text-decoration: none;
2297
- text-decoration: none;
2298
- padding: 0;
2299
- -webkit-transform: translate(1px,-1px);
2300
- -ms-transform: translate(1px,-1px);
2301
- transform: translate(1px,-1px);
2302
- -webkit-align-self: baseline;
2303
- -ms-flex-item-align: baseline;
2304
- align-self: baseline;
2305
- border: 0;
2306
- border-radius: 999px;
2307
- margin-left: 4px;
2308
- height: 20px;
2309
- width: 20px;
2310
- }
2311
-
2312
- .c2:hover,
2313
- .c2:focus {
2314
- background-color: rgba(175,184,193,0.2);
2315
- }
2316
-
2317
- .c2:active {
2318
- background-color: rgba(234,238,242,0.5);
2319
- }
2320
-
2321
- .c1 {
2322
- -webkit-box-flex: 1;
2323
- -webkit-flex-grow: 1;
2324
- -ms-flex-positive: 1;
2325
- flex-grow: 1;
2326
- min-width: 0;
2327
- overflow: hidden;
2328
- text-overflow: ellipsis;
2329
- white-space: nowrap;
2330
- background: transparent;
2331
- border: none;
2332
- color: inherit;
2333
- font: inherit;
2334
- margin: 0;
2335
- overflow: visible;
2336
- padding: 0;
2337
- width: auto;
2338
- -webkit-font-smoothing: inherit;
2339
- -moz-osx-font-smoothing: inherit;
2340
- -webkit-appearance: none;
2341
- line-height: 1;
2342
- color: currentColor;
2343
- -webkit-text-decoration: none;
2344
- text-decoration: none;
2345
- }
2346
-
2347
- .c1:is(a,button,[tabIndex='0']) {
2348
- cursor: pointer;
2349
- }
2350
-
2351
- .c1:is(a,button,[tabIndex='0']):after {
2352
- content: '';
2353
- position: absolute;
2354
- left: 0;
2355
- top: 0;
2356
- right: 0;
2357
- bottom: 0;
2358
- }
2359
-
2360
- <span
2361
- aria-label="token, press backspace or delete to remove"
2362
- className="c0"
2363
- onKeyDown={[Function]}
2364
- onRemove={[MockFunction]}
2365
- size="medium"
2366
- >
2367
- <span
2368
- className="c1"
2369
- >
2370
- token
2371
- </span>
2372
- <button
2373
- aria-hidden="false"
2374
- aria-label="Remove token"
2375
- className="c2"
2376
- onClick={[Function]}
2377
- size="medium"
2378
- >
2379
- <svg
2380
- aria-hidden="true"
2381
- className="octicon octicon-x"
2382
- dangerouslySetInnerHTML={
2383
- Object {
2384
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
2385
- }
2386
- }
2387
- fill="currentColor"
2388
- height={15}
2389
- role="img"
2390
- style={
2391
- Object {
2392
- "display": "inline-block",
2393
- "userSelect": "none",
2394
- "verticalAlign": "text-bottom",
2395
- }
2396
- }
2397
- viewBox="0 0 16 16"
2398
- width={15}
2399
- />
2400
- </button>
2401
- </span>
2402
- `;
2403
-
2404
- exports[`Token components IssueLabelToken renders isSelected 1`] = `
2405
- .c0 {
2406
- -webkit-align-items: center;
2407
- -webkit-box-align: center;
2408
- -ms-flex-align: center;
2409
- align-items: center;
2410
- border-radius: 999px;
2411
- cursor: auto;
2412
- display: -webkit-inline-box;
2413
- display: -webkit-inline-flex;
2414
- display: -ms-inline-flexbox;
2415
- display: inline-flex;
2416
- font-weight: 600;
2417
- font-family: inherit;
2418
- -webkit-text-decoration: none;
2419
- text-decoration: none;
2420
- white-space: nowrap;
2421
- font-size: 12px;
2422
- height: 20px;
2423
- line-height: 20px;
2424
- padding-left: 8px;
2425
- padding-right: 8px;
2426
- padding-top: 0;
2427
- padding-bottom: 0;
2428
- --label-r: 153;
2429
- --label-g: 153;
2430
- --label-b: 153;
2431
- --label-h: 0;
2432
- --label-s: 0;
2433
- --label-l: 60;
2434
- --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
2435
- --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));
2436
- position: relative;
2437
- --lightness-threshold: 0.453;
2438
- --border-threshold: 0.96;
2439
- --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1));
2440
- background: hsl(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 5) * 1%));
2441
- color: hsl(0,0%,calc(var(--lightness-switch) * 100%));
2442
- border-width: 1px;
2443
- border-style: solid;
2444
- border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));
2445
- }
2446
-
2447
- .c0:focus {
2448
- outline: none;
2449
- }
2450
-
2451
- .c0:after {
2452
- content: "";
2453
- position: absolute;
2454
- z-index: 1;
2455
- top: -2px;
2456
- right: -2px;
2457
- bottom: -2px;
2458
- left: -2px;
2459
- display: block;
2460
- pointer-events: none;
2461
- box-shadow: 0 0 0 2px rgb(var(--label-r),var(--label-g),var(--label-b));
2462
- border-radius: 999px;
2463
- }
2464
-
2465
- .c1 {
2466
- -webkit-box-flex: 1;
2467
- -webkit-flex-grow: 1;
2468
- -ms-flex-positive: 1;
2469
- flex-grow: 1;
2470
- min-width: 0;
2471
- overflow: hidden;
2472
- text-overflow: ellipsis;
2473
- white-space: nowrap;
2474
- background: transparent;
2475
- border: none;
2476
- color: inherit;
2477
- font: inherit;
2478
- margin: 0;
2479
- overflow: visible;
2480
- padding: 0;
2481
- width: auto;
2482
- -webkit-font-smoothing: inherit;
2483
- -moz-osx-font-smoothing: inherit;
2484
- -webkit-appearance: none;
2485
- line-height: 1;
2486
- color: currentColor;
2487
- -webkit-text-decoration: none;
2488
- text-decoration: none;
2489
- }
2490
-
2491
- .c1:is(a,button,[tabIndex='0']) {
2492
- cursor: pointer;
2493
- }
2494
-
2495
- .c1:is(a,button,[tabIndex='0']):after {
2496
- content: '';
2497
- position: absolute;
2498
- left: 0;
2499
- top: 0;
2500
- right: 0;
2501
- bottom: 0;
2502
- }
2503
-
2504
- <span
2505
- className="c0"
2506
- onKeyDown={[Function]}
2507
- size="medium"
2508
- >
2509
- <span
2510
- className="c1"
2511
- >
2512
- token
2513
- </span>
2514
- </span>
2515
- `;
2516
-
2517
- exports[`Token components IssueLabelToken renders with a remove button 1`] = `
2518
- .c0 {
2519
- -webkit-align-items: center;
2520
- -webkit-box-align: center;
2521
- -ms-flex-align: center;
2522
- align-items: center;
2523
- border-radius: 999px;
2524
- cursor: auto;
2525
- display: -webkit-inline-box;
2526
- display: -webkit-inline-flex;
2527
- display: -ms-inline-flexbox;
2528
- display: inline-flex;
2529
- font-weight: 600;
2530
- font-family: inherit;
2531
- -webkit-text-decoration: none;
2532
- text-decoration: none;
2533
- white-space: nowrap;
2534
- font-size: 12px;
2535
- height: 20px;
2536
- line-height: 20px;
2537
- padding-left: 8px;
2538
- padding-right: 8px;
2539
- padding-top: 0;
2540
- padding-bottom: 0;
2541
- --label-r: 153;
2542
- --label-g: 153;
2543
- --label-b: 153;
2544
- --label-h: 0;
2545
- --label-s: 0;
2546
- --label-l: 60;
2547
- --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
2548
- --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));
2549
- padding-right: 0;
2550
- position: relative;
2551
- --lightness-threshold: 0.453;
2552
- --border-threshold: 0.96;
2553
- --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1));
2554
- background: rgb(var(--label-r),var(--label-g),var(--label-b));
2555
- color: hsl(0,0%,calc(var(--lightness-switch) * 100%));
2556
- border-width: 1px;
2557
- border-style: solid;
2558
- border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));
2559
- }
2560
-
2561
- .c2 {
2562
- background-color: transparent;
2563
- font-family: inherit;
2564
- color: currentColor;
2565
- cursor: pointer;
2566
- display: -webkit-inline-box;
2567
- display: -webkit-inline-flex;
2568
- display: -ms-inline-flexbox;
2569
- display: inline-flex;
2570
- -webkit-box-pack: center;
2571
- -webkit-justify-content: center;
2572
- -ms-flex-pack: center;
2573
- justify-content: center;
2574
- -webkit-align-items: center;
2575
- -webkit-box-align: center;
2576
- -ms-flex-align: center;
2577
- align-items: center;
2578
- -webkit-user-select: none;
2579
- -moz-user-select: none;
2580
- -ms-user-select: none;
2581
- user-select: none;
2582
- -webkit-appearance: none;
2583
- -moz-appearance: none;
2584
- appearance: none;
2585
- -webkit-text-decoration: none;
2586
- text-decoration: none;
2587
- padding: 0;
2588
- -webkit-transform: translate(1px,-1px);
2589
- -ms-transform: translate(1px,-1px);
2590
- transform: translate(1px,-1px);
2591
- -webkit-align-self: baseline;
2592
- -ms-flex-item-align: baseline;
2593
- align-self: baseline;
2594
- border: 0;
2595
- border-radius: 999px;
2596
- margin-left: 4px;
2597
- height: 20px;
2598
- width: 20px;
2599
- }
2600
-
2601
- .c2:hover,
2602
- .c2:focus {
2603
- background-color: rgba(175,184,193,0.2);
2604
- }
2605
-
2606
- .c2:active {
2607
- background-color: rgba(234,238,242,0.5);
2608
- }
2609
-
2610
- .c1 {
2611
- -webkit-box-flex: 1;
2612
- -webkit-flex-grow: 1;
2613
- -ms-flex-positive: 1;
2614
- flex-grow: 1;
2615
- min-width: 0;
2616
- overflow: hidden;
2617
- text-overflow: ellipsis;
2618
- white-space: nowrap;
2619
- background: transparent;
2620
- border: none;
2621
- color: inherit;
2622
- font: inherit;
2623
- margin: 0;
2624
- overflow: visible;
2625
- padding: 0;
2626
- width: auto;
2627
- -webkit-font-smoothing: inherit;
2628
- -moz-osx-font-smoothing: inherit;
2629
- -webkit-appearance: none;
2630
- line-height: 1;
2631
- color: currentColor;
2632
- -webkit-text-decoration: none;
2633
- text-decoration: none;
2634
- }
2635
-
2636
- .c1:is(a,button,[tabIndex='0']) {
2637
- cursor: pointer;
2638
- }
2639
-
2640
- .c1:is(a,button,[tabIndex='0']):after {
2641
- content: '';
2642
- position: absolute;
2643
- left: 0;
2644
- top: 0;
2645
- right: 0;
2646
- bottom: 0;
2647
- }
2648
-
2649
- <span
2650
- aria-label="token, press backspace or delete to remove"
2651
- className="c0"
2652
- onKeyDown={[Function]}
2653
- onRemove={[MockFunction]}
2654
- size="medium"
2655
- >
2656
- <span
2657
- className="c1"
2658
- >
2659
- token
2660
- </span>
2661
- <button
2662
- aria-hidden="false"
2663
- aria-label="Remove token"
2664
- className="c2"
2665
- onClick={[Function]}
2666
- size="medium"
2667
- >
2668
- <svg
2669
- aria-hidden="true"
2670
- className="octicon octicon-x"
2671
- dangerouslySetInnerHTML={
2672
- Object {
2673
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
2674
- }
2675
- }
2676
- fill="currentColor"
2677
- height={15}
2678
- role="img"
2679
- style={
2680
- Object {
2681
- "display": "inline-block",
2682
- "userSelect": "none",
2683
- "verticalAlign": "text-bottom",
2684
- }
2685
- }
2686
- viewBox="0 0 16 16"
2687
- width={15}
2688
- />
2689
- </button>
2690
- </span>
2691
- `;
2692
-
2693
- exports[`Token components Token renders all sizes 1`] = `
2694
- .c2 {
2695
- background-color: transparent;
2696
- font-family: inherit;
2697
- color: currentColor;
2698
- cursor: pointer;
2699
- display: -webkit-inline-box;
2700
- display: -webkit-inline-flex;
2701
- display: -ms-inline-flexbox;
2702
- display: inline-flex;
2703
- -webkit-box-pack: center;
2704
- -webkit-justify-content: center;
2705
- -ms-flex-pack: center;
2706
- justify-content: center;
2707
- -webkit-align-items: center;
2708
- -webkit-box-align: center;
2709
- -ms-flex-align: center;
2710
- align-items: center;
2711
- -webkit-user-select: none;
2712
- -moz-user-select: none;
2713
- -ms-user-select: none;
2714
- user-select: none;
2715
- -webkit-appearance: none;
2716
- -moz-appearance: none;
2717
- appearance: none;
2718
- -webkit-text-decoration: none;
2719
- text-decoration: none;
2720
- padding: 0;
2721
- -webkit-transform: translate(1px,-1px);
2722
- -ms-transform: translate(1px,-1px);
2723
- transform: translate(1px,-1px);
2724
- -webkit-align-self: baseline;
2725
- -ms-flex-item-align: baseline;
2726
- align-self: baseline;
2727
- border: 0;
2728
- border-radius: 999px;
2729
- margin-left: 4px;
2730
- height: 16px;
2731
- width: 16px;
2732
- }
2733
-
2734
- .c2:hover,
2735
- .c2:focus {
2736
- background-color: rgba(175,184,193,0.2);
2737
- }
2738
-
2739
- .c2:active {
2740
- background-color: rgba(234,238,242,0.5);
2741
- }
2742
-
2743
- .c1 {
2744
- -webkit-box-flex: 1;
2745
- -webkit-flex-grow: 1;
2746
- -ms-flex-positive: 1;
2747
- flex-grow: 1;
2748
- min-width: 0;
2749
- overflow: hidden;
2750
- text-overflow: ellipsis;
2751
- white-space: nowrap;
2752
- background: transparent;
2753
- border: none;
2754
- color: inherit;
2755
- font: inherit;
2756
- margin: 0;
2757
- overflow: visible;
2758
- padding: 0;
2759
- width: auto;
2760
- -webkit-font-smoothing: inherit;
2761
- -moz-osx-font-smoothing: inherit;
2762
- -webkit-appearance: none;
2763
- line-height: 1;
2764
- color: currentColor;
2765
- -webkit-text-decoration: none;
2766
- text-decoration: none;
2767
- }
2768
-
2769
- .c1:is(a,button,[tabIndex='0']) {
2770
- cursor: pointer;
2771
- }
2772
-
2773
- .c1:is(a,button,[tabIndex='0']):after {
2774
- content: '';
2775
- position: absolute;
2776
- left: 0;
2777
- top: 0;
2778
- right: 0;
2779
- bottom: 0;
2780
- }
2781
-
2782
- .c0 {
2783
- -webkit-align-items: center;
2784
- -webkit-box-align: center;
2785
- -ms-flex-align: center;
2786
- align-items: center;
2787
- border-radius: 999px;
2788
- cursor: auto;
2789
- display: -webkit-inline-box;
2790
- display: -webkit-inline-flex;
2791
- display: -ms-inline-flexbox;
2792
- display: inline-flex;
2793
- font-weight: 600;
2794
- font-family: inherit;
2795
- -webkit-text-decoration: none;
2796
- text-decoration: none;
2797
- white-space: nowrap;
2798
- font-size: 12px;
2799
- height: 16px;
2800
- line-height: 16px;
2801
- padding-left: 4px;
2802
- padding-right: 4px;
2803
- padding-top: 0;
2804
- padding-bottom: 0;
2805
- background-color: rgba(234,238,242,0.5);
2806
- border-color: rgba(27,31,36,0.15);
2807
- border-style: solid;
2808
- border-width: 1px;
2809
- color: #57606a;
2810
- max-width: 100%;
2811
- padding-right: 0;
2812
- position: relative;
2813
- }
2814
-
2815
- <span
2816
- aria-label="token, press backspace or delete to remove"
2817
- className="c0"
2818
- onKeyDown={[Function]}
2819
- onRemove={[MockFunction]}
2820
- size="small"
2821
- >
2822
- <span
2823
- className="c1"
2824
- >
2825
- token
2826
- </span>
2827
- <button
2828
- aria-hidden="false"
2829
- aria-label="Remove token"
2830
- className="c2"
2831
- onClick={[Function]}
2832
- size="small"
2833
- >
2834
- <svg
2835
- aria-hidden="true"
2836
- className="octicon octicon-x"
2837
- dangerouslySetInnerHTML={
2838
- Object {
2839
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
2840
- }
2841
- }
2842
- fill="currentColor"
2843
- height={12}
2844
- role="img"
2845
- style={
2846
- Object {
2847
- "display": "inline-block",
2848
- "userSelect": "none",
2849
- "verticalAlign": "text-bottom",
2850
- }
2851
- }
2852
- viewBox="0 0 16 16"
2853
- width={12}
2854
- />
2855
- </button>
2856
- </span>
2857
- `;
2858
-
2859
- exports[`Token components Token renders all sizes 2`] = `
2860
- .c2 {
2861
- background-color: transparent;
2862
- font-family: inherit;
2863
- color: currentColor;
2864
- cursor: pointer;
2865
- display: -webkit-inline-box;
2866
- display: -webkit-inline-flex;
2867
- display: -ms-inline-flexbox;
2868
- display: inline-flex;
2869
- -webkit-box-pack: center;
2870
- -webkit-justify-content: center;
2871
- -ms-flex-pack: center;
2872
- justify-content: center;
2873
- -webkit-align-items: center;
2874
- -webkit-box-align: center;
2875
- -ms-flex-align: center;
2876
- align-items: center;
2877
- -webkit-user-select: none;
2878
- -moz-user-select: none;
2879
- -ms-user-select: none;
2880
- user-select: none;
2881
- -webkit-appearance: none;
2882
- -moz-appearance: none;
2883
- appearance: none;
2884
- -webkit-text-decoration: none;
2885
- text-decoration: none;
2886
- padding: 0;
2887
- -webkit-transform: translate(1px,-1px);
2888
- -ms-transform: translate(1px,-1px);
2889
- transform: translate(1px,-1px);
2890
- -webkit-align-self: baseline;
2891
- -ms-flex-item-align: baseline;
2892
- align-self: baseline;
2893
- border: 0;
2894
- border-radius: 999px;
2895
- margin-left: 4px;
2896
- height: 20px;
2897
- width: 20px;
2898
- }
2899
-
2900
- .c2:hover,
2901
- .c2:focus {
2902
- background-color: rgba(175,184,193,0.2);
2903
- }
2904
-
2905
- .c2:active {
2906
- background-color: rgba(234,238,242,0.5);
2907
- }
2908
-
2909
- .c1 {
2910
- -webkit-box-flex: 1;
2911
- -webkit-flex-grow: 1;
2912
- -ms-flex-positive: 1;
2913
- flex-grow: 1;
2914
- min-width: 0;
2915
- overflow: hidden;
2916
- text-overflow: ellipsis;
2917
- white-space: nowrap;
2918
- background: transparent;
2919
- border: none;
2920
- color: inherit;
2921
- font: inherit;
2922
- margin: 0;
2923
- overflow: visible;
2924
- padding: 0;
2925
- width: auto;
2926
- -webkit-font-smoothing: inherit;
2927
- -moz-osx-font-smoothing: inherit;
2928
- -webkit-appearance: none;
2929
- line-height: 1;
2930
- color: currentColor;
2931
- -webkit-text-decoration: none;
2932
- text-decoration: none;
2933
- }
2934
-
2935
- .c1:is(a,button,[tabIndex='0']) {
2936
- cursor: pointer;
2937
- }
2938
-
2939
- .c1:is(a,button,[tabIndex='0']):after {
2940
- content: '';
2941
- position: absolute;
2942
- left: 0;
2943
- top: 0;
2944
- right: 0;
2945
- bottom: 0;
2946
- }
2947
-
2948
- .c0 {
2949
- -webkit-align-items: center;
2950
- -webkit-box-align: center;
2951
- -ms-flex-align: center;
2952
- align-items: center;
2953
- border-radius: 999px;
2954
- cursor: auto;
2955
- display: -webkit-inline-box;
2956
- display: -webkit-inline-flex;
2957
- display: -ms-inline-flexbox;
2958
- display: inline-flex;
2959
- font-weight: 600;
2960
- font-family: inherit;
2961
- -webkit-text-decoration: none;
2962
- text-decoration: none;
2963
- white-space: nowrap;
2964
- font-size: 12px;
2965
- height: 20px;
2966
- line-height: 20px;
2967
- padding-left: 8px;
2968
- padding-right: 8px;
2969
- padding-top: 0;
2970
- padding-bottom: 0;
2971
- background-color: rgba(234,238,242,0.5);
2972
- border-color: rgba(27,31,36,0.15);
2973
- border-style: solid;
2974
- border-width: 1px;
2975
- color: #57606a;
2976
- max-width: 100%;
2977
- padding-right: 0;
2978
- position: relative;
2979
- }
2980
-
2981
- <span
2982
- aria-label="token, press backspace or delete to remove"
2983
- className="c0"
2984
- onKeyDown={[Function]}
2985
- onRemove={[MockFunction]}
2986
- size="medium"
2987
- >
2988
- <span
2989
- className="c1"
2990
- >
2991
- token
2992
- </span>
2993
- <button
2994
- aria-hidden="false"
2995
- aria-label="Remove token"
2996
- className="c2"
2997
- onClick={[Function]}
2998
- size="medium"
2999
- >
3000
- <svg
3001
- aria-hidden="true"
3002
- className="octicon octicon-x"
3003
- dangerouslySetInnerHTML={
3004
- Object {
3005
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
3006
- }
3007
- }
3008
- fill="currentColor"
3009
- height={15}
3010
- role="img"
3011
- style={
3012
- Object {
3013
- "display": "inline-block",
3014
- "userSelect": "none",
3015
- "verticalAlign": "text-bottom",
3016
- }
3017
- }
3018
- viewBox="0 0 16 16"
3019
- width={15}
3020
- />
3021
- </button>
3022
- </span>
3023
- `;
3024
-
3025
- exports[`Token components Token renders all sizes 3`] = `
3026
- .c2 {
3027
- background-color: transparent;
3028
- font-family: inherit;
3029
- color: currentColor;
3030
- cursor: pointer;
3031
- display: -webkit-inline-box;
3032
- display: -webkit-inline-flex;
3033
- display: -ms-inline-flexbox;
3034
- display: inline-flex;
3035
- -webkit-box-pack: center;
3036
- -webkit-justify-content: center;
3037
- -ms-flex-pack: center;
3038
- justify-content: center;
3039
- -webkit-align-items: center;
3040
- -webkit-box-align: center;
3041
- -ms-flex-align: center;
3042
- align-items: center;
3043
- -webkit-user-select: none;
3044
- -moz-user-select: none;
3045
- -ms-user-select: none;
3046
- user-select: none;
3047
- -webkit-appearance: none;
3048
- -moz-appearance: none;
3049
- appearance: none;
3050
- -webkit-text-decoration: none;
3051
- text-decoration: none;
3052
- padding: 0;
3053
- -webkit-transform: translate(1px,-1px);
3054
- -ms-transform: translate(1px,-1px);
3055
- transform: translate(1px,-1px);
3056
- -webkit-align-self: baseline;
3057
- -ms-flex-item-align: baseline;
3058
- align-self: baseline;
3059
- border: 0;
3060
- border-radius: 999px;
3061
- margin-left: 8px;
3062
- height: 24px;
3063
- width: 24px;
3064
- }
3065
-
3066
- .c2:hover,
3067
- .c2:focus {
3068
- background-color: rgba(175,184,193,0.2);
3069
- }
3070
-
3071
- .c2:active {
3072
- background-color: rgba(234,238,242,0.5);
3073
- }
3074
-
3075
- .c1 {
3076
- -webkit-box-flex: 1;
3077
- -webkit-flex-grow: 1;
3078
- -ms-flex-positive: 1;
3079
- flex-grow: 1;
3080
- min-width: 0;
3081
- overflow: hidden;
3082
- text-overflow: ellipsis;
3083
- white-space: nowrap;
3084
- background: transparent;
3085
- border: none;
3086
- color: inherit;
3087
- font: inherit;
3088
- margin: 0;
3089
- overflow: visible;
3090
- padding: 0;
3091
- width: auto;
3092
- -webkit-font-smoothing: inherit;
3093
- -moz-osx-font-smoothing: inherit;
3094
- -webkit-appearance: none;
3095
- line-height: 1;
3096
- color: currentColor;
3097
- -webkit-text-decoration: none;
3098
- text-decoration: none;
3099
- }
3100
-
3101
- .c1:is(a,button,[tabIndex='0']) {
3102
- cursor: pointer;
3103
- }
3104
-
3105
- .c1:is(a,button,[tabIndex='0']):after {
3106
- content: '';
3107
- position: absolute;
3108
- left: 0;
3109
- top: 0;
3110
- right: 0;
3111
- bottom: 0;
3112
- }
3113
-
3114
- .c0 {
3115
- -webkit-align-items: center;
3116
- -webkit-box-align: center;
3117
- -ms-flex-align: center;
3118
- align-items: center;
3119
- border-radius: 999px;
3120
- cursor: auto;
3121
- display: -webkit-inline-box;
3122
- display: -webkit-inline-flex;
3123
- display: -ms-inline-flexbox;
3124
- display: inline-flex;
3125
- font-weight: 600;
3126
- font-family: inherit;
3127
- -webkit-text-decoration: none;
3128
- text-decoration: none;
3129
- white-space: nowrap;
3130
- font-size: 12px;
3131
- height: 24px;
3132
- line-height: 24px;
3133
- padding-left: 8px;
3134
- padding-right: 8px;
3135
- padding-top: 0;
3136
- padding-bottom: 0;
3137
- background-color: rgba(234,238,242,0.5);
3138
- border-color: rgba(27,31,36,0.15);
3139
- border-style: solid;
3140
- border-width: 1px;
3141
- color: #57606a;
3142
- max-width: 100%;
3143
- padding-right: 0;
3144
- position: relative;
3145
- }
3146
-
3147
- <span
3148
- aria-label="token, press backspace or delete to remove"
3149
- className="c0"
3150
- onKeyDown={[Function]}
3151
- onRemove={[MockFunction]}
3152
- size="large"
3153
- >
3154
- <span
3155
- className="c1"
3156
- >
3157
- token
3158
- </span>
3159
- <button
3160
- aria-hidden="false"
3161
- aria-label="Remove token"
3162
- className="c2"
3163
- onClick={[Function]}
3164
- size="large"
3165
- >
3166
- <svg
3167
- aria-hidden="true"
3168
- className="octicon octicon-x"
3169
- dangerouslySetInnerHTML={
3170
- Object {
3171
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
3172
- }
3173
- }
3174
- fill="currentColor"
3175
- height={18}
3176
- role="img"
3177
- style={
3178
- Object {
3179
- "display": "inline-block",
3180
- "userSelect": "none",
3181
- "verticalAlign": "text-bottom",
3182
- }
3183
- }
3184
- viewBox="0 0 16 16"
3185
- width={18}
3186
- />
3187
- </button>
3188
- </span>
3189
- `;
3190
-
3191
- exports[`Token components Token renders all sizes 4`] = `
3192
- .c2 {
3193
- background-color: transparent;
3194
- font-family: inherit;
3195
- color: currentColor;
3196
- cursor: pointer;
3197
- display: -webkit-inline-box;
3198
- display: -webkit-inline-flex;
3199
- display: -ms-inline-flexbox;
3200
- display: inline-flex;
3201
- -webkit-box-pack: center;
3202
- -webkit-justify-content: center;
3203
- -ms-flex-pack: center;
3204
- justify-content: center;
3205
- -webkit-align-items: center;
3206
- -webkit-box-align: center;
3207
- -ms-flex-align: center;
3208
- align-items: center;
3209
- -webkit-user-select: none;
3210
- -moz-user-select: none;
3211
- -ms-user-select: none;
3212
- user-select: none;
3213
- -webkit-appearance: none;
3214
- -moz-appearance: none;
3215
- appearance: none;
3216
- -webkit-text-decoration: none;
3217
- text-decoration: none;
3218
- padding: 0;
3219
- -webkit-transform: translate(1px,-1px);
3220
- -ms-transform: translate(1px,-1px);
3221
- transform: translate(1px,-1px);
3222
- -webkit-align-self: baseline;
3223
- -ms-flex-item-align: baseline;
3224
- align-self: baseline;
3225
- border: 0;
3226
- border-radius: 999px;
3227
- margin-left: 8px;
3228
- height: 32px;
3229
- width: 32px;
3230
- }
3231
-
3232
- .c2:hover,
3233
- .c2:focus {
3234
- background-color: rgba(175,184,193,0.2);
3235
- }
3236
-
3237
- .c2:active {
3238
- background-color: rgba(234,238,242,0.5);
3239
- }
3240
-
3241
- .c1 {
3242
- -webkit-box-flex: 1;
3243
- -webkit-flex-grow: 1;
3244
- -ms-flex-positive: 1;
3245
- flex-grow: 1;
3246
- min-width: 0;
3247
- overflow: hidden;
3248
- text-overflow: ellipsis;
3249
- white-space: nowrap;
3250
- background: transparent;
3251
- border: none;
3252
- color: inherit;
3253
- font: inherit;
3254
- margin: 0;
3255
- overflow: visible;
3256
- padding: 0;
3257
- width: auto;
3258
- -webkit-font-smoothing: inherit;
3259
- -moz-osx-font-smoothing: inherit;
3260
- -webkit-appearance: none;
3261
- line-height: 1;
3262
- color: currentColor;
3263
- -webkit-text-decoration: none;
3264
- text-decoration: none;
3265
- }
3266
-
3267
- .c1:is(a,button,[tabIndex='0']) {
3268
- cursor: pointer;
3269
- }
3270
-
3271
- .c1:is(a,button,[tabIndex='0']):after {
3272
- content: '';
3273
- position: absolute;
3274
- left: 0;
3275
- top: 0;
3276
- right: 0;
3277
- bottom: 0;
3278
- }
3279
-
3280
- .c0 {
3281
- -webkit-align-items: center;
3282
- -webkit-box-align: center;
3283
- -ms-flex-align: center;
3284
- align-items: center;
3285
- border-radius: 999px;
3286
- cursor: auto;
3287
- display: -webkit-inline-box;
3288
- display: -webkit-inline-flex;
3289
- display: -ms-inline-flexbox;
3290
- display: inline-flex;
3291
- font-weight: 600;
3292
- font-family: inherit;
3293
- -webkit-text-decoration: none;
3294
- text-decoration: none;
3295
- white-space: nowrap;
3296
- font-size: 14px;
3297
- height: 32px;
3298
- line-height: 32px;
3299
- padding-left: 16px;
3300
- padding-right: 16px;
3301
- padding-top: 0;
3302
- padding-bottom: 0;
3303
- background-color: rgba(234,238,242,0.5);
3304
- border-color: rgba(27,31,36,0.15);
3305
- border-style: solid;
3306
- border-width: 1px;
3307
- color: #57606a;
3308
- max-width: 100%;
3309
- padding-right: 0;
3310
- position: relative;
3311
- }
3312
-
3313
- <span
3314
- aria-label="token, press backspace or delete to remove"
3315
- className="c0"
3316
- onKeyDown={[Function]}
3317
- onRemove={[MockFunction]}
3318
- size="extralarge"
3319
- >
3320
- <span
3321
- className="c1"
3322
- >
3323
- token
3324
- </span>
3325
- <button
3326
- aria-hidden="false"
3327
- aria-label="Remove token"
3328
- className="c2"
3329
- onClick={[Function]}
3330
- size="extralarge"
3331
- >
3332
- <svg
3333
- aria-hidden="true"
3334
- className="octicon octicon-x"
3335
- dangerouslySetInnerHTML={
3336
- Object {
3337
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
3338
- }
3339
- }
3340
- fill="currentColor"
3341
- height={24}
3342
- role="img"
3343
- style={
3344
- Object {
3345
- "display": "inline-block",
3346
- "userSelect": "none",
3347
- "verticalAlign": "text-bottom",
3348
- }
3349
- }
3350
- viewBox="0 0 24 24"
3351
- width={24}
3352
- />
3353
- </button>
3354
- </span>
3355
- `;
3356
-
3357
- exports[`Token components Token renders consistently 1`] = `
3358
- .c1 {
3359
- -webkit-box-flex: 1;
3360
- -webkit-flex-grow: 1;
3361
- -ms-flex-positive: 1;
3362
- flex-grow: 1;
3363
- min-width: 0;
3364
- overflow: hidden;
3365
- text-overflow: ellipsis;
3366
- white-space: nowrap;
3367
- background: transparent;
3368
- border: none;
3369
- color: inherit;
3370
- font: inherit;
3371
- margin: 0;
3372
- overflow: visible;
3373
- padding: 0;
3374
- width: auto;
3375
- -webkit-font-smoothing: inherit;
3376
- -moz-osx-font-smoothing: inherit;
3377
- -webkit-appearance: none;
3378
- line-height: 1;
3379
- color: currentColor;
3380
- -webkit-text-decoration: none;
3381
- text-decoration: none;
3382
- }
3383
-
3384
- .c1:is(a,button,[tabIndex='0']) {
3385
- cursor: pointer;
3386
- }
3387
-
3388
- .c1:is(a,button,[tabIndex='0']):after {
3389
- content: '';
3390
- position: absolute;
3391
- left: 0;
3392
- top: 0;
3393
- right: 0;
3394
- bottom: 0;
3395
- }
3396
-
3397
- .c0 {
3398
- -webkit-align-items: center;
3399
- -webkit-box-align: center;
3400
- -ms-flex-align: center;
3401
- align-items: center;
3402
- border-radius: 999px;
3403
- cursor: auto;
3404
- display: -webkit-inline-box;
3405
- display: -webkit-inline-flex;
3406
- display: -ms-inline-flexbox;
3407
- display: inline-flex;
3408
- font-weight: 600;
3409
- font-family: inherit;
3410
- -webkit-text-decoration: none;
3411
- text-decoration: none;
3412
- white-space: nowrap;
3413
- font-size: 12px;
3414
- height: 20px;
3415
- line-height: 20px;
3416
- padding-left: 8px;
3417
- padding-right: 8px;
3418
- padding-top: 0;
3419
- padding-bottom: 0;
3420
- background-color: rgba(234,238,242,0.5);
3421
- border-color: rgba(27,31,36,0.15);
3422
- border-style: solid;
3423
- border-width: 1px;
3424
- color: #57606a;
3425
- max-width: 100%;
3426
- position: relative;
3427
- }
3428
-
3429
- <span
3430
- className="c0"
3431
- onKeyDown={[Function]}
3432
- size="medium"
3433
- >
3434
- <span
3435
- className="c1"
3436
- />
3437
- </span>
3438
- `;
3439
-
3440
- exports[`Token components Token renders isSelected 1`] = `
3441
- .c1 {
3442
- -webkit-box-flex: 1;
3443
- -webkit-flex-grow: 1;
3444
- -ms-flex-positive: 1;
3445
- flex-grow: 1;
3446
- min-width: 0;
3447
- overflow: hidden;
3448
- text-overflow: ellipsis;
3449
- white-space: nowrap;
3450
- background: transparent;
3451
- border: none;
3452
- color: inherit;
3453
- font: inherit;
3454
- margin: 0;
3455
- overflow: visible;
3456
- padding: 0;
3457
- width: auto;
3458
- -webkit-font-smoothing: inherit;
3459
- -moz-osx-font-smoothing: inherit;
3460
- -webkit-appearance: none;
3461
- line-height: 1;
3462
- color: currentColor;
3463
- -webkit-text-decoration: none;
3464
- text-decoration: none;
3465
- }
3466
-
3467
- .c1:is(a,button,[tabIndex='0']) {
3468
- cursor: pointer;
3469
- }
3470
-
3471
- .c1:is(a,button,[tabIndex='0']):after {
3472
- content: '';
3473
- position: absolute;
3474
- left: 0;
3475
- top: 0;
3476
- right: 0;
3477
- bottom: 0;
3478
- }
3479
-
3480
- .c0 {
3481
- -webkit-align-items: center;
3482
- -webkit-box-align: center;
3483
- -ms-flex-align: center;
3484
- align-items: center;
3485
- border-radius: 999px;
3486
- cursor: auto;
3487
- display: -webkit-inline-box;
3488
- display: -webkit-inline-flex;
3489
- display: -ms-inline-flexbox;
3490
- display: inline-flex;
3491
- font-weight: 600;
3492
- font-family: inherit;
3493
- -webkit-text-decoration: none;
3494
- text-decoration: none;
3495
- white-space: nowrap;
3496
- font-size: 12px;
3497
- height: 20px;
3498
- line-height: 20px;
3499
- padding-left: 8px;
3500
- padding-right: 8px;
3501
- padding-top: 0;
3502
- padding-bottom: 0;
3503
- background-color: rgba(234,238,242,0.5);
3504
- border-color: #24292f;
3505
- border-style: solid;
3506
- border-width: 1px;
3507
- color: #24292f;
3508
- max-width: 100%;
3509
- position: relative;
3510
- }
3511
-
3512
- <span
3513
- className="c0"
3514
- onKeyDown={[Function]}
3515
- size="medium"
3516
- >
3517
- <span
3518
- className="c1"
3519
- >
3520
- token
3521
- </span>
3522
- </span>
3523
- `;
3524
-
3525
- exports[`Token components Token renders with a leadingVisual 1`] = `
3526
- .c2 {
3527
- -webkit-box-flex: 1;
3528
- -webkit-flex-grow: 1;
3529
- -ms-flex-positive: 1;
3530
- flex-grow: 1;
3531
- min-width: 0;
3532
- overflow: hidden;
3533
- text-overflow: ellipsis;
3534
- white-space: nowrap;
3535
- background: transparent;
3536
- border: none;
3537
- color: inherit;
3538
- font: inherit;
3539
- margin: 0;
3540
- overflow: visible;
3541
- padding: 0;
3542
- width: auto;
3543
- -webkit-font-smoothing: inherit;
3544
- -moz-osx-font-smoothing: inherit;
3545
- -webkit-appearance: none;
3546
- line-height: 1;
3547
- color: currentColor;
3548
- -webkit-text-decoration: none;
3549
- text-decoration: none;
3550
- }
3551
-
3552
- .c2:is(a,button,[tabIndex='0']) {
3553
- cursor: pointer;
3554
- }
3555
-
3556
- .c2:is(a,button,[tabIndex='0']):after {
3557
- content: '';
3558
- position: absolute;
3559
- left: 0;
3560
- top: 0;
3561
- right: 0;
3562
- bottom: 0;
3563
- }
3564
-
3565
- .c0 {
3566
- -webkit-align-items: center;
3567
- -webkit-box-align: center;
3568
- -ms-flex-align: center;
3569
- align-items: center;
3570
- border-radius: 999px;
3571
- cursor: auto;
3572
- display: -webkit-inline-box;
3573
- display: -webkit-inline-flex;
3574
- display: -ms-inline-flexbox;
3575
- display: inline-flex;
3576
- font-weight: 600;
3577
- font-family: inherit;
3578
- -webkit-text-decoration: none;
3579
- text-decoration: none;
3580
- white-space: nowrap;
3581
- font-size: 12px;
3582
- height: 20px;
3583
- line-height: 20px;
3584
- padding-left: 8px;
3585
- padding-right: 8px;
3586
- padding-top: 0;
3587
- padding-bottom: 0;
3588
- background-color: rgba(234,238,242,0.5);
3589
- border-color: rgba(27,31,36,0.15);
3590
- border-style: solid;
3591
- border-width: 1px;
3592
- color: #57606a;
3593
- max-width: 100%;
3594
- position: relative;
3595
- }
3596
-
3597
- .c1 {
3598
- -webkit-flex-shrink: 0;
3599
- -ms-flex-negative: 0;
3600
- flex-shrink: 0;
3601
- line-height: 0;
3602
- margin-right: 4px;
3603
- }
3604
-
3605
- <span
3606
- className="c0"
3607
- onKeyDown={[Function]}
3608
- size="medium"
3609
- >
3610
- <span
3611
- className="c1"
3612
- size="medium"
3613
- >
3614
- <div
3615
- style={
3616
- Object {
3617
- "backgroundColor": "blue",
3618
- }
3619
- }
3620
- />
3621
- </span>
3622
- <span
3623
- className="c2"
3624
- >
3625
- token
3626
- </span>
3627
- </span>
3628
- `;
3629
-
3630
- exports[`Token components Token renders with a remove button 1`] = `
3631
- .c2 {
3632
- background-color: transparent;
3633
- font-family: inherit;
3634
- color: currentColor;
3635
- cursor: pointer;
3636
- display: -webkit-inline-box;
3637
- display: -webkit-inline-flex;
3638
- display: -ms-inline-flexbox;
3639
- display: inline-flex;
3640
- -webkit-box-pack: center;
3641
- -webkit-justify-content: center;
3642
- -ms-flex-pack: center;
3643
- justify-content: center;
3644
- -webkit-align-items: center;
3645
- -webkit-box-align: center;
3646
- -ms-flex-align: center;
3647
- align-items: center;
3648
- -webkit-user-select: none;
3649
- -moz-user-select: none;
3650
- -ms-user-select: none;
3651
- user-select: none;
3652
- -webkit-appearance: none;
3653
- -moz-appearance: none;
3654
- appearance: none;
3655
- -webkit-text-decoration: none;
3656
- text-decoration: none;
3657
- padding: 0;
3658
- -webkit-transform: translate(1px,-1px);
3659
- -ms-transform: translate(1px,-1px);
3660
- transform: translate(1px,-1px);
3661
- -webkit-align-self: baseline;
3662
- -ms-flex-item-align: baseline;
3663
- align-self: baseline;
3664
- border: 0;
3665
- border-radius: 999px;
3666
- margin-left: 4px;
3667
- height: 20px;
3668
- width: 20px;
3669
- }
3670
-
3671
- .c2:hover,
3672
- .c2:focus {
3673
- background-color: rgba(175,184,193,0.2);
3674
- }
3675
-
3676
- .c2:active {
3677
- background-color: rgba(234,238,242,0.5);
3678
- }
3679
-
3680
- .c1 {
3681
- -webkit-box-flex: 1;
3682
- -webkit-flex-grow: 1;
3683
- -ms-flex-positive: 1;
3684
- flex-grow: 1;
3685
- min-width: 0;
3686
- overflow: hidden;
3687
- text-overflow: ellipsis;
3688
- white-space: nowrap;
3689
- background: transparent;
3690
- border: none;
3691
- color: inherit;
3692
- font: inherit;
3693
- margin: 0;
3694
- overflow: visible;
3695
- padding: 0;
3696
- width: auto;
3697
- -webkit-font-smoothing: inherit;
3698
- -moz-osx-font-smoothing: inherit;
3699
- -webkit-appearance: none;
3700
- line-height: 1;
3701
- color: currentColor;
3702
- -webkit-text-decoration: none;
3703
- text-decoration: none;
3704
- }
3705
-
3706
- .c1:is(a,button,[tabIndex='0']) {
3707
- cursor: pointer;
3708
- }
3709
-
3710
- .c1:is(a,button,[tabIndex='0']):after {
3711
- content: '';
3712
- position: absolute;
3713
- left: 0;
3714
- top: 0;
3715
- right: 0;
3716
- bottom: 0;
3717
- }
3718
-
3719
- .c0 {
3720
- -webkit-align-items: center;
3721
- -webkit-box-align: center;
3722
- -ms-flex-align: center;
3723
- align-items: center;
3724
- border-radius: 999px;
3725
- cursor: auto;
3726
- display: -webkit-inline-box;
3727
- display: -webkit-inline-flex;
3728
- display: -ms-inline-flexbox;
3729
- display: inline-flex;
3730
- font-weight: 600;
3731
- font-family: inherit;
3732
- -webkit-text-decoration: none;
3733
- text-decoration: none;
3734
- white-space: nowrap;
3735
- font-size: 12px;
3736
- height: 20px;
3737
- line-height: 20px;
3738
- padding-left: 8px;
3739
- padding-right: 8px;
3740
- padding-top: 0;
3741
- padding-bottom: 0;
3742
- background-color: rgba(234,238,242,0.5);
3743
- border-color: rgba(27,31,36,0.15);
3744
- border-style: solid;
3745
- border-width: 1px;
3746
- color: #57606a;
3747
- max-width: 100%;
3748
- padding-right: 0;
3749
- position: relative;
3750
- }
3751
-
3752
- <span
3753
- aria-label="token, press backspace or delete to remove"
3754
- className="c0"
3755
- onKeyDown={[Function]}
3756
- onRemove={[MockFunction]}
3757
- size="medium"
3758
- >
3759
- <span
3760
- className="c1"
3761
- >
3762
- token
3763
- </span>
3764
- <button
3765
- aria-hidden="false"
3766
- aria-label="Remove token"
3767
- className="c2"
3768
- onClick={[Function]}
3769
- size="medium"
3770
- >
3771
- <svg
3772
- aria-hidden="true"
3773
- className="octicon octicon-x"
3774
- dangerouslySetInnerHTML={
3775
- Object {
3776
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
3777
- }
3778
- }
3779
- fill="currentColor"
3780
- height={15}
3781
- role="img"
3782
- style={
3783
- Object {
3784
- "display": "inline-block",
3785
- "userSelect": "none",
3786
- "verticalAlign": "text-bottom",
3787
- }
3788
- }
3789
- viewBox="0 0 16 16"
3790
- width={15}
3791
- />
3792
- </button>
3793
- </span>
3794
- `;