@occmundial/occ-atomic 3.0.0-beta.16 → 3.0.0-beta.18

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 (10) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/build/Checkbox/Checkbox.js +4 -4
  3. package/build/Pill/Choice/Choice.js +6 -4
  4. package/build/Pill/Choice/styles.js +13 -10
  5. package/build/Pill/Group/styles.js +5 -5
  6. package/build/Pill/Stack/Stack.js +2 -2
  7. package/build/Pill/Stack/styles.js +5 -8
  8. package/build/Radio/Radio.js +4 -4
  9. package/build/SlideToggle/SlideToggle.js +4 -4
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,18 @@
1
+ # [3.0.0-beta.18](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.17...v3.0.0-beta.18) (2024-06-21)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * Replace onKeyDown for onKeyUp ([e574e9c](https://github.com/occmundial/occ-atomic/commit/e574e9c42f7a55723794269ede7a4f58dd899e58))
7
+
8
+ # [3.0.0-beta.17](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.16...v3.0.0-beta.17) (2024-06-19)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * Change icon size and adjust margin ([0411455](https://github.com/occmundial/occ-atomic/commit/041145590cd765e5b81937f07ef676d2fc5e8826))
14
+ * Remove selector not active for focus visible ([dbec333](https://github.com/occmundial/occ-atomic/commit/dbec33316a94826d2007a044b634f944ffe01715))
15
+
1
16
  # [3.0.0-beta.16](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.15...v3.0.0-beta.16) (2024-06-19)
2
17
 
3
18
 
package/build/Checkbox/Checkbox.js CHANGED
@@ -86,8 +86,8 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
86
86
  }
87
87
  }
88
88
  }, {
89
- key: "handleKeyDown",
90
- value: function handleKeyDown(e) {
89
+ key: "handleKeyUp",
90
+ value: function handleKeyUp(e) {
91
91
  if (e.keyCode == 13 || e.keyCode == 32) {
92
92
  e.preventDefault();
93
93
  this.toggle();
@@ -118,8 +118,8 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
118
118
  return /*#__PURE__*/_react["default"].createElement("div", _extends({
119
119
  id: id,
120
120
  tabIndex: disabled ? -1 : 0,
121
- onKeyDown: function onKeyDown(e) {
122
- return _this2.handleKeyDown(e);
121
+ onKeyUp: function onKeyUp(e) {
122
+ return _this2.handleKeyUp(e);
123
123
  },
124
124
  className: "".concat(classes.cont).concat(iconClass).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
125
125
  onClick: this.toggle,
package/build/Pill/Choice/Choice.js CHANGED
@@ -83,15 +83,17 @@ var Choice = function Choice(props) {
83
83
  }), leftIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
84
84
  iconName: leftIcon,
85
85
  colors: [conditionedStyles.iconColor],
86
- width: 18,
87
- height: 18
86
+ className: classes.leftIcon,
87
+ width: 16,
88
+ height: 16
88
89
  }), children && /*#__PURE__*/_react["default"].createElement("span", {
89
90
  className: "".concat(classes.text, " ").concat(classes[conditionedStyles.text])
90
91
  }, children), rightIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
91
92
  iconName: rightIcon,
92
93
  colors: [conditionedStyles.iconColor],
93
- width: 18,
94
- height: 18
94
+ className: classes.rightIcon,
95
+ width: 16,
96
+ height: 16
95
97
  }));
96
98
  };
97
99
 
package/build/Pill/Choice/styles.js CHANGED
@@ -44,12 +44,11 @@ var _default = {
44
44
  '&:hover': {
45
45
  background: _colors["default"].pill.unselected.bg.hover
46
46
  },
47
- '&:active, &:focus': {
47
+ '&:active': {
48
48
  background: _colors["default"].pill.unselected.bg.active
49
49
  },
50
- '&:not(:active):focus-visible': {
51
- boxShadow: _shadows["default"]['focus-indigo'],
52
- background: _colors["default"].pill.unselected.bg["default"]
50
+ '&:focus-visible': {
51
+ boxShadow: _shadows["default"]['focus-indigo']
53
52
  }
54
53
  },
55
54
  disabled: {
@@ -57,16 +56,16 @@ var _default = {
57
56
  pointerEvents: 'none'
58
57
  },
59
58
  selected: {
60
- background: "".concat(_colors["default"].pill.selected.bg["default"], " !important"),
59
+ background: _colors["default"].pill.selected.bg["default"],
61
60
  zIndex: 1,
62
61
  color: _colors["default"].text.white.primary,
63
62
  '&:hover': {
64
63
  background: _colors["default"].pill.selected.bg.hover
65
64
  },
66
- '&:active, &:focus': {
65
+ '&:active': {
67
66
  background: _colors["default"].pill.selected.bg.active
68
67
  },
69
- '&:not(:active):focus-visible': {
68
+ '&:focus-visible': {
70
69
  boxShadow: _shadows["default"]['focus-indigo']
71
70
  }
72
71
  },
@@ -80,9 +79,7 @@ var _default = {
80
79
  font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
81
80
  textOverflow: 'ellipsis',
82
81
  whiteSpace: 'nowrap',
83
- padding: [0, _spacing["default"]['size-1']],
84
- marginLeft: _spacing["default"]['size-1'],
85
- marginRight: _spacing["default"]['size-1']
82
+ padding: [0, _spacing["default"]['size-1']]
86
83
  },
87
84
  textSelectedDisabled: {
88
85
  color: _colors["default"].text.white.secondary
@@ -95,6 +92,12 @@ var _default = {
95
92
  },
96
93
  textEnabled: {
97
94
  color: _colors["default"].text.indigo.primary
95
+ },
96
+ leftIcon: {
97
+ marginRight: _spacing["default"]['size-1']
98
+ },
99
+ rightIcon: {
100
+ marginLeft: _spacing["default"]['size-1']
98
101
  }
99
102
  };
100
103
  exports["default"] = _default;
package/build/Pill/Group/styles.js CHANGED
@@ -43,15 +43,15 @@ var _default = {
43
43
  whiteSpace: 'nowrap',
44
44
  transition: '0.3s all',
45
45
  cursor: 'pointer',
46
- '&:not(:active):focus-visible': {
47
- boxShadow: _shadows["default"]['focus-indigo'],
48
- background: 'none'
49
- },
50
46
  '&:hover': {
51
47
  background: _colors["default"].pill.unselected.bg.hover
52
48
  },
53
- '&:active, &:focus': {
49
+ '&:active': {
54
50
  background: _colors["default"].pill.unselected.bg.active
51
+ },
52
+ '&:focus-visible': {
53
+ boxShadow: _shadows["default"]['focus-indigo'],
54
+ background: 'none'
55
55
  }
56
56
  },
57
57
  selected: {
package/build/Pill/Stack/Stack.js CHANGED
@@ -52,8 +52,8 @@ var Stack = function Stack(_ref) {
52
52
  className: classes.close,
53
53
  iconName: "cross",
54
54
  colors: [disabled ? _colors["default"].icon.brand.disabled : _colors["default"].icon.brand["default"]],
55
- width: 18,
56
- height: 18
55
+ width: 16,
56
+ height: 16
57
57
  })));
58
58
  };
59
59
 
package/build/Pill/Stack/styles.js CHANGED
@@ -42,12 +42,11 @@ var _default = {
42
42
  '&:hover': {
43
43
  background: _colors["default"].pill.unselected.bg.hover
44
44
  },
45
- '&:active, &:focus': {
45
+ '&:active': {
46
46
  background: _colors["default"].pill.unselected.bg.active
47
47
  },
48
- '&:not(:active):focus-visible': {
49
- boxShadow: _shadows["default"]['focus-indigo'],
50
- background: _colors["default"].pill.unselected.bg["default"]
48
+ '&:focus-visible': {
49
+ boxShadow: _shadows["default"]['focus-indigo']
51
50
  }
52
51
  },
53
52
  disabled: {
@@ -61,8 +60,7 @@ var _default = {
61
60
  color: _colors["default"].text.indigo.primary,
62
61
  textOverflow: 'ellipsis',
63
62
  whiteSpace: 'nowrap',
64
- padding: [0, _spacing["default"]['size-1']],
65
- marginRight: _spacing["default"]['size-1']
63
+ padding: [0, _spacing["default"]['size-1']]
66
64
  },
67
65
  textDisabled: {
68
66
  color: _colors["default"].text.indigo.secondary
@@ -73,8 +71,7 @@ var _default = {
73
71
  display: 'inline-flex',
74
72
  justifyContent: 'center',
75
73
  alignItems: 'center',
76
- marginRight: -_spacing["default"]['size-1'],
77
- marginLeft: -_spacing["default"]['size-1']
74
+ marginLeft: _spacing["default"]['size-1']
78
75
  }
79
76
  };
80
77
  exports["default"] = _default;
package/build/Radio/Radio.js CHANGED
@@ -78,8 +78,8 @@ var Radio = /*#__PURE__*/function (_React$Component) {
78
78
  }
79
79
  }
80
80
  }, {
81
- key: "handleKeyDown",
82
- value: function handleKeyDown(e, option) {
81
+ key: "handleKeyUp",
82
+ value: function handleKeyUp(e, option) {
83
83
  if (e.keyCode == 13 || e.keyCode == 32) {
84
84
  e.preventDefault();
85
85
  this.onChange(option);
@@ -106,8 +106,8 @@ var Radio = /*#__PURE__*/function (_React$Component) {
106
106
  id: option.trk,
107
107
  key: option.value,
108
108
  tabIndex: option.disabled ? -1 : 0,
109
- onKeyDown: function onKeyDown(e) {
110
- return _this2.handleKeyDown(e, option);
109
+ onKeyUp: function onKeyUp(e) {
110
+ return _this2.handleKeyUp(e, option);
111
111
  },
112
112
  "data-testid": option.testId
113
113
  }, option.testId && {
package/build/SlideToggle/SlideToggle.js CHANGED
@@ -84,8 +84,8 @@ var SlideToggle = /*#__PURE__*/function (_React$Component) {
84
84
  }
85
85
  }
86
86
  }, {
87
- key: "handleKeyDown",
88
- value: function handleKeyDown(e) {
87
+ key: "handleKeyUp",
88
+ value: function handleKeyUp(e) {
89
89
  if (e.keyCode == 13 || e.keyCode == 32) {
90
90
  e.preventDefault();
91
91
  this.toggle();
@@ -111,8 +111,8 @@ var SlideToggle = /*#__PURE__*/function (_React$Component) {
111
111
  return /*#__PURE__*/_react["default"].createElement("div", {
112
112
  id: id,
113
113
  tabIndex: disabled ? -1 : 0,
114
- onKeyDown: function onKeyDown(e) {
115
- return _this2.handleKeyDown(e);
114
+ onKeyUp: function onKeyUp(e) {
115
+ return _this2.handleKeyUp(e);
116
116
  },
117
117
  onClick: this.toggle,
118
118
  className: "".concat(classes.cont).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@occmundial/occ-atomic",
3
- "version": "3.0.0-beta.16",
3
+ "version": "3.0.0-beta.18",
4
4
  "description": "Collection of shareable styled React components for OCC applications.",
5
5
  "homepage": "http://occmundial.github.io/occ-atomic",
6
6
  "main": "build/index.js",