carbon-react 146.6.1 → 147.0.1

package/esm/components/typography/typography.component.d.ts

@@ -46,8 +46,6 @@ export interface TypographyProps extends SpaceProps, TagProps {
     bg?: string;
     /** Override the opacity value */
     opacity?: string | number;
-    /** @private @ignore */
-    className?: string;
     /** Set whether it will be visually hidden
      * NOTE: This is for screen readers only and will make a lot of the other props redundant */
     screenReaderOnly?: boolean;
@@ -59,9 +57,15 @@ export interface TypographyProps extends SpaceProps, TagProps {
     isDisabled?: boolean;
     /** @private @ignore Set whether the component should be recognised by assistive technologies */
     "aria-hidden"?: "true" | "false";
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Sets className for component. INTERNAL USE ONLY. */
+    className?: string;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, className, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

package/esm/components/typography/typography.component.js

@@ -4,8 +4,6 @@ import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
 import StyledTypography from "./typography.style";
-import Logger from "../../__internal__/utils/logger";
-let deprecatedClassNameWarningShown = false;
 export const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export const Typography = ({
   "data-component": dataComponent,
@@ -30,16 +28,12 @@ export const Typography = ({
   bg,
   opacity,
   children,
-  className,
   screenReaderOnly,
   isDisabled,
   "aria-hidden": ariaHidden,
+  className,
   ...rest
 }) => {
-  if (!deprecatedClassNameWarningShown && className) {
-    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Typography' component.");
-    deprecatedClassNameWarningShown = true;
-  }
   return /*#__PURE__*/React.createElement(StyledTypography, _extends({
     variant: variant,
     as: as,
@@ -61,10 +55,10 @@ export const Typography = ({
     backgroundColor: backgroundColor,
     bg: bg,
     opacity: opacity,
-    className: className,
     screenReaderOnly: screenReaderOnly,
     isDisabled: isDisabled,
-    "aria-hidden": ariaHidden
+    "aria-hidden": ariaHidden,
+    className: className
   }, tagComponent(dataComponent, rest), filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest)), children);
 };
 Typography.displayName = "Typography";

package/lib/__internal__/label/label.component.d.ts

@@ -20,7 +20,10 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     useValidationIcon?: boolean;
     /** Id of the validation icon */
     validationIconId?: string;
-    /** Sets className for component */
+    /**
+     * @private
+     * @internal
+     * Sets className for component. INTERNAL USE ONLY. */
     className?: string;
     /** Sets aria-label for label element */
     "aria-label"?: string;

package/lib/components/accordion/accordion.component.d.ts

@@ -2,8 +2,6 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 import { StyledAccordionContainerProps } from "./accordion.style";
 export interface AccordionProps extends StyledAccordionContainerProps, SpaceProps {
-    /** Width of the buttonHeading when it's set, defaults to 150px */
-    buttonWidth?: number | string;
     /** Content of the Accordion component */
     children?: React.ReactNode;
     /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */

package/lib/components/accordion/accordion.component.js

@@ -9,15 +9,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _accordion = require("./accordion.style");
 var _validations = _interopRequireDefault(require("../../__internal__/validations"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-let deprecatedSchemeWarnTriggered = false;
-let deprecatedButtonHeadingWarnTriggered = false;
 const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
   borders = "default",
   defaultExpanded,
@@ -29,7 +26,6 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
   index,
   iconType,
   iconAlign,
-  scheme = "white",
   size = "large",
   subTitle,
   title,
@@ -39,20 +35,10 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
   error,
   warning,
   info,
-  buttonHeading,
-  buttonWidth = "150px",
   openTitle,
   variant = "standard",
   ...rest
 }, ref) => {
-  if (!deprecatedSchemeWarnTriggered && scheme === "transparent") {
-    deprecatedSchemeWarnTriggered = true;
-    _logger.default.deprecate("The `scheme` prop for `Accordion` component is deprecated and will soon be removed.");
-  }
-  if (!deprecatedButtonHeadingWarnTriggered && buttonHeading) {
-    deprecatedButtonHeadingWarnTriggered = true;
-    _logger.default.deprecate("The `buttonHeading` prop for `Accordion` component is deprecated and will soon be removed. Please use `subtle` variant instead.");
-  }
   const isControlled = expanded !== undefined;
   const [isExpandedInternal, setIsExpandedInternal] = (0, _react.useState)(defaultExpanded || false);
   const [contentHeight, setContentHeight] = (0, _react.useState)(isExpandedInternal ? "auto" : 0);
@@ -91,8 +77,6 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
     "data-role": "accordion-container",
     width: width,
     borders: variant === "subtle" ? "none" : borders,
-    scheme: scheme,
-    buttonHeading: buttonHeading,
     variant: variant
   }, rest), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitleContainer, _extends({
     "data-element": "accordion-title-container",
@@ -105,23 +89,17 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
     iconAlign: iconAlign || (variant === "standard" ? "right" : "left"),
     ref: ref,
     size: size,
-    buttonHeading: buttonHeading,
     isExpanded: isExpanded,
     variant: variant,
-    buttonWidth: buttonWidth,
-    hasButtonProps: buttonHeading && !(typeof headerSpacing === "undefined"),
     role: "button"
-  }, buttonHeading && {
-    p: 0
   }, headerSpacing), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionHeadingsContainer, {
     "data-element": "accordion-headings-container",
-    hasValidationIcon: showValidationIcon,
-    buttonHeading: buttonHeading
-  }, !buttonHeading && typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitle, {
+    hasValidationIcon: showValidationIcon
+  }, /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitle, {
     "data-element": "accordion-title",
     size: size,
     variant: variant
-  }, title) : getTitle(), !buttonHeading && variant !== "subtle" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showValidationIcon && /*#__PURE__*/_react.default.createElement(_validations.default, {
+  }, getTitle()), variant !== "subtle" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showValidationIcon && /*#__PURE__*/_react.default.createElement(_validations.default, {
     error: error,
     warning: warning,
     info: info,
@@ -151,8 +129,6 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
 if (process.env.NODE_ENV !== "production") {
   Accordion.propTypes = {
     "borders": _propTypes.default.oneOf(["default", "full", "none"]),
-    "buttonHeading": _propTypes.default.bool,
-    "buttonWidth": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     "children": _propTypes.default.node,
     "defaultExpanded": _propTypes.default.bool,
     "disableContentPadding": _propTypes.default.bool,
@@ -784,7 +760,6 @@ if (process.env.NODE_ENV !== "production") {
       "toString": _propTypes.default.func.isRequired,
       "valueOf": _propTypes.default.func.isRequired
     }), _propTypes.default.string]),
-    "scheme": _propTypes.default.oneOf(["transparent", "white"]),
     "size": _propTypes.default.oneOf(["large", "small"]),
     "subTitle": _propTypes.default.string,
     "title": _propTypes.default.node,

package/lib/components/accordion/accordion.style.d.ts

@@ -3,10 +3,6 @@ declare const StyledAccordionGroup: import("styled-components").StyledComponent<
 export interface StyledAccordionContainerProps {
     /** Toggles left and right borders, set to none when variant is subtle */
     borders?: "default" | "full" | "none";
-    /** (Deprecated) Renders the accordion heading in the style of a tertiary button */
-    buttonHeading?: boolean;
-    /** (Deprecated) Sets background as white or transparent, set to transparent when variant is subtle */
-    scheme?: "white" | "transparent";
     /** Sets accordion width */
     width?: string;
     /** Sets accordion variant */
@@ -25,13 +21,10 @@ interface StyledAccordionIconProps {
 }
 declare const StyledAccordionIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StyledAccordionIconProps, never>;
 interface StyledAccordionHeadingsContainerProps {
-    buttonHeading?: boolean;
     hasValidationIcon?: boolean;
 }
 declare const StyledAccordionHeadingsContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionHeadingsContainerProps, never>;
 interface StyledAccordionTitleContainerProps {
-    buttonHeading?: boolean;
-    buttonWidth?: number | string;
     hasButtonProps?: boolean;
     iconAlign?: "left" | "right";
     size?: "large" | "small";

package/lib/components/accordion/accordion.style.js

@@ -19,10 +19,11 @@ const StyledAccordionGroup = exports.StyledAccordionGroup = _styledComponents.de
 const StyledAccordionContainer = exports.StyledAccordionContainer = _styledComponents.default.div`
   ${_styledSystem.space}
   display: flex;
-  align-items: ${({
-  buttonHeading,
+  ${({
   variant
-}) => (!buttonHeading || variant !== "subtle") && "stretch"};
+}) => variant && (0, _styledComponents.css)`
+      align-items: stretch;
+    `};
   justify-content: center;
   flex-direction: column;
   box-sizing: border-box;
@@ -31,9 +32,8 @@ const StyledAccordionContainer = exports.StyledAccordionContainer = _styledCompo
 }) => width || "100%"};
   color: var(--colorsUtilityYin090);
   background-color: ${({
-  scheme,
   variant
-}) => scheme === "white" && variant !== "subtle" ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajorTransparent)"};
+}) => variant !== "subtle" ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajorTransparent)"};
   border: 1px solid var(--colorsUtilityMajor100);
   ${({
   borders
@@ -88,36 +88,32 @@ const StyledAccordionIcon = exports.StyledAccordionIcon = (0, _styledComponents.
 `;
 const StyledAccordionHeadingsContainer = exports.StyledAccordionHeadingsContainer = _styledComponents.default.div`
   ${({
-  buttonHeading,
   hasValidationIcon
-}) => !buttonHeading && (0, _styledComponents.css)`
-      display: grid;
-      ${hasValidationIcon && (0, _styledComponents.css)`
-        grid-template-columns: min-content auto;
+}) => (0, _styledComponents.css)`
+    display: grid;
+    ${hasValidationIcon && (0, _styledComponents.css)`
+      grid-template-columns: min-content auto;
 
-        ${StyledAccordionSubTitle} {
-          grid-column: span 3;
-        }
-      `}
+      ${StyledAccordionSubTitle} {
+        grid-column: span 3;
+      }
+    `}
 
-      ${!hasValidationIcon && (0, _styledComponents.css)`
-        grid-template-rows: auto auto;
-      `}
+    ${!hasValidationIcon && (0, _styledComponents.css)`
+      grid-template-rows: auto auto;
+    `}
 
     ${_validationIcon.default} {
-        height: 20px;
-        position: relative;
-        top: 2px;
-      }
-    `}
+      height: 20px;
+      position: relative;
+      top: 2px;
+    }
+  `}
 `;
 const StyledAccordionTitleContainer = exports.StyledAccordionTitleContainer = _styledComponents.default.div`
   ${({
-  buttonHeading,
-  buttonWidth,
   iconAlign,
   size,
-  hasButtonProps,
   isExpanded,
   variant
 }) => (0, _styledComponents.css)`
@@ -158,46 +154,11 @@ const StyledAccordionTitleContainer = exports.StyledAccordionTitleContainer = _s
       }
     `}
 
-    ${!buttonHeading && variant !== "subtle" && (0, _styledComponents.css)`
+    ${variant !== "subtle" && (0, _styledComponents.css)`
       &:hover {
         background-color: var(--colorsUtilityMajor050);
       }
     `}
-
-    ${buttonHeading && (0, _styledComponents.css)`
-      box-sizing: border-box;
-      font-weight: 500;
-      text-decoration: none;
-      font-size: var(--fontSizes100);
-      min-height: var(--spacing500);
-
-      color: var(--colorsActionMajor500);
-
-      ${!hasButtonProps && (0, _styledComponents.css)`
-        ${StyledAccordionHeadingsContainer} {
-          margin-left: ${iconAlign === "right" ? "var(--spacing300)" : "var(--spacing100)"};
-        }
-      `}
-
-      ${StyledAccordionIcon} {
-        color: var(--colorsActionMajor500);
-        ${!hasButtonProps && (0, _styledComponents.css)`
-          position: relative;
-          ${iconAlign}: 16px;
-        `}
-      }
-
-      &:hover {
-        color: var(--colorsActionMajor600);
-        ${StyledAccordionIcon} {
-          color: var(--colorsActionMajor600);
-        }
-      }
-
-      ${buttonWidth && (0, _styledComponents.css)`
-        width: ${typeof buttonWidth === "number" ? `${buttonWidth}px` : buttonWidth};
-      `}
-    `}
   `}
 `;
 const StyledAccordionContentContainer = exports.StyledAccordionContentContainer = _styledComponents.default.div`

package/lib/components/box/box.component.d.ts

@@ -23,8 +23,6 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     scrollVariant?: ScrollVariant;
     /** Set the box-sizing attribute of the Box component */
     boxSizing?: BoxSizing;
-    /** (Deprecated) Allows a tabindex to be specified */
-    tabIndex?: number;
     /** Gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
     gap?: Gap;
     /** Column gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
@@ -33,9 +31,13 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     rowGap?: Gap;
     /** Design Token for Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Box component. */
     boxShadow?: BoxShadowsType;
-    /** Design Token for Border Radius. Note: please check that the border radius design token you are using is compatible with the Box component. **This prop will not do anything if you have the roundedCornerOptOut flag set in the CarbonProvider** */
+    /** Design Token for Border Radius. Note: please check that the border radius design token you are using is compatible with the Box component. */
     borderRadius?: BorderRadiusType;
-    /** @private @ignore */
+    /**
+     * @private
+     * @ignore
+     * @internal
+     * Sets className for component. INTERNAL USE ONLY. */
     className?: string;
     /** Set the color attribute of the Box component */
     color?: string;

package/lib/components/box/box.component.js

@@ -9,10 +9,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../style/utils");
 var _box = _interopRequireDefault(require("./box.style"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-let deprecatedTabIndex = false;
 const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
   "data-component": dataComponent,
   as,
@@ -21,7 +19,6 @@ const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
   overflowWrap,
   scrollVariant,
   boxSizing,
-  tabIndex,
   gap,
   columnGap,
   rowGap,
@@ -38,10 +35,6 @@ const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
   "aria-hidden": ariaHidden,
   ...rest
 }, ref) => {
-  if (!deprecatedTabIndex && tabIndex !== undefined) {
-    deprecatedTabIndex = true;
-    _logger.default.deprecate("The `tabIndex` prop for `Box` component has been deprecated and will soon be removed.");
-  }
   let actualWidth = "";
   if (typeof width === "number") {
     actualWidth = width <= 1 ? `${(width * 100).toFixed(0)}%` : `${width}px`;
@@ -70,7 +63,6 @@ const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
     gap: gap,
     columnGap: columnGap,
     rowGap: rowGap,
-    tabIndex: tabIndex,
     className: className,
     ref: ref,
     bg: bg,
@@ -3562,7 +3554,6 @@ if (process.env.NODE_ENV !== "production") {
       "trimStart": _propTypes.default.func.isRequired,
       "valueOf": _propTypes.default.func.isRequired
     }), _propTypes.default.string]),
-    "tabIndex": _propTypes.default.number,
     "top": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
       "__@iterator": _propTypes.default.func.isRequired,
       "anchor": _propTypes.default.func.isRequired,

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

@@ -65,7 +65,8 @@ export interface ButtonProps extends SpaceProps, TagProps {
     /**
      * @private
      * @internal
-     * Set a class name on the button element
+     * @ignore
+     * Set a class name on the button element. INTERNAL USE ONLY.
      */
     className?: string;
 }

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

@@ -14,12 +14,10 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _buttonBar = _interopRequireDefault(require("../button-bar/__internal__/button-bar.context"));
 var _splitButton = _interopRequireDefault(require("../split-button/__internal__/split-button.context"));
 var _batchSelection = _interopRequireDefault(require("../batch-selection/__internal__/batch-selection.context"));
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-let deprecatedClassNameWarningShown = false;
 function renderChildren({
   /* eslint-disable react/prop-types */
   iconType,
@@ -93,10 +91,6 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
   target,
   ...rest
 }, ref) => {
-  if (!deprecatedClassNameWarningShown && rest.className) {
-    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Button' component.");
-    deprecatedClassNameWarningShown = true;
-  }
   const {
     buttonType: buttonTypeContext,
     size: sizeContext,

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

@@ -38,14 +38,9 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     allowDeselect?: boolean;
     /** Disable all user interaction. */
     disabled?: boolean;
-    /**
-     * @private @ignore
-     * Set a class on the component
-     */
-    className?: string;
 }
 declare const ButtonToggleGroup: {
-    ({ 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;
+    ({ 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, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

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

@@ -17,13 +17,11 @@ var _inputBehaviour = require("../../../__internal__/input-behaviour");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _newValidation = _interopRequireDefault(require("../../carbon-provider/__internal__/new-validation.context"));
 var _buttonToggleGroup2 = _interopRequireDefault(require("./__internal__/button-toggle-group.context"));
-var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
-let deprecatedClassNameWarningShown = false;
 const ButtonToggleGroup = ({
   children,
   fieldHelp,
@@ -46,13 +44,8 @@ const ButtonToggleGroup = ({
   id,
   allowDeselect,
   disabled,
-  className,
   ...props
 }) => {
-  if (!deprecatedClassNameWarningShown && className) {
-    _logger.default.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'ButtonToggleGroup' component.");
-    deprecatedClassNameWarningShown = true;
-  }
   const hasCorrectItemStructure = (0, _react.useMemo)(() => {
     const incorrectChild = _react.default.Children.toArray(children).find(child => {
       return ! /*#__PURE__*/_react.default.isValidElement(child) || child.type.displayName !== _.ButtonToggle.displayName;
@@ -165,7 +158,6 @@ const ButtonToggleGroup = ({
     "data-role": dataRole,
     "data-element": dataElement,
     id: id,
-    className: className,
     disabled: disabled
   }), children)))));
 };

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

@@ -13,8 +13,6 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** DEPRECATED: Remove spacing from between buttons. */
-    grouped?: boolean;
     /** Callback triggered by blur event on the button. */
     onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
     /** Callback triggered by focus event on the button. */
@@ -27,7 +25,7 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     value?: string;
 }
 export declare const ButtonToggle: {
-    ({ "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;
+    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggle;

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

@@ -18,7 +18,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let deprecateUncontrolledWarnTriggered = false;
-let deprecateGroupedWarnTriggered = false;
 const ButtonToggle = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -29,7 +28,6 @@ const ButtonToggle = ({
   "data-element": dataElement,
   "data-role": dataRole,
   disabled,
-  grouped,
   onBlur,
   onFocus,
   onClick,
@@ -38,10 +36,6 @@ 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 (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 buttonRef = (0, _react.useRef)(null);
   const {
     onMouseEnter,
@@ -112,8 +106,7 @@ const ButtonToggle = ({
   return /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggleWrapper, {
     "data-component": dataComponent || "button-toggle",
     "data-element": dataElement,
-    "data-role": dataRole,
-    grouped: grouped
+    "data-role": dataRole
   }, /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggle, _extends({
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -127,7 +120,6 @@ const ButtonToggle = ({
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     size: size,
-    grouped: grouped,
     value: value,
     onFocus: handleFocus,
     onBlur: handleBlur,

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

@@ -25,7 +25,6 @@ export interface StyledButtonToggleProps {
     disabled?: boolean;
     /** ButtonToggle size */
     size: "small" | "medium" | "large";
-    grouped?: boolean;
     /** Allow button to be deselected when already selected */
     allowDeselect?: boolean;
 }
@@ -36,8 +35,5 @@ export interface StyledButtonToggleIconProps {
     hasContent?: boolean;
 }
 declare const StyledButtonToggleIcon: import("styled-components").StyledComponent<"div", any, StyledButtonToggleIconProps, never>;
-export interface StyledButtonToggleWrapperProps {
-    grouped?: boolean;
-}
-declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleWrapperProps, never>;
+declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export { StyledButtonToggle, StyledButtonToggleWrapper, StyledButtonToggleIcon, StyledButtonToggleContentWrapper, };