@primer/components 0.0.0-202111231117 → 0.0.0-202111245715
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/CHANGELOG.md +9 -3
- package/dist/browser.esm.js +586 -604
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +204 -222
- package/dist/browser.umd.js.map +1 -1
- package/lib/Autocomplete/AutocompleteMenu.js +13 -6
- package/lib/Avatar.d.ts +1 -2
- package/lib/Avatar.js +1 -1
- package/lib/BranchName.d.ts +1 -2
- package/lib/BranchName.js +1 -1
- package/lib/Checkbox.d.ts +1 -1
- package/lib/Details.d.ts +1 -2
- package/lib/Details.js +1 -3
- package/lib/Dropdown.d.ts +2 -66
- package/lib/Heading.d.ts +1 -2
- package/lib/Heading.js +1 -6
- package/lib/NewButton/button-base.d.ts +6 -0
- package/lib/NewButton/button-base.js +69 -0
- package/lib/NewButton/button-link.d.ts +26 -0
- package/lib/{ChoiceFieldset/ChoiceFieldLabel.js → NewButton/button-link.js} +14 -18
- package/lib/NewButton/button.d.ts +2 -11
- package/lib/NewButton/button.js +6 -283
- package/lib/NewButton/icon-button.d.ts +4 -0
- package/lib/NewButton/icon-button.js +57 -0
- package/lib/NewButton/index.d.ts +6 -11
- package/lib/NewButton/index.js +18 -0
- package/lib/NewButton/styles.d.ts +202 -0
- package/lib/NewButton/styles.js +248 -0
- package/lib/NewButton/types.d.ts +28 -8
- package/lib/NewButton/types.js +19 -1
- package/lib/ProgressBar.d.ts +16 -11
- package/lib/ProgressBar.js +6 -10
- package/lib/Spinner.d.ts +1 -2
- package/lib/Spinner.js +1 -3
- package/lib/index.d.ts +0 -4
- package/lib/index.js +0 -38
- package/lib-esm/Autocomplete/AutocompleteMenu.js +13 -3
- package/lib-esm/Avatar.d.ts +1 -2
- package/lib-esm/Avatar.js +2 -2
- package/lib-esm/BranchName.d.ts +1 -2
- package/lib-esm/BranchName.js +2 -2
- package/lib-esm/Checkbox.d.ts +1 -1
- package/lib-esm/Details.d.ts +1 -2
- package/lib-esm/Details.js +1 -2
- package/lib-esm/Dropdown.d.ts +2 -66
- package/lib-esm/Heading.d.ts +1 -2
- package/lib-esm/Heading.js +2 -6
- package/lib-esm/NewButton/button-base.d.ts +6 -0
- package/lib-esm/NewButton/button-base.js +47 -0
- package/lib-esm/NewButton/button-link.d.ts +26 -0
- package/lib-esm/NewButton/button-link.js +15 -0
- package/lib-esm/NewButton/button.d.ts +2 -11
- package/lib-esm/NewButton/button.js +4 -275
- package/lib-esm/NewButton/icon-button.d.ts +4 -0
- package/lib-esm/NewButton/icon-button.js +35 -0
- package/lib-esm/NewButton/index.d.ts +6 -11
- package/lib-esm/NewButton/index.js +4 -1
- package/lib-esm/NewButton/styles.d.ts +202 -0
- package/lib-esm/NewButton/styles.js +229 -0
- package/lib-esm/NewButton/types.d.ts +28 -8
- package/lib-esm/NewButton/types.js +6 -1
- package/lib-esm/ProgressBar.d.ts +16 -11
- package/lib-esm/ProgressBar.js +7 -11
- package/lib-esm/Spinner.d.ts +1 -2
- package/lib-esm/Spinner.js +1 -2
- package/lib-esm/index.d.ts +0 -4
- package/lib-esm/index.js +0 -4
- package/package.json +2 -2
- package/lib/CheckboxInputField.d.ts +0 -11
- package/lib/CheckboxInputField.js +0 -73
- package/lib/ChoiceFieldset/ChoiceFieldCaption.d.ts +0 -3
- package/lib/ChoiceFieldset/ChoiceFieldCaption.js +0 -35
- package/lib/ChoiceFieldset/ChoiceFieldLabel.d.ts +0 -3
- package/lib/ChoiceFieldset/ChoiceFieldset.d.ts +0 -65
- package/lib/ChoiceFieldset/ChoiceFieldset.js +0 -95
- package/lib/ChoiceFieldset/ChoiceFieldsetDescription.d.ts +0 -3
- package/lib/ChoiceFieldset/ChoiceFieldsetDescription.js +0 -29
- package/lib/ChoiceFieldset/ChoiceFieldsetLegend.d.ts +0 -9
- package/lib/ChoiceFieldset/ChoiceFieldsetLegend.js +0 -44
- package/lib/ChoiceFieldset/ChoiceFieldsetList.d.ts +0 -9
- package/lib/ChoiceFieldset/ChoiceFieldsetList.js +0 -80
- package/lib/ChoiceFieldset/ChoiceFieldsetListContext.d.ts +0 -19
- package/lib/ChoiceFieldset/ChoiceFieldsetListContext.js +0 -15
- package/lib/ChoiceFieldset/ChoiceFieldsetListItem.d.ts +0 -25
- package/lib/ChoiceFieldset/ChoiceFieldsetListItem.js +0 -75
- package/lib/ChoiceFieldset/ChoiceFieldsetValidation.d.ts +0 -6
- package/lib/ChoiceFieldset/ChoiceFieldsetValidation.js +0 -17
- package/lib/ChoiceFieldset/index.d.ts +0 -3
- package/lib/ChoiceFieldset/index.js +0 -23
- package/lib/RadioInputField.d.ts +0 -9
- package/lib/RadioInputField.js +0 -82
- package/lib/TextInputField.d.ts +0 -581
- package/lib/TextInputField.js +0 -66
- package/lib/_InputCaption.d.ts +0 -13
- package/lib/_InputCaption.js +0 -27
- package/lib/_InputField/InputField.d.ts +0 -39
- package/lib/_InputField/InputField.js +0 -90
- package/lib/_InputField/InputFieldCaption.d.ts +0 -3
- package/lib/_InputField/InputFieldCaption.js +0 -30
- package/lib/_InputField/InputFieldLabel.d.ts +0 -9
- package/lib/_InputField/InputFieldLabel.js +0 -34
- package/lib/_InputField/InputFieldValidation.d.ts +0 -6
- package/lib/_InputField/InputFieldValidation.js +0 -17
- package/lib/_InputField/ToggleInputField.d.ts +0 -13
- package/lib/_InputField/ToggleInputField.js +0 -71
- package/lib/_InputField/ToggleInputLeadingVisual.d.ts +0 -3
- package/lib/_InputField/ToggleInputLeadingVisual.js +0 -22
- package/lib/_InputField/ValidationAnimationContainer.d.ts +0 -6
- package/lib/_InputField/ValidationAnimationContainer.js +0 -48
- package/lib/_InputField/index.d.ts +0 -1
- package/lib/_InputField/index.js +0 -15
- package/lib/_InputField/slots.d.ts +0 -13
- package/lib/_InputField/slots.js +0 -17
- package/lib/_InputLabel.d.ts +0 -8
- package/lib/_InputLabel.js +0 -44
- package/lib/_InputValidation.d.ts +0 -8
- package/lib/_InputValidation.js +0 -56
- package/lib/_VisuallyHidden.d.ts +0 -6
- package/lib/_VisuallyHidden.js +0 -39
- package/lib/utils/types/FormValidationStatus.d.ts +0 -1
- package/lib/utils/types/FormValidationStatus.js +0 -1
- package/lib-esm/CheckboxInputField.d.ts +0 -11
- package/lib-esm/CheckboxInputField.js +0 -56
- package/lib-esm/ChoiceFieldset/ChoiceFieldCaption.d.ts +0 -3
- package/lib-esm/ChoiceFieldset/ChoiceFieldCaption.js +0 -20
- package/lib-esm/ChoiceFieldset/ChoiceFieldLabel.d.ts +0 -3
- package/lib-esm/ChoiceFieldset/ChoiceFieldLabel.js +0 -20
- package/lib-esm/ChoiceFieldset/ChoiceFieldset.d.ts +0 -65
- package/lib-esm/ChoiceFieldset/ChoiceFieldset.js +0 -72
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetDescription.d.ts +0 -3
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetDescription.js +0 -17
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetLegend.d.ts +0 -9
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetLegend.js +0 -31
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetList.d.ts +0 -9
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetList.js +0 -63
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetListContext.d.ts +0 -19
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetListContext.js +0 -5
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetListItem.d.ts +0 -25
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetListItem.js +0 -51
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetValidation.d.ts +0 -6
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetValidation.js +0 -7
- package/lib-esm/ChoiceFieldset/index.d.ts +0 -3
- package/lib-esm/ChoiceFieldset/index.js +0 -2
- package/lib-esm/RadioInputField.d.ts +0 -9
- package/lib-esm/RadioInputField.js +0 -65
- package/lib-esm/TextInputField.d.ts +0 -581
- package/lib-esm/TextInputField.js +0 -50
- package/lib-esm/_InputCaption.d.ts +0 -13
- package/lib-esm/_InputCaption.js +0 -16
- package/lib-esm/_InputField/InputField.d.ts +0 -39
- package/lib-esm/_InputField/InputField.js +0 -70
- package/lib-esm/_InputField/InputFieldCaption.d.ts +0 -3
- package/lib-esm/_InputField/InputFieldCaption.js +0 -18
- package/lib-esm/_InputField/InputFieldLabel.d.ts +0 -9
- package/lib-esm/_InputField/InputFieldLabel.js +0 -22
- package/lib-esm/_InputField/InputFieldValidation.d.ts +0 -6
- package/lib-esm/_InputField/InputFieldValidation.js +0 -7
- package/lib-esm/_InputField/ToggleInputField.d.ts +0 -13
- package/lib-esm/_InputField/ToggleInputField.js +0 -54
- package/lib-esm/_InputField/ToggleInputLeadingVisual.d.ts +0 -3
- package/lib-esm/_InputField/ToggleInputLeadingVisual.js +0 -11
- package/lib-esm/_InputField/ValidationAnimationContainer.d.ts +0 -6
- package/lib-esm/_InputField/ValidationAnimationContainer.js +0 -33
- package/lib-esm/_InputField/index.d.ts +0 -1
- package/lib-esm/_InputField/index.js +0 -1
- package/lib-esm/_InputField/slots.d.ts +0 -13
- package/lib-esm/_InputField/slots.js +0 -5
- package/lib-esm/_InputLabel.d.ts +0 -8
- package/lib-esm/_InputLabel.js +0 -32
- package/lib-esm/_InputValidation.d.ts +0 -8
- package/lib-esm/_InputValidation.js +0 -43
- package/lib-esm/_VisuallyHidden.d.ts +0 -6
- package/lib-esm/_VisuallyHidden.js +0 -26
- package/lib-esm/utils/types/FormValidationStatus.d.ts +0 -1
- package/lib-esm/utils/types/FormValidationStatus.js +0 -1
@@ -0,0 +1,202 @@
|
|
1
|
+
import { VariantType } from './types';
|
2
|
+
import { Theme } from '../ThemeProvider';
|
3
|
+
export declare const TEXT_ROW_HEIGHT = "20px";
|
4
|
+
export declare const getVariantStyles: (variant?: VariantType, theme?: Theme | undefined) => {
|
5
|
+
color: string;
|
6
|
+
backgroundColor: string;
|
7
|
+
boxShadow: string;
|
8
|
+
'&:hover:not([disabled])': {
|
9
|
+
backgroundColor: string;
|
10
|
+
};
|
11
|
+
'&:focus:not([disabled])': {
|
12
|
+
boxShadow: string;
|
13
|
+
};
|
14
|
+
'&:active:not([disabled])': {
|
15
|
+
backgroundColor: string;
|
16
|
+
boxShadow: string;
|
17
|
+
};
|
18
|
+
'&:disabled': {
|
19
|
+
color: string;
|
20
|
+
backgroundColor: string;
|
21
|
+
};
|
22
|
+
} | {
|
23
|
+
color: string;
|
24
|
+
backgroundColor: string;
|
25
|
+
borderColor: string;
|
26
|
+
boxShadow: string;
|
27
|
+
'&:hover:not([disabled])': {
|
28
|
+
color: string;
|
29
|
+
backgroundColor: string;
|
30
|
+
};
|
31
|
+
'&:focus:not([disabled])': {
|
32
|
+
boxShadow: string;
|
33
|
+
};
|
34
|
+
'&:active:not([disabled])': {
|
35
|
+
backgroundColor: string;
|
36
|
+
boxShadow: string;
|
37
|
+
};
|
38
|
+
'&:disabled': {
|
39
|
+
color: string;
|
40
|
+
backgroundColor: string;
|
41
|
+
};
|
42
|
+
'[data-component="ButtonCounter"]': {
|
43
|
+
backgroundColor: string;
|
44
|
+
color: string;
|
45
|
+
};
|
46
|
+
} | {
|
47
|
+
color: string;
|
48
|
+
backgroundColor: string;
|
49
|
+
boxShadow: string;
|
50
|
+
'&:hover:not([disabled])': {
|
51
|
+
color: string;
|
52
|
+
backgroundColor: string;
|
53
|
+
borderColor: string;
|
54
|
+
boxShadow: string;
|
55
|
+
'[data-component="ButtonCounter"]': {
|
56
|
+
backgroundColor: string;
|
57
|
+
color: string;
|
58
|
+
};
|
59
|
+
};
|
60
|
+
'&:focus:not([disabled])': {
|
61
|
+
borderColor: string;
|
62
|
+
boxShadow: string;
|
63
|
+
};
|
64
|
+
'&:active:not([disabled])': {
|
65
|
+
color: string;
|
66
|
+
backgroundColor: string;
|
67
|
+
boxShadow: string;
|
68
|
+
borderColor: string;
|
69
|
+
};
|
70
|
+
'&:disabled': {
|
71
|
+
color: string;
|
72
|
+
backgroundColor: string;
|
73
|
+
borderColor: string;
|
74
|
+
'[data-component="ButtonCounter"]': {
|
75
|
+
backgroundColor: string;
|
76
|
+
};
|
77
|
+
};
|
78
|
+
'[data-component="ButtonCounter"]': {
|
79
|
+
color: string;
|
80
|
+
backgroundColor: string;
|
81
|
+
};
|
82
|
+
} | {
|
83
|
+
color: string;
|
84
|
+
backgroundColor: string;
|
85
|
+
border: string;
|
86
|
+
boxShadow: string;
|
87
|
+
'&:hover:not([disabled])': {
|
88
|
+
backgroundColor: string;
|
89
|
+
};
|
90
|
+
'&:focus:not([disabled])': {
|
91
|
+
boxShadow: string;
|
92
|
+
};
|
93
|
+
'&:active:not([disabled])': {
|
94
|
+
backgroundColor: string;
|
95
|
+
};
|
96
|
+
'&:disabled': {
|
97
|
+
color: string;
|
98
|
+
};
|
99
|
+
} | {
|
100
|
+
color: string;
|
101
|
+
boxShadow: string;
|
102
|
+
'&:hover': {
|
103
|
+
color: string;
|
104
|
+
backgroundColor: string;
|
105
|
+
borderColor: string;
|
106
|
+
boxShadow: string;
|
107
|
+
'[data-component="ButtonCounter"]': {
|
108
|
+
backgroundColor: string;
|
109
|
+
color: string;
|
110
|
+
};
|
111
|
+
};
|
112
|
+
'&:focus': {
|
113
|
+
borderColor: string;
|
114
|
+
boxShadow: string;
|
115
|
+
};
|
116
|
+
'&:active:not([disabled])': {
|
117
|
+
color: string;
|
118
|
+
backgroundColor: string;
|
119
|
+
boxShadow: string;
|
120
|
+
borderColor: string;
|
121
|
+
};
|
122
|
+
'&:disabled': {
|
123
|
+
color: string;
|
124
|
+
backgroundColor: string;
|
125
|
+
borderColor: string;
|
126
|
+
'[data-component="ButtonCounter"]': {
|
127
|
+
backgroundColor: string;
|
128
|
+
};
|
129
|
+
};
|
130
|
+
'[data-component="ButtonCounter"]': {
|
131
|
+
backgroundColor: string;
|
132
|
+
color: string;
|
133
|
+
};
|
134
|
+
};
|
135
|
+
export declare const getSizeStyles: (size: string | undefined, variant: VariantType | undefined, iconOnly: boolean) => {
|
136
|
+
paddingY: string;
|
137
|
+
paddingX: string;
|
138
|
+
fontSize: number;
|
139
|
+
'[data-component="ButtonCounter"]': {
|
140
|
+
fontSize: number;
|
141
|
+
};
|
142
|
+
};
|
143
|
+
export declare const getBaseStyles: (theme?: Theme | undefined) => {
|
144
|
+
borderRadius: string;
|
145
|
+
border: string;
|
146
|
+
borderColor: any;
|
147
|
+
fontWeight: string;
|
148
|
+
lineHeight: string;
|
149
|
+
whiteSpace: string;
|
150
|
+
verticalAlign: string;
|
151
|
+
cursor: string;
|
152
|
+
appearance: string;
|
153
|
+
userSelect: string;
|
154
|
+
textDecoration: string;
|
155
|
+
textAlign: string;
|
156
|
+
'&:focus': {
|
157
|
+
outline: string;
|
158
|
+
};
|
159
|
+
'&:disabled': {
|
160
|
+
cursor: string;
|
161
|
+
};
|
162
|
+
'&:disabled svg': {
|
163
|
+
opacity: string;
|
164
|
+
};
|
165
|
+
};
|
166
|
+
export declare const getButtonStyles: (theme?: Theme | undefined) => {
|
167
|
+
display: string;
|
168
|
+
gridTemplateAreas: string;
|
169
|
+
'& > :not(:last-child)': {
|
170
|
+
mr: string;
|
171
|
+
};
|
172
|
+
'[data-component="leadingIcon"]': {
|
173
|
+
gridArea: string;
|
174
|
+
};
|
175
|
+
'[data-component="text"]': {
|
176
|
+
gridArea: string;
|
177
|
+
};
|
178
|
+
'[data-component="trailingIcon"]': {
|
179
|
+
gridArea: string;
|
180
|
+
};
|
181
|
+
borderRadius: string;
|
182
|
+
border: string;
|
183
|
+
borderColor: any;
|
184
|
+
fontWeight: string;
|
185
|
+
lineHeight: string;
|
186
|
+
whiteSpace: string;
|
187
|
+
verticalAlign: string;
|
188
|
+
cursor: string;
|
189
|
+
appearance: string;
|
190
|
+
userSelect: string;
|
191
|
+
textDecoration: string;
|
192
|
+
textAlign: string;
|
193
|
+
'&:focus': {
|
194
|
+
outline: string;
|
195
|
+
};
|
196
|
+
'&:disabled': {
|
197
|
+
cursor: string;
|
198
|
+
};
|
199
|
+
'&:disabled svg': {
|
200
|
+
opacity: string;
|
201
|
+
};
|
202
|
+
};
|
@@ -0,0 +1,229 @@
|
|
1
|
+
export const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
|
2
|
+
|
3
|
+
export const getVariantStyles = (variant = 'default', theme) => {
|
4
|
+
const style = {
|
5
|
+
default: {
|
6
|
+
color: 'btn.text',
|
7
|
+
backgroundColor: 'btn.bg',
|
8
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadow}, ${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.insetShadow}`,
|
9
|
+
'&:hover:not([disabled])': {
|
10
|
+
backgroundColor: 'btn.hoverBg'
|
11
|
+
},
|
12
|
+
// focus must come before :active so that the active box shadow overrides
|
13
|
+
'&:focus:not([disabled])': {
|
14
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.focusShadow}`
|
15
|
+
},
|
16
|
+
'&:active:not([disabled])': {
|
17
|
+
backgroundColor: 'btn.selectedBg',
|
18
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadowActive}`
|
19
|
+
},
|
20
|
+
'&:disabled': {
|
21
|
+
color: 'primer.fg.disabled',
|
22
|
+
backgroundColor: 'btn.disabledBg'
|
23
|
+
}
|
24
|
+
},
|
25
|
+
primary: {
|
26
|
+
color: 'btn.primary.text',
|
27
|
+
backgroundColor: 'btn.primary.bg',
|
28
|
+
borderColor: 'border.subtle',
|
29
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.primary.shadow}`,
|
30
|
+
'&:hover:not([disabled])': {
|
31
|
+
color: 'btn.primary.hoverText',
|
32
|
+
backgroundColor: 'btn.primary.hoverBg'
|
33
|
+
},
|
34
|
+
// focus must come before :active so that the active box shadow overrides
|
35
|
+
'&:focus:not([disabled])': {
|
36
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.primary.focusShadow}`
|
37
|
+
},
|
38
|
+
'&:active:not([disabled])': {
|
39
|
+
backgroundColor: 'btn.primary.selectedBg',
|
40
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.primary.selectedShadow}`
|
41
|
+
},
|
42
|
+
'&:disabled': {
|
43
|
+
color: 'btn.primary.disabledText',
|
44
|
+
backgroundColor: 'btn.primary.disabledBg'
|
45
|
+
},
|
46
|
+
'[data-component="ButtonCounter"]': {
|
47
|
+
backgroundColor: 'btn.primary.counterBg',
|
48
|
+
color: 'btn.primary.text'
|
49
|
+
}
|
50
|
+
},
|
51
|
+
danger: {
|
52
|
+
color: 'btn.danger.text',
|
53
|
+
backgroundColor: 'btn.bg',
|
54
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadow}`,
|
55
|
+
'&:hover:not([disabled])': {
|
56
|
+
color: 'btn.danger.hoverText',
|
57
|
+
backgroundColor: 'btn.danger.hoverBg',
|
58
|
+
borderColor: 'btn.danger.hoverBorder',
|
59
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.danger.hoverShadow}`,
|
60
|
+
'[data-component="ButtonCounter"]': {
|
61
|
+
backgroundColor: 'btn.danger.hoverCounterBg',
|
62
|
+
color: 'btn.danger.hoverText'
|
63
|
+
}
|
64
|
+
},
|
65
|
+
// focus must come before :active so that the active box shadow overrides
|
66
|
+
'&:focus:not([disabled])': {
|
67
|
+
borderColor: 'btn.danger.focusBorder',
|
68
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.danger.focusShadow}`
|
69
|
+
},
|
70
|
+
'&:active:not([disabled])': {
|
71
|
+
color: 'btn.danger.selectedText',
|
72
|
+
backgroundColor: 'btn.danger.selectedBg',
|
73
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.danger.selectedShadow}`,
|
74
|
+
borderColor: 'btn.danger.selectedBorder'
|
75
|
+
},
|
76
|
+
'&:disabled': {
|
77
|
+
color: 'btn.danger.disabledText',
|
78
|
+
backgroundColor: 'btn.danger.disabledBg',
|
79
|
+
borderColor: 'btn.danger.disabledBorder',
|
80
|
+
'[data-component="ButtonCounter"]': {
|
81
|
+
backgroundColor: 'btn.danger.disabledCounterBg'
|
82
|
+
}
|
83
|
+
},
|
84
|
+
'[data-component="ButtonCounter"]': {
|
85
|
+
color: 'btn.danger.text',
|
86
|
+
backgroundColor: 'btn.danger.counterBg'
|
87
|
+
}
|
88
|
+
},
|
89
|
+
invisible: {
|
90
|
+
color: 'accent.fg',
|
91
|
+
backgroundColor: 'transparent',
|
92
|
+
border: '0',
|
93
|
+
boxShadow: 'none',
|
94
|
+
'&:hover:not([disabled])': {
|
95
|
+
backgroundColor: 'btn.hoverBg'
|
96
|
+
},
|
97
|
+
// focus must come before :active so that the active box shadow overrides
|
98
|
+
'&:focus:not([disabled])': {
|
99
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.focusShadow}`
|
100
|
+
},
|
101
|
+
'&:active:not([disabled])': {
|
102
|
+
backgroundColor: 'btn.selectedBg'
|
103
|
+
},
|
104
|
+
'&:disabled': {
|
105
|
+
color: 'primer.fg.disabled'
|
106
|
+
}
|
107
|
+
},
|
108
|
+
outline: {
|
109
|
+
color: 'btn.outline.text',
|
110
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadow}`,
|
111
|
+
'&:hover': {
|
112
|
+
color: 'btn.outline.hoverText',
|
113
|
+
backgroundColor: 'btn.outline.hoverBg',
|
114
|
+
borderColor: 'outline.hoverBorder',
|
115
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.hoverShadow}`,
|
116
|
+
'[data-component="ButtonCounter"]': {
|
117
|
+
backgroundColor: 'btn.outline.hoverCounterBg',
|
118
|
+
color: 'btn.outline.hoverText'
|
119
|
+
}
|
120
|
+
},
|
121
|
+
// focus must come before :active so that the active box shadow overrides
|
122
|
+
'&:focus': {
|
123
|
+
borderColor: 'btn.outline.focusBorder',
|
124
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.focusShadow}`
|
125
|
+
},
|
126
|
+
'&:active:not([disabled])': {
|
127
|
+
color: 'btn.outline.selectedText',
|
128
|
+
backgroundColor: 'btn.outline.selectedBg',
|
129
|
+
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.selectedShadow}`,
|
130
|
+
borderColor: 'btn.outline.selectedBorder'
|
131
|
+
},
|
132
|
+
'&:disabled': {
|
133
|
+
color: 'btn.outline.disabledText',
|
134
|
+
backgroundColor: 'btn.outline.disabledBg',
|
135
|
+
borderColor: 'btn.border',
|
136
|
+
'[data-component="ButtonCounter"]': {
|
137
|
+
backgroundColor: 'btn.outline.disabledCounterBg'
|
138
|
+
}
|
139
|
+
},
|
140
|
+
'[data-component="ButtonCounter"]': {
|
141
|
+
backgroundColor: 'btn.outline.counterBg',
|
142
|
+
color: 'btn.outline.text'
|
143
|
+
}
|
144
|
+
}
|
145
|
+
};
|
146
|
+
return style[variant];
|
147
|
+
};
|
148
|
+
export const getSizeStyles = (size = 'medium', variant = 'default', iconOnly) => {
|
149
|
+
let paddingY, paddingX, fontSize;
|
150
|
+
|
151
|
+
switch (size) {
|
152
|
+
case 'small':
|
153
|
+
paddingY = 3;
|
154
|
+
paddingX = 12;
|
155
|
+
fontSize = 0;
|
156
|
+
break;
|
157
|
+
|
158
|
+
case 'large':
|
159
|
+
paddingY = 9;
|
160
|
+
paddingX = 20;
|
161
|
+
fontSize = 2;
|
162
|
+
break;
|
163
|
+
|
164
|
+
case 'medium':
|
165
|
+
default:
|
166
|
+
paddingY = 5;
|
167
|
+
paddingX = 16;
|
168
|
+
fontSize = 1;
|
169
|
+
}
|
170
|
+
|
171
|
+
if (iconOnly) {
|
172
|
+
paddingX = paddingY + 2;
|
173
|
+
}
|
174
|
+
|
175
|
+
if (variant === 'invisible') {
|
176
|
+
paddingY = paddingY + 1;
|
177
|
+
}
|
178
|
+
|
179
|
+
return {
|
180
|
+
paddingY: `${paddingY}px`,
|
181
|
+
paddingX: `${paddingX}px`,
|
182
|
+
fontSize,
|
183
|
+
'[data-component="ButtonCounter"]': {
|
184
|
+
fontSize
|
185
|
+
}
|
186
|
+
};
|
187
|
+
};
|
188
|
+
export const getBaseStyles = theme => ({
|
189
|
+
borderRadius: '2',
|
190
|
+
border: '1px solid',
|
191
|
+
borderColor: theme === null || theme === void 0 ? void 0 : theme.colors.btn.border,
|
192
|
+
fontWeight: 'bold',
|
193
|
+
lineHeight: TEXT_ROW_HEIGHT,
|
194
|
+
whiteSpace: 'nowrap',
|
195
|
+
verticalAlign: 'middle',
|
196
|
+
cursor: 'pointer',
|
197
|
+
appearance: 'none',
|
198
|
+
userSelect: 'none',
|
199
|
+
textDecoration: 'none',
|
200
|
+
textAlign: 'center',
|
201
|
+
'&:focus': {
|
202
|
+
outline: 'none'
|
203
|
+
},
|
204
|
+
'&:disabled': {
|
205
|
+
cursor: 'default'
|
206
|
+
},
|
207
|
+
'&:disabled svg': {
|
208
|
+
opacity: '0.6'
|
209
|
+
}
|
210
|
+
});
|
211
|
+
export const getButtonStyles = theme => {
|
212
|
+
const styles = { ...getBaseStyles(theme),
|
213
|
+
display: 'grid',
|
214
|
+
gridTemplateAreas: '"leadingIcon text trailingIcon"',
|
215
|
+
'& > :not(:last-child)': {
|
216
|
+
mr: '2'
|
217
|
+
},
|
218
|
+
'[data-component="leadingIcon"]': {
|
219
|
+
gridArea: 'leadingIcon'
|
220
|
+
},
|
221
|
+
'[data-component="text"]': {
|
222
|
+
gridArea: 'text'
|
223
|
+
},
|
224
|
+
'[data-component="trailingIcon"]': {
|
225
|
+
gridArea: 'trailingIcon'
|
226
|
+
}
|
227
|
+
};
|
228
|
+
return styles;
|
229
|
+
};
|
@@ -1,9 +1,11 @@
|
|
1
|
-
import React, { HTMLAttributes } from 'react';
|
1
|
+
import React, { HTMLAttributes, ComponentPropsWithRef } from 'react';
|
2
2
|
import { IconProps } from '@primer/octicons-react';
|
3
3
|
import { SxProp } from '../sx';
|
4
|
+
export declare const StyledButton: import("styled-components").StyledComponent<"button", any, SxProp, never>;
|
4
5
|
export declare type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline';
|
5
6
|
export declare type Size = 'small' | 'medium' | 'large';
|
6
|
-
|
7
|
+
declare type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>;
|
8
|
+
export declare type ButtonBaseProps = {
|
7
9
|
/**
|
8
10
|
* Determine's the styles on a button one of 'default' | 'primary' | 'invisible' | 'danger'
|
9
11
|
*/
|
@@ -13,9 +15,11 @@ export declare type ButtonProps = {
|
|
13
15
|
*/
|
14
16
|
size?: Size;
|
15
17
|
/**
|
16
|
-
*
|
18
|
+
* Items that are disabled can not be clicked, selected, or navigated through.
|
17
19
|
*/
|
18
|
-
|
20
|
+
disabled?: boolean;
|
21
|
+
} & SxProp & HTMLAttributes<HTMLButtonElement> & StyledButtonProps;
|
22
|
+
export declare type ButtonProps = {
|
19
23
|
/**
|
20
24
|
* The leading icon comes before button content
|
21
25
|
*/
|
@@ -24,9 +28,25 @@ export declare type ButtonProps = {
|
|
24
28
|
* The trailing icon comes after button content
|
25
29
|
*/
|
26
30
|
trailingIcon?: React.FunctionComponent<IconProps>;
|
31
|
+
children: React.ReactNode;
|
32
|
+
} & ButtonBaseProps;
|
33
|
+
export declare type IconButtonProps = {
|
27
34
|
/**
|
28
|
-
*
|
35
|
+
* This is to be used if it is an icon-only button. Will make text visually hidden
|
29
36
|
*/
|
30
|
-
|
31
|
-
|
32
|
-
} &
|
37
|
+
icon: React.FunctionComponent<IconProps>;
|
38
|
+
iconLabel: string;
|
39
|
+
} & ButtonBaseProps;
|
40
|
+
export declare type LinkButtonProps = {
|
41
|
+
underline?: boolean;
|
42
|
+
download?: string;
|
43
|
+
href?: string;
|
44
|
+
hrefLang?: string;
|
45
|
+
media?: string;
|
46
|
+
ping?: string;
|
47
|
+
rel?: string;
|
48
|
+
target?: string;
|
49
|
+
type?: string;
|
50
|
+
referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>['referrerPolicy'];
|
51
|
+
};
|
52
|
+
export {};
|
package/lib-esm/ProgressBar.d.ts
CHANGED
@@ -1,17 +1,22 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { WidthProps } from 'styled-system';
|
3
|
-
import { SystemCommonProps } from './constants';
|
4
3
|
import { SxProp } from './sx';
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
}
|
13
|
-
|
14
|
-
|
4
|
+
declare type ProgressProp = {
|
5
|
+
progress?: string | number;
|
6
|
+
};
|
7
|
+
declare const sizeMap: {
|
8
|
+
small: string;
|
9
|
+
large: string;
|
10
|
+
default: string;
|
11
|
+
};
|
12
|
+
declare type StyledProgressContainerProps = {
|
13
|
+
inline?: boolean;
|
14
|
+
barSize?: keyof typeof sizeMap;
|
15
|
+
} & WidthProps & SxProp;
|
16
|
+
export declare type ProgressBarProps = {
|
17
|
+
bg: string;
|
18
|
+
} & StyledProgressContainerProps & ProgressProp;
|
19
|
+
declare function ProgressBar({ progress, bg, ...rest }: ProgressBarProps): JSX.Element;
|
15
20
|
declare namespace ProgressBar {
|
16
21
|
var defaultProps: {
|
17
22
|
bg: string;
|
package/lib-esm/ProgressBar.js
CHANGED
@@ -1,14 +1,12 @@
|
|
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
1
|
import React from 'react';
|
4
2
|
import styled from 'styled-components';
|
5
3
|
import { width } from 'styled-system';
|
6
|
-
import {
|
4
|
+
import { get } from './constants';
|
7
5
|
import sx from './sx';
|
8
6
|
const Bar = styled.span.withConfig({
|
9
7
|
displayName: "ProgressBar__Bar",
|
10
8
|
componentId: "sc-1tiva13-0"
|
11
|
-
})(["width:", ";", ""], props => props.progress ? `${props.progress}%` : 0,
|
9
|
+
})(["width:", ";", ";"], props => props.progress ? `${props.progress}%` : 0, sx);
|
12
10
|
const sizeMap = {
|
13
11
|
small: '5px',
|
14
12
|
large: '10px',
|
@@ -17,20 +15,18 @@ const sizeMap = {
|
|
17
15
|
const ProgressContainer = styled.span.withConfig({
|
18
16
|
displayName: "ProgressBar__ProgressContainer",
|
19
17
|
componentId: "sc-1tiva13-1"
|
20
|
-
})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", "
|
18
|
+
})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.default'), get('radii.1'), props => sizeMap[props.barSize || 'default'], width, sx);
|
21
19
|
|
22
20
|
function ProgressBar({
|
23
21
|
progress,
|
24
22
|
bg,
|
25
|
-
theme,
|
26
23
|
...rest
|
27
24
|
}) {
|
28
|
-
return /*#__PURE__*/React.createElement(ProgressContainer,
|
29
|
-
theme: theme
|
30
|
-
}, rest), /*#__PURE__*/React.createElement(Bar, {
|
25
|
+
return /*#__PURE__*/React.createElement(ProgressContainer, rest, /*#__PURE__*/React.createElement(Bar, {
|
31
26
|
progress: progress,
|
32
|
-
|
33
|
-
|
27
|
+
sx: {
|
28
|
+
bg
|
29
|
+
}
|
34
30
|
}));
|
35
31
|
}
|
36
32
|
|
package/lib-esm/Spinner.d.ts
CHANGED
@@ -1,5 +1,4 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import { SystemCommonProps } from './constants';
|
3
2
|
import { SxProp } from './sx';
|
4
3
|
import { ComponentProps } from './utils/types';
|
5
4
|
declare const sizeMap: {
|
@@ -12,6 +11,6 @@ export interface SpinnerInternalProps {
|
|
12
11
|
size?: keyof typeof sizeMap;
|
13
12
|
}
|
14
13
|
declare function Spinner({ size: sizeKey, ...props }: SpinnerInternalProps): JSX.Element;
|
15
|
-
declare const StyledSpinner: import("styled-components").StyledComponent<typeof Spinner, any,
|
14
|
+
declare const StyledSpinner: import("styled-components").StyledComponent<typeof Spinner, any, SxProp, never>;
|
16
15
|
export declare type SpinnerProps = ComponentProps<typeof StyledSpinner>;
|
17
16
|
export default StyledSpinner;
|
package/lib-esm/Spinner.js
CHANGED
@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
2
2
|
|
3
3
|
import React from 'react';
|
4
4
|
import styled from 'styled-components';
|
5
|
-
import { COMMON } from './constants';
|
6
5
|
import sx from './sx';
|
7
6
|
const sizeMap = {
|
8
7
|
small: '16px',
|
@@ -41,6 +40,6 @@ Spinner.displayName = "Spinner";
|
|
41
40
|
const StyledSpinner = styled(Spinner).withConfig({
|
42
41
|
displayName: "Spinner__StyledSpinner",
|
43
42
|
componentId: "sc-14tspit-0"
|
44
|
-
})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", "
|
43
|
+
})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], sx);
|
45
44
|
StyledSpinner.displayName = 'Spinner';
|
46
45
|
export default StyledSpinner;
|
package/lib-esm/index.d.ts
CHANGED
@@ -46,8 +46,6 @@ export { default as CircleBadge } from './CircleBadge';
|
|
46
46
|
export type { CircleBadgeProps, CircleBadgeIconProps } from './CircleBadge';
|
47
47
|
export { default as CircleOcticon } from './CircleOcticon';
|
48
48
|
export type { CircleOcticonProps } from './CircleOcticon';
|
49
|
-
export { default as CheckboxInputField } from './CheckboxInputField';
|
50
|
-
export { default as ChoiceFieldset, Item } from './ChoiceFieldset';
|
51
49
|
export { default as CounterLabel } from './CounterLabel';
|
52
50
|
export type { CounterLabelProps } from './CounterLabel';
|
53
51
|
export { default as Details } from './Details';
|
@@ -88,7 +86,6 @@ export { default as Popover } from './Popover';
|
|
88
86
|
export type { PopoverProps, PopoverContentProps } from './Popover';
|
89
87
|
export { default as ProgressBar } from './ProgressBar';
|
90
88
|
export type { ProgressBarProps } from './ProgressBar';
|
91
|
-
export { default as RadioInputField } from './RadioInputField';
|
92
89
|
export { default as SelectMenu } from './SelectMenu';
|
93
90
|
export type { SelectMenuProps, SelectMenuDividerProps, SelectMenuFilterProps, SelectMenuFooterProps, SelectMenuItemProps, SelectMenuListProps, SelectMenuModalProps, SelectMenuTabsProps, SelectMenuHeaderProps, SelectMenuTabProps, SelectMenuTabPanelProps, SelectMenuLoadingAnimationProps } from './SelectMenu';
|
94
91
|
export { default as SideNav } from './SideNav';
|
@@ -105,7 +102,6 @@ export { default as TabNav } from './TabNav';
|
|
105
102
|
export type { TabNavProps, TabNavLinkProps } from './TabNav';
|
106
103
|
export { default as TextInput } from './TextInput';
|
107
104
|
export type { TextInputProps } from './TextInput';
|
108
|
-
export { default as TextInputField } from './TextInputField';
|
109
105
|
export { default as TextInputWithTokens } from './TextInputWithTokens';
|
110
106
|
export type { TextInputWithTokensProps } from './TextInputWithTokens';
|
111
107
|
export { default as Text } from './Text';
|
package/lib-esm/index.js
CHANGED
@@ -30,8 +30,6 @@ export { NewButton } from './NewButton';
|
|
30
30
|
export { default as Caret } from './Caret';
|
31
31
|
export { default as CircleBadge } from './CircleBadge';
|
32
32
|
export { default as CircleOcticon } from './CircleOcticon';
|
33
|
-
export { default as CheckboxInputField } from './CheckboxInputField';
|
34
|
-
export { default as ChoiceFieldset, Item } from './ChoiceFieldset';
|
35
33
|
export { default as CounterLabel } from './CounterLabel';
|
36
34
|
export { default as Details } from './Details';
|
37
35
|
export { default as Dialog } from './Dialog';
|
@@ -57,7 +55,6 @@ export { default as Popover } from './Popover';
|
|
57
55
|
// export {default as Portal, registerPortalRoot} from './Portal'
|
58
56
|
// export type {PortalProps} from './Portal'
|
59
57
|
export { default as ProgressBar } from './ProgressBar';
|
60
|
-
export { default as RadioInputField } from './RadioInputField';
|
61
58
|
export { default as SelectMenu } from './SelectMenu';
|
62
59
|
export { default as SideNav } from './SideNav';
|
63
60
|
export { default as Spinner } from './Spinner';
|
@@ -66,7 +63,6 @@ export { default as StyledOcticon } from './StyledOcticon';
|
|
66
63
|
export { default as SubNav } from './SubNav';
|
67
64
|
export { default as TabNav } from './TabNav';
|
68
65
|
export { default as TextInput } from './TextInput';
|
69
|
-
export { default as TextInputField } from './TextInputField';
|
70
66
|
export { default as TextInputWithTokens } from './TextInputWithTokens';
|
71
67
|
export { default as Text } from './Text';
|
72
68
|
export { default as Timeline } from './Timeline';
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@primer/components",
|
3
|
-
"version": "0.0.0-
|
3
|
+
"version": "0.0.0-202111245715",
|
4
4
|
"description": "Primer react components",
|
5
5
|
"main": "lib/index.js",
|
6
6
|
"module": "lib-esm/index.js",
|
@@ -43,7 +43,7 @@
|
|
43
43
|
"author": "GitHub, Inc.",
|
44
44
|
"license": "MIT",
|
45
45
|
"dependencies": {
|
46
|
-
"@primer/octicons-react": "16.1.
|
46
|
+
"@primer/octicons-react": "^16.1.0",
|
47
47
|
"@primer/primitives": "7.1.1",
|
48
48
|
"@radix-ui/react-polymorphic": "0.0.14",
|
49
49
|
"@react-aria/ssr": "3.1.0",
|