carbon-react 102.18.0 → 102.19.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 (5) hide show
  1. package/lib/__internal__/label/label.style.js +2 -2
  2. package/lib/components/switch/__internal__/switch-slider-panel.style.js +31 -16
  3. package/lib/components/switch/__internal__/switch-slider.style.js +38 -29
  4. package/lib/components/switch/switch.style.js +5 -15
  5. package/package.json +1 -1
package/lib/__internal__/label/label.style.js CHANGED
@@ -16,7 +16,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
16
16
  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
17
 
18
18
  const LabelStyle = _styledComponents.default.label`
19
- color: var(--colorsYin090);
19
+ color: var(--colorsUtilityYin090);
20
20
  display: block;
21
21
  font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
22
22
 
@@ -34,7 +34,7 @@ const LabelStyle = _styledComponents.default.label`
34
34
  ${({
35
35
  disabled
36
36
  }) => disabled && (0, _styledComponents.css)`
37
- color: var(--colorsYin030);
37
+ color: var(--colorsUtilityYin030);
38
38
  `}
39
39
  `;
40
40
  LabelStyle.propTypes = {
package/lib/components/switch/__internal__/switch-slider-panel.style.js CHANGED
@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
 
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
12
- var _base = _interopRequireDefault(require("../../../style/themes/base"));
13
-
14
12
  var _loader = _interopRequireDefault(require("../../loader/loader.style"));
15
13
 
16
14
  var _loaderSquare = _interopRequireDefault(require("../../loader/loader-square.style"));
@@ -24,11 +22,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
24
22
  const SwitchSliderPanel = _styledComponents.default.div`
25
23
  ${({
26
24
  isLoading,
27
- size,
28
- theme
25
+ size
29
26
  }) => (0, _styledComponents.css)`
30
27
  border: 0;
31
- color: ${theme.colors.white};
28
+ color: var(--colorsActionMinorYang100);
32
29
  margin: auto;
33
30
  margin-top: ${size === "large" ? "12px" : "5px"};
34
31
 
@@ -37,20 +34,42 @@ const SwitchSliderPanel = _styledComponents.default.div`
37
34
  }
38
35
 
39
36
  &[type="off"] {
40
- color: ${theme.text.color};
37
+ color: var(--colorsActionMinor500);
41
38
  margin-right: 6px;
42
39
  }
43
40
 
44
41
  ${isLoading && (0, _styledComponents.css)`
42
+ &[type="off"],
43
+ &[type="on"] {
44
+ margin: 0;
45
+ width: 100%;
46
+ box-sizing: border-box;
47
+ padding: 2px 8px;
48
+ }
49
+
50
+ &[type="off"] {
51
+ ${_loaderSquare.default} {
52
+ background-color: var(--colorsSemanticNeutral500);
53
+ }
54
+ }
55
+
56
+ &[type="on"] {
57
+ ${_loaderSquare.default} {
58
+ background-color: var(--colorsActionMinorYang100);
59
+ }
60
+ }
61
+
45
62
  ${_loader.default} {
46
63
  {
47
- padding: 0 3px 3px 0;
64
+ display: flex;
65
+ justify-content: center;
66
+ align-items: center;
67
+ width: 100%;
68
+ height: 100%;
48
69
 
49
70
  ${_loaderSquare.default} {
50
- height: 5px;
51
- margin-bottom: 2px;
52
- margin-right: 2px;
53
- width: 5px;
71
+ height: ${size === "large" ? "var(--sizing200)" : "var(--sizing150)"};
72
+ width: ${size === "large" ? "var(--sizing200)" : "var(--sizing150)"};
54
73
  }
55
74
  }
56
75
  }
@@ -59,11 +78,7 @@ const SwitchSliderPanel = _styledComponents.default.div`
59
78
  `;
60
79
  SwitchSliderPanel.propTypes = {
61
80
  isLoading: _propTypes.default.bool,
62
- size: _propTypes.default.string,
63
- theme: _propTypes.default.object
64
- };
65
- SwitchSliderPanel.defaultProps = {
66
- theme: _base.default
81
+ size: _propTypes.default.string
67
82
  };
68
83
  var _default = SwitchSliderPanel;
69
84
  exports.default = _default;
package/lib/components/switch/__internal__/switch-slider.style.js CHANGED
@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
 
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
12
- var _base = _interopRequireDefault(require("../../../style/themes/base"));
13
-
14
12
  var _switchSliderPanel = _interopRequireDefault(require("./switch-slider-panel.style"));
15
13
 
16
14
  var _validationIcon = _interopRequireDefault(require("../../../__internal__/validations/validation-icon.style"));
@@ -24,14 +22,12 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
24
22
  const StyledSwitchSlider = _styledComponents.default.span`
25
23
  ${({
26
24
  checked,
25
+ isLoading,
27
26
  disabled,
28
27
  size,
29
- theme,
30
28
  error,
31
- warning,
32
- info
29
+ warning
33
30
  }) => (0, _styledComponents.css)`
34
- background-color: ${theme.switch.off};
35
31
  display: flex;
36
32
  font-size: 12px;
37
33
  font-weight: bold;
@@ -44,21 +40,13 @@ const StyledSwitchSlider = _styledComponents.default.span`
44
40
  width: 60px;
45
41
  z-index: 2;
46
42
  border-radius: 90px;
47
-
48
- ${info && !disabled && (0, _styledComponents.css)`
49
- box-shadow: inset 0px 0px 0px 1px ${theme.colors.info};
50
- `}
51
- ${warning && !disabled && (0, _styledComponents.css)`
52
- box-shadow: inset 0px 0px 0px 1px ${theme.colors.warning};
53
- `}
54
- ${error && !disabled && (0, _styledComponents.css)`
55
- box-shadow: inset 0px 0px 0px 2px ${theme.colors.error};
56
- `}
43
+ border-style: solid;
44
+ border-color: var(--colorsActionMinor400);
45
+ border-width: var(--borderWidth200);
57
46
 
58
47
  &::before {
59
- background-color: ${theme.colors.white};
48
+ background-color: var(--colorsActionMinor400);
60
49
  bottom: 4px;
61
- box-shadow: ${theme.shadows.cards};
62
50
  content: "";
63
51
  height: 16px;
64
52
  position: absolute;
@@ -70,28 +58,36 @@ const StyledSwitchSlider = _styledComponents.default.span`
70
58
  }
71
59
 
72
60
  ${checked && `
73
- background-color: ${theme.switch.on};
61
+ background-color: var(--colorsActionMinor500);
62
+ border-color: var(--colorsActionMinorTransparent);
74
63
 
75
64
  &::before {
76
65
  transform: translateX(36px);
66
+ background-color: var(--colorsActionMinorYang100);
77
67
  }
68
+
78
69
  `}
79
70
 
80
- ${disabled && (0, _styledComponents.css)`
81
- background-color: ${theme.switch.offDisabled};
71
+ ${disabled && !isLoading && (0, _styledComponents.css)`
72
+ border-color: var(--colorsActionDisabled600);
82
73
 
83
74
  &::before {
84
- opacity: 0.8;
75
+ background-color: var(--colorsActionDisabled600);
85
76
  }
86
77
 
87
78
  ${_switchSliderPanel.default} {
88
- color: ${theme.switch.disabledFontColor};
79
+ color: var(--colorsUtilityYin030);
89
80
  }
90
81
 
91
82
  ${checked && `
92
- background-color: ${theme.switch.onDisabled};
83
+ background-color: var(--colorsActionDisabled500);
84
+ border-color: var(--colorsActionMinorTransparent);
93
85
 
94
- ${_switchSliderPanel.default} { color: ${theme.colors.white}; }
86
+ &::before {
87
+ background-color: var(--colorsActionMinorYang100);
88
+ }
89
+
90
+ ${_switchSliderPanel.default} { color: var(--colorsUtilityYin030); }
95
91
  `}
96
92
  `}
97
93
 
@@ -107,6 +103,20 @@ const StyledSwitchSlider = _styledComponents.default.span`
107
103
  }
108
104
  `}
109
105
 
106
+ ${isLoading && (0, _styledComponents.css)`
107
+ &::before {
108
+ display: none;
109
+ }
110
+ `}
111
+
112
+ ${warning && !disabled && (0, _styledComponents.css)`
113
+ border-color: var(--colorsSemanticCaution500);
114
+ `}
115
+
116
+ ${error && !disabled && (0, _styledComponents.css)`
117
+ border-color: var(--colorsSemanticNegative500);
118
+ `}
119
+
110
120
  ${_validationIcon.default} {
111
121
  position: absolute;
112
122
  right: -30px;
@@ -118,10 +128,9 @@ StyledSwitchSlider.propTypes = {
118
128
  checked: _propTypes.default.bool,
119
129
  disabled: _propTypes.default.bool,
120
130
  size: _propTypes.default.string,
121
- theme: _propTypes.default.object
122
- };
123
- StyledSwitchSlider.defaultProps = {
124
- theme: _base.default
131
+ isLoading: _propTypes.default.bool,
132
+ error: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
133
+ warning: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
125
134
  };
126
135
  var _default = StyledSwitchSlider;
127
136
  exports.default = _default;
package/lib/components/switch/switch.style.js CHANGED
@@ -35,13 +35,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
35
35
 
36
36
  const StyledSwitch = _styledComponents.default.div`
37
37
  ${({
38
- checked,
39
38
  fieldHelpInline,
40
39
  labelInline,
41
- labelSpacing,
42
40
  reverse,
43
- size,
44
- theme
41
+ size
45
42
  }) => (0, _styledComponents.css)`
46
43
  ${_styledSystem.margin}
47
44
  ${_formField.FieldLineStyle} {
@@ -60,11 +57,7 @@ const StyledSwitch = _styledComponents.default.div`
60
57
 
61
58
  ${_hiddenCheckableInput.default}:not([disabled]) {
62
59
  &:focus + ${_switchSlider.default} {
63
- outline: solid 3px ${theme.colors.focus};
64
- }
65
-
66
- &:hover + ${_switchSlider.default} {
67
- background-color: ${checked ? theme.switch.onHover : theme.switch.offHover};
60
+ outline: solid 3px var(--colorsSemanticFocus500);
68
61
  }
69
62
  }
70
63
 
@@ -128,10 +121,9 @@ const StyledSwitch = _styledComponents.default.div`
128
121
  margin-top: 0;
129
122
  }
130
123
 
131
- ${!fieldHelpInline && `
124
+ ${!fieldHelpInline && (0, _styledComponents.css)`
132
125
  ${_fieldHelp.default} {
133
126
  margin-left: 60px;
134
- padding-left: ${labelSpacing * theme.spacing}px;
135
127
  }
136
128
  `}
137
129
  `}
@@ -173,10 +165,9 @@ const StyledSwitch = _styledComponents.default.div`
173
165
  padding-bottom: 10px;
174
166
  }
175
167
 
176
- ${!fieldHelpInline && reverse && `
168
+ ${!fieldHelpInline && reverse && (0, _styledComponents.css)`
177
169
  ${_fieldHelp.default} {
178
170
  margin-left: 78px;
179
- padding-left: ${labelSpacing * theme.spacing}px;
180
171
  }
181
172
  `}
182
173
  `}
@@ -188,8 +179,7 @@ StyledSwitch.propTypes = {
188
179
  fieldHelpInline: _propTypes.default.bool,
189
180
  labelInline: _propTypes.default.bool,
190
181
  reverse: _propTypes.default.bool,
191
- size: _propTypes.default.string,
192
- theme: _propTypes.default.object
182
+ size: _propTypes.default.string
193
183
  };
194
184
  StyledSwitch.defaultProps = {
195
185
  theme: _base.default
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "102.18.0",
3
+ "version": "102.19.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "engineStrict": true,
6
6
  "engines": {