carbon-react 124.1.0 → 124.2.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 (7) hide show
  1. package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.js +0 -18
  2. package/esm/components/button-toggle/button-toggle.style.js +42 -15
  3. package/esm/components/progress-tracker/progress-tracker.component.js +10 -1
  4. package/lib/components/button-toggle/button-toggle-group/button-toggle-group.style.js +0 -18
  5. package/lib/components/button-toggle/button-toggle.style.js +42 -15
  6. package/lib/components/progress-tracker/progress-tracker.component.js +10 -1
  7. package/package.json +1 -1
package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.js CHANGED
@@ -14,24 +14,6 @@ const StyledButtonToggleGroup = styled.div`
14
14
 
15
15
  display: flex;
16
16
 
17
- ${StyledButtonToggle}:not(:first-of-type):not(:last-of-type) {
18
- border-radius: var(--borderRadius000);
19
- }
20
-
21
- ${StyledButtonToggle}:first-of-type ${StyledButtonToggle} {
22
- border-top-left-radius: var(--borderRadius400);
23
- border-bottom-left-radius: var(--borderRadius400);
24
- border-top-right-radius: var(--borderRadius000);
25
- border-bottom-right-radius: var(--borderRadius000);
26
- }
27
-
28
- ${StyledButtonToggle}:last-of-type ${StyledButtonToggle} {
29
- border-top-left-radius: var(--borderRadius000);
30
- border-bottom-left-radius: var(--borderRadius000);
31
- border-top-right-radius: var(--borderRadius400);
32
- border-bottom-right-radius: var(--borderRadius400);
33
- }
34
-
35
17
  ${({
36
18
  fullWidth
37
19
  }) => fullWidth && css`
package/esm/components/button-toggle/button-toggle.style.js CHANGED
@@ -78,15 +78,6 @@ const StyledButtonToggle = styled.button`
78
78
  `}
79
79
  }
80
80
 
81
- :not([aria-pressed="true"]):not(:disabled):hover {
82
- background-color: var(--colorsActionMinor200);
83
- border-color: var(--colorsActionMinor500);
84
- color: var(--colorsActionMinor500);
85
- ${StyledIcon} {
86
- color: var(--colorsActionMinor500);
87
- }
88
- }
89
-
90
81
  ${StyledIcon} {
91
82
  color: var(--colorsActionMinor500);
92
83
  }
@@ -111,7 +102,43 @@ const StyledButtonToggle = styled.button`
111
102
  }
112
103
  }
113
104
  cursor: not-allowed;
114
- `};
105
+ `}
106
+
107
+ & ${StyledIcon} {
108
+ color: var(--colorsActionMinor500);
109
+ :not([aria-pressed="true"]):not(:disabled):hover {
110
+ color: var(--colorsActionMinorYang100);
111
+ }
112
+ }
113
+
114
+ color: var(--colorsActionMinor500);
115
+
116
+ &[aria-pressed="true"]:not(:hover) {
117
+ box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500);
118
+ background-color: transparent;
119
+ :focus {
120
+ box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500),
121
+ 0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500),
122
+ 0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090);
123
+ }
124
+ }
125
+
126
+ :not([aria-pressed="true"]):not(:disabled):hover {
127
+ color: var(--colorsActionMinorYang100);
128
+ background-color: var(--colorsActionMinor600);
129
+ ${StyledIcon} {
130
+ color: var(--colorsActionMinorYang100);
131
+ }
132
+ }
133
+
134
+ &:not(:disabled):hover {
135
+ background-color: var(--colorsActionMinor600);
136
+ color: var(--colorsActionMinorYang100);
137
+
138
+ ${StyledIcon} {
139
+ color: var(--colorsActionMinorYang100);
140
+ }
141
+ }
115
142
  `;
116
143
  const iconFontSizes = {
117
144
  smallIcon: 16,
@@ -153,7 +180,7 @@ const StyledButtonToggleWrapper = styled.div`
153
180
  ${!grouped && css`
154
181
  &&&& {
155
182
  ${StyledButtonToggle} {
156
- border-radius: var(--borderRadius400);
183
+ border-radius: var(--borderRadius050);
157
184
  }
158
185
  }
159
186
  `}
@@ -162,15 +189,15 @@ const StyledButtonToggleWrapper = styled.div`
162
189
  &&&& {
163
190
  :first-of-type {
164
191
  ${StyledButtonToggle} {
165
- border-top-left-radius: var(--borderRadius400);
166
- border-bottom-left-radius: var(--borderRadius400);
192
+ border-top-left-radius: var(--borderRadius050);
193
+ border-bottom-left-radius: var(--borderRadius050);
167
194
  }
168
195
  }
169
196
 
170
197
  :last-of-type {
171
198
  ${StyledButtonToggle} {
172
- border-top-right-radius: var(--borderRadius400);
173
- border-bottom-right-radius: var(--borderRadius400);
199
+ border-top-right-radius: var(--borderRadius050);
200
+ border-bottom-right-radius: var(--borderRadius050);
174
201
  }
175
202
  }
176
203
  }
package/esm/components/progress-tracker/progress-tracker.component.js CHANGED
@@ -52,7 +52,15 @@ const ProgressTracker = ({
52
52
  return /*#__PURE__*/React.createElement(StyledValuesLabel, {
53
53
  labelsPosition: labelsPosition,
54
54
  size: size
55
- }, displayedCurrentProgressLabel && /*#__PURE__*/React.createElement(StyledValue, null, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, customValuePreposition || l.progressTracker.of()), /*#__PURE__*/React.createElement(StyledValue, null, displayedMaxProgressLabel)), description && /*#__PURE__*/React.createElement(StyledDescription, null, description));
55
+ }, displayedCurrentProgressLabel && /*#__PURE__*/React.createElement(StyledValue, {
56
+ "data-element": "current-progress-label"
57
+ }, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
58
+ "data-element": "custom-preposition"
59
+ }, customValuePreposition || l.progressTracker.of()), /*#__PURE__*/React.createElement(StyledValue, {
60
+ "data-element": "max-progress-label"
61
+ }, displayedMaxProgressLabel)), description && /*#__PURE__*/React.createElement(StyledDescription, {
62
+ "data-element": "progress-tracker-description"
63
+ }, description));
56
64
  };
57
65
  const defaultValueNow = ariaValueMin + (ariaValueMax - ariaValueMin) * progress / 100;
58
66
  return /*#__PURE__*/React.createElement(StyledProgressTracker, _extends({
@@ -71,6 +79,7 @@ const ProgressTracker = ({
71
79
  progress: progress,
72
80
  error: error
73
81
  }, /*#__PURE__*/React.createElement(InnerBar, {
82
+ "data-element": "inner-bar",
74
83
  size: size,
75
84
  length: barLength,
76
85
  progress: progress,
package/lib/components/button-toggle/button-toggle-group/button-toggle-group.style.js CHANGED
@@ -23,24 +23,6 @@ const StyledButtonToggleGroup = _styledComponents.default.div`
23
23
 
24
24
  display: flex;
25
25
 
26
- ${_buttonToggle.StyledButtonToggle}:not(:first-of-type):not(:last-of-type) {
27
- border-radius: var(--borderRadius000);
28
- }
29
-
30
- ${_buttonToggle.StyledButtonToggle}:first-of-type ${_buttonToggle.StyledButtonToggle} {
31
- border-top-left-radius: var(--borderRadius400);
32
- border-bottom-left-radius: var(--borderRadius400);
33
- border-top-right-radius: var(--borderRadius000);
34
- border-bottom-right-radius: var(--borderRadius000);
35
- }
36
-
37
- ${_buttonToggle.StyledButtonToggle}:last-of-type ${_buttonToggle.StyledButtonToggle} {
38
- border-top-left-radius: var(--borderRadius000);
39
- border-bottom-left-radius: var(--borderRadius000);
40
- border-top-right-radius: var(--borderRadius400);
41
- border-bottom-right-radius: var(--borderRadius400);
42
- }
43
-
44
26
  ${({
45
27
  fullWidth
46
28
  }) => fullWidth && (0, _styledComponents.css)`
package/lib/components/button-toggle/button-toggle.style.js CHANGED
@@ -88,15 +88,6 @@ const StyledButtonToggle = _styledComponents.default.button`
88
88
  `}
89
89
  }
90
90
 
91
- :not([aria-pressed="true"]):not(:disabled):hover {
92
- background-color: var(--colorsActionMinor200);
93
- border-color: var(--colorsActionMinor500);
94
- color: var(--colorsActionMinor500);
95
- ${_icon.default} {
96
- color: var(--colorsActionMinor500);
97
- }
98
- }
99
-
100
91
  ${_icon.default} {
101
92
  color: var(--colorsActionMinor500);
102
93
  }
@@ -121,7 +112,43 @@ const StyledButtonToggle = _styledComponents.default.button`
121
112
  }
122
113
  }
123
114
  cursor: not-allowed;
124
- `};
115
+ `}
116
+
117
+ & ${_icon.default} {
118
+ color: var(--colorsActionMinor500);
119
+ :not([aria-pressed="true"]):not(:disabled):hover {
120
+ color: var(--colorsActionMinorYang100);
121
+ }
122
+ }
123
+
124
+ color: var(--colorsActionMinor500);
125
+
126
+ &[aria-pressed="true"]:not(:hover) {
127
+ box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500);
128
+ background-color: transparent;
129
+ :focus {
130
+ box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500),
131
+ 0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500),
132
+ 0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090);
133
+ }
134
+ }
135
+
136
+ :not([aria-pressed="true"]):not(:disabled):hover {
137
+ color: var(--colorsActionMinorYang100);
138
+ background-color: var(--colorsActionMinor600);
139
+ ${_icon.default} {
140
+ color: var(--colorsActionMinorYang100);
141
+ }
142
+ }
143
+
144
+ &:not(:disabled):hover {
145
+ background-color: var(--colorsActionMinor600);
146
+ color: var(--colorsActionMinorYang100);
147
+
148
+ ${_icon.default} {
149
+ color: var(--colorsActionMinorYang100);
150
+ }
151
+ }
125
152
  `;
126
153
  exports.StyledButtonToggle = StyledButtonToggle;
127
154
  const iconFontSizes = {
@@ -165,7 +192,7 @@ const StyledButtonToggleWrapper = _styledComponents.default.div`
165
192
  ${!grouped && (0, _styledComponents.css)`
166
193
  &&&& {
167
194
  ${StyledButtonToggle} {
168
- border-radius: var(--borderRadius400);
195
+ border-radius: var(--borderRadius050);
169
196
  }
170
197
  }
171
198
  `}
@@ -174,15 +201,15 @@ const StyledButtonToggleWrapper = _styledComponents.default.div`
174
201
  &&&& {
175
202
  :first-of-type {
176
203
  ${StyledButtonToggle} {
177
- border-top-left-radius: var(--borderRadius400);
178
- border-bottom-left-radius: var(--borderRadius400);
204
+ border-top-left-radius: var(--borderRadius050);
205
+ border-bottom-left-radius: var(--borderRadius050);
179
206
  }
180
207
  }
181
208
 
182
209
  :last-of-type {
183
210
  ${StyledButtonToggle} {
184
- border-top-right-radius: var(--borderRadius400);
185
- border-bottom-right-radius: var(--borderRadius400);
211
+ border-top-right-radius: var(--borderRadius050);
212
+ border-bottom-right-radius: var(--borderRadius050);
186
213
  }
187
214
  }
188
215
  }
package/lib/components/progress-tracker/progress-tracker.component.js CHANGED
@@ -61,7 +61,15 @@ const ProgressTracker = ({
61
61
  return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValuesLabel, {
62
62
  labelsPosition: labelsPosition,
63
63
  size: size
64
- }, displayedCurrentProgressLabel && /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, null, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, customValuePreposition || l.progressTracker.of()), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, null, displayedMaxProgressLabel)), description && /*#__PURE__*/_react.default.createElement(_progressTracker.StyledDescription, null, description));
64
+ }, displayedCurrentProgressLabel && /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, {
65
+ "data-element": "current-progress-label"
66
+ }, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
67
+ "data-element": "custom-preposition"
68
+ }, customValuePreposition || l.progressTracker.of()), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, {
69
+ "data-element": "max-progress-label"
70
+ }, displayedMaxProgressLabel)), description && /*#__PURE__*/_react.default.createElement(_progressTracker.StyledDescription, {
71
+ "data-element": "progress-tracker-description"
72
+ }, description));
65
73
  };
66
74
  const defaultValueNow = ariaValueMin + (ariaValueMax - ariaValueMin) * progress / 100;
67
75
  return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressTracker, _extends({
@@ -80,6 +88,7 @@ const ProgressTracker = ({
80
88
  progress: progress,
81
89
  error: error
82
90
  }, /*#__PURE__*/_react.default.createElement(_progressTracker.InnerBar, {
91
+ "data-element": "inner-bar",
83
92
  size: size,
84
93
  length: barLength,
85
94
  progress: progress,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "124.1.0",
3
+ "version": "124.2.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",