@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.
- package/.storybook/main.js +7 -9
- package/.storybook/preview.js +5 -1
- package/CHANGELOG.md +23 -1
- package/dist/browser.esm.js +623 -620
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +164 -161
- package/dist/browser.umd.js.map +1 -1
- package/docs/content/ActionList2.mdx +354 -0
- package/docs/content/FilterList.md +2 -2
- package/docs/content/TextInputWithTokens.mdx +114 -0
- package/docs/content/getting-started.md +1 -1
- package/docs/content/theming.md +23 -0
- package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +1 -3
- package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +1 -1
- package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +17 -0
- package/lib/ActionList/Header.js +1 -1
- package/lib/ActionList2/Description.d.ts +12 -0
- package/lib/ActionList2/Description.js +53 -0
- package/lib/ActionList2/Divider.d.ts +5 -0
- package/lib/ActionList2/Divider.js +35 -0
- package/lib/ActionList2/Group.d.ts +11 -0
- package/lib/ActionList2/Group.js +57 -0
- package/lib/ActionList2/Header.d.ts +26 -0
- package/lib/ActionList2/Header.js +55 -0
- package/lib/ActionList2/Item.d.ts +63 -0
- package/lib/ActionList2/Item.js +234 -0
- package/lib/ActionList2/LinkItem.d.ts +17 -0
- package/lib/ActionList2/LinkItem.js +57 -0
- package/lib/ActionList2/List.d.ts +26 -0
- package/lib/ActionList2/List.js +59 -0
- package/lib/ActionList2/Selection.d.ts +5 -0
- package/lib/ActionList2/Selection.js +70 -0
- package/lib/ActionList2/Visuals.d.ts +9 -0
- package/lib/ActionList2/Visuals.js +90 -0
- package/lib/ActionList2/index.d.ts +36 -0
- package/lib/ActionList2/index.js +47 -0
- package/lib/Autocomplete/Autocomplete.d.ts +4 -4
- package/lib/Autocomplete/AutocompleteInput.d.ts +4 -4
- package/lib/Button/Button.d.ts +5 -5
- package/lib/Button/ButtonBase.d.ts +1 -1
- package/lib/Button/ButtonClose.d.ts +3 -3
- package/lib/Button/ButtonDanger.d.ts +5 -5
- package/lib/Button/ButtonInvisible.d.ts +5 -5
- package/lib/Button/ButtonOutline.d.ts +5 -5
- package/lib/Button/ButtonPrimary.d.ts +5 -5
- package/lib/CircleBadge.d.ts +2 -2
- package/lib/CircleOcticon.d.ts +4 -4
- package/lib/Dialog.d.ts +4 -4
- package/lib/Dropdown.d.ts +16 -16
- package/lib/DropdownMenu/DropdownButton.d.ts +6 -6
- package/lib/FilterList.d.ts +3 -3
- package/lib/Flash.d.ts +1 -1
- package/lib/Label.d.ts +1 -1
- package/lib/Overlay.js +3 -1
- package/lib/Portal/Portal.js +3 -2
- package/lib/Position.d.ts +4 -4
- package/lib/ProgressBar.d.ts +1 -1
- package/lib/SelectMenu/SelectMenu.d.ts +24 -24
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/TextInputWithTokens.d.ts +8 -4
- package/lib/TextInputWithTokens.js +61 -8
- package/lib/Timeline.d.ts +4 -4
- package/lib/Token/AvatarToken.d.ts +1 -1
- package/lib/Token/IssueLabelToken.d.ts +1 -1
- package/lib/Token/Token.d.ts +1 -1
- package/lib/_TextInputWrapper.d.ts +1 -1
- package/lib/_TextInputWrapper.js +2 -2
- package/lib/__tests__/ActionList2.test.d.ts +1 -0
- package/lib/__tests__/ActionList2.test.js +53 -0
- package/lib/__tests__/AnchoredOverlay.test.js +4 -2
- package/lib/__tests__/KeyPaths.types.test.d.ts +11 -0
- package/lib/__tests__/KeyPaths.types.test.js +10 -0
- package/lib/__tests__/TextInputWithTokens.test.js +138 -7
- package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
- package/lib/__tests__/utils/createSlots.test.js +75 -0
- package/lib/hooks/useAnchoredPosition.js +3 -2
- package/lib/hooks/useCombinedRefs.d.ts +2 -2
- package/lib/hooks/useCombinedRefs.js +4 -6
- package/lib/hooks/useResizeObserver.js +2 -2
- package/lib/stories/ActionList2.stories.js +907 -0
- package/lib/stories/TextInput.stories.js +144 -0
- package/lib/stories/TextInputWithTokens.stories.js +18 -1
- package/lib/stories/Token.stories.js +19 -2
- package/lib/sx.d.ts +10 -2
- package/lib/sx.js +8 -0
- package/lib/theme-preval.js +81 -2
- package/lib/theme.d.ts +78 -0
- package/lib/theme.js +3 -1
- package/lib/unreleased.d.ts +7 -0
- package/lib/unreleased.js +18 -0
- package/lib/utils/create-slots.d.ts +17 -0
- package/lib/utils/create-slots.js +105 -0
- package/lib/utils/testing.d.ts +14 -1
- package/lib/utils/types/KeyPaths.d.ts +3 -0
- package/lib/utils/types/KeyPaths.js +1 -0
- package/lib/utils/use-force-update.d.ts +1 -0
- package/lib/utils/use-force-update.js +19 -0
- package/lib/utils/useIsomorphicLayoutEffect.d.ts +3 -0
- package/lib/utils/useIsomorphicLayoutEffect.js +12 -0
- package/lib-esm/ActionList/Header.js +1 -1
- package/lib-esm/ActionList2/Description.d.ts +12 -0
- package/lib-esm/ActionList2/Description.js +37 -0
- package/lib-esm/ActionList2/Divider.d.ts +5 -0
- package/lib-esm/ActionList2/Divider.js +23 -0
- package/lib-esm/ActionList2/Group.d.ts +11 -0
- package/lib-esm/ActionList2/Group.js +40 -0
- package/lib-esm/ActionList2/Header.d.ts +26 -0
- package/lib-esm/ActionList2/Header.js +44 -0
- package/lib-esm/ActionList2/Item.d.ts +63 -0
- package/lib-esm/ActionList2/Item.js +201 -0
- package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
- package/lib-esm/ActionList2/LinkItem.js +43 -0
- package/lib-esm/ActionList2/List.d.ts +26 -0
- package/lib-esm/ActionList2/List.js +37 -0
- package/lib-esm/ActionList2/Selection.d.ts +5 -0
- package/lib-esm/ActionList2/Selection.js +52 -0
- package/lib-esm/ActionList2/Visuals.d.ts +9 -0
- package/lib-esm/ActionList2/Visuals.js +68 -0
- package/lib-esm/ActionList2/index.d.ts +36 -0
- package/lib-esm/ActionList2/index.js +33 -0
- package/lib-esm/Autocomplete/Autocomplete.d.ts +4 -4
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +4 -4
- package/lib-esm/Button/Button.d.ts +5 -5
- package/lib-esm/Button/ButtonBase.d.ts +1 -1
- package/lib-esm/Button/ButtonClose.d.ts +3 -3
- package/lib-esm/Button/ButtonDanger.d.ts +5 -5
- package/lib-esm/Button/ButtonInvisible.d.ts +5 -5
- package/lib-esm/Button/ButtonOutline.d.ts +5 -5
- package/lib-esm/Button/ButtonPrimary.d.ts +5 -5
- package/lib-esm/CircleBadge.d.ts +2 -2
- package/lib-esm/CircleOcticon.d.ts +4 -4
- package/lib-esm/Dialog.d.ts +4 -4
- package/lib-esm/Dropdown.d.ts +16 -16
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +6 -6
- package/lib-esm/FilterList.d.ts +3 -3
- package/lib-esm/Flash.d.ts +1 -1
- package/lib-esm/Label.d.ts +1 -1
- package/lib-esm/Overlay.js +2 -1
- package/lib-esm/Portal/Portal.js +2 -1
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/ProgressBar.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenu.d.ts +24 -24
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/TextInputWithTokens.d.ts +8 -4
- package/lib-esm/TextInputWithTokens.js +60 -8
- package/lib-esm/Timeline.d.ts +4 -4
- package/lib-esm/Token/AvatarToken.d.ts +1 -1
- package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
- package/lib-esm/Token/Token.d.ts +1 -1
- package/lib-esm/_TextInputWrapper.d.ts +1 -1
- package/lib-esm/_TextInputWrapper.js +2 -2
- package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
- package/lib-esm/__tests__/ActionList2.test.js +41 -0
- package/lib-esm/__tests__/AnchoredOverlay.test.js +4 -2
- package/lib-esm/__tests__/KeyPaths.types.test.d.ts +11 -0
- package/lib-esm/__tests__/KeyPaths.types.test.js +3 -0
- package/lib-esm/__tests__/TextInputWithTokens.test.js +132 -8
- package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
- package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
- package/lib-esm/hooks/useAnchoredPosition.js +2 -1
- package/lib-esm/hooks/useCombinedRefs.d.ts +2 -2
- package/lib-esm/hooks/useCombinedRefs.js +3 -2
- package/lib-esm/hooks/useResizeObserver.js +2 -2
- package/lib-esm/stories/ActionList2.stories.js +796 -0
- package/lib-esm/stories/TextInput.stories.js +117 -0
- package/lib-esm/stories/TextInputWithTokens.stories.js +14 -0
- package/lib-esm/stories/Token.stories.js +14 -1
- package/lib-esm/sx.d.ts +10 -2
- package/lib-esm/sx.js +3 -1
- package/lib-esm/theme-preval.js +81 -2
- package/lib-esm/theme.d.ts +78 -0
- package/lib-esm/theme.js +2 -1
- package/lib-esm/unreleased.d.ts +7 -0
- package/lib-esm/unreleased.js +8 -0
- package/lib-esm/utils/create-slots.d.ts +17 -0
- package/lib-esm/utils/create-slots.js +84 -0
- package/lib-esm/utils/testing.d.ts +14 -1
- package/lib-esm/utils/types/KeyPaths.d.ts +3 -0
- package/lib-esm/utils/types/KeyPaths.js +1 -0
- package/lib-esm/utils/use-force-update.d.ts +1 -0
- package/lib-esm/utils/use-force-update.js +6 -0
- package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
- package/lib-esm/utils/useIsomorphicLayoutEffect.js +3 -0
- package/migrating.md +1 -1
- package/package-lock.json +38098 -45
- package/package.json +7 -3
- package/script/build +2 -0
- package/src/ActionList/Header.tsx +1 -1
- package/src/ActionList2/Description.tsx +49 -0
- package/src/ActionList2/Divider.tsx +24 -0
- package/src/ActionList2/Group.tsx +34 -0
- package/src/ActionList2/Header.tsx +58 -0
- package/src/ActionList2/Item.tsx +223 -0
- package/src/ActionList2/LinkItem.tsx +49 -0
- package/src/ActionList2/List.tsx +55 -0
- package/src/ActionList2/Selection.tsx +40 -0
- package/src/ActionList2/Visuals.tsx +76 -0
- package/src/ActionList2/index.ts +39 -0
- package/src/Overlay.tsx +2 -1
- package/src/Portal/Portal.tsx +2 -1
- package/src/TextInputWithTokens.tsx +64 -8
- package/src/_TextInputWrapper.tsx +8 -0
- package/src/__tests__/ActionList2.test.tsx +47 -0
- package/src/__tests__/AnchoredOverlay.test.tsx +2 -2
- package/src/__tests__/KeyPaths.types.test.ts +14 -0
- package/src/__tests__/TextInputWithTokens.test.tsx +123 -1
- package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
- package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +35 -135
- package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +7 -0
- package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +6 -0
- package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +463 -0
- package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
- package/src/__tests__/utils/createSlots.test.tsx +74 -0
- package/src/hooks/useAnchoredPosition.ts +2 -1
- package/src/hooks/useCombinedRefs.ts +3 -3
- package/src/hooks/useResizeObserver.ts +2 -2
- package/src/stories/ActionList2.stories.tsx +1290 -0
- package/src/stories/Button.stories.tsx +1 -1
- package/src/stories/TextInput.stories.tsx +113 -0
- package/src/stories/TextInputWithTokens.stories.tsx +9 -0
- package/src/stories/Token.stories.tsx +12 -1
- package/src/sx.ts +17 -2
- package/src/theme-preval.js +1 -0
- package/src/theme.ts +86 -0
- package/src/unreleased.ts +9 -0
- package/src/utils/create-slots.tsx +96 -0
- package/src/utils/types/KeyPaths.ts +10 -0
- package/src/utils/use-force-update.ts +7 -0
- package/src/utils/useIsomorphicLayoutEffect.ts +10 -0
- 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?:
|
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
package/lib-esm/theme-preval.js
CHANGED
@@ -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
|
-
"
|
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
|
-
"
|
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",
|
package/lib-esm/theme.d.ts
CHANGED
@@ -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
@@ -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" | "
|
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 @@
|
|
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, 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
|
113
|
+
<Block sx={{color: 'bodytext', p: 4}}>
|
114
114
|
<Text fontSize={4}>Hello, world!</Text>
|
115
115
|
</Block>
|
116
116
|
</ThemeProvider>
|