@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.
Files changed (175) hide show
  1. package/CHANGELOG.md +9 -3
  2. package/dist/browser.esm.js +586 -604
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +204 -222
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/Autocomplete/AutocompleteMenu.js +13 -6
  7. package/lib/Avatar.d.ts +1 -2
  8. package/lib/Avatar.js +1 -1
  9. package/lib/BranchName.d.ts +1 -2
  10. package/lib/BranchName.js +1 -1
  11. package/lib/Checkbox.d.ts +1 -1
  12. package/lib/Details.d.ts +1 -2
  13. package/lib/Details.js +1 -3
  14. package/lib/Dropdown.d.ts +2 -66
  15. package/lib/Heading.d.ts +1 -2
  16. package/lib/Heading.js +1 -6
  17. package/lib/NewButton/button-base.d.ts +6 -0
  18. package/lib/NewButton/button-base.js +69 -0
  19. package/lib/NewButton/button-link.d.ts +26 -0
  20. package/lib/{ChoiceFieldset/ChoiceFieldLabel.js → NewButton/button-link.js} +14 -18
  21. package/lib/NewButton/button.d.ts +2 -11
  22. package/lib/NewButton/button.js +6 -283
  23. package/lib/NewButton/icon-button.d.ts +4 -0
  24. package/lib/NewButton/icon-button.js +57 -0
  25. package/lib/NewButton/index.d.ts +6 -11
  26. package/lib/NewButton/index.js +18 -0
  27. package/lib/NewButton/styles.d.ts +202 -0
  28. package/lib/NewButton/styles.js +248 -0
  29. package/lib/NewButton/types.d.ts +28 -8
  30. package/lib/NewButton/types.js +19 -1
  31. package/lib/ProgressBar.d.ts +16 -11
  32. package/lib/ProgressBar.js +6 -10
  33. package/lib/Spinner.d.ts +1 -2
  34. package/lib/Spinner.js +1 -3
  35. package/lib/index.d.ts +0 -4
  36. package/lib/index.js +0 -38
  37. package/lib-esm/Autocomplete/AutocompleteMenu.js +13 -3
  38. package/lib-esm/Avatar.d.ts +1 -2
  39. package/lib-esm/Avatar.js +2 -2
  40. package/lib-esm/BranchName.d.ts +1 -2
  41. package/lib-esm/BranchName.js +2 -2
  42. package/lib-esm/Checkbox.d.ts +1 -1
  43. package/lib-esm/Details.d.ts +1 -2
  44. package/lib-esm/Details.js +1 -2
  45. package/lib-esm/Dropdown.d.ts +2 -66
  46. package/lib-esm/Heading.d.ts +1 -2
  47. package/lib-esm/Heading.js +2 -6
  48. package/lib-esm/NewButton/button-base.d.ts +6 -0
  49. package/lib-esm/NewButton/button-base.js +47 -0
  50. package/lib-esm/NewButton/button-link.d.ts +26 -0
  51. package/lib-esm/NewButton/button-link.js +15 -0
  52. package/lib-esm/NewButton/button.d.ts +2 -11
  53. package/lib-esm/NewButton/button.js +4 -275
  54. package/lib-esm/NewButton/icon-button.d.ts +4 -0
  55. package/lib-esm/NewButton/icon-button.js +35 -0
  56. package/lib-esm/NewButton/index.d.ts +6 -11
  57. package/lib-esm/NewButton/index.js +4 -1
  58. package/lib-esm/NewButton/styles.d.ts +202 -0
  59. package/lib-esm/NewButton/styles.js +229 -0
  60. package/lib-esm/NewButton/types.d.ts +28 -8
  61. package/lib-esm/NewButton/types.js +6 -1
  62. package/lib-esm/ProgressBar.d.ts +16 -11
  63. package/lib-esm/ProgressBar.js +7 -11
  64. package/lib-esm/Spinner.d.ts +1 -2
  65. package/lib-esm/Spinner.js +1 -2
  66. package/lib-esm/index.d.ts +0 -4
  67. package/lib-esm/index.js +0 -4
  68. package/package.json +2 -2
  69. package/lib/CheckboxInputField.d.ts +0 -11
  70. package/lib/CheckboxInputField.js +0 -73
  71. package/lib/ChoiceFieldset/ChoiceFieldCaption.d.ts +0 -3
  72. package/lib/ChoiceFieldset/ChoiceFieldCaption.js +0 -35
  73. package/lib/ChoiceFieldset/ChoiceFieldLabel.d.ts +0 -3
  74. package/lib/ChoiceFieldset/ChoiceFieldset.d.ts +0 -65
  75. package/lib/ChoiceFieldset/ChoiceFieldset.js +0 -95
  76. package/lib/ChoiceFieldset/ChoiceFieldsetDescription.d.ts +0 -3
  77. package/lib/ChoiceFieldset/ChoiceFieldsetDescription.js +0 -29
  78. package/lib/ChoiceFieldset/ChoiceFieldsetLegend.d.ts +0 -9
  79. package/lib/ChoiceFieldset/ChoiceFieldsetLegend.js +0 -44
  80. package/lib/ChoiceFieldset/ChoiceFieldsetList.d.ts +0 -9
  81. package/lib/ChoiceFieldset/ChoiceFieldsetList.js +0 -80
  82. package/lib/ChoiceFieldset/ChoiceFieldsetListContext.d.ts +0 -19
  83. package/lib/ChoiceFieldset/ChoiceFieldsetListContext.js +0 -15
  84. package/lib/ChoiceFieldset/ChoiceFieldsetListItem.d.ts +0 -25
  85. package/lib/ChoiceFieldset/ChoiceFieldsetListItem.js +0 -75
  86. package/lib/ChoiceFieldset/ChoiceFieldsetValidation.d.ts +0 -6
  87. package/lib/ChoiceFieldset/ChoiceFieldsetValidation.js +0 -17
  88. package/lib/ChoiceFieldset/index.d.ts +0 -3
  89. package/lib/ChoiceFieldset/index.js +0 -23
  90. package/lib/RadioInputField.d.ts +0 -9
  91. package/lib/RadioInputField.js +0 -82
  92. package/lib/TextInputField.d.ts +0 -581
  93. package/lib/TextInputField.js +0 -66
  94. package/lib/_InputCaption.d.ts +0 -13
  95. package/lib/_InputCaption.js +0 -27
  96. package/lib/_InputField/InputField.d.ts +0 -39
  97. package/lib/_InputField/InputField.js +0 -90
  98. package/lib/_InputField/InputFieldCaption.d.ts +0 -3
  99. package/lib/_InputField/InputFieldCaption.js +0 -30
  100. package/lib/_InputField/InputFieldLabel.d.ts +0 -9
  101. package/lib/_InputField/InputFieldLabel.js +0 -34
  102. package/lib/_InputField/InputFieldValidation.d.ts +0 -6
  103. package/lib/_InputField/InputFieldValidation.js +0 -17
  104. package/lib/_InputField/ToggleInputField.d.ts +0 -13
  105. package/lib/_InputField/ToggleInputField.js +0 -71
  106. package/lib/_InputField/ToggleInputLeadingVisual.d.ts +0 -3
  107. package/lib/_InputField/ToggleInputLeadingVisual.js +0 -22
  108. package/lib/_InputField/ValidationAnimationContainer.d.ts +0 -6
  109. package/lib/_InputField/ValidationAnimationContainer.js +0 -48
  110. package/lib/_InputField/index.d.ts +0 -1
  111. package/lib/_InputField/index.js +0 -15
  112. package/lib/_InputField/slots.d.ts +0 -13
  113. package/lib/_InputField/slots.js +0 -17
  114. package/lib/_InputLabel.d.ts +0 -8
  115. package/lib/_InputLabel.js +0 -44
  116. package/lib/_InputValidation.d.ts +0 -8
  117. package/lib/_InputValidation.js +0 -56
  118. package/lib/_VisuallyHidden.d.ts +0 -6
  119. package/lib/_VisuallyHidden.js +0 -39
  120. package/lib/utils/types/FormValidationStatus.d.ts +0 -1
  121. package/lib/utils/types/FormValidationStatus.js +0 -1
  122. package/lib-esm/CheckboxInputField.d.ts +0 -11
  123. package/lib-esm/CheckboxInputField.js +0 -56
  124. package/lib-esm/ChoiceFieldset/ChoiceFieldCaption.d.ts +0 -3
  125. package/lib-esm/ChoiceFieldset/ChoiceFieldCaption.js +0 -20
  126. package/lib-esm/ChoiceFieldset/ChoiceFieldLabel.d.ts +0 -3
  127. package/lib-esm/ChoiceFieldset/ChoiceFieldLabel.js +0 -20
  128. package/lib-esm/ChoiceFieldset/ChoiceFieldset.d.ts +0 -65
  129. package/lib-esm/ChoiceFieldset/ChoiceFieldset.js +0 -72
  130. package/lib-esm/ChoiceFieldset/ChoiceFieldsetDescription.d.ts +0 -3
  131. package/lib-esm/ChoiceFieldset/ChoiceFieldsetDescription.js +0 -17
  132. package/lib-esm/ChoiceFieldset/ChoiceFieldsetLegend.d.ts +0 -9
  133. package/lib-esm/ChoiceFieldset/ChoiceFieldsetLegend.js +0 -31
  134. package/lib-esm/ChoiceFieldset/ChoiceFieldsetList.d.ts +0 -9
  135. package/lib-esm/ChoiceFieldset/ChoiceFieldsetList.js +0 -63
  136. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListContext.d.ts +0 -19
  137. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListContext.js +0 -5
  138. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListItem.d.ts +0 -25
  139. package/lib-esm/ChoiceFieldset/ChoiceFieldsetListItem.js +0 -51
  140. package/lib-esm/ChoiceFieldset/ChoiceFieldsetValidation.d.ts +0 -6
  141. package/lib-esm/ChoiceFieldset/ChoiceFieldsetValidation.js +0 -7
  142. package/lib-esm/ChoiceFieldset/index.d.ts +0 -3
  143. package/lib-esm/ChoiceFieldset/index.js +0 -2
  144. package/lib-esm/RadioInputField.d.ts +0 -9
  145. package/lib-esm/RadioInputField.js +0 -65
  146. package/lib-esm/TextInputField.d.ts +0 -581
  147. package/lib-esm/TextInputField.js +0 -50
  148. package/lib-esm/_InputCaption.d.ts +0 -13
  149. package/lib-esm/_InputCaption.js +0 -16
  150. package/lib-esm/_InputField/InputField.d.ts +0 -39
  151. package/lib-esm/_InputField/InputField.js +0 -70
  152. package/lib-esm/_InputField/InputFieldCaption.d.ts +0 -3
  153. package/lib-esm/_InputField/InputFieldCaption.js +0 -18
  154. package/lib-esm/_InputField/InputFieldLabel.d.ts +0 -9
  155. package/lib-esm/_InputField/InputFieldLabel.js +0 -22
  156. package/lib-esm/_InputField/InputFieldValidation.d.ts +0 -6
  157. package/lib-esm/_InputField/InputFieldValidation.js +0 -7
  158. package/lib-esm/_InputField/ToggleInputField.d.ts +0 -13
  159. package/lib-esm/_InputField/ToggleInputField.js +0 -54
  160. package/lib-esm/_InputField/ToggleInputLeadingVisual.d.ts +0 -3
  161. package/lib-esm/_InputField/ToggleInputLeadingVisual.js +0 -11
  162. package/lib-esm/_InputField/ValidationAnimationContainer.d.ts +0 -6
  163. package/lib-esm/_InputField/ValidationAnimationContainer.js +0 -33
  164. package/lib-esm/_InputField/index.d.ts +0 -1
  165. package/lib-esm/_InputField/index.js +0 -1
  166. package/lib-esm/_InputField/slots.d.ts +0 -13
  167. package/lib-esm/_InputField/slots.js +0 -5
  168. package/lib-esm/_InputLabel.d.ts +0 -8
  169. package/lib-esm/_InputLabel.js +0 -32
  170. package/lib-esm/_InputValidation.d.ts +0 -8
  171. package/lib-esm/_InputValidation.js +0 -43
  172. package/lib-esm/_VisuallyHidden.d.ts +0 -6
  173. package/lib-esm/_VisuallyHidden.js +0 -26
  174. package/lib-esm/utils/types/FormValidationStatus.d.ts +0 -1
  175. 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
- export declare type ButtonProps = {
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
- * This is to be used if it is an icon-only button. Will make text visually hidden
18
+ * Items that are disabled can not be clicked, selected, or navigated through.
17
19
  */
18
- icon?: React.FunctionComponent<IconProps>;
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
- * Items that are disabled can not be clicked, selected, or navigated through.
35
+ * This is to be used if it is an icon-only button. Will make text visually hidden
29
36
  */
30
- disabled?: boolean;
31
- children: React.ReactNode;
32
- } & SxProp & HTMLAttributes<HTMLButtonElement>;
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 {};
@@ -1 +1,6 @@
1
- export {};
1
+ import styled from 'styled-components';
2
+ import sx from '../sx';
3
+ export const StyledButton = styled.button.withConfig({
4
+ displayName: "types__StyledButton",
5
+ componentId: "sc-1sm8kx1-0"
6
+ })(sx);
@@ -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
- import { ComponentProps } from './utils/types';
6
- declare const Bar: import("styled-components").StyledComponent<"span", any, {
7
- progress?: string | number | undefined;
8
- } & SystemCommonProps, never>;
9
- declare const ProgressContainer: import("styled-components").StyledComponent<"span", any, {
10
- inline?: boolean | undefined;
11
- barSize?: "small" | "default" | "large" | undefined;
12
- } & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & SystemCommonProps & SxProp, never>;
13
- export declare type ProgressBarProps = ComponentProps<typeof ProgressContainer> & ComponentProps<typeof Bar>;
14
- declare function ProgressBar({ progress, bg, theme, ...rest }: ProgressBarProps): JSX.Element;
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;
@@ -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 { COMMON, get } from './constants';
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, COMMON);
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:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.default'), get('radii.1'), props => sizeMap[props.barSize || 'default'], COMMON, width, sx);
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, _extends({
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
- bg: bg,
33
- theme: theme
27
+ sx: {
28
+ bg
29
+ }
34
30
  }));
35
31
  }
36
32
 
@@ -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, SystemCommonProps & SxProp, never>;
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;
@@ -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;", " ", ""], COMMON, sx);
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;
@@ -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-202111231117",
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.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",