@primer/components 31.2.0-rc.0b631515 → 31.2.0-rc.2a086bac

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 (110) hide show
  1. package/CHANGELOG.md +5 -1
  2. package/dist/browser.esm.js +473 -471
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +103 -101
  5. package/dist/browser.umd.js.map +1 -1
  6. package/docs/content/ActionList2.mdx +354 -0
  7. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +17 -0
  8. package/lib/ActionList2/Description.d.ts +12 -0
  9. package/lib/ActionList2/Description.js +53 -0
  10. package/lib/ActionList2/Divider.d.ts +5 -0
  11. package/lib/ActionList2/Divider.js +35 -0
  12. package/lib/ActionList2/Group.d.ts +11 -0
  13. package/lib/ActionList2/Group.js +57 -0
  14. package/lib/ActionList2/Header.d.ts +26 -0
  15. package/lib/ActionList2/Header.js +55 -0
  16. package/lib/ActionList2/Item.d.ts +63 -0
  17. package/lib/ActionList2/Item.js +234 -0
  18. package/lib/ActionList2/LinkItem.d.ts +17 -0
  19. package/lib/ActionList2/LinkItem.js +57 -0
  20. package/lib/ActionList2/List.d.ts +26 -0
  21. package/lib/ActionList2/List.js +59 -0
  22. package/lib/ActionList2/Selection.d.ts +5 -0
  23. package/lib/ActionList2/Selection.js +70 -0
  24. package/lib/ActionList2/Visuals.d.ts +9 -0
  25. package/lib/ActionList2/Visuals.js +90 -0
  26. package/lib/ActionList2/index.d.ts +36 -0
  27. package/lib/ActionList2/index.js +47 -0
  28. package/lib/_TextInputWrapper.js +2 -2
  29. package/lib/__tests__/ActionList2.test.d.ts +1 -0
  30. package/lib/__tests__/ActionList2.test.js +53 -0
  31. package/lib/__tests__/AnchoredOverlay.test.js +4 -2
  32. package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
  33. package/lib/__tests__/utils/createSlots.test.js +75 -0
  34. package/lib/stories/ActionList2.stories.js +875 -0
  35. package/lib/stories/TextInput.stories.js +144 -0
  36. package/lib/sx.d.ts +2 -0
  37. package/lib/sx.js +8 -0
  38. package/lib/theme-preval.js +81 -2
  39. package/lib/unreleased.d.ts +7 -0
  40. package/lib/unreleased.js +18 -0
  41. package/lib/utils/create-slots.d.ts +17 -0
  42. package/lib/utils/create-slots.js +105 -0
  43. package/lib/utils/testing.d.ts +14 -1
  44. package/lib/utils/use-force-update.d.ts +1 -0
  45. package/lib/utils/use-force-update.js +19 -0
  46. package/lib-esm/ActionList2/Description.d.ts +12 -0
  47. package/lib-esm/ActionList2/Description.js +37 -0
  48. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  49. package/lib-esm/ActionList2/Divider.js +23 -0
  50. package/lib-esm/ActionList2/Group.d.ts +11 -0
  51. package/lib-esm/ActionList2/Group.js +40 -0
  52. package/lib-esm/ActionList2/Header.d.ts +26 -0
  53. package/lib-esm/ActionList2/Header.js +44 -0
  54. package/lib-esm/ActionList2/Item.d.ts +63 -0
  55. package/lib-esm/ActionList2/Item.js +201 -0
  56. package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
  57. package/lib-esm/ActionList2/LinkItem.js +43 -0
  58. package/lib-esm/ActionList2/List.d.ts +26 -0
  59. package/lib-esm/ActionList2/List.js +37 -0
  60. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  61. package/lib-esm/ActionList2/Selection.js +52 -0
  62. package/lib-esm/ActionList2/Visuals.d.ts +9 -0
  63. package/lib-esm/ActionList2/Visuals.js +68 -0
  64. package/lib-esm/ActionList2/index.d.ts +36 -0
  65. package/lib-esm/ActionList2/index.js +33 -0
  66. package/lib-esm/_TextInputWrapper.js +2 -2
  67. package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
  68. package/lib-esm/__tests__/ActionList2.test.js +41 -0
  69. package/lib-esm/__tests__/AnchoredOverlay.test.js +4 -2
  70. package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
  71. package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
  72. package/lib-esm/stories/ActionList2.stories.js +764 -0
  73. package/lib-esm/stories/TextInput.stories.js +117 -0
  74. package/lib-esm/sx.d.ts +2 -0
  75. package/lib-esm/sx.js +3 -1
  76. package/lib-esm/theme-preval.js +81 -2
  77. package/lib-esm/unreleased.d.ts +7 -0
  78. package/lib-esm/unreleased.js +8 -0
  79. package/lib-esm/utils/create-slots.d.ts +17 -0
  80. package/lib-esm/utils/create-slots.js +84 -0
  81. package/lib-esm/utils/testing.d.ts +14 -1
  82. package/lib-esm/utils/use-force-update.d.ts +1 -0
  83. package/lib-esm/utils/use-force-update.js +6 -0
  84. package/package-lock.json +146 -7
  85. package/package.json +4 -2
  86. package/src/ActionList2/Description.tsx +49 -0
  87. package/src/ActionList2/Divider.tsx +24 -0
  88. package/src/ActionList2/Group.tsx +34 -0
  89. package/src/ActionList2/Header.tsx +58 -0
  90. package/src/ActionList2/Item.tsx +228 -0
  91. package/src/ActionList2/LinkItem.tsx +49 -0
  92. package/src/ActionList2/List.tsx +55 -0
  93. package/src/ActionList2/Selection.tsx +40 -0
  94. package/src/ActionList2/Visuals.tsx +76 -0
  95. package/src/ActionList2/index.ts +39 -0
  96. package/src/_TextInputWrapper.tsx +7 -0
  97. package/src/__tests__/ActionList2.test.tsx +47 -0
  98. package/src/__tests__/AnchoredOverlay.test.tsx +2 -2
  99. package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
  100. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +35 -135
  101. package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
  102. package/src/__tests__/utils/createSlots.test.tsx +74 -0
  103. package/src/stories/ActionList2.stories.tsx +1279 -0
  104. package/src/stories/TextInput.stories.tsx +113 -0
  105. package/src/sx.ts +3 -0
  106. package/src/theme-preval.js +1 -0
  107. package/src/unreleased.ts +9 -0
  108. package/src/utils/create-slots.tsx +96 -0
  109. package/src/utils/use-force-update.ts +7 -0
  110. package/stats.html +1 -1
package/src/_TextInputWrapper.tsx CHANGED
@@ -91,6 +91,13 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
91
91
  display: block;
92
92
  width: 100%;
93
93
  `}
94
+
95
+ ${props =>
96
+ props.block &&
97
+ props.hasIcon &&
98
+ css`
99
+ display: flex;
100
+ `}
94
101
 
95
102
  // Ensures inputs don't zoom on mobile but are body-font size on desktop
96
103
  @media (min-width: ${get('breakpoints.1')}) {
package/src/__tests__/ActionList2.test.tsx ADDED
@@ -0,0 +1,47 @@
1
+ import {cleanup, render as HTMLRender} from '@testing-library/react'
2
+ import 'babel-polyfill'
3
+ import {axe, toHaveNoViolations} from 'jest-axe'
4
+ import React from 'react'
5
+ import theme from '../theme'
6
+ import {ActionList} from '../ActionList2'
7
+ import {behavesAsComponent, checkExports} from '../utils/testing'
8
+ import {BaseStyles, ThemeProvider, SSRProvider} from '..'
9
+ expect.extend(toHaveNoViolations)
10
+
11
+ function SimpleActionList(): JSX.Element {
12
+ return (
13
+ <ThemeProvider theme={theme}>
14
+ <SSRProvider>
15
+ <BaseStyles>
16
+ <ActionList>
17
+ <ActionList.Item>New file</ActionList.Item>
18
+ <ActionList.Divider />
19
+ <ActionList.Item>Copy link</ActionList.Item>
20
+ <ActionList.Item>Edit file</ActionList.Item>
21
+ <ActionList.Item variant="danger">Delete file</ActionList.Item>
22
+ </ActionList>
23
+ </BaseStyles>
24
+ </SSRProvider>
25
+ </ThemeProvider>
26
+ )
27
+ }
28
+
29
+ describe('ActionList', () => {
30
+ behavesAsComponent({
31
+ Component: ActionList,
32
+ options: {skipAs: true, skipSx: true},
33
+ toRender: () => <ActionList />
34
+ })
35
+
36
+ checkExports('ActionList2', {
37
+ default: undefined,
38
+ ActionList
39
+ })
40
+
41
+ it('should have no axe violations', async () => {
42
+ const {container} = HTMLRender(<SimpleActionList />)
43
+ const results = await axe(container)
44
+ expect(results).toHaveNoViolations()
45
+ cleanup()
46
+ })
47
+ })
package/src/__tests__/AnchoredOverlay.test.tsx CHANGED
@@ -144,7 +144,7 @@ describe('AnchoredOverlay', () => {
144
144
  })
145
145
 
146
146
  it('should render consistently when open', () => {
147
- const anchoredOverlay = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true} />)
148
- expect(anchoredOverlay).toMatchSnapshot()
147
+ const {container} = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true} />)
148
+ expect(container).toMatchSnapshot()
149
149
  })
150
150
  })
package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap ADDED
@@ -0,0 +1,14 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`ActionList renders consistently 1`] = `
4
+ .c0 {
5
+ margin: 0;
6
+ padding-inline-start: 0;
7
+ padding-top: 8px;
8
+ padding-bottom: 8px;
9
+ }
10
+
11
+ <ul
12
+ className="c0"
13
+ />
14
+ `;
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__/utils/__snapshots__/createSlots.test.tsx.snap ADDED
@@ -0,0 +1,55 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`ComponentWithSlots renders all slots 1`] = `
4
+ <div>
5
+ <div>
6
+ first
7
+ <span>
8
+ free form
9
+
10
+ second
11
+
12
+ </span>
13
+ </div>
14
+ </div>
15
+ `;
16
+
17
+ exports[`ComponentWithSlots renders with context passed to children 1`] = `
18
+ <div>
19
+ <div>
20
+ <span>
21
+ free form
22
+
23
+
24
+ hi
25
+
26
+ third
27
+ </span>
28
+ </div>
29
+ </div>
30
+ `;
31
+
32
+ exports[`ComponentWithSlots renders with just one slot 1`] = `
33
+ <div>
34
+ <div>
35
+ first
36
+ <span>
37
+ free form
38
+
39
+
40
+ </span>
41
+ </div>
42
+ </div>
43
+ `;
44
+
45
+ exports[`ComponentWithSlots renders without any slots 1`] = `
46
+ <div>
47
+ <div>
48
+ <span>
49
+ free form
50
+
51
+
52
+ </span>
53
+ </div>
54
+ </div>
55
+ `;
package/src/__tests__/utils/createSlots.test.tsx ADDED
@@ -0,0 +1,74 @@
1
+ import React from 'react'
2
+ import 'babel-polyfill'
3
+ import {render, waitFor} from '@testing-library/react'
4
+ import createSlots from '../../utils/create-slots'
5
+
6
+ // setup a component with slots
7
+ const {Slots, Slot} = createSlots(['One', 'Two', 'Three'])
8
+ type ContextTypes = {salutation?: string}
9
+
10
+ const ComponentWithSlots: React.FC<ContextTypes> = ({salutation, children}) => {
11
+ return (
12
+ <Slots context={{salutation}}>
13
+ {slots => (
14
+ <div>
15
+ {slots.One}
16
+ <span>
17
+ {children} {slots.Two} {slots.Three}
18
+ </span>
19
+ </div>
20
+ )}
21
+ </Slots>
22
+ )
23
+ }
24
+ const SlotItem1: React.FC = ({children}) => <Slot name="One">{children}</Slot>
25
+ const SlotItem2: React.FC = ({children}) => <Slot name="Two">{children}</Slot>
26
+ const SlotItem3: React.FC = ({children}) => (
27
+ <Slot name="Three">
28
+ {(context: ContextTypes) => (
29
+ <>
30
+ {context.salutation} {children}
31
+ </>
32
+ )}
33
+ </Slot>
34
+ )
35
+
36
+ describe('ComponentWithSlots', () => {
37
+ it('renders all slots', async () => {
38
+ const component = render(
39
+ <ComponentWithSlots>
40
+ <SlotItem1>first</SlotItem1>
41
+ <SlotItem2>second</SlotItem2>
42
+ free form
43
+ </ComponentWithSlots>
44
+ )
45
+
46
+ await waitFor(() => component.getByText('first'))
47
+ expect(component.container).toMatchSnapshot()
48
+ })
49
+
50
+ it('renders without any slots', async () => {
51
+ const component = render(<ComponentWithSlots>free form</ComponentWithSlots>)
52
+ expect(component.container).toMatchSnapshot()
53
+ })
54
+
55
+ it('renders with just one slot', async () => {
56
+ const component = render(
57
+ <ComponentWithSlots>
58
+ <SlotItem1>first</SlotItem1>
59
+ free form
60
+ </ComponentWithSlots>
61
+ )
62
+ expect(component.container).toMatchSnapshot()
63
+ })
64
+
65
+ it('renders with context passed to children', async () => {
66
+ const component = render(
67
+ <ComponentWithSlots salutation="hi">
68
+ <SlotItem3>third</SlotItem3>
69
+ free form
70
+ </ComponentWithSlots>
71
+ )
72
+ expect(component.container).toMatchSnapshot()
73
+ })
74
+ })