carbon-react 137.0.0 → 138.0.0

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.d.ts

@@ -1,17 +1,9 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface CustomEvent {
-    target: {
-        name?: string;
-        value?: string;
-    };
-}
 export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     /** Unique id for the root element of the component */
     id: string;
-    /** Specifies the name prop to be applied to each button in the group */
-    name?: string;
     /** Toggle buttons to be rendered. Only accepts children of type ButtonToggle */
     children?: React.ReactNode;
     /** aria-label for the group wrapper. Required for accessibility when no text label is provided */
@@ -37,7 +29,7 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
     fullWidth?: boolean;
     /** Callback triggered by pressing one of the child buttons. Use with controlled components to set the value prop to the value argument */
-    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
+    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
     /** Determines which child button is selected when the component is used as a controlled component */
     value?: string;
     /** [Legacy] Aria label for rendered help component */
@@ -56,8 +48,7 @@ declare type ButtonToggleGroupContextType = {
     onButtonClick: (value: string) => void;
     handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
     pressedButtonValue?: string;
-    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
-    name?: string;
+    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
     allowDeselect?: boolean;
     isInGroup: boolean;
     isDisabled?: boolean;
@@ -68,7 +59,7 @@ declare type ButtonToggleGroupContextType = {
 };
 export declare const ButtonToggleGroupContext: React.Context<ButtonToggleGroupContextType>;
 declare const ButtonToggleGroup: {
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, disabled, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, disabled, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -4,15 +4,13 @@ import PropTypes from "prop-types";
 import invariant from "invariant";
 import FormField from "../../../__internal__/form-field";
 import guid from "../../../__internal__/utils/helpers/guid";
-import StyledButtonToggleGroup, { StyledButtonToggleGroupWrapper, StyledHintText } from "./button-toggle-group.style";
+import StyledButtonToggleGroup, { StyledHintText } from "./button-toggle-group.style";
 import { ButtonToggle } from "..";
 import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
 import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
-import Logger from "../../../__internal__/utils/logger";
 import Events from "../../../__internal__/utils/helpers/events";
 import { NewValidationContext } from "../../carbon-provider/carbon-provider.component";
-let deprecateNameWarnTriggered = false;
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
 export const ButtonToggleGroupContext = /*#__PURE__*/createContext({
   onButtonClick: /* istanbul ignore next */() => {},
@@ -35,7 +33,6 @@ const ButtonToggleGroup = ({
   fullWidth,
   labelInline,
   labelWidth,
-  name,
   onChange,
   value,
   "data-component": dataComponent = "button-toggle-group",
@@ -59,11 +56,6 @@ const ButtonToggleGroup = ({
   const hintTextId = useRef(guid());
   const wrapperRef = useRef(null);
   const [pressedButtonValue, setPressedButtonValue] = useState();
-  if (name && !deprecateNameWarnTriggered) {
-    deprecateNameWarnTriggered = true;
-    Logger.deprecate(`The \`name\` prop in \`ButtonToggleGroup\` component is deprecated and will soon be removed. It does not provide any functionality
-      since the component can no longer be used in an uncontrolled fashion.`);
-  }
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
@@ -140,7 +132,6 @@ const ButtonToggleGroup = ({
       handleKeyDown,
       pressedButtonValue: value || pressedButtonValue,
       onChange,
-      name,
       allowDeselect,
       isInGroup: true,
       isDisabled: disabled,
@@ -151,14 +142,14 @@ const ButtonToggleGroup = ({
   }, inputHint && /*#__PURE__*/React.createElement(StyledHintText, {
     id: hintTextId.current,
     isDisabled: disabled
-  }, inputHint), /*#__PURE__*/React.createElement(StyledButtonToggleGroupWrapper, {
-    labelInline: labelInline,
+  }, inputHint), /*#__PURE__*/React.createElement(StyledButtonToggleGroup, _extends({
     ref: wrapperRef
-  }, /*#__PURE__*/React.createElement(StyledButtonToggleGroup, _extends({}, label ? {
+  }, label ? {
     "aria-labelledby": labelId.current
   } : {
     "aria-label": ariaLabel
   }, {
+    labelInline: labelInline,
     inputWidth: inputWidth,
     fullWidth: fullWidth,
     role: "group",
@@ -168,7 +159,7 @@ const ButtonToggleGroup = ({
     id: id,
     className: className,
     disabled: disabled
-  }), children))))));
+  }), children)))));
 };
 ButtonToggleGroup.displayName = "ButtonToggleGroup";
 export default ButtonToggleGroup;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.d.ts

@@ -1,8 +1,6 @@
 import { ButtonToggleGroupProps } from ".";
-declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled">;
-declare type StyledButtonToggleGroupWrapperProps = Pick<ButtonToggleGroupProps, "labelInline">;
+declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled" | "labelInline">;
 declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupProps, never>;
-export declare const StyledButtonToggleGroupWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupWrapperProps, never>;
 export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {
     isDisabled?: boolean | undefined;
 }, never>;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.js

@@ -12,7 +12,9 @@ const StyledButtonToggleGroup = styled.div`
   gap: 4px;
   width: fit-content;
   height: fit-content;
-  flex-wrap: wrap;
+  flex-wrap: ${({
+  labelInline
+}) => labelInline ? "nowrap" : "wrap"};
 
   ${({
   disabled
@@ -39,16 +41,6 @@ const StyledButtonToggleGroup = styled.div`
       width: ${`${inputWidth}%`};
     `}
 `;
-export const StyledButtonToggleGroupWrapper = styled.div`
-  ${({
-  labelInline
-}) => labelInline && css`
-      display: flex;
-      ${StyledButtonToggleGroup} {
-        flex-wrap: nowrap;
-      }
-    `}
-`;
 export const StyledHintText = styled.div`
   ::after {
     content: " ";

package/esm/components/button-toggle/button-toggle-icon.component.js

@@ -9,7 +9,8 @@ const ButtonToggleIcon = ({
   hasContent
 }) => /*#__PURE__*/React.createElement(StyledButtonToggleIcon, {
   buttonIconSize: buttonIconSize,
-  hasContent: hasContent
+  hasContent: hasContent,
+  "data-role": "button-toggle-icon"
 }, /*#__PURE__*/React.createElement(Icon, {
   "aria-hidden": true,
   type: buttonIcon,

package/esm/components/button-toggle/button-toggle.component.d.ts

@@ -5,8 +5,6 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     "aria-label"?: string;
     /** Prop to specify the aria-labelledby property of the component */
     "aria-labelledby"?: string;
-    /** DEPRECATED: A synonym for pressed, to keep backwards compatibility. */
-    checked?: boolean;
     /** Text to display for the button. */
     children?: React.ReactNode;
     /** Identifier used for testing purposes, applied to the root element of the component. */
@@ -17,8 +15,6 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     "data-role"?: string;
     /** DEPRECATED: Remove spacing from between buttons. */
     grouped?: boolean;
-    /** An optional string by which to identify the button in an onChange handler on the parent ButtonToggleGroup. */
-    name?: string;
     /** Callback triggered by blur event on the button. */
     onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
     /** Callback triggered by focus event on the button. */
@@ -31,7 +27,7 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     value?: string;
 }
 export declare const ButtonToggle: {
-    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, checked, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, name, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;
+    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggle;

package/esm/components/button-toggle/button-toggle.component.js

@@ -8,8 +8,6 @@ import { ButtonToggleGroupContext } from "./button-toggle-group/button-toggle-gr
 import ButtonToggleIcon from "./button-toggle-icon.component";
 import Logger from "../../__internal__/utils/logger";
 import { InputGroupContext } from "../../__internal__/input-behaviour";
-let deprecateCheckedWarnTriggered = false;
-let deprecateNameWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 let deprecateGroupedWarnTriggered = false;
 export const ButtonToggle = ({
@@ -17,14 +15,12 @@ export const ButtonToggle = ({
   "aria-labelledby": ariaLabelledBy,
   buttonIcon,
   buttonIconSize = "small",
-  checked,
   children,
   "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
   disabled,
   grouped,
-  name,
   onBlur,
   onFocus,
   onClick,
@@ -33,20 +29,10 @@ export const ButtonToggle = ({
   value
 }) => {
   !!!(children || buttonIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `buttonIcon` must be defined, or this node must have children") : invariant(false) : void 0;
-  if (checked !== undefined && !deprecateCheckedWarnTriggered) {
-    deprecateCheckedWarnTriggered = true;
-    Logger.deprecate("The `checked` prop in `ButtonToggle` component is deprecated and will soon be removed. Please use `pressed` instead.");
-  }
-  if (name && !deprecateNameWarnTriggered) {
-    deprecateNameWarnTriggered = true;
-    Logger.deprecate(`The \`name\` prop in \`ButtonToggle\` component is deprecated and will soon be removed. It does not provide any functionality
-      since the component can no longer be used in an uncontrolled fashion.`);
-  }
   if (grouped && !deprecateGroupedWarnTriggered) {
     deprecateGroupedWarnTriggered = true;
     Logger.deprecate("The `grouped` prop in `ButtonToggle` component is deprecated and will soon be removed. Spacing between buttons is no longer no removed.");
   }
-  const pressedPropValue = pressed === undefined ? checked : pressed;
   const buttonRef = useRef(null);
   const {
     onMouseEnter,
@@ -59,7 +45,6 @@ export const ButtonToggle = ({
     handleKeyDown,
     pressedButtonValue,
     onChange,
-    name: groupName,
     allowDeselect,
     isInGroup,
     isDisabled,
@@ -83,7 +68,7 @@ export const ButtonToggle = ({
       if (allowDeselect && pressedButtonValue === value) {
         newValue = undefined;
       }
-      onChange(ev, newValue, groupName || name);
+      onChange(ev, newValue);
     }
     if (value) {
       onButtonClick(value);
@@ -109,7 +94,7 @@ export const ButtonToggle = ({
       inputGroupOnBlur();
     }
   }
-  const isPressed = isInGroup ? pressedButtonValue === value : pressedPropValue;
+  const isPressed = isInGroup ? pressedButtonValue === value : pressed;
   const isFirstButton = buttonRef.current === firstButton;
 
   // if we're in a ButtonToggleGroup, only one button should be tabbable - the pressed button if there is one, or

package/esm/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -55,6 +55,7 @@ export const CheckboxGroup = props => {
     inline: inline
   }), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
     "data-component": "checkbox-group",
+    "data-role": "checkbox-group",
     legendInline: legendInline,
     inline: inline
   }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
@@ -81,6 +82,7 @@ export const CheckboxGroup = props => {
     blockGroupBehaviour: !(error || warning || info)
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
     "data-component": "checkbox-group",
+    "data-role": "checkbox-group",
     legendInline: legendInline
   }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: {

package/esm/components/checkbox/checkbox-svg.component.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
 const CheckboxSvg = () => /*#__PURE__*/React.createElement(StyledCheckableInputSvgWrapper, null, /*#__PURE__*/React.createElement("svg", {
+  "data-role": "checkable-svg",
   focusable: "false",
   width: "12",
   height: "10",

package/esm/components/checkbox/checkbox.style.js

@@ -111,7 +111,6 @@ const StyledCheckbox = styled.div`
 
       ${StyledFieldHelp} {
         margin-left: 24px;
-        padding-left: ${labelSpacing === 1 ? "var(--spacing100)" : "var(--spacing200)"};
       }
 
       ${fieldHelpInline && css`

package/lib/components/button-toggle/button-toggle-group/button-toggle-group.component.d.ts

@@ -1,17 +1,9 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface CustomEvent {
-    target: {
-        name?: string;
-        value?: string;
-    };
-}
 export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     /** Unique id for the root element of the component */
     id: string;
-    /** Specifies the name prop to be applied to each button in the group */
-    name?: string;
     /** Toggle buttons to be rendered. Only accepts children of type ButtonToggle */
     children?: React.ReactNode;
     /** aria-label for the group wrapper. Required for accessibility when no text label is provided */
@@ -37,7 +29,7 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
     fullWidth?: boolean;
     /** Callback triggered by pressing one of the child buttons. Use with controlled components to set the value prop to the value argument */
-    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
+    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
     /** Determines which child button is selected when the component is used as a controlled component */
     value?: string;
     /** [Legacy] Aria label for rendered help component */
@@ -56,8 +48,7 @@ declare type ButtonToggleGroupContextType = {
     onButtonClick: (value: string) => void;
     handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
     pressedButtonValue?: string;
-    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
-    name?: string;
+    onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
     allowDeselect?: boolean;
     isInGroup: boolean;
     isDisabled?: boolean;
@@ -68,7 +59,7 @@ declare type ButtonToggleGroupContextType = {
 };
 export declare const ButtonToggleGroupContext: React.Context<ButtonToggleGroupContextType>;
 declare const ButtonToggleGroup: {
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, disabled, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, disabled, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

package/lib/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -14,14 +14,12 @@ var _ = require("..");
 var _utils = require("../../../style/utils");
 var _tooltipProvider = require("../../../__internal__/tooltip-provider");
 var _inputBehaviour = require("../../../__internal__/input-behaviour");
-var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _carbonProvider = require("../../carbon-provider/carbon-provider.component");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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); }
-let deprecateNameWarnTriggered = false;
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
 const ButtonToggleGroupContext = exports.ButtonToggleGroupContext = /*#__PURE__*/(0, _react.createContext)({
   onButtonClick: /* istanbul ignore next */() => {},
@@ -44,7 +42,6 @@ const ButtonToggleGroup = ({
   fullWidth,
   labelInline,
   labelWidth,
-  name,
   onChange,
   value,
   "data-component": dataComponent = "button-toggle-group",
@@ -68,11 +65,6 @@ const ButtonToggleGroup = ({
   const hintTextId = (0, _react.useRef)((0, _guid.default)());
   const wrapperRef = (0, _react.useRef)(null);
   const [pressedButtonValue, setPressedButtonValue] = (0, _react.useState)();
-  if (name && !deprecateNameWarnTriggered) {
-    deprecateNameWarnTriggered = true;
-    _logger.default.deprecate(`The \`name\` prop in \`ButtonToggleGroup\` component is deprecated and will soon be removed. It does not provide any functionality
-      since the component can no longer be used in an uncontrolled fashion.`);
-  }
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
@@ -149,7 +141,6 @@ const ButtonToggleGroup = ({
       handleKeyDown,
       pressedButtonValue: value || pressedButtonValue,
       onChange,
-      name,
       allowDeselect,
       isInGroup: true,
       isDisabled: disabled,
@@ -160,14 +151,14 @@ const ButtonToggleGroup = ({
   }, inputHint && /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.StyledHintText, {
     id: hintTextId.current,
     isDisabled: disabled
-  }, inputHint), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.StyledButtonToggleGroupWrapper, {
-    labelInline: labelInline,
+  }, inputHint), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.default, _extends({
     ref: wrapperRef
-  }, /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.default, _extends({}, label ? {
+  }, label ? {
     "aria-labelledby": labelId.current
   } : {
     "aria-label": ariaLabel
   }, {
+    labelInline: labelInline,
     inputWidth: inputWidth,
     fullWidth: fullWidth,
     role: "group",
@@ -177,7 +168,7 @@ const ButtonToggleGroup = ({
     id: id,
     className: className,
     disabled: disabled
-  }), children))))));
+  }), children)))));
 };
 ButtonToggleGroup.displayName = "ButtonToggleGroup";
 var _default = exports.default = ButtonToggleGroup;

package/lib/components/button-toggle/button-toggle-group/button-toggle-group.style.d.ts

@@ -1,8 +1,6 @@
 import { ButtonToggleGroupProps } from ".";
-declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled">;
-declare type StyledButtonToggleGroupWrapperProps = Pick<ButtonToggleGroupProps, "labelInline">;
+declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled" | "labelInline">;
 declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupProps, never>;
-export declare const StyledButtonToggleGroupWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupWrapperProps, never>;
 export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {
     isDisabled?: boolean | undefined;
 }, never>;

package/lib/components/button-toggle/button-toggle-group/button-toggle-group.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledHintText = exports.StyledButtonToggleGroupWrapper = void 0;
+exports.default = exports.StyledHintText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _themes = require("../../../style/themes");
@@ -20,7 +20,9 @@ const StyledButtonToggleGroup = _styledComponents.default.div`
   gap: 4px;
   width: fit-content;
   height: fit-content;
-  flex-wrap: wrap;
+  flex-wrap: ${({
+  labelInline
+}) => labelInline ? "nowrap" : "wrap"};
 
   ${({
   disabled
@@ -47,16 +49,6 @@ const StyledButtonToggleGroup = _styledComponents.default.div`
       width: ${`${inputWidth}%`};
     `}
 `;
-const StyledButtonToggleGroupWrapper = exports.StyledButtonToggleGroupWrapper = _styledComponents.default.div`
-  ${({
-  labelInline
-}) => labelInline && (0, _styledComponents.css)`
-      display: flex;
-      ${StyledButtonToggleGroup} {
-        flex-wrap: nowrap;
-      }
-    `}
-`;
 const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
   ::after {
     content: " ";

package/lib/components/button-toggle/button-toggle-icon.component.js

@@ -16,7 +16,8 @@ const ButtonToggleIcon = ({
   hasContent
 }) => /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggleIcon, {
   buttonIconSize: buttonIconSize,
-  hasContent: hasContent
+  hasContent: hasContent,
+  "data-role": "button-toggle-icon"
 }, /*#__PURE__*/_react.default.createElement(_icon.default, {
   "aria-hidden": true,
   type: buttonIcon,

package/lib/components/button-toggle/button-toggle.component.d.ts

@@ -5,8 +5,6 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     "aria-label"?: string;
     /** Prop to specify the aria-labelledby property of the component */
     "aria-labelledby"?: string;
-    /** DEPRECATED: A synonym for pressed, to keep backwards compatibility. */
-    checked?: boolean;
     /** Text to display for the button. */
     children?: React.ReactNode;
     /** Identifier used for testing purposes, applied to the root element of the component. */
@@ -17,8 +15,6 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     "data-role"?: string;
     /** DEPRECATED: Remove spacing from between buttons. */
     grouped?: boolean;
-    /** An optional string by which to identify the button in an onChange handler on the parent ButtonToggleGroup. */
-    name?: string;
     /** Callback triggered by blur event on the button. */
     onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
     /** Callback triggered by focus event on the button. */
@@ -31,7 +27,7 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     value?: string;
 }
 export declare const ButtonToggle: {
-    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, checked, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, name, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;
+    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggle;

package/lib/components/button-toggle/button-toggle.component.js

@@ -17,8 +17,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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); }
-let deprecateCheckedWarnTriggered = false;
-let deprecateNameWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 let deprecateGroupedWarnTriggered = false;
 const ButtonToggle = ({
@@ -26,14 +24,12 @@ const ButtonToggle = ({
   "aria-labelledby": ariaLabelledBy,
   buttonIcon,
   buttonIconSize = "small",
-  checked,
   children,
   "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
   disabled,
   grouped,
-  name,
   onBlur,
   onFocus,
   onClick,
@@ -42,20 +38,10 @@ const ButtonToggle = ({
   value
 }) => {
   !!!(children || buttonIcon) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Either prop `buttonIcon` must be defined, or this node must have children") : (0, _invariant.default)(false) : void 0;
-  if (checked !== undefined && !deprecateCheckedWarnTriggered) {
-    deprecateCheckedWarnTriggered = true;
-    _logger.default.deprecate("The `checked` prop in `ButtonToggle` component is deprecated and will soon be removed. Please use `pressed` instead.");
-  }
-  if (name && !deprecateNameWarnTriggered) {
-    deprecateNameWarnTriggered = true;
-    _logger.default.deprecate(`The \`name\` prop in \`ButtonToggle\` component is deprecated and will soon be removed. It does not provide any functionality
-      since the component can no longer be used in an uncontrolled fashion.`);
-  }
   if (grouped && !deprecateGroupedWarnTriggered) {
     deprecateGroupedWarnTriggered = true;
     _logger.default.deprecate("The `grouped` prop in `ButtonToggle` component is deprecated and will soon be removed. Spacing between buttons is no longer no removed.");
   }
-  const pressedPropValue = pressed === undefined ? checked : pressed;
   const buttonRef = (0, _react.useRef)(null);
   const {
     onMouseEnter,
@@ -68,7 +54,6 @@ const ButtonToggle = ({
     handleKeyDown,
     pressedButtonValue,
     onChange,
-    name: groupName,
     allowDeselect,
     isInGroup,
     isDisabled,
@@ -92,7 +77,7 @@ const ButtonToggle = ({
       if (allowDeselect && pressedButtonValue === value) {
         newValue = undefined;
       }
-      onChange(ev, newValue, groupName || name);
+      onChange(ev, newValue);
     }
     if (value) {
       onButtonClick(value);
@@ -118,7 +103,7 @@ const ButtonToggle = ({
       inputGroupOnBlur();
     }
   }
-  const isPressed = isInGroup ? pressedButtonValue === value : pressedPropValue;
+  const isPressed = isInGroup ? pressedButtonValue === value : pressed;
   const isFirstButton = buttonRef.current === firstButton;
 
   // if we're in a ButtonToggleGroup, only one button should be tabbable - the pressed button if there is one, or

package/lib/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -64,6 +64,7 @@ const CheckboxGroup = props => {
     inline: inline
   }), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
     "data-component": "checkbox-group",
+    "data-role": "checkbox-group",
     legendInline: legendInline,
     inline: inline
   }, /*#__PURE__*/_react.default.createElement(CheckboxGroupContext.Provider, {
@@ -90,6 +91,7 @@ const CheckboxGroup = props => {
     blockGroupBehaviour: !(error || warning || info)
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
     "data-component": "checkbox-group",
+    "data-role": "checkbox-group",
     legendInline: legendInline
   }, /*#__PURE__*/_react.default.createElement(CheckboxGroupContext.Provider, {
     value: {

package/lib/components/checkbox/checkbox-svg.component.js

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _checkableInputSvgWrapper = _interopRequireDefault(require("../../__internal__/checkable-input/checkable-input-svg-wrapper.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const CheckboxSvg = () => /*#__PURE__*/_react.default.createElement(_checkableInputSvgWrapper.default, null, /*#__PURE__*/_react.default.createElement("svg", {
+  "data-role": "checkable-svg",
   focusable: "false",
   width: "12",
   height: "10",

package/lib/components/checkbox/checkbox.style.js

@@ -120,7 +120,6 @@ const StyledCheckbox = _styledComponents.default.div`
 
       ${_fieldHelp.default} {
         margin-left: 24px;
-        padding-left: ${labelSpacing === 1 ? "var(--spacing100)" : "var(--spacing200)"};
       }
 
       ${fieldHelpInline && (0, _styledComponents.css)`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "137.0.0",
+  "version": "138.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",