carbon-react 141.0.5 → 141.0.7

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 (17) hide show
  1. package/esm/__internal__/fieldset/fieldset.component.js +2 -1
  2. package/esm/components/button-toggle/button-toggle.style.js +16 -15
  3. package/esm/components/heading/heading.component.js +5 -2
  4. package/esm/components/numeral-date/numeral-date.component.js +1 -1
  5. package/esm/components/preview/preview.component.js +1 -0
  6. package/esm/components/radio-button/radio-button-group/radio-button-group.component.js +1 -0
  7. package/esm/components/radio-button/radio-button-svg.component.js +1 -0
  8. package/esm/components/select/__internal__/utils/highlight-part-of-text.js +5 -4
  9. package/lib/__internal__/fieldset/fieldset.component.js +2 -1
  10. package/lib/components/button-toggle/button-toggle.style.js +16 -15
  11. package/lib/components/heading/heading.component.js +5 -2
  12. package/lib/components/numeral-date/numeral-date.component.js +1 -1
  13. package/lib/components/preview/preview.component.js +1 -0
  14. package/lib/components/radio-button/radio-button-group/radio-button-group.component.js +1 -0
  15. package/lib/components/radio-button/radio-button-svg.component.js +1 -0
  16. package/lib/components/select/__internal__/utils/highlight-part-of-text.js +5 -4
  17. package/package.json +1 -1
package/esm/__internal__/fieldset/fieldset.component.js CHANGED
@@ -51,7 +51,8 @@ const Fieldset = ({
51
51
  align: legendAlign,
52
52
  rightPadding: legendSpacing
53
53
  }, legendMargin, {
54
- "data-element": "legend"
54
+ "data-element": "legend",
55
+ "data-role": "legend"
55
56
  }), /*#__PURE__*/React.createElement(StyledLegendContent, {
56
57
  isRequired: isRequired,
57
58
  isOptional: isOptional,
package/esm/components/button-toggle/button-toggle.style.js CHANGED
@@ -23,9 +23,9 @@ const heightLargeIconConfig = {
23
23
  large: 120
24
24
  };
25
25
  const paddingLargeIconConfig = {
26
- small: 24,
27
- medium: 40,
28
- large: 48
26
+ small: "var(--spacing100)",
27
+ medium: "var(--spacing100) var(--spacing150) var(--spacing000)",
28
+ large: "var(--spacing100) var(--spacing300)"
29
29
  };
30
30
  const StyledButtonToggleContentWrapper = styled.div`
31
31
  display: flex;
@@ -49,18 +49,20 @@ const StyledButtonToggle = styled.button`
49
49
  font-weight: 700;
50
50
  background-color: transparent;
51
51
  cursor: pointer;
52
- text-align: start;
52
+ text-align: center;
53
53
  color: var(--colorsActionMinor500);
54
54
  border: none;
55
55
 
56
56
  ${StyledIcon} {
57
57
  color: var(--colorsActionMinor500);
58
+ height: var(--sizing250);
59
+ width: var(--sizing250);
58
60
  }
59
61
 
60
62
  ${({
61
63
  size
62
64
  }) => css`
63
- height: ${heightConfig[size]}px;
65
+ min-height: ${heightConfig[size]}px;
64
66
  padding: 0 ${paddingConfig[size]}px;
65
67
  font-size: ${fontSizeConfig[size]}px;
66
68
  `}
@@ -70,8 +72,8 @@ const StyledButtonToggle = styled.button`
70
72
  buttonIconSize,
71
73
  size
72
74
  }) => buttonIcon && buttonIconSize === "large" && css`
73
- height: ${heightLargeIconConfig[size]}px;
74
- padding: 0 ${paddingLargeIconConfig[size]}px;
75
+ min-height: ${heightLargeIconConfig[size]}px;
76
+ padding: ${paddingLargeIconConfig[size]};
75
77
  flex-direction: column;
76
78
  `}
77
79
 
@@ -123,10 +125,6 @@ const StyledButtonToggle = styled.button`
123
125
  }
124
126
  `}
125
127
  `;
126
- const iconFontSizes = {
127
- smallIcon: 20,
128
- largeIcon: 32
129
- };
130
128
  const StyledButtonToggleIcon = styled.div`
131
129
  ${({
132
130
  hasContent
@@ -135,17 +133,20 @@ const StyledButtonToggleIcon = styled.div`
135
133
  buttonIconSize
136
134
  }) => buttonIconSize === "large" && css`
137
135
  margin-right: 0;
136
+
138
137
  ${StyledIcon} {
139
138
  margin-left: 0;
140
139
  margin-right: 0;
141
140
  margin-bottom: 8px;
142
- height: ${`${iconFontSizes.largeIcon}px`};
143
- width: ${`${iconFontSizes.largeIcon}px`};
141
+ height: var(--sizing400);
142
+ width: var(--sizing400);
144
143
  }
144
+
145
145
  ${StyledIcon}::before {
146
- font-size: ${`${iconFontSizes[`${buttonIconSize}Icon`]}px`};
147
- line-height: ${`${iconFontSizes[`${buttonIconSize}Icon`]}px`};
146
+ font-size: var(--sizing400);
147
+ line-height: var(--sizing400);
148
148
  }
149
+
149
150
  .carbon-icon__svg--credit-card-slash {
150
151
  margin-left: 6px;
151
152
  }
package/esm/components/heading/heading.component.js CHANGED
@@ -41,6 +41,7 @@ export const Heading = ({
41
41
  , _extends({
42
42
  "aria-label": l.heading.backLinkAriaLabel(),
43
43
  "data-element": "back",
44
+ "data-role": "heading-back-button",
44
45
  onMouseDown: e => e.currentTarget.focus()
45
46
  }, backButtonProps), /*#__PURE__*/React.createElement(StyledHeadingIcon, {
46
47
  type: "chevron_left"
@@ -57,7 +58,8 @@ export const Heading = ({
57
58
  };
58
59
  const getPills = () => {
59
60
  return /*#__PURE__*/React.createElement(StyledHeadingPills, {
60
- "data-element": "pills"
61
+ "data-element": "pills",
62
+ "data-role": "heading-pills-container"
61
63
  }, pills);
62
64
  };
63
65
  const marginProps = filterStyledSystemMarginProps(rest);
@@ -78,7 +80,8 @@ export const Heading = ({
78
80
  }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/React.createElement(StyledSeparator, {
79
81
  "data-role": "heading-separator"
80
82
  }), subheader && getSubheader()), divider && /*#__PURE__*/React.createElement(StyledDivider, {
81
- "data-element": "divider"
83
+ "data-element": "divider",
84
+ "data-role": "heading-divider"
82
85
  }), children) : null;
83
86
  };
84
87
  export default Heading;
package/esm/components/numeral-date/numeral-date.component.js CHANGED
@@ -149,7 +149,7 @@ export const NumeralDate = ({
149
149
  }
150
150
  });
151
151
  const onKeyDown = event => {
152
- const isValidKey = Events.isNumberKey(event) || Events.isTabKey(event) || event.key === "Delete" || event.key === "Backspace";
152
+ const isValidKey = Events.isNumberKey(event) || Events.isTabKey(event) || Events.isEnterKey(event) || event.key === "Delete" || event.key === "Backspace";
153
153
  if (!isValidKey) {
154
154
  event.preventDefault();
155
155
  }
package/esm/components/preview/preview.component.js CHANGED
@@ -16,6 +16,7 @@ export const Preview = ({
16
16
  const placeholders = [];
17
17
  for (let i = 1; i <= lines; i++) {
18
18
  placeholders.push( /*#__PURE__*/React.createElement(PreviewPlaceholder, _extends({
19
+ "data-role": "preview-placeholder",
19
20
  key: i,
20
21
  index: i,
21
22
  lines: lines
package/esm/components/radio-button/radio-button-group/radio-button-group.component.js CHANGED
@@ -76,6 +76,7 @@ export const RadioButtonGroup = props => {
76
76
  error: error,
77
77
  warning: warning
78
78
  }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
79
+ "data-role": "radio-error-border",
79
80
  inline: inline,
80
81
  warning: !!(!error && warning)
81
82
  }), /*#__PURE__*/React.createElement(RadioButtonGroupStyle, {
package/esm/components/radio-button/radio-button-svg.component.js CHANGED
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
3
3
  import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
4
4
  const RadioButtonSvg = () => {
5
5
  return /*#__PURE__*/React.createElement(StyledCheckableInputSvgWrapper, null, /*#__PURE__*/React.createElement("svg", {
6
+ "data-role": "radio-svg",
6
7
  focusable: "false",
7
8
  viewBox: "0 0 15 15"
8
9
  }, /*#__PURE__*/React.createElement("g", {
package/esm/components/select/__internal__/utils/highlight-part-of-text.js CHANGED
@@ -8,9 +8,9 @@ function highlightPartOfText(text, partToHighlight) {
8
8
  if (indexOfFirstMatch === -1) {
9
9
  return text;
10
10
  }
11
- const precedingText = text.substr(0, indexOfFirstMatch);
12
- const matchingText = text.substr(indexOfFirstMatch, partToHighlight.length);
13
- const followingText = text.substr(indexOfFirstMatch + partToHighlight.length, text.length);
11
+ const precedingText = text.slice(0, indexOfFirstMatch);
12
+ const matchingText = text.slice(indexOfFirstMatch, indexOfFirstMatch + partToHighlight.length);
13
+ const followingText = text.slice(indexOfFirstMatch + partToHighlight.length, text.length);
14
14
  let followingTextNode = followingText;
15
15
  if (followingText.length >= partToHighlight.length) {
16
16
  followingTextNode = highlightPartOfText(followingText, partToHighlight);
@@ -18,7 +18,8 @@ function highlightPartOfText(text, partToHighlight) {
18
18
  const newValue = [/*#__PURE__*/React.createElement("span", {
19
19
  key: "preceding"
20
20
  }, precedingText), /*#__PURE__*/React.createElement(MatchingText, {
21
- key: "match"
21
+ key: "match",
22
+ "data-role": "matching-text"
22
23
  }, matchingText), /*#__PURE__*/React.createElement("span", {
23
24
  key: "following"
24
25
  }, followingTextNode)];
package/lib/__internal__/fieldset/fieldset.component.js CHANGED
@@ -60,7 +60,8 @@ const Fieldset = ({
60
60
  align: legendAlign,
61
61
  rightPadding: legendSpacing
62
62
  }, legendMargin, {
63
- "data-element": "legend"
63
+ "data-element": "legend",
64
+ "data-role": "legend"
64
65
  }), /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegendContent, {
65
66
  isRequired: isRequired,
66
67
  isOptional: isOptional,
package/lib/components/button-toggle/button-toggle.style.js CHANGED
@@ -32,9 +32,9 @@ const heightLargeIconConfig = {
32
32
  large: 120
33
33
  };
34
34
  const paddingLargeIconConfig = {
35
- small: 24,
36
- medium: 40,
37
- large: 48
35
+ small: "var(--spacing100)",
36
+ medium: "var(--spacing100) var(--spacing150) var(--spacing000)",
37
+ large: "var(--spacing100) var(--spacing300)"
38
38
  };
39
39
  const StyledButtonToggleContentWrapper = exports.StyledButtonToggleContentWrapper = _styledComponents.default.div`
40
40
  display: flex;
@@ -58,18 +58,20 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
58
58
  font-weight: 700;
59
59
  background-color: transparent;
60
60
  cursor: pointer;
61
- text-align: start;
61
+ text-align: center;
62
62
  color: var(--colorsActionMinor500);
63
63
  border: none;
64
64
 
65
65
  ${_icon.default} {
66
66
  color: var(--colorsActionMinor500);
67
+ height: var(--sizing250);
68
+ width: var(--sizing250);
67
69
  }
68
70
 
69
71
  ${({
70
72
  size
71
73
  }) => (0, _styledComponents.css)`
72
- height: ${heightConfig[size]}px;
74
+ min-height: ${heightConfig[size]}px;
73
75
  padding: 0 ${paddingConfig[size]}px;
74
76
  font-size: ${fontSizeConfig[size]}px;
75
77
  `}
@@ -79,8 +81,8 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
79
81
  buttonIconSize,
80
82
  size
81
83
  }) => buttonIcon && buttonIconSize === "large" && (0, _styledComponents.css)`
82
- height: ${heightLargeIconConfig[size]}px;
83
- padding: 0 ${paddingLargeIconConfig[size]}px;
84
+ min-height: ${heightLargeIconConfig[size]}px;
85
+ padding: ${paddingLargeIconConfig[size]};
84
86
  flex-direction: column;
85
87
  `}
86
88
 
@@ -132,10 +134,6 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
132
134
  }
133
135
  `}
134
136
  `;
135
- const iconFontSizes = {
136
- smallIcon: 20,
137
- largeIcon: 32
138
- };
139
137
  const StyledButtonToggleIcon = exports.StyledButtonToggleIcon = _styledComponents.default.div`
140
138
  ${({
141
139
  hasContent
@@ -144,17 +142,20 @@ const StyledButtonToggleIcon = exports.StyledButtonToggleIcon = _styledComponent
144
142
  buttonIconSize
145
143
  }) => buttonIconSize === "large" && (0, _styledComponents.css)`
146
144
  margin-right: 0;
145
+
147
146
  ${_icon.default} {
148
147
  margin-left: 0;
149
148
  margin-right: 0;
150
149
  margin-bottom: 8px;
151
- height: ${`${iconFontSizes.largeIcon}px`};
152
- width: ${`${iconFontSizes.largeIcon}px`};
150
+ height: var(--sizing400);
151
+ width: var(--sizing400);
153
152
  }
153
+
154
154
  ${_icon.default}::before {
155
- font-size: ${`${iconFontSizes[`${buttonIconSize}Icon`]}px`};
156
- line-height: ${`${iconFontSizes[`${buttonIconSize}Icon`]}px`};
155
+ font-size: var(--sizing400);
156
+ line-height: var(--sizing400);
157
157
  }
158
+
158
159
  .carbon-icon__svg--credit-card-slash {
159
160
  margin-left: 6px;
160
161
  }
package/lib/components/heading/heading.component.js CHANGED
@@ -48,6 +48,7 @@ const Heading = ({
48
48
  , _extends({
49
49
  "aria-label": l.heading.backLinkAriaLabel(),
50
50
  "data-element": "back",
51
+ "data-role": "heading-back-button",
51
52
  onMouseDown: e => e.currentTarget.focus()
52
53
  }, backButtonProps), /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingIcon, {
53
54
  type: "chevron_left"
@@ -64,7 +65,8 @@ const Heading = ({
64
65
  };
65
66
  const getPills = () => {
66
67
  return /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingPills, {
67
- "data-element": "pills"
68
+ "data-element": "pills",
69
+ "data-role": "heading-pills-container"
68
70
  }, pills);
69
71
  };
70
72
  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
@@ -85,7 +87,8 @@ const Heading = ({
85
87
  }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/_react.default.createElement(_heading.StyledSeparator, {
86
88
  "data-role": "heading-separator"
87
89
  }), subheader && getSubheader()), divider && /*#__PURE__*/_react.default.createElement(_heading.StyledDivider, {
88
- "data-element": "divider"
90
+ "data-element": "divider",
91
+ "data-role": "heading-divider"
89
92
  }), children) : null;
90
93
  };
91
94
  exports.Heading = Heading;
package/lib/components/numeral-date/numeral-date.component.js CHANGED
@@ -158,7 +158,7 @@ const NumeralDate = ({
158
158
  }
159
159
  });
160
160
  const onKeyDown = event => {
161
- const isValidKey = _events.default.isNumberKey(event) || _events.default.isTabKey(event) || event.key === "Delete" || event.key === "Backspace";
161
+ const isValidKey = _events.default.isNumberKey(event) || _events.default.isTabKey(event) || _events.default.isEnterKey(event) || event.key === "Delete" || event.key === "Backspace";
162
162
  if (!isValidKey) {
163
163
  event.preventDefault();
164
164
  }
package/lib/components/preview/preview.component.js CHANGED
@@ -23,6 +23,7 @@ const Preview = ({
23
23
  const placeholders = [];
24
24
  for (let i = 1; i <= lines; i++) {
25
25
  placeholders.push( /*#__PURE__*/_react.default.createElement(_previewPlaceholder.default, _extends({
26
+ "data-role": "preview-placeholder",
26
27
  key: i,
27
28
  index: i,
28
29
  lines: lines
package/lib/components/radio-button/radio-button-group/radio-button-group.component.js CHANGED
@@ -85,6 +85,7 @@ const RadioButtonGroup = props => {
85
85
  error: error,
86
86
  warning: warning
87
87
  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
88
+ "data-role": "radio-error-border",
88
89
  inline: inline,
89
90
  warning: !!(!error && warning)
90
91
  }), /*#__PURE__*/_react.default.createElement(_radioButtonGroup.default, {
package/lib/components/radio-button/radio-button-svg.component.js CHANGED
@@ -10,6 +10,7 @@ var _checkableInputSvgWrapper = _interopRequireDefault(require("../../__internal
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
11
  const RadioButtonSvg = () => {
12
12
  return /*#__PURE__*/_react.default.createElement(_checkableInputSvgWrapper.default, null, /*#__PURE__*/_react.default.createElement("svg", {
13
+ "data-role": "radio-svg",
13
14
  focusable: "false",
14
15
  viewBox: "0 0 15 15"
15
16
  }, /*#__PURE__*/_react.default.createElement("g", {
package/lib/components/select/__internal__/utils/highlight-part-of-text.js CHANGED
@@ -15,9 +15,9 @@ function highlightPartOfText(text, partToHighlight) {
15
15
  if (indexOfFirstMatch === -1) {
16
16
  return text;
17
17
  }
18
- const precedingText = text.substr(0, indexOfFirstMatch);
19
- const matchingText = text.substr(indexOfFirstMatch, partToHighlight.length);
20
- const followingText = text.substr(indexOfFirstMatch + partToHighlight.length, text.length);
18
+ const precedingText = text.slice(0, indexOfFirstMatch);
19
+ const matchingText = text.slice(indexOfFirstMatch, indexOfFirstMatch + partToHighlight.length);
20
+ const followingText = text.slice(indexOfFirstMatch + partToHighlight.length, text.length);
21
21
  let followingTextNode = followingText;
22
22
  if (followingText.length >= partToHighlight.length) {
23
23
  followingTextNode = highlightPartOfText(followingText, partToHighlight);
@@ -25,7 +25,8 @@ function highlightPartOfText(text, partToHighlight) {
25
25
  const newValue = [/*#__PURE__*/_react.default.createElement("span", {
26
26
  key: "preceding"
27
27
  }, precedingText), /*#__PURE__*/_react.default.createElement(_matchingText.default, {
28
- key: "match"
28
+ key: "match",
29
+ "data-role": "matching-text"
29
30
  }, matchingText), /*#__PURE__*/_react.default.createElement("span", {
30
31
  key: "following"
31
32
  }, followingTextNode)];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "141.0.5",
3
+ "version": "141.0.7",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",