@pingux/astro 1.0.0-alpha.9 → 1.1.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 (98) hide show
  1. package/CHANGELOG.md +147 -0
  2. package/README.md +5 -0
  3. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
  4. package/lib/cjs/components/Button/Button.js +5 -24
  5. package/lib/cjs/components/Button/Button.stories.js +5 -11
  6. package/lib/cjs/components/Button/Button.test.js +0 -24
  7. package/lib/cjs/components/Chip/Chip.js +26 -10
  8. package/lib/cjs/components/Chip/Chip.stories.js +44 -5
  9. package/lib/cjs/components/Chip/Chip.test.js +9 -0
  10. package/lib/cjs/components/{DropdownField/index.js → Chip/ChipContext.js} +8 -7
  11. package/lib/cjs/components/IconButton/IconButton.js +17 -7
  12. package/lib/cjs/components/IconButton/IconButton.test.js +0 -1
  13. package/lib/cjs/components/ListItem/ListItem.stories.js +0 -2
  14. package/lib/cjs/components/ListView/ListView.js +4 -3
  15. package/lib/cjs/components/ListViewItem/ListViewItem.js +3 -6
  16. package/lib/cjs/components/MultivaluesField/MultivaluesField.js +1 -1
  17. package/lib/cjs/components/Stepper/Stepper.js +1 -0
  18. package/lib/cjs/components/Tab/Tab.js +5 -3
  19. package/lib/cjs/components/Tabs/Tabs.js +3 -0
  20. package/lib/cjs/components/Tabs/Tabs.stories.js +3 -4
  21. package/lib/cjs/components/Tabs/Tabs.test.js +44 -15
  22. package/lib/cjs/components/TextAreaField/TextAreaField.test.js +10 -0
  23. package/lib/cjs/components/TooltipTrigger/TooltipTrigger.stories.js +45 -2
  24. package/lib/cjs/index.js +48 -136
  25. package/lib/cjs/layouts/ListLayout.stories.js +2 -1
  26. package/lib/cjs/layouts/SchemaFormLayout.stories.js +2 -21
  27. package/lib/cjs/recipes/ArrayField.stories.js +3 -3
  28. package/lib/cjs/styles/forms/input.js +4 -0
  29. package/lib/cjs/styles/theme.js +0 -3
  30. package/lib/cjs/styles/variants/accordion.js +5 -7
  31. package/lib/cjs/styles/variants/boxes.js +22 -19
  32. package/lib/cjs/styles/variants/buttons.js +38 -29
  33. package/lib/cjs/styles/variants/variants.js +0 -3
  34. package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
  35. package/lib/components/Button/Button.js +7 -24
  36. package/lib/components/Button/Button.stories.js +5 -10
  37. package/lib/components/Button/Button.test.js +0 -20
  38. package/lib/components/Chip/Chip.js +25 -10
  39. package/lib/components/Chip/Chip.stories.js +41 -5
  40. package/lib/components/Chip/Chip.test.js +9 -0
  41. package/lib/components/Chip/ChipContext.js +3 -0
  42. package/lib/components/IconButton/IconButton.js +17 -9
  43. package/lib/components/IconButton/IconButton.test.js +0 -1
  44. package/lib/components/ListItem/ListItem.stories.js +0 -2
  45. package/lib/components/ListView/ListView.js +4 -3
  46. package/lib/components/ListViewItem/ListViewItem.js +3 -5
  47. package/lib/components/MultivaluesField/MultivaluesField.js +1 -1
  48. package/lib/components/Stepper/Stepper.js +1 -0
  49. package/lib/components/Tab/Tab.js +5 -3
  50. package/lib/components/Tabs/Tabs.js +3 -0
  51. package/lib/components/Tabs/Tabs.stories.js +3 -4
  52. package/lib/components/Tabs/Tabs.test.js +40 -15
  53. package/lib/components/TextAreaField/TextAreaField.test.js +8 -0
  54. package/lib/components/TooltipTrigger/TooltipTrigger.stories.js +33 -1
  55. package/lib/index.js +0 -8
  56. package/lib/layouts/ListLayout.stories.js +2 -1
  57. package/lib/layouts/SchemaFormLayout.stories.js +2 -19
  58. package/lib/recipes/ArrayField.stories.js +3 -3
  59. package/lib/styles/forms/input.js +4 -0
  60. package/lib/styles/theme.js +0 -3
  61. package/lib/styles/variants/accordion.js +5 -7
  62. package/lib/styles/variants/boxes.js +21 -19
  63. package/lib/styles/variants/buttons.js +37 -29
  64. package/lib/styles/variants/variants.js +0 -2
  65. package/package.json +1 -1
  66. package/lib/cjs/components/Dropdown/Dropdown.js +0 -112
  67. package/lib/cjs/components/Dropdown/Dropdown.test.js +0 -80
  68. package/lib/cjs/components/Dropdown/index.js +0 -18
  69. package/lib/cjs/components/DropdownField/DropdownField.js +0 -187
  70. package/lib/cjs/components/DropdownField/DropdownField.stories.js +0 -278
  71. package/lib/cjs/components/DropdownField/DropdownField.test.js +0 -80
  72. package/lib/cjs/components/Panel/Panel.js +0 -101
  73. package/lib/cjs/components/Panel/Panel.stories.js +0 -57
  74. package/lib/cjs/components/Panel/Panel.test.js +0 -72
  75. package/lib/cjs/components/Panel/index.js +0 -18
  76. package/lib/cjs/components/Popover/Popover.js +0 -87
  77. package/lib/cjs/components/Popover/Popover.stories.js +0 -80
  78. package/lib/cjs/components/Popover/Popover.test.js +0 -91
  79. package/lib/cjs/components/Popover/index.js +0 -18
  80. package/lib/cjs/recipes/InputBoxWithLinkedChip.stories.js +0 -67
  81. package/lib/cjs/styles/variants/popover.js +0 -86
  82. package/lib/components/Dropdown/Dropdown.js +0 -90
  83. package/lib/components/Dropdown/Dropdown.test.js +0 -62
  84. package/lib/components/Dropdown/index.js +0 -1
  85. package/lib/components/DropdownField/DropdownField.js +0 -155
  86. package/lib/components/DropdownField/DropdownField.stories.js +0 -222
  87. package/lib/components/DropdownField/DropdownField.test.js +0 -60
  88. package/lib/components/DropdownField/index.js +0 -1
  89. package/lib/components/Panel/Panel.js +0 -71
  90. package/lib/components/Panel/Panel.stories.js +0 -35
  91. package/lib/components/Panel/Panel.test.js +0 -52
  92. package/lib/components/Panel/index.js +0 -1
  93. package/lib/components/Popover/Popover.js +0 -65
  94. package/lib/components/Popover/Popover.stories.js +0 -52
  95. package/lib/components/Popover/Popover.test.js +0 -75
  96. package/lib/components/Popover/index.js +0 -2
  97. package/lib/recipes/InputBoxWithLinkedChip.stories.js +0 -43
  98. package/lib/styles/variants/popover.js +0 -76
package/CHANGELOG.md CHANGED
@@ -3,6 +3,153 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.1.0-alpha.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.1...@pingux/astro@1.1.0-alpha.0) (2022-01-19)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * [UIP-5122] adjust x icon to 14px ([6b4ca54](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6b4ca5418ddaffb6e1a4daaf28b57151a23529cb))
12
+
13
+
14
+ ### Features
15
+
16
+ * [UIP-5066] Add Icon, Chip, and Text with Tooltips ([1681083](https://gitlab.corp.pingidentity.com/ux/pingux/commit/168108386d77ef09635a177a35cb6d68cfad8bc2))
17
+
18
+
19
+
20
+
21
+
22
+ ## [1.0.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0...@pingux/astro@1.0.1) (2022-01-19)
23
+
24
+ **Note:** Version bump only for package @pingux/astro
25
+
26
+
27
+
28
+
29
+
30
+ # [1.0.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.20...@pingux/astro@1.0.0) (2022-01-19)
31
+
32
+ **Note:** Version bump only for package @pingux/astro
33
+
34
+
35
+
36
+
37
+
38
+ # [1.0.0-alpha.20](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.19...@pingux/astro@1.0.0-alpha.20) (2022-01-17)
39
+
40
+ **Note:** Version bump only for package @pingux/astro
41
+
42
+
43
+
44
+
45
+
46
+ # [1.0.0-alpha.19](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.18...@pingux/astro@1.0.0-alpha.19) (2022-01-13)
47
+
48
+
49
+ ### Bug Fixes
50
+
51
+ * [UIP-4996] astro stepper redundant tooltip ([d74f102](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d74f1020163703948498436224ef3f9d6458df57))
52
+
53
+
54
+
55
+
56
+
57
+ # [1.0.0-alpha.18](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.17...@pingux/astro@1.0.0-alpha.18) (2022-01-13)
58
+
59
+
60
+ ### Bug Fixes
61
+
62
+ * [UIP-5107] IconButton - no focus in disabled state ([f301f6d](https://gitlab.corp.pingidentity.com/ux/pingux/commit/f301f6d0cdc8271c992eb3384094cafbd59fa0d5))
63
+
64
+
65
+
66
+
67
+
68
+ # [1.0.0-alpha.17](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.16...@pingux/astro@1.0.0-alpha.17) (2022-01-13)
69
+
70
+
71
+ ### Bug Fixes
72
+
73
+ * [UIP-4997] Read only style TextAreaField ([a5f62bd](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a5f62bd014f2d3d75c2c71625bc31ba5cefbb4df))
74
+
75
+
76
+
77
+
78
+
79
+ # [1.0.0-alpha.16](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.15...@pingux/astro@1.0.0-alpha.16) (2022-01-13)
80
+
81
+
82
+ ### Bug Fixes
83
+
84
+ * [UIP-4962] accordion grid design improvements ([dcec402](https://gitlab.corp.pingidentity.com/ux/pingux/commit/dcec4025f945968e20386bc20ad011f48532acc7))
85
+
86
+
87
+
88
+
89
+
90
+ # [1.0.0-alpha.15](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.14...@pingux/astro@1.0.0-alpha.15) (2022-01-13)
91
+
92
+ **Note:** Version bump only for package @pingux/astro
93
+
94
+
95
+
96
+
97
+
98
+ # [1.0.0-alpha.14](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.13...@pingux/astro@1.0.0-alpha.14) (2022-01-10)
99
+
100
+
101
+ ### Bug Fixes
102
+
103
+ * [UIP-4953] Chip component cleanup ([d2f10ec](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d2f10ece82749d723ac35b6262c1b918f81abba1))
104
+
105
+
106
+
107
+
108
+
109
+ # [1.0.0-alpha.13](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.12...@pingux/astro@1.0.0-alpha.13) (2022-01-10)
110
+
111
+
112
+ ### Bug Fixes
113
+
114
+ * [UIP-5063] Inline Button Text Size ([6f03c64](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6f03c64b13dc2237d09acb565282394effd419b8))
115
+
116
+
117
+
118
+
119
+
120
+ # [1.0.0-alpha.12](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.11...@pingux/astro@1.0.0-alpha.12) (2022-01-10)
121
+
122
+
123
+ ### Bug Fixes
124
+
125
+ * [UIP-5061] hide variants that aren't used for <Button> specifically ([85a494c](https://gitlab.corp.pingidentity.com/ux/pingux/commit/85a494cc3fa656a2fc6bb37dc0e718bdcfee7829))
126
+
127
+
128
+
129
+
130
+
131
+ # [1.0.0-alpha.11](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.10...@pingux/astro@1.0.0-alpha.11) (2022-01-08)
132
+
133
+
134
+ ### Features
135
+
136
+ * [UIP-4887] ListView hides Separators on zoom ([92ca2bb](https://gitlab.corp.pingidentity.com/ux/pingux/commit/92ca2bb40bb49ce9a69eb097cc88b5e210acce8a))
137
+
138
+
139
+
140
+
141
+
142
+ # [1.0.0-alpha.10](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.9...@pingux/astro@1.0.0-alpha.10) (2022-01-07)
143
+
144
+
145
+ ### Bug Fixes
146
+
147
+ * [UIP-5010] Disabled tabs can be displayed via keyboard ([9115f66](https://gitlab.corp.pingidentity.com/ux/pingux/commit/9115f66c8e921a910934cb8205b29321f2d30fe8))
148
+
149
+
150
+
151
+
152
+
6
153
  # [1.0.0-alpha.9](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.8...@pingux/astro@1.0.0-alpha.9) (2022-01-07)
7
154
 
8
155
 
package/README.md CHANGED
@@ -12,6 +12,11 @@ NPM:
12
12
  Yarn:
13
13
  `yarn add @pingux/astro`
14
14
 
15
+ ## Requirements
16
+
17
+ - Node: 12+
18
+ - React: 16.8+
19
+
15
20
  ## Usage
16
21
 
17
22
  All apps should be wrapped in an <AstroWrapper> for full functionality and styling.
@@ -108,8 +108,6 @@ var Default = function Default() {
108
108
  return (0, _react2.jsx)(_index.Box, {
109
109
  isRow: true,
110
110
  sx: {
111
- pt: '12px',
112
- pb: '12px',
113
111
  flexGrow: 1
114
112
  }
115
113
  }, (0, _react2.jsx)(_index.Box, {
@@ -154,20 +152,14 @@ var Default = function Default() {
154
152
  sx: {
155
153
  mr: '4px',
156
154
  height: '26px',
157
- width: '26px',
158
- 'path': {
159
- fill: 'active'
160
- }
155
+ width: '26px'
161
156
  }
162
157
  }, (0, _react2.jsx)(_CreateIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
163
158
  "aria-label": "vertical-lines-icon",
164
159
  sx: {
165
160
  mr: '4px',
166
161
  height: '26px',
167
- width: '26px',
168
- 'path': {
169
- fill: 'active'
170
- }
162
+ width: '26px'
171
163
  }
172
164
  }, (0, _react2.jsx)(_MoreVertIcon["default"], null)))));
173
165
  };
@@ -310,7 +302,8 @@ var Default = function Default() {
310
302
  item: item
311
303
  }), item.key !== 'Organization' ? (0, _react2.jsx)(_index.Separator, {
312
304
  sx: {
313
- m: 0
305
+ m: 0,
306
+ bg: 'neutral.90'
314
307
  }
315
308
  }) : null);
316
309
  }))
@@ -48,14 +48,10 @@ var _focus = require("@react-aria/focus");
48
48
 
49
49
  var _utils = require("@react-aria/utils");
50
50
 
51
- var _constants = require("./constants");
52
-
53
51
  var _hooks = require("../../hooks");
54
52
 
55
53
  var _Loader = _interopRequireDefault(require("../Loader"));
56
54
 
57
- var _Box = _interopRequireDefault(require("../Box"));
58
-
59
55
  var _react2 = require("@emotion/react");
60
56
 
61
57
  function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -75,8 +71,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
75
71
  onPressChange = props.onPressChange,
76
72
  onPressUp = props.onPressUp,
77
73
  children = props.children,
78
- mode = props.mode,
79
- others = (0, _objectWithoutProperties2["default"])(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "mode"]);
74
+ others = (0, _objectWithoutProperties2["default"])(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children"]);
80
75
  var buttonRef = (0, _react.useRef)();
81
76
  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
82
77
  /* istanbul ignore next */
@@ -84,20 +79,13 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
84
79
  (0, _react.useImperativeHandle)(ref, function () {
85
80
  return buttonRef.current;
86
81
  });
87
- var ButtonBase = (0, _react.useMemo)(function () {
88
- return mode === _constants.modes.ICON ? _Box["default"] : _themeUi.Button;
89
- }, [mode]);
90
- var elementType = (0, _react.useMemo)(function () {
91
- if (mode === _constants.modes.ICON) return 'div';
92
- return 'button';
93
- }, [mode]);
94
82
 
95
83
  var _useFocusRing = (0, _focus.useFocusRing)(),
96
84
  isFocusVisible = _useFocusRing.isFocusVisible,
97
85
  focusProps = _useFocusRing.focusProps;
98
86
 
99
87
  var _useButton = (0, _button.useButton)(_objectSpread({
100
- elementType: elementType
88
+ elementType: 'button'
101
89
  }, props), buttonRef),
102
90
  buttonProps = _useButton.buttonProps,
103
91
  isPressed = _useButton.isPressed;
@@ -114,12 +102,9 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
114
102
  }),
115
103
  classNames = _useStatusClasses.classNames;
116
104
 
117
- (0, _hooks.useDeprecationWarning)('The "icon" variant for `Button` will be deprecated in Astro-UI 1.0.0, use the `IconButton` component instead.', {
118
- isActive: props.variant === 'icon'
119
- });
120
105
  var ariaLabel = props['aria-label'];
121
106
  (0, _hooks.useAriaLabelWarning)('Button', ariaLabel);
122
- return (0, _react2.jsx)(ButtonBase, (0, _extends2["default"])({
107
+ return (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
123
108
  "aria-label": ariaLabel || 'Button',
124
109
  ref: buttonRef,
125
110
  className: classNames,
@@ -202,15 +187,11 @@ Button.propTypes = {
202
187
  onPressUp: _propTypes["default"].func,
203
188
 
204
189
  /** The styling variation of the button. */
205
- variant: _propTypes["default"].string,
206
-
207
- /** The behavioral pattern to apply to the button. */
208
- mode: _propTypes["default"].oneOf(['default', 'icon'])
190
+ variant: _propTypes["default"].string
209
191
  };
210
192
  Button.defaultProps = {
211
193
  isDisabled: false,
212
- variant: 'default',
213
- mode: 'default'
194
+ variant: 'default'
214
195
  };
215
196
  Button.displayName = 'Button';
216
197
  var _default = Button;
@@ -10,10 +10,6 @@ _Object$defineProperty(exports, "__esModule", {
10
10
 
11
11
  exports.InlineButton = exports.TextButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
12
12
 
13
- var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
14
-
15
- var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
16
-
17
13
  var _react = _interopRequireDefault(require("react"));
18
14
 
19
15
  var _AddCircleIcon = _interopRequireDefault(require("mdi-react/AddCircleIcon"));
@@ -30,13 +26,13 @@ var _variants = require("../../utils/devUtils/constants/variants");
30
26
 
31
27
  var _react2 = require("@emotion/react");
32
28
 
33
- var _context;
34
-
35
29
  // removing the iconButton variants from this story.
36
30
  var variants = _variants.buttonVariants;
37
31
  delete variants.ICON;
38
32
  delete variants.ICON_BUTTON;
39
- delete variants.INVERTED;
33
+ delete variants.INVERTED; // add designer approved variants for devs to use here
34
+
35
+ var variantOptions = ['critical', 'danger', 'default', 'inline', 'link', 'primary', 'success', 'text'];
40
36
  var _default = {
41
37
  title: 'Button',
42
38
  component: _["default"],
@@ -44,11 +40,9 @@ var _default = {
44
40
  variant: {
45
41
  control: {
46
42
  type: 'select',
47
- options: (0, _values["default"])(variants)
43
+ options: variantOptions
48
44
  },
49
- defaultValue: (0, _find["default"])(_context = (0, _values["default"])(variants)).call(_context, function (value) {
50
- return value === 'default';
51
- })
45
+ defaultValue: 'default'
52
46
  },
53
47
  children: {
54
48
  description: 'Button text.',
@@ -8,16 +8,12 @@ var _react = _interopRequireDefault(require("react"));
8
8
 
9
9
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
10
10
 
11
- var _AddCircleIcon = _interopRequireDefault(require("mdi-react/AddCircleIcon"));
12
-
13
11
  var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
14
12
 
15
13
  var _testWrapper = require("../../utils/testUtils/testWrapper");
16
14
 
17
15
  var _ = _interopRequireDefault(require("."));
18
16
 
19
- var _Icon = _interopRequireDefault(require("../Icon"));
20
-
21
17
  var _react2 = require("@emotion/react");
22
18
 
23
19
  var testId = 'test-button';
@@ -28,15 +24,6 @@ var defaultProps = {
28
24
  var getComponent = function getComponent() {
29
25
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
30
26
  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
31
- };
32
-
33
- var getIconButton = function getIconButton() {
34
- var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
35
- return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props, {
36
- variant: "icon"
37
- }), (0, _react2.jsx)(_Icon["default"], {
38
- icon: _AddCircleIcon["default"]
39
- })));
40
27
  }; // Need to be added to each test file to test accessibility using axe.
41
28
 
42
29
 
@@ -134,15 +121,4 @@ test('button renders children when not loading', function () {
134
121
  expect(childWrapper).toBeInTheDocument();
135
122
  expect(childWrapper).toBeVisible();
136
123
  expect(_testWrapper.screen.queryByRole('progressbar')).not.toBeInTheDocument();
137
- });
138
- test('passing in an icon makes the button parent a div', function () {
139
- getIconButton({
140
- mode: 'icon'
141
- });
142
-
143
- var button = _testWrapper.screen.getByRole('button');
144
-
145
- expect(button).toBeInTheDocument();
146
- expect(button).toBeVisible();
147
- expect(button).toBeInstanceOf(HTMLDivElement);
148
124
  });
@@ -18,6 +18,8 @@ var _react = _interopRequireDefault(require("react"));
18
18
 
19
19
  var _propTypes = _interopRequireDefault(require("prop-types"));
20
20
 
21
+ var _ChipContext = require("./ChipContext");
22
+
21
23
  var _Box = _interopRequireDefault(require("../Box/Box"));
22
24
 
23
25
  var _Text = _interopRequireDefault(require("../Text/Text"));
@@ -32,21 +34,31 @@ var _react2 = require("@emotion/react");
32
34
  * available [props from Theme-UI](https://theme-ui.com/sx-prop).
33
35
  */
34
36
  var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
35
- var children = props.children,
37
+ var bg = props.bg,
38
+ children = props.children,
36
39
  textColor = props.textColor,
37
40
  textProps = props.textProps,
38
- label = props.label;
39
- return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
41
+ label = props.label,
42
+ isUppercase = props.isUppercase;
43
+ return (0, _react2.jsx)(_ChipContext.ChipContext.Provider, {
44
+ value: {
45
+ bg: bg
46
+ }
47
+ }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
40
48
  isRow: true,
41
49
  variant: "boxes.chip",
50
+ sx: isUppercase && {
51
+ paddingBottom: '3px'
52
+ },
42
53
  ref: ref
43
54
  }, props), (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
44
55
  variant: "label",
45
- sx: {
46
- textTransform: 'uppercase'
47
- },
48
- color: textColor
49
- }, textProps), label), children);
56
+ color: textColor,
57
+ sx: isUppercase && {
58
+ textTransform: 'uppercase',
59
+ fontSize: '11px'
60
+ }
61
+ }, textProps), label), children));
50
62
  });
51
63
 
52
64
  Chip.propTypes = {
@@ -60,11 +72,15 @@ Chip.propTypes = {
60
72
  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
61
73
 
62
74
  /** Props object that is spread directly into the textfield. */
63
- textProps: _propTypes["default"].shape({})
75
+ textProps: _propTypes["default"].shape({}),
76
+
77
+ /** When true, display chip label as uppercase. */
78
+ isUppercase: _propTypes["default"].bool
64
79
  };
65
80
  Chip.defaultProps = {
66
81
  textColor: 'white',
67
- bg: colors.neutral[10]
82
+ bg: colors.neutral[10],
83
+ isUppercase: false
68
84
  };
69
85
  var _default = Chip;
70
86
  exports["default"] = _default;
@@ -20,9 +20,15 @@ var _react = _interopRequireDefault(require("react"));
20
20
 
21
21
  var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
22
22
 
23
- var _Chip = _interopRequireDefault(require("../Chip/Chip"));
23
+ var _ContentCopyIcon = _interopRequireDefault(require("mdi-react/ContentCopyIcon"));
24
24
 
25
- var _Icon = _interopRequireDefault(require("../Icon/Icon"));
25
+ var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
26
+
27
+ var _Chip = _interopRequireDefault(require("../Chip"));
28
+
29
+ var _Icon = _interopRequireDefault(require("../Icon"));
30
+
31
+ var _IconButton = _interopRequireDefault(require("../IconButton"));
26
32
 
27
33
  var _colors = require("../../styles/colors.js");
28
34
 
@@ -61,6 +67,12 @@ var _default = {
61
67
  control: {
62
68
  type: 'text'
63
69
  }
70
+ },
71
+ isUppercase: {
72
+ defaultValue: false,
73
+ control: {
74
+ type: 'boolean'
75
+ }
64
76
  }
65
77
  }
66
78
  };
@@ -87,15 +99,42 @@ var ChipWithCustomColors = function ChipWithCustomColors() {
87
99
  exports.ChipWithCustomColors = ChipWithCustomColors;
88
100
 
89
101
  var ChipWithIcon = function ChipWithIcon() {
90
- return (0, _react2.jsx)(_Chip["default"], {
91
- label: "Chip with Icon",
102
+ return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Chip["default"], {
103
+ label: "Chip with Icon Button",
92
104
  bg: "navy"
105
+ }, (0, _react2.jsx)(_IconButton["default"], {
106
+ "aria-label": "Clear Chip with Icon Button",
107
+ variant: "inverted"
93
108
  }, (0, _react2.jsx)(_Icon["default"], {
94
109
  icon: _CloseIcon["default"],
95
110
  ml: "xs",
111
+ size: "14px"
112
+ }))), (0, _react2.jsx)("div", {
113
+ style: {
114
+ padding: '5px'
115
+ }
116
+ }), (0, _react2.jsx)(_Chip["default"], {
117
+ label: "Chip with Icon Button"
118
+ }, (0, _react2.jsx)(_IconButton["default"], {
119
+ "aria-label": "Clear Chip with Icon Button",
120
+ variant: "inverted"
121
+ }, (0, _react2.jsx)(_Icon["default"], {
122
+ icon: _EarthIcon["default"],
123
+ ml: "xs",
124
+ size: "14px"
125
+ }))), (0, _react2.jsx)("div", {
126
+ style: {
127
+ padding: '5px'
128
+ }
129
+ }), (0, _react2.jsx)(_Chip["default"], {
130
+ label: "Chip with Icon",
131
+ bg: "green"
132
+ }, (0, _react2.jsx)(_Icon["default"], {
133
+ icon: _ContentCopyIcon["default"],
134
+ ml: "xs",
96
135
  size: "14px",
97
136
  color: "white"
98
- }));
137
+ })));
99
138
  };
100
139
 
101
140
  exports.ChipWithIcon = ChipWithIcon;
@@ -45,4 +45,13 @@ test('renders children within Chip component', function () {
45
45
  var mockedChildren = _react2.screen.getByRole('button');
46
46
 
47
47
  expect(mockedChildren).toBeInTheDocument();
48
+ });
49
+ test('renders Chip component with uppercase', function () {
50
+ var label = 'uppercase';
51
+ var isUppercase = true;
52
+ getComponent({
53
+ label: label,
54
+ isUppercase: isUppercase
55
+ });
56
+ expect(_react2.screen.queryByText('uppercase')).toHaveStyleRule('text-transform', 'uppercase');
48
57
  });
@@ -8,11 +8,12 @@ _Object$defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
10
 
11
- _Object$defineProperty(exports, "default", {
12
- enumerable: true,
13
- get: function get() {
14
- return _DropdownField["default"];
15
- }
16
- });
11
+ exports.ChipContext = void 0;
12
+
13
+ var _react = _interopRequireDefault(require("react"));
14
+
15
+ var defaultValue = 'inherit';
16
+
17
+ var ChipContext = /*#__PURE__*/_react["default"].createContext(defaultValue);
17
18
 
18
- var _DropdownField = _interopRequireDefault(require("./DropdownField"));
19
+ exports.ChipContext = ChipContext;
@@ -40,6 +40,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
40
40
 
41
41
  var _themeUi = require("theme-ui");
42
42
 
43
+ var _button = require("@react-aria/button");
44
+
43
45
  var _focus = require("@react-aria/focus");
44
46
 
45
47
  var _interactions = require("@react-aria/interactions");
@@ -48,6 +50,8 @@ var _utils = require("@react-aria/utils");
48
50
 
49
51
  var _hooks = require("../../hooks");
50
52
 
53
+ var _ChipContext = require("../Chip/ChipContext");
54
+
51
55
  var _TooltipTrigger = _interopRequireWildcard(require("../TooltipTrigger"));
52
56
 
53
57
  var _react2 = require("@emotion/react");
@@ -82,11 +86,12 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
82
86
  return buttonRef.current;
83
87
  });
84
88
 
85
- var _usePress = (0, _interactions.usePress)(_objectSpread({
86
- ref: buttonRef
87
- }, props)),
88
- isPressed = _usePress.isPressed,
89
- pressProps = _usePress.pressProps;
89
+ var _useButton = (0, _button.useButton)(_objectSpread({}, props), buttonRef),
90
+ buttonProps = _useButton.buttonProps,
91
+ isPressed = _useButton.isPressed;
92
+
93
+ var _useContext = (0, _react.useContext)(_ChipContext.ChipContext),
94
+ chipBg = _useContext.bg;
90
95
 
91
96
  var _useHover = (0, _interactions.useHover)(props),
92
97
  hoverProps = _useHover.hoverProps,
@@ -110,8 +115,13 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
110
115
  tabIndex: 0,
111
116
  ref: buttonRef,
112
117
  className: classNames,
113
- "aria-label": ariaLabel || 'Icon Button'
114
- }, others, (0, _utils.mergeProps)(hoverProps, focusProps, pressProps)), children);
118
+ "aria-label": ariaLabel || 'Icon Button',
119
+ sx: chipBg && isHovered && {
120
+ 'path': {
121
+ fill: chipBg
122
+ }
123
+ }
124
+ }, (0, _utils.mergeProps)(hoverProps, focusProps, buttonProps, others)), children);
115
125
 
116
126
  if (title) {
117
127
  return (0, _react2.jsx)(_TooltipTrigger["default"], {
@@ -46,7 +46,6 @@ test('default icon button', function () {
46
46
 
47
47
  expect(button).toHaveAttribute('data-testid', testId);
48
48
  expect(button).toBeInstanceOf(HTMLButtonElement);
49
- expect(button).toHaveAttribute('tabindex', '0');
50
49
  expect(button).toBeInTheDocument();
51
50
  });
52
51
  test('icon button hover', function () {
@@ -56,7 +56,6 @@ var Default = function Default(args) {
56
56
  isRow: true,
57
57
  alignSelf: "center"
58
58
  }, (0, _react2.jsx)(_IconButton["default"], {
59
- variant: "icon",
60
59
  size: 26
61
60
  }, (0, _react2.jsx)(_Icon["default"], {
62
61
  icon: _MoreVertIcon["default"],
@@ -91,7 +90,6 @@ var WithSubtitle = function WithSubtitle(args) {
91
90
  isRow: true,
92
91
  alignSelf: "center"
93
92
  }, (0, _react2.jsx)(_IconButton["default"], {
94
- variant: "icon",
95
93
  size: 26
96
94
  }, (0, _react2.jsx)(_Icon["default"], {
97
95
  icon: _MoreVertIcon["default"],
@@ -81,18 +81,19 @@ var collectionTypes = {
81
81
  exports.collectionTypes = collectionTypes;
82
82
 
83
83
  function useListLayout(state) {
84
+ var ROW_HEIGHT = 81;
84
85
  var collator = (0, _i18n.useCollator)({
85
86
  usage: 'search',
86
87
  sensitivity: 'base'
87
88
  });
88
89
  var layout = (0, _react.useMemo)(function () {
89
90
  return new _layout.ListLayout({
90
- estimatedRowHeight: 81,
91
+ estimatedRowHeight: ROW_HEIGHT,
91
92
  estimatedHeadingHeight: 26,
92
93
  paddingRight: 4,
93
94
  paddingLeft: 4,
94
- loaderHeight: 81,
95
- placeholderHeight: 81,
95
+ loaderHeight: ROW_HEIGHT,
96
+ placeholderHeight: ROW_HEIGHT,
96
97
  collator: collator
97
98
  });
98
99
  }, [collator]);