@pingux/astro 2.200.4-alpha.0 → 2.200.5-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 (17) hide show
  1. package/lib/cjs/components/NumberField/NumberField.js +10 -8
  2. package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts +2 -0
  3. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts +1 -0
  4. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.d.ts +20 -0
  5. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.js +18 -1
  6. package/lib/cjs/styles/themes/astro/customProperties/index.d.ts +1 -0
  7. package/lib/cjs/styles/themes/astro/customProperties/index.js +2 -0
  8. package/lib/cjs/styles/themes/next-gen/colors/colors.js +1 -1
  9. package/lib/cjs/styles/themes/next-gen/customProperties/customSizes.d.ts +1 -0
  10. package/lib/cjs/styles/themes/next-gen/customProperties/customSizes.js +2 -0
  11. package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts +1 -0
  12. package/lib/components/NumberField/NumberField.js +8 -6
  13. package/lib/styles/themeOverrides/nextGenDarkMode/variants/forms.js +19 -2
  14. package/lib/styles/themes/astro/customProperties/index.js +2 -0
  15. package/lib/styles/themes/next-gen/colors/colors.js +1 -1
  16. package/lib/styles/themes/next-gen/customProperties/customSizes.js +2 -0
  17. package/package.json +1 -1
package/lib/cjs/components/NumberField/NumberField.js CHANGED
@@ -20,8 +20,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
20
20
  var _react = _interopRequireWildcard(require("react"));
21
21
  var _reactAria = require("react-aria");
22
22
  var _reactStately = require("react-stately");
23
- var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
24
- var _MenuUpIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuUpIcon"));
25
23
  var _i18n = require("@react-aria/i18n");
26
24
  var _omit = _interopRequireDefault(require("lodash/omit"));
27
25
  var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -42,7 +40,11 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
42
40
  var _useLocale = (0, _i18n.useLocale)(),
43
41
  locale = _useLocale.locale;
44
42
  var _useGetTheme = (0, _hooks.useGetTheme)(),
43
+ icons = _useGetTheme.icons,
44
+ numberFieldArrowSize = _useGetTheme.numberFieldArrowSize,
45
45
  isOnyx = _useGetTheme.themeState.isOnyx;
46
+ var MenuDown = icons.MenuDown,
47
+ MenuUp = icons.MenuUp;
46
48
  var state = (0, _reactStately.useNumberFieldState)(_objectSpread(_objectSpread({}, props), {}, {
47
49
  locale: locale
48
50
  }));
@@ -70,10 +72,10 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
70
72
  }, (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({}, incrementButtonProps, {
71
73
  ref: decRef,
72
74
  tabIndex: "0",
73
- p: 0
75
+ p: !isOnyx && 0
74
76
  }), (0, _react2.jsx)(_.Icon, {
75
- icon: _MenuUpIcon["default"],
76
- size: isOnyx ? 'sm' : 18,
77
+ icon: MenuUp,
78
+ size: numberFieldArrowSize,
77
79
  title: {
78
80
  name: ''
79
81
  },
@@ -81,10 +83,10 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
81
83
  })), (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({}, decrementButtonProps, {
82
84
  ref: incrRef,
83
85
  tabIndex: "0",
84
- p: 0
86
+ p: !isOnyx && 0
85
87
  }), (0, _react2.jsx)(_.Icon, {
86
- icon: _MenuDownIcon["default"],
87
- size: isOnyx ? 'sm' : 18,
88
+ icon: MenuDown,
89
+ size: numberFieldArrowSize,
88
90
  title: {
89
91
  name: ''
90
92
  },
package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts CHANGED
@@ -100,6 +100,7 @@ declare const useGetTheme: () => {
100
100
  greyText: string;
101
101
  };
102
102
  linkSelectFieldWidth: string;
103
+ numberFieldArrowSize: import("../..").IconSize;
103
104
  badgeTextFontSize: string;
104
105
  modalCloseIconSize: import("../..").IconSize;
105
106
  linkSelectFieldIcon: import("../..").IconSize;
@@ -173,6 +174,7 @@ declare const useGetTheme: () => {
173
174
  pageHeaderAddIconMargin: string;
174
175
  pageHeaderAddIconSize: string;
175
176
  defaultLoaderSize: number;
177
+ numberFieldArrowSize: import("../..").IconSize;
176
178
  modalCloseIconSize: import("../..").IconSize;
177
179
  linkSelectFieldIcon: import("../..").IconSize;
178
180
  accordionHoveredState: {
package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts CHANGED
@@ -61,6 +61,7 @@ export declare const nextGenDarkThemeValues: {
61
61
  pageHeaderAddIconMargin: string;
62
62
  pageHeaderAddIconSize: string;
63
63
  defaultLoaderSize: number;
64
+ numberFieldArrowSize: import("../../../..").IconSize;
64
65
  modalCloseIconSize: import("../../../..").IconSize;
65
66
  linkSelectFieldIcon: import("../../../..").IconSize;
66
67
  accordionHoveredState: {
package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.d.ts CHANGED
@@ -93,5 +93,25 @@ declare const _default: {
93
93
  };
94
94
  };
95
95
  };
96
+ numberField: {
97
+ arrowsWrapper: {
98
+ '&.is-disabled': {
99
+ '> input': {
100
+ backgroundColor: any;
101
+ borderColor: any;
102
+ };
103
+ };
104
+ '&.is-read-only': {
105
+ '> input': {
106
+ backgroundColor: any;
107
+ borderColor: any;
108
+ };
109
+ };
110
+ '> textarea': {
111
+ borderColor: string;
112
+ backgroundColor: string;
113
+ };
114
+ };
115
+ };
96
116
  };
97
117
  export default _default;
package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.js CHANGED
@@ -80,6 +80,22 @@ var search = {
80
80
  fill: "".concat(_onyxTokens.astroTokensDark.color.font.base, " !important")
81
81
  }
82
82
  };
83
+ var numberField = {
84
+ arrowsWrapper: _objectSpread(_objectSpread({}, _input.fieldControlWrapper), {}, {
85
+ '&.is-disabled': {
86
+ '> input': {
87
+ backgroundColor: _onyxTokens.astroTokensDark.color.input['readonly-bg'],
88
+ borderColor: _onyxTokens.astroTokensDark.color.input.border
89
+ }
90
+ },
91
+ '&.is-read-only': {
92
+ '> input': {
93
+ backgroundColor: _onyxTokens.astroTokensDark.color.input['readonly-bg'],
94
+ borderColor: _onyxTokens.astroTokensDark.color.input.border
95
+ }
96
+ }
97
+ })
98
+ };
83
99
  var _default = exports["default"] = {
84
100
  input: _input.input,
85
101
  checkbox: checkbox,
@@ -90,5 +106,6 @@ var _default = exports["default"] = {
90
106
  option: _objectSpread({}, selectOption)
91
107
  }),
92
108
  "switch": switchable,
93
- comboBox: _comboBox["default"]
109
+ comboBox: _comboBox["default"],
110
+ numberField: numberField
94
111
  };
package/lib/cjs/styles/themes/astro/customProperties/index.d.ts CHANGED
@@ -94,6 +94,7 @@ export declare const astroThemeValues: {
94
94
  greyText: string;
95
95
  };
96
96
  linkSelectFieldWidth: string;
97
+ numberFieldArrowSize: IconSize;
97
98
  badgeTextFontSize: string;
98
99
  modalCloseIconSize: IconSize;
99
100
  linkSelectFieldIcon: IconSize;
package/lib/cjs/styles/themes/astro/customProperties/index.js CHANGED
@@ -34,6 +34,7 @@ var defaultIconSize = 'sm';
34
34
  var linkSelectFieldWidth = '10em';
35
35
  var calendarIconSize = 25;
36
36
  var navBarIconSize = 18;
37
+ var numberFieldArrowSize = 18;
37
38
  var badgeTextFontSize = '';
38
39
  var modalCloseIconSize = 'sm';
39
40
  var linkSelectFieldIcon = 'sm';
@@ -69,6 +70,7 @@ var astroThemeValues = exports.astroThemeValues = {
69
70
  greyText: '#FFFFFF'
70
71
  },
71
72
  linkSelectFieldWidth: linkSelectFieldWidth,
73
+ numberFieldArrowSize: numberFieldArrowSize,
72
74
  badgeTextFontSize: badgeTextFontSize,
73
75
  modalCloseIconSize: modalCloseIconSize,
74
76
  linkSelectFieldIcon: linkSelectFieldIcon
package/lib/cjs/styles/themes/next-gen/colors/colors.js CHANGED
@@ -95,7 +95,7 @@ var text = {
95
95
  primary: _onyxTokens.astroTokens.color.font.base,
96
96
  secondary: _onyxTokens.astroTokens.color.font.light,
97
97
  message: _onyxTokens.astroTokens.color.gray[700],
98
- fieldHelper: _onyxTokens.astroTokens.color.gray[500]
98
+ fieldHelper: _onyxTokens.astroTokens.color.font.light
99
99
  };
100
100
  var border = {
101
101
  base: _onyxTokens.astroTokens.color.gray[300],
package/lib/cjs/styles/themes/next-gen/customProperties/customSizes.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const _default: {
8
8
  pageHeaderAddIconMargin: string;
9
9
  pageHeaderAddIconSize: string;
10
10
  defaultLoaderSize: number;
11
+ numberFieldArrowSize: IconSize;
11
12
  modalCloseIconSize: IconSize;
12
13
  linkSelectFieldIcon: IconSize;
13
14
  };
package/lib/cjs/styles/themes/next-gen/customProperties/customSizes.js CHANGED
@@ -13,6 +13,7 @@ var pageHeaderTitleMargin = 'sm';
13
13
  var pageHeaderAddIconMargin = 'md';
14
14
  var pageHeaderAddIconSize = 'md';
15
15
  var defaultLoaderSize = 32;
16
+ var numberFieldArrowSize = 'xs';
16
17
  var modalCloseIconSize = 'md';
17
18
  var linkSelectFieldIcon = 'sm';
18
19
  var _default = exports["default"] = {
@@ -24,6 +25,7 @@ var _default = exports["default"] = {
24
25
  pageHeaderAddIconMargin: pageHeaderAddIconMargin,
25
26
  pageHeaderAddIconSize: pageHeaderAddIconSize,
26
27
  defaultLoaderSize: defaultLoaderSize,
28
+ numberFieldArrowSize: numberFieldArrowSize,
27
29
  modalCloseIconSize: modalCloseIconSize,
28
30
  linkSelectFieldIcon: linkSelectFieldIcon
29
31
  };
package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export declare const nextGenThemeValues: {
9
9
  pageHeaderAddIconMargin: string;
10
10
  pageHeaderAddIconSize: string;
11
11
  defaultLoaderSize: number;
12
+ numberFieldArrowSize: IconSize;
12
13
  modalCloseIconSize: IconSize;
13
14
  linkSelectFieldIcon: IconSize;
14
15
  accordionHoveredState: {
package/lib/components/NumberField/NumberField.js CHANGED
@@ -13,8 +13,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _co
13
13
  import React, { forwardRef, useImperativeHandle } from 'react';
14
14
  import { mergeProps, useNumberField } from 'react-aria';
15
15
  import { useNumberFieldState } from 'react-stately';
16
- import MenuDown from '@pingux/mdi-react/MenuDownIcon';
17
- import MenuUp from '@pingux/mdi-react/MenuUpIcon';
18
16
  import { useLocale } from '@react-aria/i18n';
19
17
  import omit from 'lodash/omit';
20
18
  import PropTypes from 'prop-types';
@@ -32,7 +30,11 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
32
30
  var _useLocale = useLocale(),
33
31
  locale = _useLocale.locale;
34
32
  var _useGetTheme = useGetTheme(),
33
+ icons = _useGetTheme.icons,
34
+ numberFieldArrowSize = _useGetTheme.numberFieldArrowSize,
35
35
  isOnyx = _useGetTheme.themeState.isOnyx;
36
+ var MenuDown = icons.MenuDown,
37
+ MenuUp = icons.MenuUp;
36
38
  var state = useNumberFieldState(_objectSpread(_objectSpread({}, props), {}, {
37
39
  locale: locale
38
40
  }));
@@ -60,10 +62,10 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
60
62
  }, ___EmotionJSX(IconButton, _extends({}, incrementButtonProps, {
61
63
  ref: decRef,
62
64
  tabIndex: "0",
63
- p: 0
65
+ p: !isOnyx && 0
64
66
  }), ___EmotionJSX(Icon, {
65
67
  icon: MenuUp,
66
- size: isOnyx ? 'sm' : 18,
68
+ size: numberFieldArrowSize,
67
69
  title: {
68
70
  name: ''
69
71
  },
@@ -71,10 +73,10 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
71
73
  })), ___EmotionJSX(IconButton, _extends({}, decrementButtonProps, {
72
74
  ref: incrRef,
73
75
  tabIndex: "0",
74
- p: 0
76
+ p: !isOnyx && 0
75
77
  }), ___EmotionJSX(Icon, {
76
78
  icon: MenuDown,
77
- size: isOnyx ? 'sm' : 18,
79
+ size: numberFieldArrowSize,
78
80
  title: {
79
81
  name: ''
80
82
  },
package/lib/styles/themeOverrides/nextGenDarkMode/variants/forms.js CHANGED
@@ -11,7 +11,7 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
11
11
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
12
12
  import { astroTokensDark } from '@pingux/onyx-tokens';
13
13
  import comboBox from './comboBox';
14
- import { input } from './input';
14
+ import { fieldControlWrapper, input } from './input';
15
15
  export var select = {
16
16
  backgroundColor: 'backgroundBase',
17
17
  borderRadius: astroTokensDark.radius.input,
@@ -73,6 +73,22 @@ var search = {
73
73
  fill: "".concat(astroTokensDark.color.font.base, " !important")
74
74
  }
75
75
  };
76
+ var numberField = {
77
+ arrowsWrapper: _objectSpread(_objectSpread({}, fieldControlWrapper), {}, {
78
+ '&.is-disabled': {
79
+ '> input': {
80
+ backgroundColor: astroTokensDark.color.input['readonly-bg'],
81
+ borderColor: astroTokensDark.color.input.border
82
+ }
83
+ },
84
+ '&.is-read-only': {
85
+ '> input': {
86
+ backgroundColor: astroTokensDark.color.input['readonly-bg'],
87
+ borderColor: astroTokensDark.color.input.border
88
+ }
89
+ }
90
+ })
91
+ };
76
92
  export default {
77
93
  input: input,
78
94
  checkbox: checkbox,
@@ -83,5 +99,6 @@ export default {
83
99
  option: _objectSpread({}, selectOption)
84
100
  }),
85
101
  "switch": switchable,
86
- comboBox: comboBox
102
+ comboBox: comboBox,
103
+ numberField: numberField
87
104
  };
package/lib/styles/themes/astro/customProperties/index.js CHANGED
@@ -22,6 +22,7 @@ var defaultIconSize = 'sm';
22
22
  var linkSelectFieldWidth = '10em';
23
23
  var calendarIconSize = 25;
24
24
  var navBarIconSize = 18;
25
+ var numberFieldArrowSize = 18;
25
26
  var badgeTextFontSize = '';
26
27
  var modalCloseIconSize = 'sm';
27
28
  var linkSelectFieldIcon = 'sm';
@@ -57,6 +58,7 @@ export var astroThemeValues = {
57
58
  greyText: '#FFFFFF'
58
59
  },
59
60
  linkSelectFieldWidth: linkSelectFieldWidth,
61
+ numberFieldArrowSize: numberFieldArrowSize,
60
62
  badgeTextFontSize: badgeTextFontSize,
61
63
  modalCloseIconSize: modalCloseIconSize,
62
64
  linkSelectFieldIcon: linkSelectFieldIcon
package/lib/styles/themes/next-gen/colors/colors.js CHANGED
@@ -88,7 +88,7 @@ var text = {
88
88
  primary: astroTokens.color.font.base,
89
89
  secondary: astroTokens.color.font.light,
90
90
  message: astroTokens.color.gray[700],
91
- fieldHelper: astroTokens.color.gray[500]
91
+ fieldHelper: astroTokens.color.font.light
92
92
  };
93
93
  var border = {
94
94
  base: astroTokens.color.gray[300],
package/lib/styles/themes/next-gen/customProperties/customSizes.js CHANGED
@@ -6,6 +6,7 @@ var pageHeaderTitleMargin = 'sm';
6
6
  var pageHeaderAddIconMargin = 'md';
7
7
  var pageHeaderAddIconSize = 'md';
8
8
  var defaultLoaderSize = 32;
9
+ var numberFieldArrowSize = 'xs';
9
10
  var modalCloseIconSize = 'md';
10
11
  var linkSelectFieldIcon = 'sm';
11
12
  export default {
@@ -17,6 +18,7 @@ export default {
17
18
  pageHeaderAddIconMargin: pageHeaderAddIconMargin,
18
19
  pageHeaderAddIconSize: pageHeaderAddIconSize,
19
20
  defaultLoaderSize: defaultLoaderSize,
21
+ numberFieldArrowSize: numberFieldArrowSize,
20
22
  modalCloseIconSize: modalCloseIconSize,
21
23
  linkSelectFieldIcon: linkSelectFieldIcon
22
24
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.200.4-alpha.0",
3
+ "version": "2.200.5-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",