carbon-react 124.0.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 (15) 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/dialog/dialog.component.d.ts +2 -0
  4. package/esm/components/dialog/dialog.component.js +5 -1
  5. package/esm/components/dialog/dialog.style.d.ts +1 -0
  6. package/esm/components/dialog/dialog.style.js +6 -1
  7. package/esm/components/progress-tracker/progress-tracker.component.js +10 -1
  8. package/lib/components/button-toggle/button-toggle-group/button-toggle-group.style.js +0 -18
  9. package/lib/components/button-toggle/button-toggle.style.js +42 -15
  10. package/lib/components/dialog/dialog.component.d.ts +2 -0
  11. package/lib/components/dialog/dialog.component.js +5 -1
  12. package/lib/components/dialog/dialog.style.d.ts +1 -0
  13. package/lib/components/dialog/dialog.style.js +6 -1
  14. package/lib/components/progress-tracker/progress-tracker.component.js +10 -1
  15. 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/dialog/dialog.component.d.ts CHANGED
@@ -56,6 +56,8 @@ export interface DialogProps extends ModalProps, TagProps {
56
56
  role?: string;
57
57
  /** Padding to be set on the Dialog content */
58
58
  contentPadding?: ContentPaddingInterface;
59
+ /** Change the background color of the content to grey */
60
+ greyBackground?: boolean;
59
61
  /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
60
62
  focusableContainers?: CustomRefObject<HTMLElement>[];
61
63
  }
package/esm/components/dialog/dialog.component.js CHANGED
@@ -33,6 +33,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
33
33
  help,
34
34
  role = "dialog",
35
35
  contentPadding = {},
36
+ greyBackground = false,
36
37
  focusableContainers,
37
38
  topModalOverride,
38
39
  ...rest
@@ -175,7 +176,9 @@ const Dialog = /*#__PURE__*/forwardRef(({
175
176
  "data-role": rest["data-role"],
176
177
  role: role,
177
178
  tabIndex: -1
178
- }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent, _extends({}, contentPadding, {
179
+ }, contentPadding, {
180
+ backgroundColor: greyBackground ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"
181
+ }), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent, _extends({}, contentPadding, {
179
182
  hasStickyFooter: hasStickyFooter
180
183
  }), /*#__PURE__*/React.createElement(StyledDialogInnerContent, _extends({
181
184
  ref: innerContentRef
@@ -227,6 +230,7 @@ Dialog.propTypes = {
227
230
  }
228
231
  }
229
232
  })]),
233
+ "greyBackground": PropTypes.bool,
230
234
  "height": PropTypes.string,
231
235
  "help": PropTypes.string,
232
236
  "onCancel": PropTypes.func,
package/esm/components/dialog/dialog.style.d.ts CHANGED
@@ -4,6 +4,7 @@ declare type StyledDialogProps = {
4
4
  topMargin: number;
5
5
  size?: DialogSizes;
6
6
  dialogHeight?: string;
7
+ backgroundColor: string;
7
8
  };
8
9
  declare const StyledDialog: import("styled-components").StyledComponent<"div", any, StyledDialogProps & ContentPaddingInterface, never>;
9
10
  declare type StyledDialogTitleProps = {
package/esm/components/dialog/dialog.style.js CHANGED
@@ -21,7 +21,6 @@ const calculatePaddingTopInnerContent = ({
21
21
  p
22
22
  }) => [py, p].some(padding => padding !== undefined) ? 0 : `${CONTENT_TOP_PADDING}px`;
23
23
  const StyledDialog = styled.div`
24
- background-color: var(--colorsUtilityMajor025);
25
24
  box-shadow: var(--boxShadow300);
26
25
  display: flex;
27
26
  flex-direction: column;
@@ -39,6 +38,12 @@ const StyledDialog = styled.div`
39
38
  outline: none;
40
39
  }
41
40
 
41
+ ${({
42
+ backgroundColor
43
+ }) => css`
44
+ background-color: ${backgroundColor};
45
+ `}
46
+
42
47
  ${({
43
48
  size
44
49
  }) => size && css`
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/dialog/dialog.component.d.ts CHANGED
@@ -56,6 +56,8 @@ export interface DialogProps extends ModalProps, TagProps {
56
56
  role?: string;
57
57
  /** Padding to be set on the Dialog content */
58
58
  contentPadding?: ContentPaddingInterface;
59
+ /** Change the background color of the content to grey */
60
+ greyBackground?: boolean;
59
61
  /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
60
62
  focusableContainers?: CustomRefObject<HTMLElement>[];
61
63
  }
package/lib/components/dialog/dialog.component.js CHANGED
@@ -42,6 +42,7 @@ const Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
42
42
  help,
43
43
  role = "dialog",
44
44
  contentPadding = {},
45
+ greyBackground = false,
45
46
  focusableContainers,
46
47
  topModalOverride,
47
48
  ...rest
@@ -184,7 +185,9 @@ const Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
184
185
  "data-role": rest["data-role"],
185
186
  role: role,
186
187
  tabIndex: -1
187
- }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
188
+ }, contentPadding, {
189
+ backgroundColor: greyBackground ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"
190
+ }), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
188
191
  hasStickyFooter: hasStickyFooter
189
192
  }), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogInnerContent, _extends({
190
193
  ref: innerContentRef
@@ -237,6 +240,7 @@ Dialog.propTypes = {
237
240
  }
238
241
  }
239
242
  })]),
243
+ "greyBackground": _propTypes.default.bool,
240
244
  "height": _propTypes.default.string,
241
245
  "help": _propTypes.default.string,
242
246
  "onCancel": _propTypes.default.func,
package/lib/components/dialog/dialog.style.d.ts CHANGED
@@ -4,6 +4,7 @@ declare type StyledDialogProps = {
4
4
  topMargin: number;
5
5
  size?: DialogSizes;
6
6
  dialogHeight?: string;
7
+ backgroundColor: string;
7
8
  };
8
9
  declare const StyledDialog: import("styled-components").StyledComponent<"div", any, StyledDialogProps & ContentPaddingInterface, never>;
9
10
  declare type StyledDialogTitleProps = {
package/lib/components/dialog/dialog.style.js CHANGED
@@ -30,7 +30,6 @@ const calculatePaddingTopInnerContent = ({
30
30
  p
31
31
  }) => [py, p].some(padding => padding !== undefined) ? 0 : `${_dialog.CONTENT_TOP_PADDING}px`;
32
32
  const StyledDialog = _styledComponents.default.div`
33
- background-color: var(--colorsUtilityMajor025);
34
33
  box-shadow: var(--boxShadow300);
35
34
  display: flex;
36
35
  flex-direction: column;
@@ -48,6 +47,12 @@ const StyledDialog = _styledComponents.default.div`
48
47
  outline: none;
49
48
  }
50
49
 
50
+ ${({
51
+ backgroundColor
52
+ }) => (0, _styledComponents.css)`
53
+ background-color: ${backgroundColor};
54
+ `}
55
+
51
56
  ${({
52
57
  size
53
58
  }) => size && (0, _styledComponents.css)`
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.0.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",