@primer/components 31.0.2-rc.c7dafefb → 31.2.0-rc.25d7c83f

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 (230) hide show
  1. package/.storybook/main.js +7 -9
  2. package/.storybook/preview.js +5 -1
  3. package/CHANGELOG.md +23 -1
  4. package/dist/browser.esm.js +623 -620
  5. package/dist/browser.esm.js.map +1 -1
  6. package/dist/browser.umd.js +164 -161
  7. package/dist/browser.umd.js.map +1 -1
  8. package/docs/content/ActionList2.mdx +354 -0
  9. package/docs/content/FilterList.md +2 -2
  10. package/docs/content/TextInputWithTokens.mdx +114 -0
  11. package/docs/content/getting-started.md +1 -1
  12. package/docs/content/theming.md +23 -0
  13. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +1 -3
  14. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +1 -1
  15. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +17 -0
  16. package/lib/ActionList/Header.js +1 -1
  17. package/lib/ActionList2/Description.d.ts +12 -0
  18. package/lib/ActionList2/Description.js +53 -0
  19. package/lib/ActionList2/Divider.d.ts +5 -0
  20. package/lib/ActionList2/Divider.js +35 -0
  21. package/lib/ActionList2/Group.d.ts +11 -0
  22. package/lib/ActionList2/Group.js +57 -0
  23. package/lib/ActionList2/Header.d.ts +26 -0
  24. package/lib/ActionList2/Header.js +55 -0
  25. package/lib/ActionList2/Item.d.ts +63 -0
  26. package/lib/ActionList2/Item.js +234 -0
  27. package/lib/ActionList2/LinkItem.d.ts +17 -0
  28. package/lib/ActionList2/LinkItem.js +57 -0
  29. package/lib/ActionList2/List.d.ts +26 -0
  30. package/lib/ActionList2/List.js +59 -0
  31. package/lib/ActionList2/Selection.d.ts +5 -0
  32. package/lib/ActionList2/Selection.js +70 -0
  33. package/lib/ActionList2/Visuals.d.ts +9 -0
  34. package/lib/ActionList2/Visuals.js +90 -0
  35. package/lib/ActionList2/index.d.ts +36 -0
  36. package/lib/ActionList2/index.js +47 -0
  37. package/lib/Autocomplete/Autocomplete.d.ts +4 -4
  38. package/lib/Autocomplete/AutocompleteInput.d.ts +4 -4
  39. package/lib/Button/Button.d.ts +5 -5
  40. package/lib/Button/ButtonBase.d.ts +1 -1
  41. package/lib/Button/ButtonClose.d.ts +3 -3
  42. package/lib/Button/ButtonDanger.d.ts +5 -5
  43. package/lib/Button/ButtonInvisible.d.ts +5 -5
  44. package/lib/Button/ButtonOutline.d.ts +5 -5
  45. package/lib/Button/ButtonPrimary.d.ts +5 -5
  46. package/lib/CircleBadge.d.ts +2 -2
  47. package/lib/CircleOcticon.d.ts +4 -4
  48. package/lib/Dialog.d.ts +4 -4
  49. package/lib/Dropdown.d.ts +16 -16
  50. package/lib/DropdownMenu/DropdownButton.d.ts +6 -6
  51. package/lib/FilterList.d.ts +3 -3
  52. package/lib/Flash.d.ts +1 -1
  53. package/lib/Label.d.ts +1 -1
  54. package/lib/Overlay.js +3 -1
  55. package/lib/Portal/Portal.js +3 -2
  56. package/lib/Position.d.ts +4 -4
  57. package/lib/ProgressBar.d.ts +1 -1
  58. package/lib/SelectMenu/SelectMenu.d.ts +24 -24
  59. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  60. package/lib/TextInputWithTokens.d.ts +8 -4
  61. package/lib/TextInputWithTokens.js +61 -8
  62. package/lib/Timeline.d.ts +4 -4
  63. package/lib/Token/AvatarToken.d.ts +1 -1
  64. package/lib/Token/IssueLabelToken.d.ts +1 -1
  65. package/lib/Token/Token.d.ts +1 -1
  66. package/lib/_TextInputWrapper.d.ts +1 -1
  67. package/lib/_TextInputWrapper.js +2 -2
  68. package/lib/__tests__/ActionList2.test.d.ts +1 -0
  69. package/lib/__tests__/ActionList2.test.js +53 -0
  70. package/lib/__tests__/AnchoredOverlay.test.js +4 -2
  71. package/lib/__tests__/KeyPaths.types.test.d.ts +11 -0
  72. package/lib/__tests__/KeyPaths.types.test.js +10 -0
  73. package/lib/__tests__/TextInputWithTokens.test.js +138 -7
  74. package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
  75. package/lib/__tests__/utils/createSlots.test.js +75 -0
  76. package/lib/hooks/useAnchoredPosition.js +3 -2
  77. package/lib/hooks/useCombinedRefs.d.ts +2 -2
  78. package/lib/hooks/useCombinedRefs.js +4 -6
  79. package/lib/hooks/useResizeObserver.js +2 -2
  80. package/lib/stories/ActionList2.stories.js +907 -0
  81. package/lib/stories/TextInput.stories.js +144 -0
  82. package/lib/stories/TextInputWithTokens.stories.js +18 -1
  83. package/lib/stories/Token.stories.js +19 -2
  84. package/lib/sx.d.ts +10 -2
  85. package/lib/sx.js +8 -0
  86. package/lib/theme-preval.js +81 -2
  87. package/lib/theme.d.ts +78 -0
  88. package/lib/theme.js +3 -1
  89. package/lib/unreleased.d.ts +7 -0
  90. package/lib/unreleased.js +18 -0
  91. package/lib/utils/create-slots.d.ts +17 -0
  92. package/lib/utils/create-slots.js +105 -0
  93. package/lib/utils/testing.d.ts +14 -1
  94. package/lib/utils/types/KeyPaths.d.ts +3 -0
  95. package/lib/utils/types/KeyPaths.js +1 -0
  96. package/lib/utils/use-force-update.d.ts +1 -0
  97. package/lib/utils/use-force-update.js +19 -0
  98. package/lib/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  99. package/lib/utils/useIsomorphicLayoutEffect.js +12 -0
  100. package/lib-esm/ActionList/Header.js +1 -1
  101. package/lib-esm/ActionList2/Description.d.ts +12 -0
  102. package/lib-esm/ActionList2/Description.js +37 -0
  103. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  104. package/lib-esm/ActionList2/Divider.js +23 -0
  105. package/lib-esm/ActionList2/Group.d.ts +11 -0
  106. package/lib-esm/ActionList2/Group.js +40 -0
  107. package/lib-esm/ActionList2/Header.d.ts +26 -0
  108. package/lib-esm/ActionList2/Header.js +44 -0
  109. package/lib-esm/ActionList2/Item.d.ts +63 -0
  110. package/lib-esm/ActionList2/Item.js +201 -0
  111. package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
  112. package/lib-esm/ActionList2/LinkItem.js +43 -0
  113. package/lib-esm/ActionList2/List.d.ts +26 -0
  114. package/lib-esm/ActionList2/List.js +37 -0
  115. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  116. package/lib-esm/ActionList2/Selection.js +52 -0
  117. package/lib-esm/ActionList2/Visuals.d.ts +9 -0
  118. package/lib-esm/ActionList2/Visuals.js +68 -0
  119. package/lib-esm/ActionList2/index.d.ts +36 -0
  120. package/lib-esm/ActionList2/index.js +33 -0
  121. package/lib-esm/Autocomplete/Autocomplete.d.ts +4 -4
  122. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +4 -4
  123. package/lib-esm/Button/Button.d.ts +5 -5
  124. package/lib-esm/Button/ButtonBase.d.ts +1 -1
  125. package/lib-esm/Button/ButtonClose.d.ts +3 -3
  126. package/lib-esm/Button/ButtonDanger.d.ts +5 -5
  127. package/lib-esm/Button/ButtonInvisible.d.ts +5 -5
  128. package/lib-esm/Button/ButtonOutline.d.ts +5 -5
  129. package/lib-esm/Button/ButtonPrimary.d.ts +5 -5
  130. package/lib-esm/CircleBadge.d.ts +2 -2
  131. package/lib-esm/CircleOcticon.d.ts +4 -4
  132. package/lib-esm/Dialog.d.ts +4 -4
  133. package/lib-esm/Dropdown.d.ts +16 -16
  134. package/lib-esm/DropdownMenu/DropdownButton.d.ts +6 -6
  135. package/lib-esm/FilterList.d.ts +3 -3
  136. package/lib-esm/Flash.d.ts +1 -1
  137. package/lib-esm/Label.d.ts +1 -1
  138. package/lib-esm/Overlay.js +2 -1
  139. package/lib-esm/Portal/Portal.js +2 -1
  140. package/lib-esm/Position.d.ts +4 -4
  141. package/lib-esm/ProgressBar.d.ts +1 -1
  142. package/lib-esm/SelectMenu/SelectMenu.d.ts +24 -24
  143. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  144. package/lib-esm/TextInputWithTokens.d.ts +8 -4
  145. package/lib-esm/TextInputWithTokens.js +60 -8
  146. package/lib-esm/Timeline.d.ts +4 -4
  147. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  148. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  149. package/lib-esm/Token/Token.d.ts +1 -1
  150. package/lib-esm/_TextInputWrapper.d.ts +1 -1
  151. package/lib-esm/_TextInputWrapper.js +2 -2
  152. package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
  153. package/lib-esm/__tests__/ActionList2.test.js +41 -0
  154. package/lib-esm/__tests__/AnchoredOverlay.test.js +4 -2
  155. package/lib-esm/__tests__/KeyPaths.types.test.d.ts +11 -0
  156. package/lib-esm/__tests__/KeyPaths.types.test.js +3 -0
  157. package/lib-esm/__tests__/TextInputWithTokens.test.js +132 -8
  158. package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
  159. package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
  160. package/lib-esm/hooks/useAnchoredPosition.js +2 -1
  161. package/lib-esm/hooks/useCombinedRefs.d.ts +2 -2
  162. package/lib-esm/hooks/useCombinedRefs.js +3 -2
  163. package/lib-esm/hooks/useResizeObserver.js +2 -2
  164. package/lib-esm/stories/ActionList2.stories.js +796 -0
  165. package/lib-esm/stories/TextInput.stories.js +117 -0
  166. package/lib-esm/stories/TextInputWithTokens.stories.js +14 -0
  167. package/lib-esm/stories/Token.stories.js +14 -1
  168. package/lib-esm/sx.d.ts +10 -2
  169. package/lib-esm/sx.js +3 -1
  170. package/lib-esm/theme-preval.js +81 -2
  171. package/lib-esm/theme.d.ts +78 -0
  172. package/lib-esm/theme.js +2 -1
  173. package/lib-esm/unreleased.d.ts +7 -0
  174. package/lib-esm/unreleased.js +8 -0
  175. package/lib-esm/utils/create-slots.d.ts +17 -0
  176. package/lib-esm/utils/create-slots.js +84 -0
  177. package/lib-esm/utils/testing.d.ts +14 -1
  178. package/lib-esm/utils/types/KeyPaths.d.ts +3 -0
  179. package/lib-esm/utils/types/KeyPaths.js +1 -0
  180. package/lib-esm/utils/use-force-update.d.ts +1 -0
  181. package/lib-esm/utils/use-force-update.js +6 -0
  182. package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  183. package/lib-esm/utils/useIsomorphicLayoutEffect.js +3 -0
  184. package/migrating.md +1 -1
  185. package/package-lock.json +38098 -45
  186. package/package.json +7 -3
  187. package/script/build +2 -0
  188. package/src/ActionList/Header.tsx +1 -1
  189. package/src/ActionList2/Description.tsx +49 -0
  190. package/src/ActionList2/Divider.tsx +24 -0
  191. package/src/ActionList2/Group.tsx +34 -0
  192. package/src/ActionList2/Header.tsx +58 -0
  193. package/src/ActionList2/Item.tsx +223 -0
  194. package/src/ActionList2/LinkItem.tsx +49 -0
  195. package/src/ActionList2/List.tsx +55 -0
  196. package/src/ActionList2/Selection.tsx +40 -0
  197. package/src/ActionList2/Visuals.tsx +76 -0
  198. package/src/ActionList2/index.ts +39 -0
  199. package/src/Overlay.tsx +2 -1
  200. package/src/Portal/Portal.tsx +2 -1
  201. package/src/TextInputWithTokens.tsx +64 -8
  202. package/src/_TextInputWrapper.tsx +8 -0
  203. package/src/__tests__/ActionList2.test.tsx +47 -0
  204. package/src/__tests__/AnchoredOverlay.test.tsx +2 -2
  205. package/src/__tests__/KeyPaths.types.test.ts +14 -0
  206. package/src/__tests__/TextInputWithTokens.test.tsx +123 -1
  207. package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
  208. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +35 -135
  209. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +7 -0
  210. package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +6 -0
  211. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +463 -0
  212. package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
  213. package/src/__tests__/utils/createSlots.test.tsx +74 -0
  214. package/src/hooks/useAnchoredPosition.ts +2 -1
  215. package/src/hooks/useCombinedRefs.ts +3 -3
  216. package/src/hooks/useResizeObserver.ts +2 -2
  217. package/src/stories/ActionList2.stories.tsx +1290 -0
  218. package/src/stories/Button.stories.tsx +1 -1
  219. package/src/stories/TextInput.stories.tsx +113 -0
  220. package/src/stories/TextInputWithTokens.stories.tsx +9 -0
  221. package/src/stories/Token.stories.tsx +12 -1
  222. package/src/sx.ts +17 -2
  223. package/src/theme-preval.js +1 -0
  224. package/src/theme.ts +86 -0
  225. package/src/unreleased.ts +9 -0
  226. package/src/utils/create-slots.tsx +96 -0
  227. package/src/utils/types/KeyPaths.ts +10 -0
  228. package/src/utils/use-force-update.ts +7 -0
  229. package/src/utils/useIsomorphicLayoutEffect.ts +10 -0
  230. package/stats.html +1 -1
@@ -0,0 +1,117 @@
1
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
3
+ import React, { useState } from 'react';
4
+ import { BaseStyles, Box, ThemeProvider, Text } from '..';
5
+ import TextInput from '../TextInput';
6
+ import { CheckIcon } from '@primer/octicons-react';
7
+ export default {
8
+ title: 'Forms/Text Input',
9
+ component: TextInput,
10
+ decorators: [Story => {
11
+ return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Box, {
12
+ paddingTop: 5
13
+ }, Story())));
14
+ }],
15
+ argTypes: {
16
+ sx: {
17
+ table: {
18
+ disable: true
19
+ }
20
+ },
21
+ block: {
22
+ name: 'Block',
23
+ defaultValue: false,
24
+ control: {
25
+ type: 'boolean'
26
+ }
27
+ },
28
+ disabled: {
29
+ name: 'Disabled',
30
+ defaultValue: false,
31
+ control: {
32
+ type: 'boolean'
33
+ }
34
+ },
35
+ variant: {
36
+ name: 'Variants',
37
+ options: ['small', 'medium', 'large'],
38
+ control: {
39
+ type: 'radio'
40
+ }
41
+ }
42
+ }
43
+ };
44
+
45
+ const Label = ({
46
+ htmlFor,
47
+ children
48
+ }) => /*#__PURE__*/React.createElement(Text, {
49
+ as: "label",
50
+ htmlFor: htmlFor,
51
+ sx: {
52
+ fontWeight: 600,
53
+ fontSize: 14
54
+ }
55
+ }, children);
56
+
57
+ Label.displayName = "Label";
58
+ export const Default = args => {
59
+ const [value, setValue] = useState('');
60
+
61
+ const handleChange = event => {
62
+ setValue(event.target.value);
63
+ };
64
+
65
+ const inputId = 'basic-text-input';
66
+ return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement("div", {
67
+ className: "form-group"
68
+ }, /*#__PURE__*/React.createElement("div", {
69
+ className: "form-group-header"
70
+ }, /*#__PURE__*/React.createElement(Label, {
71
+ htmlFor: inputId
72
+ }, "Example label")), /*#__PURE__*/React.createElement("div", {
73
+ className: "form-group-body"
74
+ }, /*#__PURE__*/React.createElement(TextInput, _extends({
75
+ id: inputId,
76
+ value: value,
77
+ onChange: handleChange
78
+ }, args)))));
79
+ };
80
+ Default.displayName = "Default";
81
+ export const WithLeadingIcon = args => {
82
+ const [value, setValue] = useState('');
83
+
84
+ const handleChange = event => {
85
+ setValue(event.target.value);
86
+ };
87
+
88
+ const inputId = 'basic-text-input-with-leading-icon';
89
+ return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement(Label, {
90
+ htmlFor: inputId
91
+ }, "Example label"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(TextInput, _extends({
92
+ icon: CheckIcon,
93
+ id: inputId,
94
+ value: value,
95
+ onChange: handleChange,
96
+ type: "password"
97
+ }, args)));
98
+ };
99
+ WithLeadingIcon.displayName = "WithLeadingIcon";
100
+ export const Password = args => {
101
+ const [value, setValue] = useState('');
102
+
103
+ const handleChange = event => {
104
+ setValue(event.target.value);
105
+ };
106
+
107
+ const inputId = 'basic-text-input-as-password';
108
+ return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement(Label, {
109
+ htmlFor: inputId
110
+ }, "Password"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(TextInput, _extends({
111
+ type: "password",
112
+ id: inputId,
113
+ value: value,
114
+ onChange: handleChange
115
+ }, args)));
116
+ };
117
+ Password.displayName = "Password";
@@ -171,6 +171,20 @@ export const TokenRemoveButtonsHidden = () => {
171
171
  });
172
172
  };
173
173
  TokenRemoveButtonsHidden.displayName = "TokenRemoveButtonsHidden";
174
+ export const WithVisibleTokenCount = () => {
175
+ const [tokens, setTokens] = useState([...mockTokens].slice(0, 5));
176
+
177
+ const onTokenRemove = tokenId => {
178
+ setTokens(tokens.filter(token => token.id !== tokenId));
179
+ };
180
+
181
+ return /*#__PURE__*/React.createElement(TextInputWithTokens, {
182
+ tokens: tokens,
183
+ onTokenRemove: onTokenRemove,
184
+ visibleTokenCount: 2
185
+ });
186
+ };
187
+ WithVisibleTokenCount.displayName = "WithVisibleTokenCount";
174
188
  export const Unstyled = () => {
175
189
  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2));
176
190
 
@@ -7,6 +7,7 @@ import { BaseStyles, ThemeProvider } from '..';
7
7
  import Box from '../Box';
8
8
  import Token from '../Token/Token';
9
9
  import Text from '../Text';
10
+ import { GitBranchIcon } from '@primer/octicons-react';
10
11
  export default {
11
12
  title: 'Tokens/Default',
12
13
  component: Token,
@@ -19,7 +20,7 @@ export default {
19
20
  return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
20
21
  }]
21
22
  };
22
- const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove'];
23
+ const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove', 'leadingVisual'];
23
24
 
24
25
  const SingleExampleContainer = ({
25
26
  children,
@@ -91,6 +92,18 @@ Interactive.parameters = {
91
92
  exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']
92
93
  }
93
94
  };
95
+ export const WithLeadingVisual = args => {
96
+ return /*#__PURE__*/React.createElement(ExampleCollectionContainer, null, /*#__PURE__*/React.createElement(Token, _extends({}, args, {
97
+ leadingVisual: () => /*#__PURE__*/React.createElement(GitBranchIcon, null)
98
+ })));
99
+ };
100
+ WithLeadingVisual.displayName = "WithLeadingVisual";
101
+ WithLeadingVisual.storyName = 'with leadingVisual';
102
+ WithLeadingVisual.parameters = {
103
+ controls: {
104
+ exclude: [...excludedControlKeys, 'hideRemoveButton']
105
+ }
106
+ };
94
107
  export const WithOnRemoveFn = args => {
95
108
  return /*#__PURE__*/React.createElement(ExampleCollectionContainer, null, /*#__PURE__*/React.createElement(SingleExampleContainer, {
96
109
  label: "w/ onRemove passed"
package/lib-esm/sx.d.ts CHANGED
@@ -1,6 +1,14 @@
1
- import { SystemStyleObject } from '@styled-system/css';
1
+ import { SystemCssProperties, SystemStyleObject } from '@styled-system/css';
2
+ import { ThemeColorPaths, ThemeShadowPaths } from './theme';
3
+ import { ColorProps, ShadowProps } from 'styled-system';
4
+ import merge from 'deepmerge';
5
+ export declare type BetterCssProperties = {
6
+ [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof ShadowProps ? ThemeShadowPaths | SystemCssProperties[K] : SystemCssProperties[K];
7
+ };
8
+ export declare type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject;
2
9
  export interface SxProp {
3
- sx?: SystemStyleObject;
10
+ sx?: BetterSystemStyleObject;
4
11
  }
5
12
  declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
6
13
  export default sx;
14
+ export { merge };
package/lib-esm/sx.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import css from '@styled-system/css';
2
+ import merge from 'deepmerge';
2
3
 
3
4
  const sx = props => css(props.sx);
4
5
 
5
- export default sx;
6
+ export default sx;
7
+ export { merge };
@@ -1,5 +1,6 @@
1
1
  // this file was prevaled
2
2
  // This file needs to be a JavaScript file using CommonJS to be compatiable with preval
3
+ // Cache bust: 2021-11-04 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
3
4
  module.exports = {
4
5
  "theme": {
5
6
  "animation": {
@@ -389,6 +390,19 @@ module.exports = {
389
390
  "icon": "#6e7781",
390
391
  "borderHover": "rgba(175,184,193,0.2)"
391
392
  },
393
+ "actionListItem": {
394
+ "inlineDivider": "rgba(208,215,222,0.48)",
395
+ "default": {
396
+ "hoverBg": "rgba(208,215,222,0.32)",
397
+ "activeBg": "rgba(208,215,222,0.48)",
398
+ "selectedBg": "rgba(208,215,222,0.24)"
399
+ },
400
+ "danger": {
401
+ "hoverBg": "rgba(255,235,233,0.64)",
402
+ "activeBg": "#FFEBE9",
403
+ "hoverText": "#cf222e"
404
+ }
405
+ },
392
406
  "fg": {
393
407
  "default": "#24292f",
394
408
  "muted": "#57606a",
@@ -515,7 +529,7 @@ module.exports = {
515
529
  }
516
530
  }
517
531
  },
518
- "light_protanopia": {
532
+ "light_colorblind": {
519
533
  "colors": {
520
534
  "canvasDefaultTransparent": "rgba(255,255,255,0)",
521
535
  "marketingIcon": {
@@ -872,6 +886,19 @@ module.exports = {
872
886
  "icon": "#6e7781",
873
887
  "borderHover": "rgba(175,184,193,0.2)"
874
888
  },
889
+ "actionListItem": {
890
+ "inlineDivider": "rgba(208,215,222,0.48)",
891
+ "default": {
892
+ "hoverBg": "rgba(208,215,222,0.32)",
893
+ "activeBg": "rgba(208,215,222,0.48)",
894
+ "selectedBg": "rgba(208,215,222,0.24)"
895
+ },
896
+ "danger": {
897
+ "hoverBg": "rgba(254,254,72,0.64)",
898
+ "activeBg": "#fefe48",
899
+ "hoverText": "#ac5e00"
900
+ }
901
+ },
875
902
  "fg": {
876
903
  "default": "#24292f",
877
904
  "muted": "#57606a",
@@ -1355,6 +1382,19 @@ module.exports = {
1355
1382
  "icon": "#484f58",
1356
1383
  "borderHover": "rgba(110,118,129,0.4)"
1357
1384
  },
1385
+ "actionListItem": {
1386
+ "inlineDivider": "rgba(48,54,61,0.48)",
1387
+ "default": {
1388
+ "hoverBg": "rgba(177,186,196,0.12)",
1389
+ "activeBg": "rgba(177,186,196,0.2)",
1390
+ "selectedBg": "rgba(177,186,196,0.08)"
1391
+ },
1392
+ "danger": {
1393
+ "hoverBg": "rgba(248,81,73,0.16)",
1394
+ "activeBg": "rgba(248,81,73,0.24)",
1395
+ "hoverText": "#ff7b72"
1396
+ }
1397
+ },
1358
1398
  "fg": {
1359
1399
  "default": "#c9d1d9",
1360
1400
  "muted": "#8b949e",
@@ -1841,6 +1881,19 @@ module.exports = {
1841
1881
  "icon": "#545d68",
1842
1882
  "borderHover": "rgba(99,110,123,0.4)"
1843
1883
  },
1884
+ "actionListItem": {
1885
+ "inlineDivider": "rgba(68,76,86,0.48)",
1886
+ "default": {
1887
+ "hoverBg": "rgba(144,157,171,0.12)",
1888
+ "activeBg": "rgba(144,157,171,0.2)",
1889
+ "selectedBg": "rgba(144,157,171,0.08)"
1890
+ },
1891
+ "danger": {
1892
+ "hoverBg": "rgba(229,83,75,0.16)",
1893
+ "activeBg": "rgba(229,83,75,0.24)",
1894
+ "hoverText": "#f47067"
1895
+ }
1896
+ },
1844
1897
  "fg": {
1845
1898
  "default": "#adbac7",
1846
1899
  "muted": "#768390",
@@ -2327,6 +2380,19 @@ module.exports = {
2327
2380
  "icon": "#f0f3f6",
2328
2381
  "borderHover": "#bdc4cc"
2329
2382
  },
2383
+ "actionListItem": {
2384
+ "inlineDivider": "#7a828e",
2385
+ "default": {
2386
+ "hoverBg": "rgba(217,222,227,0.12)",
2387
+ "activeBg": "rgba(217,222,227,0.24)",
2388
+ "selectedBg": "rgba(217,222,227,0.08)"
2389
+ },
2390
+ "danger": {
2391
+ "hoverBg": "#ff6a69",
2392
+ "activeBg": "#ff4445",
2393
+ "hoverText": "#0a0c10"
2394
+ }
2395
+ },
2330
2396
  "fg": {
2331
2397
  "default": "#f0f3f6",
2332
2398
  "muted": "#f0f3f6",
@@ -2456,7 +2522,7 @@ module.exports = {
2456
2522
  }
2457
2523
  }
2458
2524
  },
2459
- "dark_protanopia": {
2525
+ "dark_colorblind": {
2460
2526
  "colors": {
2461
2527
  "canvasDefaultTransparent": "rgba(13,17,23,0)",
2462
2528
  "marketingIcon": {
@@ -2813,6 +2879,19 @@ module.exports = {
2813
2879
  "icon": "#484f58",
2814
2880
  "borderHover": "rgba(110,118,129,0.4)"
2815
2881
  },
2882
+ "actionListItem": {
2883
+ "inlineDivider": "rgba(48,54,61,0.48)",
2884
+ "default": {
2885
+ "hoverBg": "rgba(177,186,196,0.12)",
2886
+ "activeBg": "rgba(177,186,196,0.2)",
2887
+ "selectedBg": "rgba(177,186,196,0.08)"
2888
+ },
2889
+ "danger": {
2890
+ "hoverBg": "rgba(195,128,0,0.16)",
2891
+ "activeBg": "rgba(195,128,0,0.24)",
2892
+ "hoverText": "#d69a00"
2893
+ }
2894
+ },
2816
2895
  "fg": {
2817
2896
  "default": "#c9d1d9",
2818
2897
  "muted": "#8b949e",
@@ -1,2 +1,80 @@
1
1
  import { theme } from './theme-preval';
2
+ import { KeyPaths } from './utils/types/KeyPaths';
2
3
  export default theme;
4
+ declare type ThemeColors = {
5
+ fg: {
6
+ default: string;
7
+ muted: string;
8
+ subtle: string;
9
+ onEmphasis: string;
10
+ };
11
+ canvas: {
12
+ default: string;
13
+ overlay: string;
14
+ inset: string;
15
+ subtle: string;
16
+ };
17
+ border: {
18
+ default: string;
19
+ muted: string;
20
+ subtle: string;
21
+ };
22
+ neutral: {
23
+ emphasisPlus: string;
24
+ emphasis: string;
25
+ muted: string;
26
+ subtle: string;
27
+ };
28
+ accent: {
29
+ fg: string;
30
+ emphasis: string;
31
+ muted: string;
32
+ subtle: string;
33
+ };
34
+ success: {
35
+ fg: string;
36
+ emphasis: string;
37
+ muted: string;
38
+ subtle: string;
39
+ };
40
+ attention: {
41
+ fg: string;
42
+ emphasis: string;
43
+ muted: string;
44
+ subtle: string;
45
+ };
46
+ severe: {
47
+ fg: string;
48
+ emphasis: string;
49
+ muted: string;
50
+ subtle: string;
51
+ };
52
+ danger: {
53
+ fg: string;
54
+ emphasis: string;
55
+ muted: string;
56
+ subtle: string;
57
+ };
58
+ done: {
59
+ fg: string;
60
+ emphasis: string;
61
+ muted: string;
62
+ subtle: string;
63
+ };
64
+ sponsors: {
65
+ fg: string;
66
+ emphasis: string;
67
+ muted: string;
68
+ subtle: string;
69
+ };
70
+ };
71
+ declare type ThemeShadows = {
72
+ shadow: {
73
+ small: string;
74
+ medium: string;
75
+ large: string;
76
+ extraLarge: string;
77
+ };
78
+ };
79
+ export declare type ThemeColorPaths = KeyPaths<ThemeColors>;
80
+ export declare type ThemeShadowPaths = KeyPaths<ThemeShadows>;
package/lib-esm/theme.js CHANGED
@@ -1,2 +1,3 @@
1
1
  import { theme } from './theme-preval';
2
- export default theme;
2
+ export default theme; // NOTE: for now, ThemeColors and ThemeShadows are handcrafted types. It would be nice if these
3
+ // were exports from primitives (or a different shape but derived from those exports).
@@ -0,0 +1,7 @@
1
+ /** This is the place where we keep components that are not part of the public
2
+ * api yet (not in main bundle). We don't recommend using it in production.
3
+ *
4
+ * But, they are published on npm and you can import them for experimentation/feedback.
5
+ * example: import {ActionList} from '@primer/components/unreleased
6
+ */
7
+ export * from './ActionList2';
@@ -0,0 +1,8 @@
1
+ /** This is the place where we keep components that are not part of the public
2
+ * api yet (not in main bundle). We don't recommend using it in production.
3
+ *
4
+ * But, they are published on npm and you can import them for experimentation/feedback.
5
+ * example: import {ActionList} from '@primer/components/unreleased
6
+ */
7
+ // Components
8
+ export * from './ActionList2';
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ /** createSlots is a factory that can create a
3
+ * typesafe Slots + Slot pair to use in a component definition
4
+ * For example: ActionList.Item uses createSlots to get a Slots wrapper
5
+ * + Slot component that is used by LeadingVisual, Description
6
+ */
7
+ declare const createSlots: <SlotNames extends string>(slotNames: SlotNames[]) => {
8
+ Slots: React.FC<{
9
+ context?: Record<string, unknown> | undefined;
10
+ children: (slots: { [key in SlotNames]?: React.ReactNode; }) => React.ReactNode;
11
+ }>;
12
+ Slot: React.FC<{
13
+ name: SlotNames;
14
+ children: React.ReactNode;
15
+ }>;
16
+ };
17
+ export default createSlots;
@@ -0,0 +1,84 @@
1
+ import React from 'react';
2
+ import { useForceUpdate } from './use-force-update';
3
+ /** createSlots is a factory that can create a
4
+ * typesafe Slots + Slot pair to use in a component definition
5
+ * For example: ActionList.Item uses createSlots to get a Slots wrapper
6
+ * + Slot component that is used by LeadingVisual, Description
7
+ */
8
+
9
+ const createSlots = slotNames => {
10
+ const SlotsContext = /*#__PURE__*/React.createContext({
11
+ registerSlot: () => null,
12
+ unregisterSlot: () => null,
13
+ context: {}
14
+ });
15
+ /** Slots uses a Double render strategy inspired by [reach-ui/descendants](https://github.com/reach/reach-ui/tree/develop/packages/descendants)
16
+ * Slot registers themself with the Slots parent.
17
+ * When all the children have mounted = registered themselves in slot,
18
+ * we re-render the parent component to render with slots
19
+ */
20
+
21
+ const Slots = ({
22
+ context = {},
23
+ children
24
+ }) => {
25
+ // initialise slots
26
+ const slotsDefinition = {};
27
+ slotNames.map(name => slotsDefinition[name] = null);
28
+ const slotsRef = React.useRef(slotsDefinition);
29
+ const rerenderWithSlots = useForceUpdate();
30
+ const [isMounted, setIsMounted] = React.useState(false); // fires after all the effects in children
31
+
32
+ React.useEffect(() => {
33
+ rerenderWithSlots();
34
+ setIsMounted(true);
35
+ }, [rerenderWithSlots]);
36
+ const registerSlot = React.useCallback((name, contents) => {
37
+ slotsRef.current[name] = contents; // don't render until the component mounts = all slots are registered
38
+
39
+ if (isMounted) rerenderWithSlots();
40
+ }, [isMounted, rerenderWithSlots]); // Slot can be removed from the tree as well,
41
+ // we need to unregister them from the slot
42
+
43
+ const unregisterSlot = React.useCallback(name => {
44
+ slotsRef.current[name] = null;
45
+ rerenderWithSlots();
46
+ }, [rerenderWithSlots]);
47
+ /**
48
+ * Slots uses a render prop API so abstract the
49
+ * implementation detail of using a context provider.
50
+ */
51
+
52
+ const slots = slotsRef.current;
53
+ return /*#__PURE__*/React.createElement(SlotsContext.Provider, {
54
+ value: {
55
+ registerSlot,
56
+ unregisterSlot,
57
+ context
58
+ }
59
+ }, children(slots));
60
+ };
61
+
62
+ const Slot = ({
63
+ name,
64
+ children
65
+ }) => {
66
+ const {
67
+ registerSlot,
68
+ unregisterSlot,
69
+ context
70
+ } = React.useContext(SlotsContext);
71
+ React.useEffect(() => {
72
+ registerSlot(name, typeof children === 'function' ? children(context) : children);
73
+ return () => unregisterSlot(name);
74
+ }, [name, children, registerSlot, unregisterSlot, context]);
75
+ return null;
76
+ };
77
+
78
+ return {
79
+ Slots,
80
+ Slot
81
+ };
82
+ };
83
+
84
+ export default createSlots;
@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
53
53
  xlarge: string;
54
54
  };
55
55
  space: string[];
56
- colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
56
+ colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
57
57
  canvasDefaultTransparent: string;
58
58
  marketingIcon: {
59
59
  primary: string;
@@ -434,6 +434,19 @@ export declare function render(component: React.ReactElement, theme?: {
434
434
  icon: string;
435
435
  borderHover: string;
436
436
  };
437
+ actionListItem: {
438
+ inlineDivider: string;
439
+ default: {
440
+ hoverBg: string;
441
+ activeBg: string;
442
+ selectedBg: string;
443
+ };
444
+ danger: {
445
+ hoverBg: string;
446
+ activeBg: string;
447
+ hoverText: string;
448
+ };
449
+ };
437
450
  fg: {
438
451
  default: string;
439
452
  muted: string;
@@ -0,0 +1,3 @@
1
+ export declare type KeyPaths<O extends Record<string, unknown>> = {
2
+ [K in keyof O]: K extends string ? O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}` : never;
3
+ }[keyof O];
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export declare const useForceUpdate: () => () => void;
@@ -0,0 +1,6 @@
1
+ // Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
2
+ import React from 'react';
3
+ export const useForceUpdate = () => {
4
+ const [, rerender] = React.useState({});
5
+ return React.useCallback(() => rerender({}), []);
6
+ };
@@ -0,0 +1,3 @@
1
+ import { useEffect } from 'react';
2
+ declare const useIsomorphicLayoutEffect: typeof useEffect;
3
+ export default useIsomorphicLayoutEffect;
@@ -0,0 +1,3 @@
1
+ import { useEffect, useLayoutEffect } from 'react';
2
+ const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
3
+ export default useIsomorphicLayoutEffect;
package/migrating.md CHANGED
@@ -110,7 +110,7 @@ There are two ways to change the theme of @primer/components components:
110
110
 
111
111
  export default () => (
112
112
  <ThemeProvider theme={theme}>
113
- <Block color="bodytext" p={4}>
113
+ <Block sx={{color: 'bodytext', p: 4}}>
114
114
  <Text fontSize={4}>Hello, world!</Text>
115
115
  </Block>
116
116
  </ThemeProvider>