@primer/components 31.2.0-rc.5ccefd7d → 31.2.0-rc.5e503f97

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 (206) hide show
  1. package/.github/workflows/release.yml +1 -0
  2. package/.github/workflows/release_canary.yml +1 -0
  3. package/CHANGELOG.md +14 -0
  4. package/dist/browser.esm.js +626 -624
  5. package/dist/browser.esm.js.map +1 -1
  6. package/dist/browser.umd.js +196 -194
  7. package/dist/browser.umd.js.map +1 -1
  8. package/docs/content/ActionList2.mdx +360 -0
  9. package/docs/content/StateLabel.md +5 -4
  10. package/docs/content/getting-started.md +1 -1
  11. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +1 -3
  12. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +1 -1
  13. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +17 -0
  14. package/lib/ActionList2/Description.d.ts +12 -0
  15. package/lib/ActionList2/Description.js +53 -0
  16. package/lib/ActionList2/Divider.d.ts +5 -0
  17. package/lib/ActionList2/Divider.js +35 -0
  18. package/lib/ActionList2/Group.d.ts +11 -0
  19. package/lib/ActionList2/Group.js +57 -0
  20. package/lib/ActionList2/Header.d.ts +26 -0
  21. package/lib/ActionList2/Header.js +55 -0
  22. package/lib/ActionList2/Item.d.ts +63 -0
  23. package/lib/ActionList2/Item.js +244 -0
  24. package/lib/ActionList2/LinkItem.d.ts +17 -0
  25. package/lib/ActionList2/LinkItem.js +57 -0
  26. package/lib/ActionList2/List.d.ts +26 -0
  27. package/lib/ActionList2/List.js +59 -0
  28. package/lib/ActionList2/Selection.d.ts +5 -0
  29. package/lib/ActionList2/Selection.js +70 -0
  30. package/lib/ActionList2/Visuals.d.ts +9 -0
  31. package/lib/ActionList2/Visuals.js +90 -0
  32. package/lib/ActionList2/index.d.ts +36 -0
  33. package/lib/ActionList2/index.js +47 -0
  34. package/lib/Autocomplete/Autocomplete.d.ts +28 -28
  35. package/lib/Autocomplete/AutocompleteInput.d.ts +28 -28
  36. package/lib/Button/Button.d.ts +25 -25
  37. package/lib/Button/ButtonClose.d.ts +45 -45
  38. package/lib/Button/ButtonDanger.d.ts +25 -25
  39. package/lib/Button/ButtonInvisible.d.ts +25 -25
  40. package/lib/Button/ButtonOutline.d.ts +25 -25
  41. package/lib/Button/ButtonPrimary.d.ts +25 -25
  42. package/lib/CircleOcticon.d.ts +42 -42
  43. package/lib/Dialog.d.ts +45 -45
  44. package/lib/Dropdown.d.ts +176 -176
  45. package/lib/DropdownMenu/DropdownButton.d.ts +46 -46
  46. package/lib/FilterList.d.ts +42 -42
  47. package/lib/Overlay.js +3 -1
  48. package/lib/Portal/Portal.js +3 -2
  49. package/lib/Position.d.ts +4 -4
  50. package/lib/SelectMenu/SelectMenu.d.ts +246 -246
  51. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  52. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  53. package/lib/StateLabel.d.ts +1 -1
  54. package/lib/StateLabel.js +6 -1
  55. package/lib/TextInputWithTokens.d.ts +28 -28
  56. package/lib/Timeline.d.ts +43 -43
  57. package/lib/Token/AvatarToken.d.ts +1 -1
  58. package/lib/Token/IssueLabelToken.d.ts +1 -1
  59. package/lib/Token/Token.d.ts +1 -1
  60. package/lib/_TextInputWrapper.js +2 -2
  61. package/lib/__tests__/ActionList2.test.d.ts +1 -0
  62. package/lib/__tests__/ActionList2.test.js +53 -0
  63. package/lib/__tests__/AnchoredOverlay.test.js +4 -2
  64. package/lib/__tests__/TextInputWithTokens.test.js +1 -10
  65. package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
  66. package/lib/__tests__/utils/createSlots.test.js +75 -0
  67. package/lib/drafts.d.ts +7 -0
  68. package/lib/drafts.js +18 -0
  69. package/lib/hooks/useAnchoredPosition.js +3 -2
  70. package/lib/hooks/useCombinedRefs.d.ts +2 -2
  71. package/lib/hooks/useCombinedRefs.js +4 -6
  72. package/lib/hooks/useResizeObserver.js +2 -2
  73. package/lib/stories/ActionList2.stories.js +907 -0
  74. package/lib/stories/TextInput.stories.js +144 -0
  75. package/lib/stories/Token.stories.js +19 -2
  76. package/lib/sx.d.ts +2 -0
  77. package/lib/sx.js +8 -0
  78. package/lib/theme-preval.js +81 -2
  79. package/lib/utils/create-slots.d.ts +17 -0
  80. package/lib/utils/create-slots.js +105 -0
  81. package/lib/utils/testing.d.ts +14 -1
  82. package/lib/utils/use-force-update.d.ts +1 -0
  83. package/lib/utils/use-force-update.js +19 -0
  84. package/lib/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  85. package/lib/utils/useIsomorphicLayoutEffect.js +12 -0
  86. package/lib-esm/ActionList2/Description.d.ts +12 -0
  87. package/lib-esm/ActionList2/Description.js +37 -0
  88. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  89. package/lib-esm/ActionList2/Divider.js +23 -0
  90. package/lib-esm/ActionList2/Group.d.ts +11 -0
  91. package/lib-esm/ActionList2/Group.js +40 -0
  92. package/lib-esm/ActionList2/Header.d.ts +26 -0
  93. package/lib-esm/ActionList2/Header.js +44 -0
  94. package/lib-esm/ActionList2/Item.d.ts +63 -0
  95. package/lib-esm/ActionList2/Item.js +210 -0
  96. package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
  97. package/lib-esm/ActionList2/LinkItem.js +43 -0
  98. package/lib-esm/ActionList2/List.d.ts +26 -0
  99. package/lib-esm/ActionList2/List.js +37 -0
  100. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  101. package/lib-esm/ActionList2/Selection.js +52 -0
  102. package/lib-esm/ActionList2/Visuals.d.ts +9 -0
  103. package/lib-esm/ActionList2/Visuals.js +68 -0
  104. package/lib-esm/ActionList2/index.d.ts +36 -0
  105. package/lib-esm/ActionList2/index.js +33 -0
  106. package/lib-esm/Autocomplete/Autocomplete.d.ts +28 -28
  107. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +28 -28
  108. package/lib-esm/Button/Button.d.ts +25 -25
  109. package/lib-esm/Button/ButtonClose.d.ts +45 -45
  110. package/lib-esm/Button/ButtonDanger.d.ts +25 -25
  111. package/lib-esm/Button/ButtonInvisible.d.ts +25 -25
  112. package/lib-esm/Button/ButtonOutline.d.ts +25 -25
  113. package/lib-esm/Button/ButtonPrimary.d.ts +25 -25
  114. package/lib-esm/CircleOcticon.d.ts +42 -42
  115. package/lib-esm/Dialog.d.ts +45 -45
  116. package/lib-esm/Dropdown.d.ts +176 -176
  117. package/lib-esm/DropdownMenu/DropdownButton.d.ts +46 -46
  118. package/lib-esm/FilterList.d.ts +42 -42
  119. package/lib-esm/Overlay.js +2 -1
  120. package/lib-esm/Portal/Portal.js +2 -1
  121. package/lib-esm/Position.d.ts +4 -4
  122. package/lib-esm/SelectMenu/SelectMenu.d.ts +246 -246
  123. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  124. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  125. package/lib-esm/StateLabel.d.ts +1 -1
  126. package/lib-esm/StateLabel.js +7 -2
  127. package/lib-esm/TextInputWithTokens.d.ts +28 -28
  128. package/lib-esm/Timeline.d.ts +43 -43
  129. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  130. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  131. package/lib-esm/Token/Token.d.ts +1 -1
  132. package/lib-esm/_TextInputWrapper.js +2 -2
  133. package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
  134. package/lib-esm/__tests__/ActionList2.test.js +41 -0
  135. package/lib-esm/__tests__/AnchoredOverlay.test.js +4 -2
  136. package/lib-esm/__tests__/TextInputWithTokens.test.js +1 -10
  137. package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
  138. package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
  139. package/lib-esm/drafts.d.ts +7 -0
  140. package/lib-esm/drafts.js +8 -0
  141. package/lib-esm/hooks/useAnchoredPosition.js +2 -1
  142. package/lib-esm/hooks/useCombinedRefs.d.ts +2 -2
  143. package/lib-esm/hooks/useCombinedRefs.js +3 -2
  144. package/lib-esm/hooks/useResizeObserver.js +2 -2
  145. package/lib-esm/stories/ActionList2.stories.js +796 -0
  146. package/lib-esm/stories/TextInput.stories.js +117 -0
  147. package/lib-esm/stories/Token.stories.js +14 -1
  148. package/lib-esm/sx.d.ts +2 -0
  149. package/lib-esm/sx.js +3 -1
  150. package/lib-esm/theme-preval.js +81 -2
  151. package/lib-esm/utils/create-slots.d.ts +17 -0
  152. package/lib-esm/utils/create-slots.js +84 -0
  153. package/lib-esm/utils/testing.d.ts +14 -1
  154. package/lib-esm/utils/use-force-update.d.ts +1 -0
  155. package/lib-esm/utils/use-force-update.js +6 -0
  156. package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  157. package/lib-esm/utils/useIsomorphicLayoutEffect.js +3 -0
  158. package/migrating.md +1 -1
  159. package/package-lock.json +153 -14
  160. package/package.json +6 -4
  161. package/script/build +2 -0
  162. package/src/ActionList2/Description.tsx +49 -0
  163. package/src/ActionList2/Divider.tsx +24 -0
  164. package/src/ActionList2/Group.tsx +34 -0
  165. package/src/ActionList2/Header.tsx +58 -0
  166. package/src/ActionList2/Item.tsx +245 -0
  167. package/src/ActionList2/LinkItem.tsx +49 -0
  168. package/src/ActionList2/List.tsx +55 -0
  169. package/src/ActionList2/Selection.tsx +40 -0
  170. package/src/ActionList2/Visuals.tsx +76 -0
  171. package/src/ActionList2/index.ts +39 -0
  172. package/src/Overlay.tsx +2 -1
  173. package/src/Portal/Portal.tsx +2 -1
  174. package/src/StateLabel.tsx +14 -2
  175. package/src/_TextInputWrapper.tsx +7 -0
  176. package/src/__tests__/ActionList2.test.tsx +47 -0
  177. package/src/__tests__/AnchoredOverlay.test.tsx +2 -2
  178. package/src/__tests__/TextInputWithTokens.test.tsx +0 -10
  179. package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
  180. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +35 -135
  181. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +1 -0
  182. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +1 -0
  183. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +1 -0
  184. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +1 -0
  185. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +1 -0
  186. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +4 -0
  187. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +1 -0
  188. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +13 -6
  189. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +1 -0
  190. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +66 -0
  191. package/src/__tests__/__snapshots__/Token.test.tsx.snap +17 -0
  192. package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
  193. package/src/__tests__/utils/createSlots.test.tsx +74 -0
  194. package/src/drafts.ts +9 -0
  195. package/src/hooks/useAnchoredPosition.ts +2 -1
  196. package/src/hooks/useCombinedRefs.ts +3 -3
  197. package/src/hooks/useResizeObserver.ts +2 -2
  198. package/src/stories/ActionList2.stories.tsx +1288 -0
  199. package/src/stories/TextInput.stories.tsx +113 -0
  200. package/src/stories/Token.stories.tsx +12 -1
  201. package/src/sx.ts +3 -0
  202. package/src/theme-preval.js +1 -0
  203. package/src/utils/create-slots.tsx +96 -0
  204. package/src/utils/use-force-update.ts +7 -0
  205. package/src/utils/useIsomorphicLayoutEffect.ts +10 -0
  206. package/stats.html +1 -1
package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap CHANGED
@@ -94,9 +94,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
94
94
  `;
95
95
 
96
96
  exports[`AnchoredOverlay should render consistently when open 1`] = `
97
- Object {
98
- "asFragment": [Function],
99
- "baseElement": .c0 {
97
+ .c0 {
100
98
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
101
99
  line-height: 1.5;
102
100
  color: #24292f;
@@ -187,146 +185,48 @@ Object {
187
185
  outline: none;
188
186
  }
189
187
 
190
- <body>
191
- <div>
192
- <div
193
- class="c0"
194
- color="fg.default"
195
- data-portal-root="true"
196
- font-family="normal"
197
- >
198
- <button
199
- aria-haspopup="true"
200
- aria-labelledby="react-aria-1"
201
- class="c1"
202
- id="react-aria-1"
203
- tabindex="0"
204
- >
205
- Anchor Button
206
- </button>
207
- <div
208
- id="__primerPortalRoot__"
209
- style="position: absolute; top: 0px; left: 0px;"
210
- >
211
- <div
212
- style="position: relative; z-index: 1;"
213
- >
214
- <div
215
- class="c2"
216
- data-focus-trap="active"
217
- height="auto"
218
- role="none"
219
- style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
220
- width="auto"
221
- >
222
- <button
223
- class="focus-visible"
224
- data-focus-visible-added=""
225
- tabindex="0"
226
- type="button"
227
- >
228
- Focusable Child
229
- </button>
230
- </div>
231
- </div>
232
- </div>
233
- </div>
234
- </div>
235
- </body>,
236
- "container": <div>
188
+ <div>
189
+ <div
190
+ class="c0"
191
+ color="fg.default"
192
+ data-portal-root="true"
193
+ font-family="normal"
194
+ >
195
+ <button
196
+ aria-haspopup="true"
197
+ aria-labelledby="react-aria-1"
198
+ class="c1"
199
+ id="react-aria-1"
200
+ tabindex="0"
201
+ >
202
+ Anchor Button
203
+ </button>
237
204
  <div
238
- class="BaseStyles__Base-qvuaww-0 ihFkAM"
239
- color="fg.default"
240
- data-portal-root="true"
241
- font-family="normal"
205
+ id="__primerPortalRoot__"
206
+ style="position: absolute; top: 0px; left: 0px;"
242
207
  >
243
- <button
244
- aria-haspopup="true"
245
- aria-labelledby="react-aria-1"
246
- class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 iRqJHc"
247
- id="react-aria-1"
248
- tabindex="0"
249
- >
250
- Anchor Button
251
- </button>
252
208
  <div
253
- id="__primerPortalRoot__"
254
- style="position: absolute; top: 0px; left: 0px;"
209
+ style="position: relative; z-index: 1;"
255
210
  >
256
211
  <div
257
- style="position: relative; z-index: 1;"
212
+ class="c2"
213
+ data-focus-trap="active"
214
+ height="auto"
215
+ role="none"
216
+ style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
217
+ width="auto"
258
218
  >
259
- <div
260
- class="Overlay__StyledOverlay-jhwkzw-0 jFTKwM"
261
- data-focus-trap="active"
262
- height="auto"
263
- role="none"
264
- style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
265
- width="auto"
219
+ <button
220
+ class="focus-visible"
221
+ data-focus-visible-added=""
222
+ tabindex="0"
223
+ type="button"
266
224
  >
267
- <button
268
- class="focus-visible"
269
- data-focus-visible-added=""
270
- tabindex="0"
271
- type="button"
272
- >
273
- Focusable Child
274
- </button>
275
- </div>
225
+ Focusable Child
226
+ </button>
276
227
  </div>
277
228
  </div>
278
229
  </div>
279
- </div>,
280
- "debug": [Function],
281
- "findAllByAltText": [Function],
282
- "findAllByDisplayValue": [Function],
283
- "findAllByLabelText": [Function],
284
- "findAllByPlaceholderText": [Function],
285
- "findAllByRole": [Function],
286
- "findAllByTestId": [Function],
287
- "findAllByText": [Function],
288
- "findAllByTitle": [Function],
289
- "findByAltText": [Function],
290
- "findByDisplayValue": [Function],
291
- "findByLabelText": [Function],
292
- "findByPlaceholderText": [Function],
293
- "findByRole": [Function],
294
- "findByTestId": [Function],
295
- "findByText": [Function],
296
- "findByTitle": [Function],
297
- "getAllByAltText": [Function],
298
- "getAllByDisplayValue": [Function],
299
- "getAllByLabelText": [Function],
300
- "getAllByPlaceholderText": [Function],
301
- "getAllByRole": [Function],
302
- "getAllByTestId": [Function],
303
- "getAllByText": [Function],
304
- "getAllByTitle": [Function],
305
- "getByAltText": [Function],
306
- "getByDisplayValue": [Function],
307
- "getByLabelText": [Function],
308
- "getByPlaceholderText": [Function],
309
- "getByRole": [Function],
310
- "getByTestId": [Function],
311
- "getByText": [Function],
312
- "getByTitle": [Function],
313
- "queryAllByAltText": [Function],
314
- "queryAllByDisplayValue": [Function],
315
- "queryAllByLabelText": [Function],
316
- "queryAllByPlaceholderText": [Function],
317
- "queryAllByRole": [Function],
318
- "queryAllByTestId": [Function],
319
- "queryAllByText": [Function],
320
- "queryAllByTitle": [Function],
321
- "queryByAltText": [Function],
322
- "queryByDisplayValue": [Function],
323
- "queryByLabelText": [Function],
324
- "queryByPlaceholderText": [Function],
325
- "queryByRole": [Function],
326
- "queryByTestId": [Function],
327
- "queryByText": [Function],
328
- "queryByTitle": [Function],
329
- "rerender": [Function],
330
- "unmount": [Function],
331
- }
230
+ </div>
231
+ </div>
332
232
  `;
package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap CHANGED
@@ -972,6 +972,7 @@ Array [
972
972
  style={
973
973
  Object {
974
974
  "display": "inline-block",
975
+ "overflow": "visible",
975
976
  "userSelect": "none",
976
977
  "verticalAlign": "text-bottom",
977
978
  }
package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap CHANGED
@@ -21,6 +21,7 @@ exports[`CircleBadge CircleBadge.Icon renders consistently 1`] = `
21
21
  style={
22
22
  Object {
23
23
  "display": "inline-block",
24
+ "overflow": "visible",
24
25
  "userSelect": "none",
25
26
  "verticalAlign": "text-bottom",
26
27
  }
package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap CHANGED
@@ -52,6 +52,7 @@ exports[`CircleOcticon renders consistently 1`] = `
52
52
  style={
53
53
  Object {
54
54
  "display": "inline-block",
55
+ "overflow": "visible",
55
56
  "userSelect": "none",
56
57
  "verticalAlign": "text-bottom",
57
58
  }
package/src/__tests__/__snapshots__/Dialog.test.tsx.snap CHANGED
@@ -163,6 +163,7 @@ Array [
163
163
  style={
164
164
  Object {
165
165
  "display": "inline-block",
166
+ "overflow": "visible",
166
167
  "userSelect": "none",
167
168
  "verticalAlign": "text-bottom",
168
169
  }
package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap CHANGED
@@ -95,6 +95,7 @@ exports[`DropdownMenu renders consistently 1`] = `
95
95
  style={
96
96
  Object {
97
97
  "display": "inline-block",
98
+ "overflow": "visible",
98
99
  "userSelect": "none",
99
100
  "verticalAlign": "text-bottom",
100
101
  }
package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap CHANGED
@@ -352,6 +352,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
352
352
  style={
353
353
  Object {
354
354
  "display": "inline-block",
355
+ "overflow": "visible",
355
356
  "userSelect": "none",
356
357
  "verticalAlign": "text-bottom",
357
358
  }
@@ -383,6 +384,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
383
384
  style={
384
385
  Object {
385
386
  "display": "inline-block",
387
+ "overflow": "visible",
386
388
  "userSelect": "none",
387
389
  "verticalAlign": "text-bottom",
388
390
  }
@@ -418,6 +420,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
418
420
  style={
419
421
  Object {
420
422
  "display": "inline-block",
423
+ "overflow": "visible",
421
424
  "userSelect": "none",
422
425
  "verticalAlign": "text-bottom",
423
426
  }
@@ -448,6 +451,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
448
451
  style={
449
452
  Object {
450
453
  "display": "inline-block",
454
+ "overflow": "visible",
451
455
  "userSelect": "none",
452
456
  "verticalAlign": "text-bottom",
453
457
  }
package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap CHANGED
@@ -108,6 +108,7 @@ exports[`SelectPanel renders consistently 1`] = `
108
108
  style={
109
109
  Object {
110
110
  "display": "inline-block",
111
+ "overflow": "visible",
111
112
  "userSelect": "none",
112
113
  "verticalAlign": "text-bottom",
113
114
  }
package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap CHANGED
@@ -36,7 +36,7 @@ exports[`StateLabel renders children 1`] = `
36
36
  className="c1"
37
37
  dangerouslySetInnerHTML={
38
38
  Object {
39
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
39
+ "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
40
40
  }
41
41
  }
42
42
  fill="currentColor"
@@ -45,6 +45,7 @@ exports[`StateLabel renders children 1`] = `
45
45
  style={
46
46
  Object {
47
47
  "display": "inline-block",
48
+ "overflow": "visible",
48
49
  "userSelect": "none",
49
50
  "verticalAlign": "text-bottom",
50
51
  }
@@ -92,7 +93,7 @@ exports[`StateLabel renders consistently 1`] = `
92
93
  className="c1"
93
94
  dangerouslySetInnerHTML={
94
95
  Object {
95
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
96
+ "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
96
97
  }
97
98
  }
98
99
  fill="currentColor"
@@ -101,6 +102,7 @@ exports[`StateLabel renders consistently 1`] = `
101
102
  style={
102
103
  Object {
103
104
  "display": "inline-block",
105
+ "overflow": "visible",
104
106
  "userSelect": "none",
105
107
  "verticalAlign": "text-bottom",
106
108
  }
@@ -148,7 +150,7 @@ exports[`StateLabel respects the status prop 1`] = `
148
150
  className="c1"
149
151
  dangerouslySetInnerHTML={
150
152
  Object {
151
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
153
+ "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
152
154
  }
153
155
  }
154
156
  fill="currentColor"
@@ -157,6 +159,7 @@ exports[`StateLabel respects the status prop 1`] = `
157
159
  style={
158
160
  Object {
159
161
  "display": "inline-block",
162
+ "overflow": "visible",
160
163
  "userSelect": "none",
161
164
  "verticalAlign": "text-bottom",
162
165
  }
@@ -203,7 +206,7 @@ exports[`StateLabel respects the status prop 2`] = `
203
206
  className="c1"
204
207
  dangerouslySetInnerHTML={
205
208
  Object {
206
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M1.5 8a6.5 6.5 0 0110.65-5.003.75.75 0 00.959-1.153 8 8 0 102.592 8.33.75.75 0 10-1.444-.407A6.5 6.5 0 011.5 8zM8 12a1 1 0 100-2 1 1 0 000 2zm0-8a.75.75 0 01.75.75v3.5a.75.75 0 11-1.5 0v-3.5A.75.75 0 018 4zm4.78 4.28l3-3a.75.75 0 00-1.06-1.06l-2.47 2.47-.97-.97a.749.749 0 10-1.06 1.06l1.5 1.5a.75.75 0 001.06 0z\\"></path>",
209
+ "__html": "<path d=\\"M11.28 6.78a.75.75 0 00-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l3.5-3.5z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M16 8A8 8 0 110 8a8 8 0 0116 0zm-1.5 0a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z\\"></path>",
207
210
  }
208
211
  }
209
212
  fill="currentColor"
@@ -212,6 +215,7 @@ exports[`StateLabel respects the status prop 2`] = `
212
215
  style={
213
216
  Object {
214
217
  "display": "inline-block",
218
+ "overflow": "visible",
215
219
  "userSelect": "none",
216
220
  "verticalAlign": "text-bottom",
217
221
  }
@@ -267,6 +271,7 @@ exports[`StateLabel respects the status prop 3`] = `
267
271
  style={
268
272
  Object {
269
273
  "display": "inline-block",
274
+ "overflow": "visible",
270
275
  "userSelect": "none",
271
276
  "verticalAlign": "text-bottom",
272
277
  }
@@ -313,7 +318,7 @@ exports[`StateLabel respects the variant prop 1`] = `
313
318
  className="c1"
314
319
  dangerouslySetInnerHTML={
315
320
  Object {
316
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
321
+ "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
317
322
  }
318
323
  }
319
324
  fill="currentColor"
@@ -322,6 +327,7 @@ exports[`StateLabel respects the variant prop 1`] = `
322
327
  style={
323
328
  Object {
324
329
  "display": "inline-block",
330
+ "overflow": "visible",
325
331
  "userSelect": "none",
326
332
  "verticalAlign": "text-bottom",
327
333
  }
@@ -368,7 +374,7 @@ exports[`StateLabel respects the variant prop 2`] = `
368
374
  className="c1"
369
375
  dangerouslySetInnerHTML={
370
376
  Object {
371
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
377
+ "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
372
378
  }
373
379
  }
374
380
  fill="currentColor"
@@ -377,6 +383,7 @@ exports[`StateLabel respects the variant prop 2`] = `
377
383
  style={
378
384
  Object {
379
385
  "display": "inline-block",
386
+ "overflow": "visible",
380
387
  "userSelect": "none",
381
388
  "verticalAlign": "text-bottom",
382
389
  }
package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap CHANGED
@@ -15,6 +15,7 @@ exports[`StyledOcticon renders consistently 1`] = `
15
15
  style={
16
16
  Object {
17
17
  "display": "inline-block",
18
+ "overflow": "visible",
18
19
  "userSelect": "none",
19
20
  "verticalAlign": "text-bottom",
20
21
  }