@primer/components 31.2.0-rc.c285489d → 31.2.0-rc.c7f73427

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 (62) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/browser.esm.js +180 -178
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +182 -180
  5. package/dist/browser.umd.js.map +1 -1
  6. package/docs/content/FilterList.md +2 -2
  7. package/docs/content/theming.md +23 -0
  8. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +1 -3
  9. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +1 -1
  10. package/lib/ActionList/Header.js +1 -1
  11. package/lib/Overlay.js +3 -1
  12. package/lib/Portal/Portal.js +3 -2
  13. package/lib/_TextInputWrapper.js +2 -2
  14. package/lib/__tests__/AnchoredOverlay.test.js +4 -2
  15. package/lib/__tests__/KeyPaths.types.test.d.ts +2 -1
  16. package/lib/__tests__/TextInputWithTokens.test.js +1 -10
  17. package/lib/hooks/useAnchoredPosition.js +3 -2
  18. package/lib/hooks/useCombinedRefs.d.ts +2 -2
  19. package/lib/hooks/useCombinedRefs.js +4 -6
  20. package/lib/hooks/useResizeObserver.js +2 -2
  21. package/lib/stories/TextInput.stories.js +144 -0
  22. package/lib/stories/Token.stories.js +19 -2
  23. package/lib/utils/types/KeyPaths.d.ts +1 -1
  24. package/lib/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  25. package/lib/utils/useIsomorphicLayoutEffect.js +12 -0
  26. package/lib-esm/ActionList/Header.js +1 -1
  27. package/lib-esm/Overlay.js +2 -1
  28. package/lib-esm/Portal/Portal.js +2 -1
  29. package/lib-esm/_TextInputWrapper.js +2 -2
  30. package/lib-esm/__tests__/AnchoredOverlay.test.js +4 -2
  31. package/lib-esm/__tests__/KeyPaths.types.test.d.ts +2 -1
  32. package/lib-esm/__tests__/TextInputWithTokens.test.js +1 -10
  33. package/lib-esm/hooks/useAnchoredPosition.js +2 -1
  34. package/lib-esm/hooks/useCombinedRefs.d.ts +2 -2
  35. package/lib-esm/hooks/useCombinedRefs.js +3 -2
  36. package/lib-esm/hooks/useResizeObserver.js +2 -2
  37. package/lib-esm/stories/TextInput.stories.js +117 -0
  38. package/lib-esm/stories/Token.stories.js +14 -1
  39. package/lib-esm/utils/types/KeyPaths.d.ts +1 -1
  40. package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  41. package/lib-esm/utils/useIsomorphicLayoutEffect.js +3 -0
  42. package/migrating.md +1 -1
  43. package/package-lock.json +15 -2
  44. package/package.json +3 -2
  45. package/script/build +2 -0
  46. package/src/ActionList/Header.tsx +1 -1
  47. package/src/Overlay.tsx +2 -1
  48. package/src/Portal/Portal.tsx +2 -1
  49. package/src/_TextInputWrapper.tsx +7 -0
  50. package/src/__tests__/AnchoredOverlay.test.tsx +2 -2
  51. package/src/__tests__/KeyPaths.types.test.ts +2 -1
  52. package/src/__tests__/TextInputWithTokens.test.tsx +0 -10
  53. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +35 -135
  54. package/src/hooks/useAnchoredPosition.ts +2 -1
  55. package/src/hooks/useCombinedRefs.ts +3 -3
  56. package/src/hooks/useResizeObserver.ts +2 -2
  57. package/src/stories/Button.stories.tsx +1 -1
  58. package/src/stories/TextInput.stories.tsx +113 -0
  59. package/src/stories/Token.stories.tsx +12 -1
  60. package/src/utils/types/KeyPaths.ts +7 -1
  61. package/src/utils/useIsomorphicLayoutEffect.ts +10 -0
  62. package/stats.html +1 -1
@@ -0,0 +1,113 @@
1
+ import React, {useState, ReactNode} from 'react'
2
+ import {Meta} from '@storybook/react'
3
+
4
+ import {BaseStyles, Box, ThemeProvider, Text} from '..'
5
+ import TextInput, {TextInputProps} from '../TextInput'
6
+ import {CheckIcon} from '@primer/octicons-react'
7
+
8
+ export default {
9
+ title: 'Forms/Text Input',
10
+ component: TextInput,
11
+ decorators: [
12
+ Story => {
13
+ return (
14
+ <ThemeProvider>
15
+ <BaseStyles>
16
+ <Box paddingTop={5}>{Story()}</Box>
17
+ </BaseStyles>
18
+ </ThemeProvider>
19
+ )
20
+ }
21
+ ],
22
+ argTypes: {
23
+ sx: {
24
+ table: {
25
+ disable: true
26
+ }
27
+ },
28
+ block: {
29
+ name: 'Block',
30
+ defaultValue: false,
31
+ control: {
32
+ type: 'boolean'
33
+ }
34
+ },
35
+ disabled: {
36
+ name: 'Disabled',
37
+ defaultValue: false,
38
+ control: {
39
+ type: 'boolean'
40
+ }
41
+ },
42
+ variant: {
43
+ name: 'Variants',
44
+ options: ['small', 'medium', 'large'],
45
+ control: {type: 'radio'}
46
+ }
47
+ }
48
+ } as Meta
49
+
50
+ const Label = ({htmlFor, children}: {htmlFor: string; children: ReactNode}) => (
51
+ <Text as="label" htmlFor={htmlFor} sx={{fontWeight: 600, fontSize: 14}}>
52
+ {children}
53
+ </Text>
54
+ )
55
+
56
+ export const Default = (args: TextInputProps) => {
57
+ const [value, setValue] = useState('')
58
+
59
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
60
+ setValue(event.target.value)
61
+ }
62
+
63
+ const inputId = 'basic-text-input'
64
+
65
+ return (
66
+ <form>
67
+ <div className="form-group">
68
+ <div className="form-group-header">
69
+ <Label htmlFor={inputId}>Example label</Label>
70
+ </div>
71
+ <div className="form-group-body">
72
+ <TextInput id={inputId} value={value} onChange={handleChange} {...args} />
73
+ </div>
74
+ </div>
75
+ </form>
76
+ )
77
+ }
78
+
79
+ export const WithLeadingIcon = (args: TextInputProps) => {
80
+ const [value, setValue] = useState('')
81
+
82
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
83
+ setValue(event.target.value)
84
+ }
85
+
86
+ const inputId = 'basic-text-input-with-leading-icon'
87
+
88
+ return (
89
+ <form>
90
+ <Label htmlFor={inputId}>Example label</Label>
91
+ <br />
92
+ <TextInput icon={CheckIcon} id={inputId} value={value} onChange={handleChange} type="password" {...args} />
93
+ </form>
94
+ )
95
+ }
96
+
97
+ export const Password = (args: TextInputProps) => {
98
+ const [value, setValue] = useState('')
99
+
100
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
101
+ setValue(event.target.value)
102
+ }
103
+
104
+ const inputId = 'basic-text-input-as-password'
105
+
106
+ return (
107
+ <form>
108
+ <Label htmlFor={inputId}>Password</Label>
109
+ <br />
110
+ <TextInput type="password" id={inputId} value={value} onChange={handleChange} {...args} />
111
+ </form>
112
+ )
113
+ }
@@ -7,6 +7,7 @@ import {BaseStyles, ThemeProvider} from '..'
7
7
  import Box from '../Box'
8
8
  import Token, {TokenProps} from '../Token/Token'
9
9
  import Text from '../Text'
10
+ import {GitBranchIcon} from '@primer/octicons-react'
10
11
 
11
12
  export default {
12
13
  title: 'Tokens/Default',
@@ -29,7 +30,7 @@ export default {
29
30
  ]
30
31
  } as Meta
31
32
 
32
- const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove']
33
+ const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove', 'leadingVisual']
33
34
 
34
35
  const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) => (
35
36
  <Box
@@ -94,6 +95,16 @@ export const Interactive = (args: Omit<TokenProps, 'ref' | 'text'>) => {
94
95
  }
95
96
  Interactive.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']}}
96
97
 
98
+ export const WithLeadingVisual = (args: Omit<TokenProps, 'ref'>) => {
99
+ return (
100
+ <ExampleCollectionContainer>
101
+ <Token {...args} leadingVisual={() => <GitBranchIcon />} />
102
+ </ExampleCollectionContainer>
103
+ )
104
+ }
105
+ WithLeadingVisual.storyName = 'with leadingVisual'
106
+ WithLeadingVisual.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton']}}
107
+
97
108
  export const WithOnRemoveFn = (args: Omit<TokenProps, 'ref'>) => {
98
109
  return (
99
110
  <ExampleCollectionContainer>
@@ -1,4 +1,10 @@
1
1
  // Produces a union of dot-delimited keypaths to the string values in a nested object:
2
2
  export type KeyPaths<O extends Record<string, unknown>> = {
3
- [K in keyof O]: K extends string ? (O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}`) : never
3
+ [K in keyof O]: K extends string
4
+ ? O[K] extends string
5
+ ? `${K}`
6
+ : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
7
+ // @ts-ignore TypeScript has bested me, but the KeyPaths type is tested.
8
+ `${K}.${KeyPaths<O[K]>}`
9
+ : never
4
10
  }[keyof O]
@@ -0,0 +1,10 @@
1
+ import {useEffect, useLayoutEffect} from 'react'
2
+
3
+ const useIsomorphicLayoutEffect =
4
+ typeof window !== 'undefined' &&
5
+ typeof window.document !== 'undefined' &&
6
+ typeof window.document.createElement !== 'undefined'
7
+ ? useLayoutEffect
8
+ : useEffect
9
+
10
+ export default useIsomorphicLayoutEffect