@pingux/astro 2.126.0-alpha.0 → 2.127.0-alpha.0
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/lib/cjs/components/Button/Buttons.styles.d.ts +17 -48
- package/lib/cjs/components/Button/Buttons.styles.js +3 -9
- package/lib/cjs/components/IconButton/IconButton.styles.d.ts +47 -0
- package/lib/cjs/components/IconButton/IconButton.styles.js +24 -1
- package/lib/cjs/components/Input/Input.styles.js +1 -0
- package/lib/cjs/components/SearchField/SearchField.js +1 -3
- package/lib/cjs/components/SearchField/SearchField.stories.js +18 -5
- package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.d.ts +3 -0
- package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.js +3 -0
- package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.d.ts +20 -0
- package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.js +6 -1
- package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/input.js +3 -1
- package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/text.d.ts +4 -0
- package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/text.js +4 -0
- package/lib/cjs/styles/themes/next-gen/convertedComponentList.d.ts +1 -0
- package/lib/cjs/styles/themes/next-gen/convertedComponentList.js +2 -1
- package/lib/cjs/styles/themes/next-gen/forms.d.ts +8 -0
- package/lib/cjs/styles/themes/next-gen/forms.js +4 -0
- package/lib/cjs/styles/themes/next-gen/next-gen.d.ts +45 -0
- package/lib/cjs/styles/themes/next-gen/variants/button.d.ts +41 -0
- package/lib/cjs/styles/themes/next-gen/variants/button.js +30 -1
- package/lib/cjs/styles/themes/next-gen/variants/input.js +4 -0
- package/lib/cjs/styles/themes/next-gen/variants/text.js +1 -1
- package/lib/cjs/utils/designUtils/figmaLinks.d.ts +3 -0
- package/lib/cjs/utils/designUtils/figmaLinks.js +3 -0
- package/lib/components/Button/Buttons.styles.js +2 -10
- package/lib/components/IconButton/IconButton.styles.js +25 -2
- package/lib/components/Input/Input.styles.js +1 -0
- package/lib/components/SearchField/SearchField.js +1 -3
- package/lib/components/SearchField/SearchField.stories.js +20 -7
- package/lib/styles/themeOverrides/nextGenDarkMode/colors.js +3 -0
- package/lib/styles/themeOverrides/nextGenDarkMode/variants/buttons.js +6 -1
- package/lib/styles/themeOverrides/nextGenDarkMode/variants/input.js +3 -1
- package/lib/styles/themeOverrides/nextGenDarkMode/variants/text.js +4 -0
- package/lib/styles/themes/next-gen/convertedComponentList.js +2 -1
- package/lib/styles/themes/next-gen/forms.js +4 -0
- package/lib/styles/themes/next-gen/variants/button.js +30 -1
- package/lib/styles/themes/next-gen/variants/input.js +4 -0
- package/lib/styles/themes/next-gen/variants/text.js +1 -1
- package/lib/utils/designUtils/figmaLinks.js +3 -0
- package/package.json +1 -1
@@ -20,6 +20,23 @@ export declare const base: {
|
|
20
20
|
flexShrink: number;
|
21
21
|
whiteSpace: string;
|
22
22
|
};
|
23
|
+
export declare const defaultActive: {
|
24
|
+
bg: string;
|
25
|
+
border: string;
|
26
|
+
borderColor: string;
|
27
|
+
color: string;
|
28
|
+
boxShadow: string;
|
29
|
+
path: {
|
30
|
+
fill: string;
|
31
|
+
};
|
32
|
+
};
|
33
|
+
export declare const defaultHover: {
|
34
|
+
bg: string;
|
35
|
+
border: string;
|
36
|
+
borderColor: string;
|
37
|
+
color: string;
|
38
|
+
boxShadow: string;
|
39
|
+
};
|
23
40
|
export declare const defaultFocus: {
|
24
41
|
outline: string;
|
25
42
|
outlineColor: string;
|
@@ -364,54 +381,6 @@ declare const _default: {
|
|
364
381
|
flexShrink: number;
|
365
382
|
whiteSpace: string;
|
366
383
|
};
|
367
|
-
filter: {
|
368
|
-
px: string;
|
369
|
-
borderColor: string;
|
370
|
-
height: number;
|
371
|
-
color: string;
|
372
|
-
display: string;
|
373
|
-
bg: string;
|
374
|
-
border: string;
|
375
|
-
'&.is-hovered': {
|
376
|
-
bg: string;
|
377
|
-
border: string;
|
378
|
-
borderColor: string;
|
379
|
-
color: string;
|
380
|
-
boxShadow: string;
|
381
|
-
};
|
382
|
-
'&.is-pressed': {
|
383
|
-
bg: string;
|
384
|
-
border: string;
|
385
|
-
borderColor: string;
|
386
|
-
color: string;
|
387
|
-
boxShadow: string;
|
388
|
-
path: {
|
389
|
-
fill: string;
|
390
|
-
};
|
391
|
-
};
|
392
|
-
'&.is-focused': {
|
393
|
-
outline: string;
|
394
|
-
outlineColor: string;
|
395
|
-
outlineOffset: string;
|
396
|
-
};
|
397
|
-
fontSize: string;
|
398
|
-
fontWeight: number;
|
399
|
-
fontFamily: string;
|
400
|
-
overflowWrap: import("../..").overflowWrap;
|
401
|
-
maxWidth: string;
|
402
|
-
wordWrap: import("../..").wordWrap;
|
403
|
-
wordBreak: import("../..").wordBreak;
|
404
|
-
cursor: string;
|
405
|
-
lineHeight: string;
|
406
|
-
minWidth: string;
|
407
|
-
padding: string;
|
408
|
-
outline: string;
|
409
|
-
alignItems: string;
|
410
|
-
justifyContent: string;
|
411
|
-
borderRadius: string;
|
412
|
-
flexShrink: number;
|
413
|
-
whiteSpace: string;
|
414
|
-
};
|
415
384
|
headerBar: {
|
416
385
|
backgroundColor: string;
|
417
386
|
'&.is-hovered': {
|
@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
|
|
12
12
|
_Object$defineProperty(exports, "__esModule", {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
-
exports.text = exports.quiet = exports.link = exports.focusWithCroppedOutline = exports.defaultFocus = exports["default"] = exports.base = void 0;
|
15
|
+
exports.text = exports.quiet = exports.link = exports.focusWithCroppedOutline = exports.defaultHover = exports.defaultFocus = exports.defaultActive = exports["default"] = exports.base = void 0;
|
16
16
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
17
17
|
var _Text = require("../Text/Text.styles");
|
18
18
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
@@ -41,6 +41,7 @@ var defaultActive = {
|
|
41
41
|
fill: 'white'
|
42
42
|
}
|
43
43
|
};
|
44
|
+
exports.defaultActive = defaultActive;
|
44
45
|
var defaultHover = {
|
45
46
|
bg: 'accent.99',
|
46
47
|
border: '1px solid',
|
@@ -48,6 +49,7 @@ var defaultHover = {
|
|
48
49
|
color: 'accent.40',
|
49
50
|
boxShadow: 'standard'
|
50
51
|
};
|
52
|
+
exports.defaultHover = defaultHover;
|
51
53
|
var defaultFocus = {
|
52
54
|
outline: '1px solid',
|
53
55
|
outlineColor: 'focus',
|
@@ -195,13 +197,6 @@ var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
|
|
195
197
|
'&.is-pressed': _objectSpread({}, defaultActive),
|
196
198
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
197
199
|
});
|
198
|
-
var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
|
199
|
-
px: 'sm',
|
200
|
-
borderColor: 'neutral.80',
|
201
|
-
height: 40,
|
202
|
-
color: 'active',
|
203
|
-
display: 'flex'
|
204
|
-
});
|
205
200
|
var colorBlock = {
|
206
201
|
bg: 'neutral.95',
|
207
202
|
border: '1px solid',
|
@@ -305,7 +300,6 @@ var _default = {
|
|
305
300
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
306
301
|
}),
|
307
302
|
exampleText: exampleText,
|
308
|
-
filter: filter,
|
309
303
|
headerBar: headerBar,
|
310
304
|
inline: inline,
|
311
305
|
inlinePrimary: inlinePrimary,
|
@@ -675,5 +675,52 @@ declare const _default: {
|
|
675
675
|
boxShadow: string;
|
676
676
|
};
|
677
677
|
};
|
678
|
+
filter: {
|
679
|
+
bg: string;
|
680
|
+
border: string;
|
681
|
+
outline: string;
|
682
|
+
borderColor: string;
|
683
|
+
borderRadius: string;
|
684
|
+
height: string;
|
685
|
+
width: string;
|
686
|
+
display: string;
|
687
|
+
px: string;
|
688
|
+
alignSelf: string;
|
689
|
+
path: {
|
690
|
+
fill: string;
|
691
|
+
};
|
692
|
+
'&.is-hovered': {
|
693
|
+
path: {
|
694
|
+
fill: string;
|
695
|
+
};
|
696
|
+
bg: string;
|
697
|
+
border: string;
|
698
|
+
borderColor: string;
|
699
|
+
color: string;
|
700
|
+
boxShadow: string;
|
701
|
+
};
|
702
|
+
'&.is-pressed': {
|
703
|
+
bg: string;
|
704
|
+
border: string;
|
705
|
+
borderColor: string;
|
706
|
+
color: string;
|
707
|
+
boxShadow: string;
|
708
|
+
path: {
|
709
|
+
fill: string;
|
710
|
+
};
|
711
|
+
};
|
712
|
+
'&.is-focused': {
|
713
|
+
outline: string;
|
714
|
+
outlineColor: string;
|
715
|
+
outlineOffset: string;
|
716
|
+
};
|
717
|
+
justifyContent: string;
|
718
|
+
appearance: string;
|
719
|
+
alignItems: string;
|
720
|
+
flexGrow: number;
|
721
|
+
flexShrink: number;
|
722
|
+
cursor: string;
|
723
|
+
p: string;
|
724
|
+
};
|
678
725
|
};
|
679
726
|
export default _default;
|
@@ -147,6 +147,28 @@ var searchClearButton = _objectSpread(_objectSpread({}, base), {}, {
|
|
147
147
|
position: 'absolute',
|
148
148
|
right: 10
|
149
149
|
});
|
150
|
+
var filter = _objectSpread(_objectSpread({}, base), {}, {
|
151
|
+
bg: 'white',
|
152
|
+
border: '1px solid',
|
153
|
+
outline: 'none',
|
154
|
+
borderColor: 'neutral.80',
|
155
|
+
borderRadius: '2px',
|
156
|
+
height: '40px',
|
157
|
+
width: '40px',
|
158
|
+
display: 'flex',
|
159
|
+
px: 'sm',
|
160
|
+
alignSelf: 'center',
|
161
|
+
path: {
|
162
|
+
fill: 'active'
|
163
|
+
},
|
164
|
+
'&.is-hovered': _objectSpread(_objectSpread({}, _Buttons.defaultHover), {}, {
|
165
|
+
path: {
|
166
|
+
fill: 'accent.40'
|
167
|
+
}
|
168
|
+
}),
|
169
|
+
'&.is-pressed': _objectSpread({}, _Buttons.defaultActive),
|
170
|
+
'&.is-focused': _objectSpread({}, _Buttons.defaultFocus)
|
171
|
+
});
|
150
172
|
var _default = {
|
151
173
|
base: base,
|
152
174
|
bidirectional: bidirectional,
|
@@ -173,6 +195,7 @@ var _default = {
|
|
173
195
|
// Recipe related variants
|
174
196
|
applicationPortal: applicationPortal,
|
175
197
|
applicationPortalPinned: applicationPortalPinned,
|
176
|
-
searchClearButton: searchClearButton
|
198
|
+
searchClearButton: searchClearButton,
|
199
|
+
filter: filter
|
177
200
|
};
|
178
201
|
exports["default"] = _default;
|
@@ -82,6 +82,7 @@ input.large = _objectSpread(_objectSpread({}, input), {}, {
|
|
82
82
|
height: '4em'
|
83
83
|
});
|
84
84
|
input.search = _objectSpread(_objectSpread({}, input), {}, {
|
85
|
+
px: 'xl',
|
85
86
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
86
87
|
});
|
87
88
|
input.small = _objectSpread(_objectSpread({}, input), {}, {
|
@@ -70,9 +70,7 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
70
70
|
variant: "forms.search.wrapper"
|
71
71
|
}, fieldControlWrapperProps), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
|
72
72
|
variant: "forms.input.search",
|
73
|
-
ref: searchRef
|
74
|
-
pl: "xl",
|
75
|
-
pr: "xl"
|
73
|
+
ref: searchRef
|
76
74
|
}, fieldControlInputProps)), icon && (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
|
77
75
|
icon: icon,
|
78
76
|
variant: "forms.search.icon",
|
@@ -21,10 +21,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
|
|
21
21
|
var _react = _interopRequireWildcard(require("react"));
|
22
22
|
var _AccountGroupIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountGroupIcon"));
|
23
23
|
var _FilterIcon = _interopRequireDefault(require("@pingux/mdi-react/FilterIcon"));
|
24
|
+
var _FilterVariantIcon = _interopRequireDefault(require("@pingux/mdi-react/FilterVariantIcon"));
|
24
25
|
var _SearchIcon = _interopRequireDefault(require("@pingux/mdi-react/SearchIcon"));
|
25
26
|
var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
|
26
27
|
var _hooks = require("../../hooks");
|
27
28
|
var _index = require("../../index");
|
29
|
+
var _figmaLinks = require("../../utils/designUtils/figmaLinks");
|
28
30
|
var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
|
29
31
|
var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
|
30
32
|
var _SearchField = _interopRequireDefault(require("./SearchField.mdx"));
|
@@ -76,7 +78,7 @@ var _default = {
|
|
76
78
|
}
|
77
79
|
}, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes),
|
78
80
|
args: {
|
79
|
-
placeholder: 'Search
|
81
|
+
placeholder: 'Search'
|
80
82
|
}
|
81
83
|
};
|
82
84
|
exports["default"] = _default;
|
@@ -89,6 +91,12 @@ var Default = function Default(args) {
|
|
89
91
|
}));
|
90
92
|
};
|
91
93
|
exports.Default = Default;
|
94
|
+
Default.parameters = {
|
95
|
+
design: {
|
96
|
+
type: 'figma',
|
97
|
+
url: _figmaLinks.FIGMA_LINKS.searchField.onyx
|
98
|
+
}
|
99
|
+
};
|
92
100
|
var Controlled = function Controlled() {
|
93
101
|
var _useState = (0, _react.useState)(''),
|
94
102
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
@@ -154,19 +162,24 @@ var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {
|
|
154
162
|
};
|
155
163
|
exports.ControlledWithDebouncedInput = ControlledWithDebouncedInput;
|
156
164
|
var WithFilter = function WithFilter() {
|
165
|
+
var _useGetTheme = (0, _hooks.useGetTheme)(),
|
166
|
+
isOnyx = _useGetTheme.themeState.isOnyx;
|
157
167
|
return (0, _react2.jsx)(_index.Box, {
|
158
168
|
p: "xx",
|
159
169
|
isRow: true,
|
160
|
-
gap:
|
170
|
+
gap: isOnyx ? 'lg' : 'md'
|
161
171
|
}, (0, _react2.jsx)(_index.SearchField, {
|
162
172
|
"aria-label": "search items",
|
163
173
|
placeholder: "Search",
|
164
|
-
|
165
|
-
}), (0, _react2.jsx)(_index.
|
174
|
+
width: "650px"
|
175
|
+
}), (0, _react2.jsx)(_index.IconButton, {
|
166
176
|
variant: "filter",
|
167
177
|
"aria-label": "filter button"
|
168
178
|
}, (0, _react2.jsx)(_index.Icon, {
|
169
|
-
icon: _FilterIcon["default"]
|
179
|
+
icon: isOnyx ? _FilterVariantIcon["default"] : _FilterIcon["default"],
|
180
|
+
title: {
|
181
|
+
name: 'Filter Icon'
|
182
|
+
}
|
170
183
|
})));
|
171
184
|
};
|
172
185
|
exports.WithFilter = WithFilter;
|
@@ -232,6 +232,26 @@ declare const buttons: {
|
|
232
232
|
backgroundColor: string;
|
233
233
|
};
|
234
234
|
};
|
235
|
+
filter: {
|
236
|
+
'&.is-hovered': {
|
237
|
+
backgroundColor: string;
|
238
|
+
};
|
239
|
+
path: {
|
240
|
+
fill: string;
|
241
|
+
};
|
242
|
+
'&.is-focused': {
|
243
|
+
outline: string;
|
244
|
+
outlineColor: string;
|
245
|
+
outlineOffset: string;
|
246
|
+
};
|
247
|
+
'&.is-pressed': {
|
248
|
+
backgroundColor: string;
|
249
|
+
borderColor: string;
|
250
|
+
path: {
|
251
|
+
fill: string;
|
252
|
+
};
|
253
|
+
};
|
254
|
+
};
|
235
255
|
};
|
236
256
|
};
|
237
257
|
export default buttons;
|
@@ -61,7 +61,12 @@ var iconButtons = {
|
|
61
61
|
'&.is-hovered': {
|
62
62
|
backgroundColor: '#0a0b0d'
|
63
63
|
}
|
64
|
-
}
|
64
|
+
},
|
65
|
+
filter: _objectSpread(_objectSpread({}, baseIconButton), {}, {
|
66
|
+
'&.is-hovered': {
|
67
|
+
backgroundColor: 'gray-700'
|
68
|
+
}
|
69
|
+
})
|
65
70
|
};
|
66
71
|
var buttons = {
|
67
72
|
primary: {
|
@@ -14,11 +14,13 @@ _Object$defineProperty(exports, "__esModule", {
|
|
14
14
|
});
|
15
15
|
exports.input = exports.fieldControlWrapper = void 0;
|
16
16
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
17
|
+
var _text = require("./text");
|
17
18
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
18
19
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
19
20
|
var input = {
|
20
21
|
backgroundColor: 'background.base',
|
21
|
-
borderColor: 'border.input'
|
22
|
+
borderColor: 'border.input',
|
23
|
+
'&::placeholder': _text.text.placeholder
|
22
24
|
};
|
23
25
|
exports.input = input;
|
24
26
|
var fieldControlWrapper = {
|
@@ -12,6 +12,7 @@ export declare const componentSpecificNextGenBlacklist: {
|
|
12
12
|
export declare const astroBlacklistStory: {
|
13
13
|
DataTable: string[];
|
14
14
|
NavBar: string[];
|
15
|
+
SearchField: string[];
|
15
16
|
};
|
16
17
|
export declare const nextGenOnlyComponents: string[];
|
17
18
|
export default nextGenConvertedComponents;
|
@@ -19,7 +19,8 @@ var componentSpecificNextGenBlacklist = {
|
|
19
19
|
exports.componentSpecificNextGenBlacklist = componentSpecificNextGenBlacklist;
|
20
20
|
var astroBlacklistStory = {
|
21
21
|
DataTable: ['Onyx Default'],
|
22
|
-
NavBar: ['Onyx Default']
|
22
|
+
NavBar: ['Onyx Default'],
|
23
|
+
SearchField: ['Onyx With Filter']
|
23
24
|
};
|
24
25
|
exports.astroBlacklistStory = astroBlacklistStory;
|
25
26
|
var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];
|
@@ -25,6 +25,10 @@ export declare const search: {
|
|
25
25
|
wrapper: {
|
26
26
|
opacity: number;
|
27
27
|
};
|
28
|
+
icon: {
|
29
|
+
color: string;
|
30
|
+
ml: string;
|
31
|
+
};
|
28
32
|
};
|
29
33
|
export declare const comboBox: {
|
30
34
|
input: {
|
@@ -160,6 +164,10 @@ declare const _default: {
|
|
160
164
|
wrapper: {
|
161
165
|
opacity: number;
|
162
166
|
};
|
167
|
+
icon: {
|
168
|
+
color: string;
|
169
|
+
ml: string;
|
170
|
+
};
|
163
171
|
};
|
164
172
|
numberField: {
|
165
173
|
arrowsWrapper: {
|
@@ -1312,7 +1312,14 @@ declare const _default: {
|
|
1312
1312
|
};
|
1313
1313
|
};
|
1314
1314
|
searchClearButton: {
|
1315
|
+
width: string;
|
1316
|
+
height: string;
|
1315
1317
|
border: string;
|
1318
|
+
'& > svg': {
|
1319
|
+
minWidth: string;
|
1320
|
+
width: string;
|
1321
|
+
height: string;
|
1322
|
+
};
|
1316
1323
|
'&.is-hovered': {
|
1317
1324
|
bg: string;
|
1318
1325
|
};
|
@@ -1335,6 +1342,40 @@ declare const _default: {
|
|
1335
1342
|
outlineOffset: string;
|
1336
1343
|
};
|
1337
1344
|
};
|
1345
|
+
filter: {
|
1346
|
+
bg: string;
|
1347
|
+
border: string;
|
1348
|
+
borderColor: string;
|
1349
|
+
width: string;
|
1350
|
+
height: string;
|
1351
|
+
'&.is-hovered': {
|
1352
|
+
border: string;
|
1353
|
+
borderColor: string;
|
1354
|
+
backgroundColor: string;
|
1355
|
+
path: {
|
1356
|
+
fill: string;
|
1357
|
+
};
|
1358
|
+
};
|
1359
|
+
'&.is-pressed': {
|
1360
|
+
backgroundColor: string;
|
1361
|
+
borderColor: string;
|
1362
|
+
path: {
|
1363
|
+
fill: string;
|
1364
|
+
};
|
1365
|
+
};
|
1366
|
+
cursor: string;
|
1367
|
+
transition: string;
|
1368
|
+
outline: string;
|
1369
|
+
borderRadius: string;
|
1370
|
+
path: {
|
1371
|
+
fill: string;
|
1372
|
+
};
|
1373
|
+
'&.is-focused': {
|
1374
|
+
outline: string;
|
1375
|
+
outlineColor: string;
|
1376
|
+
outlineOffset: string;
|
1377
|
+
};
|
1378
|
+
};
|
1338
1379
|
};
|
1339
1380
|
modalCloseButton: {
|
1340
1381
|
position: string;
|
@@ -1483,6 +1524,10 @@ declare const _default: {
|
|
1483
1524
|
wrapper: {
|
1484
1525
|
opacity: number;
|
1485
1526
|
};
|
1527
|
+
icon: {
|
1528
|
+
color: string;
|
1529
|
+
ml: string;
|
1530
|
+
};
|
1486
1531
|
};
|
1487
1532
|
numberField: {
|
1488
1533
|
arrowsWrapper: {
|
@@ -1061,7 +1061,14 @@ declare const buttons: {
|
|
1061
1061
|
};
|
1062
1062
|
};
|
1063
1063
|
searchClearButton: {
|
1064
|
+
width: string;
|
1065
|
+
height: string;
|
1064
1066
|
border: string;
|
1067
|
+
'& > svg': {
|
1068
|
+
minWidth: string;
|
1069
|
+
width: string;
|
1070
|
+
height: string;
|
1071
|
+
};
|
1065
1072
|
'&.is-hovered': {
|
1066
1073
|
bg: string;
|
1067
1074
|
};
|
@@ -1084,6 +1091,40 @@ declare const buttons: {
|
|
1084
1091
|
outlineOffset: string;
|
1085
1092
|
};
|
1086
1093
|
};
|
1094
|
+
filter: {
|
1095
|
+
bg: string;
|
1096
|
+
border: string;
|
1097
|
+
borderColor: string;
|
1098
|
+
width: string;
|
1099
|
+
height: string;
|
1100
|
+
'&.is-hovered': {
|
1101
|
+
border: string;
|
1102
|
+
borderColor: string;
|
1103
|
+
backgroundColor: string;
|
1104
|
+
path: {
|
1105
|
+
fill: string;
|
1106
|
+
};
|
1107
|
+
};
|
1108
|
+
'&.is-pressed': {
|
1109
|
+
backgroundColor: string;
|
1110
|
+
borderColor: string;
|
1111
|
+
path: {
|
1112
|
+
fill: string;
|
1113
|
+
};
|
1114
|
+
};
|
1115
|
+
cursor: string;
|
1116
|
+
transition: string;
|
1117
|
+
outline: string;
|
1118
|
+
borderRadius: string;
|
1119
|
+
path: {
|
1120
|
+
fill: string;
|
1121
|
+
};
|
1122
|
+
'&.is-focused': {
|
1123
|
+
outline: string;
|
1124
|
+
outlineColor: string;
|
1125
|
+
outlineOffset: string;
|
1126
|
+
};
|
1127
|
+
};
|
1087
1128
|
};
|
1088
1129
|
modalCloseButton: {
|
1089
1130
|
position: string;
|
@@ -475,7 +475,14 @@ var iconButtons = {
|
|
475
475
|
}
|
476
476
|
},
|
477
477
|
searchClearButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
|
478
|
+
width: '20px',
|
479
|
+
height: '20px',
|
478
480
|
border: 'none',
|
481
|
+
'& > svg': {
|
482
|
+
minWidth: '18px',
|
483
|
+
width: '18px',
|
484
|
+
height: '18px'
|
485
|
+
},
|
479
486
|
'&.is-hovered': {
|
480
487
|
bg: 'background.hover'
|
481
488
|
},
|
@@ -483,7 +490,29 @@ var iconButtons = {
|
|
483
490
|
bg: 'background.hover'
|
484
491
|
},
|
485
492
|
position: 'absolute',
|
486
|
-
right:
|
493
|
+
right: 20
|
494
|
+
}),
|
495
|
+
filter: _objectSpread(_objectSpread({}, baseIconButton), {}, {
|
496
|
+
bg: 'transparent',
|
497
|
+
border: '2px solid',
|
498
|
+
borderColor: 'transparent',
|
499
|
+
width: '32px',
|
500
|
+
height: '32px',
|
501
|
+
'&.is-hovered': {
|
502
|
+
border: '2px solid',
|
503
|
+
borderColor: 'transparent',
|
504
|
+
backgroundColor: 'gray-100',
|
505
|
+
path: {
|
506
|
+
fill: 'dark'
|
507
|
+
}
|
508
|
+
},
|
509
|
+
'&.is-pressed': {
|
510
|
+
backgroundColor: 'gray-100',
|
511
|
+
borderColor: 'gray-200',
|
512
|
+
path: {
|
513
|
+
fill: 'dark'
|
514
|
+
}
|
515
|
+
}
|
487
516
|
})
|
488
517
|
};
|
489
518
|
var buttons = {
|
@@ -55,6 +55,10 @@ input.promptInput = _objectSpread(_objectSpread({}, input), {}, {
|
|
55
55
|
}
|
56
56
|
});
|
57
57
|
input.search = _objectSpread(_objectSpread({}, input), {}, {
|
58
|
+
height: '50px',
|
59
|
+
pl: '4em !important',
|
60
|
+
pr: 'xl',
|
61
|
+
color: 'font.base',
|
58
62
|
'&.is-disabled': _objectSpread(_objectSpread({}, readOnlyandDisabledStyles), {}, {
|
59
63
|
'> input': _objectSpread({}, readOnlyandDisabledStyles)
|
60
64
|
})
|
@@ -228,6 +228,9 @@ var FIGMA_LINKS = {
|
|
228
228
|
withLeftOfDataSlot: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44693-39909&t=r7CoWppWfQQ6G2t8-4',
|
229
229
|
withCharts: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-39944&t=r7CoWppWfQQ6G2t8-4',
|
230
230
|
withExtraLongText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-40069&t=r7CoWppWfQQ6G2t8-4'
|
231
|
+
},
|
232
|
+
searchField: {
|
233
|
+
onyx: 'https://www.figma.com/file/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=249-542&p=f&t=ZRXGSYrM1OXJ41QB-0'
|
231
234
|
}
|
232
235
|
};
|
233
236
|
exports.FIGMA_LINKS = FIGMA_LINKS;
|
@@ -23,7 +23,7 @@ export var base = _objectSpread({
|
|
23
23
|
flexShrink: 0,
|
24
24
|
whiteSpace: 'nowrap'
|
25
25
|
}, textVariants.buttonLabel);
|
26
|
-
var defaultActive = {
|
26
|
+
export var defaultActive = {
|
27
27
|
bg: 'active',
|
28
28
|
border: '1px solid',
|
29
29
|
borderColor: 'active',
|
@@ -33,7 +33,7 @@ var defaultActive = {
|
|
33
33
|
fill: 'white'
|
34
34
|
}
|
35
35
|
};
|
36
|
-
var defaultHover = {
|
36
|
+
export var defaultHover = {
|
37
37
|
bg: 'accent.99',
|
38
38
|
border: '1px solid',
|
39
39
|
borderColor: 'accent.40',
|
@@ -182,13 +182,6 @@ var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
|
|
182
182
|
'&.is-pressed': _objectSpread({}, defaultActive),
|
183
183
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
184
184
|
});
|
185
|
-
var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
|
186
|
-
px: 'sm',
|
187
|
-
borderColor: 'neutral.80',
|
188
|
-
height: 40,
|
189
|
-
color: 'active',
|
190
|
-
display: 'flex'
|
191
|
-
});
|
192
185
|
var colorBlock = {
|
193
186
|
bg: 'neutral.95',
|
194
187
|
border: '1px solid',
|
@@ -292,7 +285,6 @@ export default {
|
|
292
285
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
293
286
|
}),
|
294
287
|
exampleText: exampleText,
|
295
|
-
filter: filter,
|
296
288
|
headerBar: headerBar,
|
297
289
|
inline: inline,
|
298
290
|
inlinePrimary: inlinePrimary,
|
@@ -10,7 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
10
10
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
11
11
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
12
12
|
import { badgeDeleteButton, deleteButton, invertedBadgeDeleteButton } from '../Badge/Badge.styles';
|
13
|
-
import { defaultFocus } from '../Button/Buttons.styles';
|
13
|
+
import { defaultActive, defaultFocus, defaultHover } from '../Button/Buttons.styles';
|
14
14
|
import { toggle } from '../CollapsiblePanel/CollapsiblePanel.styles';
|
15
15
|
import { copyButton } from '../CopyText/CopyText.styles';
|
16
16
|
import { containedIcon } from '../DatePicker/DatePicker.styles';
|
@@ -138,6 +138,28 @@ var searchClearButton = _objectSpread(_objectSpread({}, base), {}, {
|
|
138
138
|
position: 'absolute',
|
139
139
|
right: 10
|
140
140
|
});
|
141
|
+
var filter = _objectSpread(_objectSpread({}, base), {}, {
|
142
|
+
bg: 'white',
|
143
|
+
border: '1px solid',
|
144
|
+
outline: 'none',
|
145
|
+
borderColor: 'neutral.80',
|
146
|
+
borderRadius: '2px',
|
147
|
+
height: '40px',
|
148
|
+
width: '40px',
|
149
|
+
display: 'flex',
|
150
|
+
px: 'sm',
|
151
|
+
alignSelf: 'center',
|
152
|
+
path: {
|
153
|
+
fill: 'active'
|
154
|
+
},
|
155
|
+
'&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
|
156
|
+
path: {
|
157
|
+
fill: 'accent.40'
|
158
|
+
}
|
159
|
+
}),
|
160
|
+
'&.is-pressed': _objectSpread({}, defaultActive),
|
161
|
+
'&.is-focused': _objectSpread({}, defaultFocus)
|
162
|
+
});
|
141
163
|
export default {
|
142
164
|
base: base,
|
143
165
|
bidirectional: bidirectional,
|
@@ -164,5 +186,6 @@ export default {
|
|
164
186
|
// Recipe related variants
|
165
187
|
applicationPortal: applicationPortal,
|
166
188
|
applicationPortalPinned: applicationPortalPinned,
|
167
|
-
searchClearButton: searchClearButton
|
189
|
+
searchClearButton: searchClearButton,
|
190
|
+
filter: filter
|
168
191
|
};
|
@@ -74,6 +74,7 @@ input.large = _objectSpread(_objectSpread({}, input), {}, {
|
|
74
74
|
height: '4em'
|
75
75
|
});
|
76
76
|
input.search = _objectSpread(_objectSpread({}, input), {}, {
|
77
|
+
px: 'xl',
|
77
78
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
78
79
|
});
|
79
80
|
input.small = _objectSpread(_objectSpread({}, input), {}, {
|
@@ -59,9 +59,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
59
59
|
variant: "forms.search.wrapper"
|
60
60
|
}, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
|
61
61
|
variant: "forms.input.search",
|
62
|
-
ref: searchRef
|
63
|
-
pl: "xl",
|
64
|
-
pr: "xl"
|
62
|
+
ref: searchRef
|
65
63
|
}, fieldControlInputProps)), icon && ___EmotionJSX(Icon, _extends({
|
66
64
|
icon: icon,
|
67
65
|
variant: "forms.search.icon",
|
@@ -14,10 +14,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
14
14
|
import React, { useState } from 'react';
|
15
15
|
import Users from '@pingux/mdi-react/AccountGroupIcon';
|
16
16
|
import FilterIcon from '@pingux/mdi-react/FilterIcon';
|
17
|
+
import FilterVariantIcon from '@pingux/mdi-react/FilterVariantIcon';
|
17
18
|
import SearchIcon from '@pingux/mdi-react/SearchIcon';
|
18
19
|
import DocsLayout from '../../../.storybook/storybookDocsLayout';
|
19
|
-
import { useDebounce } from '../../hooks';
|
20
|
-
import { Box,
|
20
|
+
import { useDebounce, useGetTheme } from '../../hooks';
|
21
|
+
import { Box, Icon, IconButton, SearchField, Text } from '../../index';
|
22
|
+
import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
|
21
23
|
import { ariaAttributeBaseArgTypes, ariaAttributeBaseDocSettings } from '../../utils/docUtils/ariaAttributes';
|
22
24
|
import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
|
23
25
|
import SearchFieldReadme from './SearchField.mdx';
|
@@ -65,7 +67,7 @@ export default {
|
|
65
67
|
}
|
66
68
|
}, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
|
67
69
|
args: {
|
68
|
-
placeholder: 'Search
|
70
|
+
placeholder: 'Search'
|
69
71
|
}
|
70
72
|
};
|
71
73
|
export var Default = function Default(args) {
|
@@ -77,6 +79,12 @@ export var Default = function Default(args) {
|
|
77
79
|
}));
|
78
80
|
};
|
79
81
|
|
82
|
+
Default.parameters = {
|
83
|
+
design: {
|
84
|
+
type: 'figma',
|
85
|
+
url: FIGMA_LINKS.searchField.onyx
|
86
|
+
}
|
87
|
+
};
|
80
88
|
export var Controlled = function Controlled() {
|
81
89
|
var _useState = useState(''),
|
82
90
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -141,18 +149,23 @@ export var ControlledWithDebouncedInput = function ControlledWithDebouncedInput(
|
|
141
149
|
}, "Debounced value: ".concat(debouncedSearchText)));
|
142
150
|
};
|
143
151
|
export var WithFilter = function WithFilter() {
|
152
|
+
var _useGetTheme = useGetTheme(),
|
153
|
+
isOnyx = _useGetTheme.themeState.isOnyx;
|
144
154
|
return ___EmotionJSX(Box, {
|
145
155
|
p: "xx",
|
146
156
|
isRow: true,
|
147
|
-
gap:
|
157
|
+
gap: isOnyx ? 'lg' : 'md'
|
148
158
|
}, ___EmotionJSX(SearchField, {
|
149
159
|
"aria-label": "search items",
|
150
160
|
placeholder: "Search",
|
151
|
-
|
152
|
-
}), ___EmotionJSX(
|
161
|
+
width: "650px"
|
162
|
+
}), ___EmotionJSX(IconButton, {
|
153
163
|
variant: "filter",
|
154
164
|
"aria-label": "filter button"
|
155
165
|
}, ___EmotionJSX(Icon, {
|
156
|
-
icon: FilterIcon
|
166
|
+
icon: isOnyx ? FilterVariantIcon : FilterIcon,
|
167
|
+
title: {
|
168
|
+
name: 'Filter Icon'
|
169
|
+
}
|
157
170
|
})));
|
158
171
|
};
|
@@ -54,7 +54,12 @@ var iconButtons = {
|
|
54
54
|
'&.is-hovered': {
|
55
55
|
backgroundColor: '#0a0b0d'
|
56
56
|
}
|
57
|
-
}
|
57
|
+
},
|
58
|
+
filter: _objectSpread(_objectSpread({}, baseIconButton), {}, {
|
59
|
+
'&.is-hovered': {
|
60
|
+
backgroundColor: 'gray-700'
|
61
|
+
}
|
62
|
+
})
|
58
63
|
};
|
59
64
|
var buttons = {
|
60
65
|
primary: {
|
@@ -9,9 +9,11 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
|
|
9
9
|
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
10
10
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
11
11
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
12
|
+
import { text } from './text';
|
12
13
|
export var input = {
|
13
14
|
backgroundColor: 'background.base',
|
14
|
-
borderColor: 'border.input'
|
15
|
+
borderColor: 'border.input',
|
16
|
+
'&::placeholder': text.placeholder
|
15
17
|
};
|
16
18
|
export var fieldControlWrapper = {
|
17
19
|
'> textarea': {
|
@@ -11,7 +11,8 @@ export var componentSpecificNextGenBlacklist = {
|
|
11
11
|
};
|
12
12
|
export var astroBlacklistStory = {
|
13
13
|
DataTable: ['Onyx Default'],
|
14
|
-
NavBar: ['Onyx Default']
|
14
|
+
NavBar: ['Onyx Default'],
|
15
|
+
SearchField: ['Onyx With Filter']
|
15
16
|
};
|
16
17
|
export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];
|
17
18
|
export default nextGenConvertedComponents;
|
@@ -467,7 +467,14 @@ var iconButtons = {
|
|
467
467
|
}
|
468
468
|
},
|
469
469
|
searchClearButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
|
470
|
+
width: '20px',
|
471
|
+
height: '20px',
|
470
472
|
border: 'none',
|
473
|
+
'& > svg': {
|
474
|
+
minWidth: '18px',
|
475
|
+
width: '18px',
|
476
|
+
height: '18px'
|
477
|
+
},
|
471
478
|
'&.is-hovered': {
|
472
479
|
bg: 'background.hover'
|
473
480
|
},
|
@@ -475,7 +482,29 @@ var iconButtons = {
|
|
475
482
|
bg: 'background.hover'
|
476
483
|
},
|
477
484
|
position: 'absolute',
|
478
|
-
right:
|
485
|
+
right: 20
|
486
|
+
}),
|
487
|
+
filter: _objectSpread(_objectSpread({}, baseIconButton), {}, {
|
488
|
+
bg: 'transparent',
|
489
|
+
border: '2px solid',
|
490
|
+
borderColor: 'transparent',
|
491
|
+
width: '32px',
|
492
|
+
height: '32px',
|
493
|
+
'&.is-hovered': {
|
494
|
+
border: '2px solid',
|
495
|
+
borderColor: 'transparent',
|
496
|
+
backgroundColor: 'gray-100',
|
497
|
+
path: {
|
498
|
+
fill: 'dark'
|
499
|
+
}
|
500
|
+
},
|
501
|
+
'&.is-pressed': {
|
502
|
+
backgroundColor: 'gray-100',
|
503
|
+
borderColor: 'gray-200',
|
504
|
+
path: {
|
505
|
+
fill: 'dark'
|
506
|
+
}
|
507
|
+
}
|
479
508
|
})
|
480
509
|
};
|
481
510
|
var buttons = {
|
@@ -47,6 +47,10 @@ input.promptInput = _objectSpread(_objectSpread({}, input), {}, {
|
|
47
47
|
}
|
48
48
|
});
|
49
49
|
input.search = _objectSpread(_objectSpread({}, input), {}, {
|
50
|
+
height: '50px',
|
51
|
+
pl: '4em !important',
|
52
|
+
pr: 'xl',
|
53
|
+
color: 'font.base',
|
50
54
|
'&.is-disabled': _objectSpread(_objectSpread({}, readOnlyandDisabledStyles), {}, {
|
51
55
|
'> input': _objectSpread({}, readOnlyandDisabledStyles)
|
52
56
|
})
|
@@ -221,5 +221,8 @@ export var FIGMA_LINKS = {
|
|
221
221
|
withLeftOfDataSlot: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44693-39909&t=r7CoWppWfQQ6G2t8-4',
|
222
222
|
withCharts: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-39944&t=r7CoWppWfQQ6G2t8-4',
|
223
223
|
withExtraLongText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-40069&t=r7CoWppWfQQ6G2t8-4'
|
224
|
+
},
|
225
|
+
searchField: {
|
226
|
+
onyx: 'https://www.figma.com/file/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=249-542&p=f&t=ZRXGSYrM1OXJ41QB-0'
|
224
227
|
}
|
225
228
|
};
|