carbon-react 141.0.6 → 141.0.8

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/__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/popover-container/popover-container.component.js +6 -5
  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/lib/__internal__/fieldset/fieldset.component.js +2 -1
  9. package/lib/components/button-toggle/button-toggle.style.js +16 -15
  10. package/lib/components/heading/heading.component.js +5 -2
  11. package/lib/components/popover-container/popover-container.component.js +5 -4
  12. package/lib/components/preview/preview.component.js +1 -0
  13. package/lib/components/radio-button/radio-button-group/radio-button-group.component.js +1 -0
  14. package/lib/components/radio-button/radio-button-svg.component.js +1 -0
  15. 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/popover-container/popover-container.component.js CHANGED
@@ -1,5 +1,5 @@
1
1
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
- import React, { useCallback, useEffect, useRef, useState } from "react";
2
+ import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
3
3
  import PropTypes from "prop-types";
4
4
  import { Transition } from "react-transition-group";
5
5
  import { flip, offset } from "@floating-ui/dom";
@@ -56,14 +56,14 @@ export const renderClose = ({
56
56
  })), /*#__PURE__*/React.createElement(Icon, {
57
57
  type: "close"
58
58
  }));
59
- function getPopoverMiddleware(shouldCoverButton) {
60
- return [offset(shouldCoverButton ? ({
59
+ function usePopoverMiddleware(shouldCoverButton) {
60
+ return useMemo(() => [offset(shouldCoverButton ? ({
61
61
  rects
62
62
  }) => ({
63
63
  mainAxis: -rects.reference.height
64
64
  }) : 6), flip({
65
65
  fallbackStrategy: "initialPlacement"
66
- })];
66
+ })], [shouldCoverButton]);
67
67
  }
68
68
  export const PopoverContainer = ({
69
69
  children,
@@ -93,6 +93,7 @@ export const PopoverContainer = ({
93
93
  const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
94
94
  const isOpen = isControlled ? open : isOpenInternal;
95
95
  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
96
+ const popoverMiddleware = usePopoverMiddleware(shouldCoverButton);
96
97
  const closePopover = useCallback(ev => {
97
98
  if (!isControlled) {
98
99
  setIsOpenInternal(false);
@@ -198,7 +199,7 @@ export const PopoverContainer = ({
198
199
  reference: popoverReference,
199
200
  placement: position === "right" ? "bottom-start" : "bottom-end",
200
201
  popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
201
- middleware: getPopoverMiddleware(shouldCoverButton),
202
+ middleware: popoverMiddleware,
202
203
  childRefOverride: popoverContentNodeRef
203
204
  }, childrenToRender(state))));
204
205
  };
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/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/popover-container/popover-container.component.js CHANGED
@@ -67,14 +67,14 @@ const renderClose = ({
67
67
  type: "close"
68
68
  }));
69
69
  exports.renderClose = renderClose;
70
- function getPopoverMiddleware(shouldCoverButton) {
71
- return [(0, _dom.offset)(shouldCoverButton ? ({
70
+ function usePopoverMiddleware(shouldCoverButton) {
71
+ return (0, _react.useMemo)(() => [(0, _dom.offset)(shouldCoverButton ? ({
72
72
  rects
73
73
  }) => ({
74
74
  mainAxis: -rects.reference.height
75
75
  }) : 6), (0, _dom.flip)({
76
76
  fallbackStrategy: "initialPlacement"
77
- })];
77
+ })], [shouldCoverButton]);
78
78
  }
79
79
  const PopoverContainer = ({
80
80
  children,
@@ -104,6 +104,7 @@ const PopoverContainer = ({
104
104
  const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
105
105
  const isOpen = isControlled ? open : isOpenInternal;
106
106
  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
107
+ const popoverMiddleware = usePopoverMiddleware(shouldCoverButton);
107
108
  const closePopover = (0, _react.useCallback)(ev => {
108
109
  if (!isControlled) {
109
110
  setIsOpenInternal(false);
@@ -209,7 +210,7 @@ const PopoverContainer = ({
209
210
  reference: popoverReference,
210
211
  placement: position === "right" ? "bottom-start" : "bottom-end",
211
212
  popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
212
- middleware: getPopoverMiddleware(shouldCoverButton),
213
+ middleware: popoverMiddleware,
213
214
  childRefOverride: popoverContentNodeRef
214
215
  }, childrenToRender(state))));
215
216
  };
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "141.0.6",
3
+ "version": "141.0.8",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",