@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.
Files changed (41) hide show
  1. package/lib/cjs/components/Button/Buttons.styles.d.ts +17 -48
  2. package/lib/cjs/components/Button/Buttons.styles.js +3 -9
  3. package/lib/cjs/components/IconButton/IconButton.styles.d.ts +47 -0
  4. package/lib/cjs/components/IconButton/IconButton.styles.js +24 -1
  5. package/lib/cjs/components/Input/Input.styles.js +1 -0
  6. package/lib/cjs/components/SearchField/SearchField.js +1 -3
  7. package/lib/cjs/components/SearchField/SearchField.stories.js +18 -5
  8. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.d.ts +3 -0
  9. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.js +3 -0
  10. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.d.ts +20 -0
  11. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.js +6 -1
  12. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/input.js +3 -1
  13. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/text.d.ts +4 -0
  14. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/text.js +4 -0
  15. package/lib/cjs/styles/themes/next-gen/convertedComponentList.d.ts +1 -0
  16. package/lib/cjs/styles/themes/next-gen/convertedComponentList.js +2 -1
  17. package/lib/cjs/styles/themes/next-gen/forms.d.ts +8 -0
  18. package/lib/cjs/styles/themes/next-gen/forms.js +4 -0
  19. package/lib/cjs/styles/themes/next-gen/next-gen.d.ts +45 -0
  20. package/lib/cjs/styles/themes/next-gen/variants/button.d.ts +41 -0
  21. package/lib/cjs/styles/themes/next-gen/variants/button.js +30 -1
  22. package/lib/cjs/styles/themes/next-gen/variants/input.js +4 -0
  23. package/lib/cjs/styles/themes/next-gen/variants/text.js +1 -1
  24. package/lib/cjs/utils/designUtils/figmaLinks.d.ts +3 -0
  25. package/lib/cjs/utils/designUtils/figmaLinks.js +3 -0
  26. package/lib/components/Button/Buttons.styles.js +2 -10
  27. package/lib/components/IconButton/IconButton.styles.js +25 -2
  28. package/lib/components/Input/Input.styles.js +1 -0
  29. package/lib/components/SearchField/SearchField.js +1 -3
  30. package/lib/components/SearchField/SearchField.stories.js +20 -7
  31. package/lib/styles/themeOverrides/nextGenDarkMode/colors.js +3 -0
  32. package/lib/styles/themeOverrides/nextGenDarkMode/variants/buttons.js +6 -1
  33. package/lib/styles/themeOverrides/nextGenDarkMode/variants/input.js +3 -1
  34. package/lib/styles/themeOverrides/nextGenDarkMode/variants/text.js +4 -0
  35. package/lib/styles/themes/next-gen/convertedComponentList.js +2 -1
  36. package/lib/styles/themes/next-gen/forms.js +4 -0
  37. package/lib/styles/themes/next-gen/variants/button.js +30 -1
  38. package/lib/styles/themes/next-gen/variants/input.js +4 -0
  39. package/lib/styles/themes/next-gen/variants/text.js +1 -1
  40. package/lib/utils/designUtils/figmaLinks.js +3 -0
  41. 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 Groups'
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: "md"
170
+ gap: isOnyx ? 'lg' : 'md'
161
171
  }, (0, _react2.jsx)(_index.SearchField, {
162
172
  "aria-label": "search items",
163
173
  placeholder: "Search",
164
- size: "container.xs"
165
- }), (0, _react2.jsx)(_index.Button, {
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;
@@ -40,6 +40,9 @@ export declare const colors: {
40
40
  card: string;
41
41
  hover: string;
42
42
  };
43
+ font: {
44
+ base: string;
45
+ };
43
46
  badge: {
44
47
  background: string;
45
48
  textColor: string;
@@ -112,6 +112,9 @@ var colors = _objectSpread(_objectSpread({
112
112
  card: '#1a1e22',
113
113
  hover: hoverDark
114
114
  },
115
+ font: {
116
+ base: _colorTokens.nextGenColors['gray-100']
117
+ },
115
118
  badge: badge
116
119
  });
117
120
  exports.colors = colors;
@@ -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 = {
@@ -15,4 +15,8 @@ export declare const text: {
15
15
  copyRightText: {
16
16
  color: string;
17
17
  };
18
+ placeholder: {
19
+ color: string;
20
+ fontWeight: number;
21
+ };
18
22
  };
@@ -21,6 +21,10 @@ var text = {
21
21
  },
22
22
  copyRightText: {
23
23
  color: 'gray-400'
24
+ },
25
+ placeholder: {
26
+ color: 'gray-400',
27
+ fontWeight: 1
24
28
  }
25
29
  };
26
30
  exports.text = text;
@@ -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: {
@@ -47,6 +47,10 @@ exports.select = select;
47
47
  var search = {
48
48
  wrapper: {
49
49
  opacity: 1
50
+ },
51
+ icon: {
52
+ color: 'font.base',
53
+ ml: '20px'
50
54
  }
51
55
  };
52
56
  exports.search = search;
@@ -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: 10
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
  })
@@ -75,7 +75,7 @@ var text = _objectSpread(_objectSpread({
75
75
  color: 'text.primary'
76
76
  },
77
77
  placeholder: {
78
- color: 'gray-500',
78
+ color: 'gray-600',
79
79
  fontWeight: 1
80
80
  },
81
81
  paragraph: {
@@ -222,4 +222,7 @@ export declare const FIGMA_LINKS: {
222
222
  withCharts: string;
223
223
  withExtraLongText: string;
224
224
  };
225
+ searchField: {
226
+ onyx: string;
227
+ };
225
228
  };
@@ -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, Button, Icon, SearchField, Text } from '../../index';
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 Groups'
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: "md"
157
+ gap: isOnyx ? 'lg' : 'md'
148
158
  }, ___EmotionJSX(SearchField, {
149
159
  "aria-label": "search items",
150
160
  placeholder: "Search",
151
- size: "container.xs"
152
- }), ___EmotionJSX(Button, {
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
  };
@@ -104,5 +104,8 @@ export var colors = _objectSpread(_objectSpread({
104
104
  card: '#1a1e22',
105
105
  hover: hoverDark
106
106
  },
107
+ font: {
108
+ base: nextGenColors['gray-100']
109
+ },
107
110
  badge: badge
108
111
  });
@@ -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': {
@@ -14,5 +14,9 @@ export var text = {
14
14
  },
15
15
  copyRightText: {
16
16
  color: 'gray-400'
17
+ },
18
+ placeholder: {
19
+ color: 'gray-400',
20
+ fontWeight: 1
17
21
  }
18
22
  };
@@ -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;
@@ -38,6 +38,10 @@ export var select = {
38
38
  export var search = {
39
39
  wrapper: {
40
40
  opacity: 1
41
+ },
42
+ icon: {
43
+ color: 'font.base',
44
+ ml: '20px'
41
45
  }
42
46
  };
43
47
  export var comboBox = {
@@ -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: 10
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
  })
@@ -68,7 +68,7 @@ export var text = _objectSpread(_objectSpread({
68
68
  color: 'text.primary'
69
69
  },
70
70
  placeholder: {
71
- color: 'gray-500',
71
+ color: 'gray-600',
72
72
  fontWeight: 1
73
73
  },
74
74
  paragraph: {
@@ -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
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.126.0-alpha.0",
3
+ "version": "2.127.0-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",