@primer/components 31.0.0-rc.f601fc1f → 31.0.2-rc.1e80de40
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/.github/workflows/check_for_changeset.yml +25 -0
- package/CHANGELOG.md +14 -2
- package/dist/browser.esm.js +40 -37
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +34 -31
- package/dist/browser.umd.js.map +1 -1
- package/docs/content/Autocomplete.mdx +51 -21
- package/lib/ActionList/Item.js +3 -3
- package/lib/Button/Button.js +1 -1
- package/lib/Button/ButtonTableList.js +1 -1
- package/lib/Pagination/Pagination.js +1 -1
- package/lib/TextInputWithTokens.js +17 -10
- package/lib/Token/Token.js +13 -2
- package/lib/Token/TokenBase.js +0 -4
- package/lib/Token/_RemoveTokenButton.js +15 -2
- package/lib/_TextInputWrapper.js +1 -1
- package/lib/stories/Autocomplete.stories.js +67 -56
- package/lib/stories/Button.stories.js +12 -1
- package/lib/stories/useAnchoredPosition.stories.js +1 -1
- package/lib-esm/ActionList/Item.js +3 -3
- package/lib-esm/Button/Button.js +1 -1
- package/lib-esm/Button/ButtonTableList.js +1 -1
- package/lib-esm/Pagination/Pagination.js +1 -1
- package/lib-esm/TextInputWithTokens.js +17 -10
- package/lib-esm/Token/Token.js +13 -2
- package/lib-esm/Token/TokenBase.js +0 -4
- package/lib-esm/Token/_RemoveTokenButton.js +11 -2
- package/lib-esm/_TextInputWrapper.js +1 -1
- package/lib-esm/stories/Autocomplete.stories.js +67 -56
- package/lib-esm/stories/Button.stories.js +8 -0
- package/lib-esm/stories/useAnchoredPosition.stories.js +1 -1
- package/package-lock.json +6090 -7003
- package/package.json +6 -6
- package/src/ActionList/Item.tsx +3 -3
- package/src/Button/Button.tsx +1 -1
- package/src/Button/ButtonTableList.tsx +1 -1
- package/src/Pagination/Pagination.tsx +1 -1
- package/src/TextInputWithTokens.tsx +49 -40
- package/src/Token/Token.tsx +16 -2
- package/src/Token/TokenBase.tsx +0 -5
- package/src/Token/_RemoveTokenButton.tsx +15 -2
- package/src/_TextInputWrapper.tsx +1 -1
- package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +3 -3
- package/src/__tests__/__snapshots__/Button.test.tsx.snap +3 -3
- package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +3374 -3166
- package/src/__tests__/__snapshots__/Token.test.tsx.snap +31 -24
- package/src/stories/Autocomplete.stories.tsx +142 -59
- package/src/stories/Button.stories.tsx +4 -0
- package/src/stories/useAnchoredPosition.stories.tsx +13 -1
- package/stats.html +1 -1
@@ -26,49 +26,28 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
26
26
|
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); }
|
27
27
|
|
28
28
|
const items = [{
|
29
|
-
text: '
|
29
|
+
text: 'css',
|
30
30
|
id: 0
|
31
31
|
}, {
|
32
|
-
text: '
|
32
|
+
text: 'css-in-js',
|
33
33
|
id: 1
|
34
34
|
}, {
|
35
|
-
text: '
|
35
|
+
text: 'styled-system',
|
36
36
|
id: 2
|
37
37
|
}, {
|
38
|
-
text: '
|
38
|
+
text: 'javascript',
|
39
39
|
id: 3
|
40
40
|
}, {
|
41
|
-
text: '
|
41
|
+
text: 'typescript',
|
42
42
|
id: 4
|
43
43
|
}, {
|
44
|
-
text: '
|
44
|
+
text: 'react',
|
45
45
|
id: 5
|
46
46
|
}, {
|
47
|
-
text: '
|
47
|
+
text: 'design-systems',
|
48
48
|
id: 6
|
49
|
-
}, {
|
50
|
-
text: 'seven',
|
51
|
-
id: 7
|
52
|
-
}, {
|
53
|
-
text: 'twenty',
|
54
|
-
id: 20
|
55
|
-
}, {
|
56
|
-
text: 'twentyone',
|
57
|
-
id: 21
|
58
|
-
}];
|
59
|
-
const mockTokens = [{
|
60
|
-
text: 'zero',
|
61
|
-
id: 0
|
62
|
-
}, {
|
63
|
-
text: 'one',
|
64
|
-
id: 1
|
65
|
-
}, {
|
66
|
-
text: 'three',
|
67
|
-
id: 3
|
68
|
-
}, {
|
69
|
-
text: 'four',
|
70
|
-
id: 4
|
71
49
|
}];
|
50
|
+
const mockTokens = [...items].slice(0, 3);
|
72
51
|
var _default = {
|
73
52
|
title: 'Forms/Autocomplete',
|
74
53
|
decorators: [Story => {
|
@@ -90,12 +69,15 @@ var _default = {
|
|
90
69
|
exports.default = _default;
|
91
70
|
|
92
71
|
const SingleSelect = () => {
|
93
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.
|
72
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
|
73
|
+
fontWeight: "bold",
|
74
|
+
fontSize: 1,
|
94
75
|
as: "label",
|
95
76
|
display: "block",
|
96
77
|
htmlFor: "autocompleteInput",
|
97
78
|
id: "autocompleteLabel"
|
98
|
-
}, "Pick
|
79
|
+
}, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
|
80
|
+
block: true,
|
99
81
|
id: "autocompleteInput"
|
100
82
|
}), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
|
101
83
|
items: items,
|
@@ -124,12 +106,14 @@ const MultiSelect = () => {
|
|
124
106
|
sx: {
|
125
107
|
gap: '1em'
|
126
108
|
}
|
127
|
-
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.
|
109
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.Text, {
|
110
|
+
fontWeight: "bold",
|
111
|
+
fontSize: 1,
|
128
112
|
as: "label",
|
129
113
|
display: "block",
|
130
114
|
htmlFor: "autocompleteInput",
|
131
115
|
id: "autocompleteLabel"
|
132
|
-
}, "Pick
|
116
|
+
}, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
|
133
117
|
id: "autocompleteInput"
|
134
118
|
}), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
|
135
119
|
items: items,
|
@@ -153,7 +137,8 @@ exports.MultiSelect = MultiSelect;
|
|
153
137
|
MultiSelect.displayName = "MultiSelect";
|
154
138
|
|
155
139
|
const MultiSelectWithTokenInput = () => {
|
156
|
-
const [tokens, setTokens] = (0, _react.useState)(
|
140
|
+
const [tokens, setTokens] = (0, _react.useState)([]); // [items[0], items[2]]
|
141
|
+
|
157
142
|
const selectedTokenIds = tokens.map(token => token.id);
|
158
143
|
const [selectedItemIds, setSelectedItemIds] = (0, _react.useState)(selectedTokenIds);
|
159
144
|
|
@@ -191,12 +176,15 @@ const MultiSelectWithTokenInput = () => {
|
|
191
176
|
})));
|
192
177
|
};
|
193
178
|
|
194
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.
|
179
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
|
180
|
+
fontWeight: "bold",
|
181
|
+
fontSize: 1,
|
195
182
|
as: "label",
|
196
183
|
display: "block",
|
197
184
|
htmlFor: "autocompleteInput",
|
198
185
|
id: "autocompleteLabel"
|
199
|
-
}, "Pick
|
186
|
+
}, "Pick tags"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
|
187
|
+
block: true,
|
200
188
|
as: _TextInputWithTokens.default,
|
201
189
|
tokens: tokens,
|
202
190
|
onTokenRemove: onTokenRemove,
|
@@ -265,14 +253,19 @@ const MultiSelectAddNewItem = () => {
|
|
265
253
|
setFilterVal(e.currentTarget.value);
|
266
254
|
};
|
267
255
|
|
268
|
-
return /*#__PURE__*/_react.default.createElement(
|
256
|
+
return /*#__PURE__*/_react.default.createElement(_.Box, {
|
257
|
+
maxWidth: "300px"
|
258
|
+
}, /*#__PURE__*/_react.default.createElement(_.Text, {
|
259
|
+
fontWeight: "bold",
|
260
|
+
fontSize: 1,
|
269
261
|
as: "label",
|
270
262
|
display: "block",
|
271
263
|
htmlFor: "autocompleteInput",
|
272
264
|
id: "autocompleteLabel"
|
273
|
-
}, "Pick
|
265
|
+
}, "Pick tags"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
|
266
|
+
block: true,
|
274
267
|
as: _TextInputWithTokens.default,
|
275
|
-
tokens:
|
268
|
+
tokens: [],
|
276
269
|
onTokenRemove: onTokenRemove,
|
277
270
|
onChange: handleChange,
|
278
271
|
id: "autocompleteInput"
|
@@ -296,14 +289,17 @@ const MultiSelectAddNewItem = () => {
|
|
296
289
|
};
|
297
290
|
|
298
291
|
exports.MultiSelectAddNewItem = MultiSelectAddNewItem;
|
292
|
+
MultiSelectAddNewItem.displayName = "MultiSelectAddNewItem";
|
299
293
|
|
300
294
|
const CustomEmptyStateMessage = () => {
|
301
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.
|
295
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
|
296
|
+
fontWeight: "bold",
|
297
|
+
fontSize: 1,
|
302
298
|
as: "label",
|
303
299
|
display: "block",
|
304
300
|
htmlFor: "autocompleteInput",
|
305
301
|
id: "autocompleteLabel"
|
306
|
-
}, "Pick
|
302
|
+
}, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
|
307
303
|
id: "autocompleteInput"
|
308
304
|
}), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
|
309
305
|
items: items,
|
@@ -324,12 +320,14 @@ const CustomSearchFilter = () => {
|
|
324
320
|
|
325
321
|
const customFilterFn = item => item.text.includes(filterVal);
|
326
322
|
|
327
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.
|
323
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
|
324
|
+
fontWeight: "bold",
|
325
|
+
fontSize: 1,
|
328
326
|
as: "label",
|
329
327
|
display: "block",
|
330
328
|
htmlFor: "autocompleteInput",
|
331
329
|
id: "autocompleteLabel"
|
332
|
-
}, "Pick
|
330
|
+
}, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
|
333
331
|
id: "autocompleteInput",
|
334
332
|
onChange: handleChange
|
335
333
|
}), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
|
@@ -362,12 +360,14 @@ const CustomSortAfterMenuClose = () => {
|
|
362
360
|
|
363
361
|
const customSortFn = (itemIdA, itemIdB) => isItemSelected(itemIdA) === isItemSelected(itemIdB) ? 0 : isItemSelected(itemIdA) ? 1 : -1;
|
364
362
|
|
365
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.
|
363
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
|
364
|
+
fontWeight: "bold",
|
365
|
+
fontSize: 1,
|
366
366
|
as: "label",
|
367
367
|
display: "block",
|
368
368
|
htmlFor: "autocompleteInput",
|
369
369
|
id: "autocompleteLabel"
|
370
|
-
}, "Pick
|
370
|
+
}, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
|
371
371
|
id: "autocompleteInput"
|
372
372
|
}), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
|
373
373
|
items: items,
|
@@ -398,12 +398,14 @@ const WithCallbackWhenOverlayOpenStateChanges = () => {
|
|
398
398
|
sx: {
|
399
399
|
gap: '1em'
|
400
400
|
}
|
401
|
-
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.
|
401
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.Text, {
|
402
|
+
fontWeight: "bold",
|
403
|
+
fontSize: 1,
|
402
404
|
as: "label",
|
403
405
|
display: "block",
|
404
406
|
htmlFor: "autocompleteInput",
|
405
407
|
id: "autocompleteLabel"
|
406
|
-
}, "Pick
|
408
|
+
}, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
|
407
409
|
id: "autocompleteInput"
|
408
410
|
}), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
|
409
411
|
items: items,
|
@@ -425,12 +427,14 @@ const AsyncLoadingOfItems = () => {
|
|
425
427
|
}, 1500);
|
426
428
|
};
|
427
429
|
|
428
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.
|
430
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
|
431
|
+
fontWeight: "bold",
|
432
|
+
fontSize: 1,
|
429
433
|
as: "label",
|
430
434
|
display: "block",
|
431
435
|
htmlFor: "autocompleteInput",
|
432
436
|
id: "autocompleteLabel"
|
433
|
-
}, "Pick
|
437
|
+
}, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
|
434
438
|
id: "autocompleteInput"
|
435
439
|
}), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
|
436
440
|
items: loadedItems,
|
@@ -444,12 +448,14 @@ const AsyncLoadingOfItems = () => {
|
|
444
448
|
exports.AsyncLoadingOfItems = AsyncLoadingOfItems;
|
445
449
|
|
446
450
|
const RenderingTheMenuOutsideAnOverlay = () => {
|
447
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.
|
451
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
|
452
|
+
fontWeight: "bold",
|
453
|
+
fontSize: 1,
|
448
454
|
as: "label",
|
449
455
|
display: "block",
|
450
456
|
htmlFor: "autocompleteInput",
|
451
457
|
id: "autocompleteLabel"
|
452
|
-
}, "Pick
|
458
|
+
}, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
|
453
459
|
id: "autocompleteInput"
|
454
460
|
}), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
|
455
461
|
items: items,
|
@@ -471,11 +477,14 @@ const CustomOverlayMenuAnchor = () => {
|
|
471
477
|
border: '1px solid black',
|
472
478
|
padding: '1em'
|
473
479
|
};
|
474
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.
|
480
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
|
481
|
+
fontWeight: "bold",
|
482
|
+
fontSize: 1,
|
475
483
|
as: "label",
|
484
|
+
display: "block",
|
476
485
|
htmlFor: "autocompleteInput",
|
477
486
|
id: "autocompleteLabel"
|
478
|
-
}, "Pick
|
487
|
+
}, "Pick tags"), /*#__PURE__*/_react.default.createElement(_.Box, _extends({}, anchorWrapperStyles, {
|
479
488
|
ref: menuAnchorRef
|
480
489
|
}), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
|
481
490
|
as: _.TextInput,
|
@@ -506,12 +515,14 @@ const CustomOverlayMenuAnchor = () => {
|
|
506
515
|
exports.CustomOverlayMenuAnchor = CustomOverlayMenuAnchor;
|
507
516
|
|
508
517
|
const WithCustomOverlayProps = () => {
|
509
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.
|
518
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Text, {
|
519
|
+
fontWeight: "bold",
|
520
|
+
fontSize: 1,
|
510
521
|
as: "label",
|
511
522
|
display: "block",
|
512
523
|
htmlFor: "autocompleteInput",
|
513
524
|
id: "autocompleteLabel"
|
514
|
-
}, "Pick
|
525
|
+
}, "Pick a tag"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
|
515
526
|
id: "autocompleteInput"
|
516
527
|
}), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, {
|
517
528
|
overlayProps: {
|
@@ -565,7 +576,7 @@ const InOverlayWithCustomScrollContainerRef = () => {
|
|
565
576
|
whiteSpace: 'nowrap',
|
566
577
|
borderWidth: '0'
|
567
578
|
}
|
568
|
-
}, "Pick
|
579
|
+
}, "Pick tags"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_.Box, {
|
569
580
|
display: "flex",
|
570
581
|
flexDirection: "column",
|
571
582
|
height: "100%"
|
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.buttonTableList = exports.buttonGroup = exports.closeButton = exports.invisibleButton = exports.primaryButton = exports.outlineButton = exports.dangerButton = exports.defaultButton = exports.default = void 0;
|
6
|
+
exports.disabledButton = exports.buttonTableList = exports.buttonGroup = exports.closeButton = exports.invisibleButton = exports.primaryButton = exports.outlineButton = exports.dangerButton = exports.defaultButton = exports.default = void 0;
|
7
7
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
9
9
|
|
@@ -88,6 +88,17 @@ const buttonTableList = args => /*#__PURE__*/_react.default.createElement(_.Butt
|
|
88
88
|
|
89
89
|
exports.buttonTableList = buttonTableList;
|
90
90
|
buttonTableList.displayName = "buttonTableList";
|
91
|
+
|
92
|
+
const disabledButton = args => {
|
93
|
+
const props = {
|
94
|
+
disabled: true,
|
95
|
+
...args
|
96
|
+
};
|
97
|
+
return /*#__PURE__*/_react.default.createElement(_.Button, props, "Disabled");
|
98
|
+
};
|
99
|
+
|
100
|
+
exports.disabledButton = disabledButton;
|
101
|
+
disabledButton.displayName = "disabledButton";
|
91
102
|
defaultButton.args = {
|
92
103
|
variant: 'medium'
|
93
104
|
};
|
@@ -138,7 +138,7 @@ const UseAnchoredPosition = args => {
|
|
138
138
|
anchorOffset: args.anchorOffset && parseInt(args.anchorOffset, 10),
|
139
139
|
alignmentOffset: args.alignmentOffset && parseInt(args.alignmentOffset, 10),
|
140
140
|
allowOutOfBounds: (_args$allowOutOfBound = args.allowOutOfBounds) !== null && _args$allowOutOfBound !== void 0 ? _args$allowOutOfBound : undefined
|
141
|
-
}, [args]);
|
141
|
+
}, [args.anchorY, args.anchorX, args.anchorPosition, args.anchorSide, args.anchorAlignment, args.anchorOffset, args.alignmentOffset, args.allowOutOfBounds, args.floatHeight, args.floatWidth]);
|
142
142
|
return /*#__PURE__*/_react.default.createElement(_.Box, {
|
143
143
|
position: "relative",
|
144
144
|
m: 2
|
@@ -48,9 +48,9 @@ const customItemThemes = {
|
|
48
48
|
const getItemVariant = (variant = 'default', disabled) => {
|
49
49
|
if (disabled) {
|
50
50
|
return {
|
51
|
-
color: get('colors.fg.
|
52
|
-
iconColor: get('colors.fg.
|
53
|
-
annotationColor: get('colors.fg.
|
51
|
+
color: get('colors.primer.fg.disabled'),
|
52
|
+
iconColor: get('colors.primer.fg.disabled'),
|
53
|
+
annotationColor: get('colors.primer.fg.disabled'),
|
54
54
|
hoverCursor: 'default'
|
55
55
|
};
|
56
56
|
}
|
package/lib-esm/Button/Button.js
CHANGED
@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
|
|
5
5
|
const Button = styled(ButtonBase).withConfig({
|
6
6
|
displayName: "Button",
|
7
7
|
componentId: "xjtz72-0"
|
8
|
-
})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.fg.
|
8
|
+
})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.primer.fg.disabled'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
|
9
9
|
export default Button;
|
@@ -4,5 +4,5 @@ import sx from '../sx';
|
|
4
4
|
const ButtonTableList = styled.summary.withConfig({
|
5
5
|
displayName: "ButtonTableList",
|
6
6
|
componentId: "sc-1m4q8ia-0"
|
7
|
-
})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:
|
7
|
+
})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:", ";cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.primer.fg.disabled'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
|
8
8
|
export default ButtonTableList;
|
@@ -9,7 +9,7 @@ import { buildComponentData, buildPaginationModel } from './model';
|
|
9
9
|
const Page = styled.a.withConfig({
|
10
10
|
displayName: "Pagination__Page",
|
11
11
|
componentId: "b80nss-0"
|
12
|
-
})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.fg.
|
12
|
+
})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.primer.fg.disabled'), get('space.1'), get('space.1'), COMMON);
|
13
13
|
|
14
14
|
function usePaginationPages({
|
15
15
|
theme,
|
@@ -153,15 +153,7 @@ function TextInputWithTokensInnerComponent({
|
|
153
153
|
minWidth: minWidthProp,
|
154
154
|
maxWidth: maxWidthProp,
|
155
155
|
variant: variantProp,
|
156
|
-
|
157
|
-
sx: {
|
158
|
-
alignItems: 'center',
|
159
|
-
flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
|
160
|
-
gap: '0.25rem',
|
161
|
-
'> *': {
|
162
|
-
flexShrink: 0
|
163
|
-
},
|
164
|
-
...(block ? {
|
156
|
+
sx: { ...(block ? {
|
165
157
|
display: 'flex',
|
166
158
|
width: '100%'
|
167
159
|
} : {}),
|
@@ -174,6 +166,21 @@ function TextInputWithTokensInnerComponent({
|
|
174
166
|
} : {}),
|
175
167
|
...sxProp
|
176
168
|
}
|
169
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
170
|
+
ref: containerRef,
|
171
|
+
display: "flex",
|
172
|
+
sx: {
|
173
|
+
alignItems: 'center',
|
174
|
+
flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
|
175
|
+
marginLeft: '-0.25rem',
|
176
|
+
marginBottom: '-0.25rem',
|
177
|
+
flexGrow: 1,
|
178
|
+
'> *': {
|
179
|
+
flexShrink: 0,
|
180
|
+
marginLeft: '0.25rem',
|
181
|
+
marginBottom: '0.25rem'
|
182
|
+
}
|
183
|
+
}
|
177
184
|
}, /*#__PURE__*/React.createElement(Box, {
|
178
185
|
sx: {
|
179
186
|
order: 1,
|
@@ -205,7 +212,7 @@ function TextInputWithTokensInnerComponent({
|
|
205
212
|
hideRemoveButton: hideTokenRemoveButtons,
|
206
213
|
size: size,
|
207
214
|
tabIndex: 0
|
208
|
-
}, tokenRest))) : null);
|
215
|
+
}, tokenRest))) : null));
|
209
216
|
}
|
210
217
|
|
211
218
|
TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";
|
package/lib-esm/Token/Token.js
CHANGED
@@ -19,7 +19,16 @@ const DefaultTokenStyled = styled(TokenBase).withConfig({
|
|
19
19
|
const LeadingVisualContainer = styled('span').withConfig({
|
20
20
|
displayName: "Token__LeadingVisualContainer",
|
21
21
|
componentId: "sc-1dg52pw-1"
|
22
|
-
})(["flex-shrink:0;line-height:0;"]
|
22
|
+
})(["flex-shrink:0;line-height:0;", ""], props => {
|
23
|
+
switch (props.size) {
|
24
|
+
case 'large':
|
25
|
+
case 'extralarge':
|
26
|
+
return css(["margin-right:", ";"], get('space.2'));
|
27
|
+
|
28
|
+
default:
|
29
|
+
return css(["margin-right:", ";"], get('space.1'));
|
30
|
+
}
|
31
|
+
});
|
23
32
|
const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
24
33
|
const {
|
25
34
|
as,
|
@@ -54,7 +63,9 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
54
63
|
isTokenInteractive: isTokenInteractive(props)
|
55
64
|
}, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
|
56
65
|
ref: forwardedRef
|
57
|
-
}), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer,
|
66
|
+
}), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, {
|
67
|
+
size: size
|
68
|
+
}, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
|
58
69
|
borderOffset: tokenBorderWidthPx,
|
59
70
|
onClick: onRemoveClick,
|
60
71
|
size: size,
|
@@ -20,7 +20,6 @@ const variants = variant({
|
|
20
20
|
variants: {
|
21
21
|
small: {
|
22
22
|
fontSize: 0,
|
23
|
-
gap: 1,
|
24
23
|
height: tokenSizes.small,
|
25
24
|
// without setting lineHeight to match height, the "x" appears vertically mis-aligned
|
26
25
|
lineHeight: tokenSizes.small,
|
@@ -33,7 +32,6 @@ const variants = variant({
|
|
33
32
|
},
|
34
33
|
medium: {
|
35
34
|
fontSize: 0,
|
36
|
-
gap: 1,
|
37
35
|
height: tokenSizes.medium,
|
38
36
|
lineHeight: tokenSizes.medium,
|
39
37
|
paddingLeft: 2,
|
@@ -43,7 +41,6 @@ const variants = variant({
|
|
43
41
|
},
|
44
42
|
large: {
|
45
43
|
fontSize: 0,
|
46
|
-
gap: 2,
|
47
44
|
height: tokenSizes.large,
|
48
45
|
lineHeight: tokenSizes.large,
|
49
46
|
paddingLeft: 2,
|
@@ -53,7 +50,6 @@ const variants = variant({
|
|
53
50
|
},
|
54
51
|
extralarge: {
|
55
52
|
fontSize: 1,
|
56
|
-
gap: 2,
|
57
53
|
height: tokenSizes.extralarge,
|
58
54
|
lineHeight: tokenSizes.extralarge,
|
59
55
|
paddingLeft: 3,
|
@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
2
2
|
|
3
3
|
import React from 'react';
|
4
4
|
import { XIcon } from '@primer/octicons-react';
|
5
|
-
import styled from 'styled-components';
|
5
|
+
import styled, { css } from 'styled-components';
|
6
6
|
import { variant } from 'styled-system';
|
7
7
|
import { get } from '../constants';
|
8
8
|
import sx from '../sx';
|
@@ -34,7 +34,16 @@ const getTokenButtonIconSize = size => parseInt(tokenSizes[size || defaultTokenS
|
|
34
34
|
const StyledTokenButton = styled.span.withConfig({
|
35
35
|
displayName: "_RemoveTokenButton__StyledTokenButton",
|
36
36
|
componentId: "sc-14lvcw1-0"
|
37
|
-
})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px
|
37
|
+
})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;", " &:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, props => {
|
38
|
+
switch (props.size) {
|
39
|
+
case 'large':
|
40
|
+
case 'extralarge':
|
41
|
+
return css(["margin-left:", ";"], get('space.2'));
|
42
|
+
|
43
|
+
default:
|
44
|
+
return css(["margin-left:", ";"], get('space.1'));
|
45
|
+
}
|
46
|
+
}, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
|
38
47
|
|
39
48
|
const RemoveTokenButton = ({
|
40
49
|
'aria-label': ariaLabel,
|
@@ -27,5 +27,5 @@ const TextInputWrapper = styled.span.withConfig({
|
|
27
27
|
} else {
|
28
28
|
return css(["padding:6px 12px;"]);
|
29
29
|
}
|
30
|
-
}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.fg.
|
30
|
+
}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.primer.fg.disabled'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
|
31
31
|
export default TextInputWrapper;
|