carbon-react 150.0.0 → 151.0.0

package/esm/__internal__/form-field/form-field.component.d.ts

@@ -61,6 +61,8 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     useValidationIcon?: boolean;
     /** String value for max-width of `field-line` element */
     maxWidth?: string;
+    /** @private @internal @ignore */
+    "data-component"?: string;
 }
 declare const FormField: {
     ({ maxWidth, children, "data-component": dataComponent, disabled, loading, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;

package/esm/__internal__/hint-text/hint-text.component.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export interface HintTextProps {
+    /** The alignment of the hint text */
+    align?: "left" | "right";
+    /** Children elements */
+    children?: React.ReactNode;
+    /** Sets the font weight for the hint text */
+    fontWeight?: string;
+    /** Sets the id for the component. */
+    id?: string;
+    /** Indicates whether the parent component is inline. */
+    isComponentInline?: boolean;
+    /** Indicates whether the parent component has a dark background. */
+    isDarkBackground?: boolean;
+    /** Indicates whether the parent component is disabled. */
+    isDisabled?: boolean;
+    /** Margin bottom for the hint text */
+    marginBottom?: string;
+    /** Margin top for the hint text */
+    marginTop?: string;
+    /** Max width for the hint text */
+    maxWidth?: string;
+}
+export declare const HintText: ({ align, children, fontWeight, id, isComponentInline, isDarkBackground, isDisabled, marginBottom, marginTop, maxWidth, }: HintTextProps) => React.JSX.Element | null;
+export default HintText;

package/esm/__internal__/hint-text/hint-text.component.js

@@ -0,0 +1,34 @@
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import StyledHintText from "./hint-text.style";
+import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
+export const HintText = ({
+  align,
+  children,
+  fontWeight,
+  id,
+  isComponentInline = false,
+  isDarkBackground = false,
+  isDisabled = false,
+  marginBottom = "var(--spacing100)",
+  marginTop = "var(--spacing000)",
+  maxWidth
+}) => {
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
+  if (isComponentInline && !validationRedesignOptIn) return null;
+  return /*#__PURE__*/React.createElement(StyledHintText, {
+    align: align,
+    "data-element": "input-hint",
+    "data-role": "hint-text",
+    fontWeight: fontWeight,
+    id: id,
+    isDarkBackground: isDarkBackground,
+    isDisabled: isDisabled,
+    marginBottom: marginBottom,
+    marginTop: marginTop,
+    maxWidth: maxWidth
+  }, children);
+};
+export default HintText;

package/esm/__internal__/hint-text/hint-text.style.d.ts

@@ -0,0 +1,3 @@
+import { HintTextProps } from "./hint-text.component";
+declare const StyledHintText: import("styled-components").StyledComponent<"div", any, HintTextProps, never>;
+export default StyledHintText;

package/esm/__internal__/hint-text/hint-text.style.js

@@ -0,0 +1,50 @@
+import styled, { css } from "styled-components";
+const getColor = (isDarkBackground, isDisabled) => {
+  if (isDarkBackground) {
+    return "var(--colorsUtilityYang080)";
+  }
+  if (isDisabled) {
+    return "var(--colorsUtilityYin030)";
+  }
+  return "var(--colorsUtilityYin055)";
+};
+const StyledHintText = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+
+  ${({
+  align
+}) => css`
+    justify-content: ${align !== "right" ? "flex-start" : "flex-end"};
+  `}
+  margin-bottom: ${({
+  marginBottom
+}) => marginBottom};
+  margin-top: ${({
+  marginTop
+}) => marginTop};
+
+  ${({
+  isDarkBackground,
+  isDisabled
+}) => css`
+    color: ${getColor(isDarkBackground, isDisabled)};
+  `}
+
+  ${({
+  fontWeight
+}) => fontWeight && css`
+      font-weight: ${fontWeight};
+    `}
+  ${({
+  maxWidth
+}) => maxWidth && css`
+      max-width: ${maxWidth};
+    `}
+
+  ::after {
+    content: " ";
+  }
+`;
+export default StyledHintText;

package/esm/__internal__/hint-text/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./hint-text.component";
+export type { HintTextProps } from "./hint-text.component";

package/esm/__internal__/hint-text/index.js

@@ -0,0 +1 @@
+export { default } from "./hint-text.component";

package/esm/__internal__/utils/helpers/tags/tags.d.ts

@@ -2,15 +2,23 @@ interface RestProps {
     [restKeys: string]: any;
 }
 export interface TagProps {
-    /** @private @ignore Identifier used for testing purposes, applied to the root element of the component. */
-    "data-component"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
 }
+interface InternalTagProps extends TagProps {
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Identifier used for testing purposes, applied to the root element of the component.
+     * INTERNAL USE ONLY.
+     */
+    "data-component"?: string;
+}
 /**
  * Builds props object containing top level data tags
  */
-declare function tagComponent(componentName: string | undefined, props: TagProps & RestProps): TagProps;
+declare function tagComponent(componentName: string | undefined, props: TagProps & RestProps): InternalTagProps;
 export default tagComponent;

package/esm/components/accordion/accordion-group/accordion-group.component.d.ts

@@ -4,7 +4,7 @@ import { TagProps } from "../../../__internal__/utils/helpers/tags";
 declare type AccordionGroupChild = React.ReactElement | boolean | null | undefined | AccordionGroupChildArray;
 interface AccordionGroupChildArray extends Array<AccordionGroupChild> {
 }
-export interface AccordionGroupProps extends MarginProps, Omit<TagProps, "data-component"> {
+export interface AccordionGroupProps extends MarginProps, TagProps {
     /** An Accordion or list of Accordion components to be rendered inside the AccordionGroup */
     children?: AccordionGroupChild;
 }

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

@@ -5,6 +5,7 @@ import invariant from "invariant";
 import Events from "../../../__internal__/utils/helpers/events";
 import Accordion from "../accordion.component";
 import { StyledAccordionGroup } from "../accordion.style";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 
 // typescript-to-proptypes breaks on recursive type references so it has to be an interface
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -51,9 +52,7 @@ export const AccordionGroup = ({
       focusAccordion(ev, refs.length - 1);
     }
   }, [focusAccordion, refs]);
-  return /*#__PURE__*/React.createElement(StyledAccordionGroup, _extends({}, rest, {
-    "data-component": "accordion-group"
-  }), filteredChildren.map((child, index) =>
+  return /*#__PURE__*/React.createElement(StyledAccordionGroup, _extends({}, rest, tagComponent("accordion-group", rest)), filteredChildren.map((child, index) =>
   /*#__PURE__*/
   // casted to ReactElement as there is no overload for an FunctionComponentElement in cloneElement
   React.cloneElement(child, {

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { StyledAccordionContainerProps } from "./accordion.style";
-export interface AccordionProps extends StyledAccordionContainerProps, SpaceProps {
+export interface AccordionProps extends StyledAccordionContainerProps, SpaceProps, TagProps {
     /** 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/esm/components/accordion/accordion.component.js

@@ -1,6 +1,7 @@
 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); }
 import React, { useState, useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Events from "../../__internal__/utils/helpers/events";
@@ -64,12 +65,10 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
   const getIconType = () => size === "small" || variant === "subtle" ? "chevron_down_thick" : "chevron_down";
   return /*#__PURE__*/React.createElement(StyledAccordionContainer, _extends({
     id: accordionId,
-    "data-component": "accordion",
-    "data-role": "accordion-container",
     width: width,
     borders: variant === "subtle" ? "none" : borders,
     variant: variant
-  }, rest), /*#__PURE__*/React.createElement(StyledAccordionTitleContainer, _extends({
+  }, rest, tagComponent("accordion", rest)), /*#__PURE__*/React.createElement(StyledAccordionTitleContainer, _extends({
     "data-element": "accordion-title-container",
     id: headerId,
     "aria-expanded": isExpanded,
@@ -121,6 +120,8 @@ if (process.env.NODE_ENV !== "production") {
   Accordion.propTypes = {
     "borders": PropTypes.oneOf(["default", "full", "none"]),
     "children": PropTypes.node,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "defaultExpanded": PropTypes.bool,
     "disableContentPadding": PropTypes.bool,
     "error": PropTypes.string,

package/esm/components/action-popover/action-popover.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { Alignment } from "./__internal__/action-popover.context";
 export interface RenderButtonProps {
     tabIndex: number;
@@ -13,7 +14,7 @@ export interface RenderButtonProps {
         "aria-expanded": string;
     };
 }
-export interface ActionPopoverProps extends MarginProps {
+export interface ActionPopoverProps extends MarginProps, TagProps {
     /** Children for popover component */
     children?: React.ReactNode;
     /** Horizontal alignment of menu items content */

package/esm/components/action-popover/action-popover.component.js

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useState, useCallback, useMemo, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import { MenuButton, ButtonIcon, StyledButtonIcon } from "./action-popover.style";
 import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
@@ -200,13 +201,11 @@ const ActionPopover = /*#__PURE__*/forwardRef(({
   };
   return /*#__PURE__*/React.createElement(MenuButton, _extends({
     id: parentID,
-    "data-component": "action-popover-wrapper",
-    "data-role": "action-popover-wrapper",
     onKeyDown: onButtonKeyDown,
     onClick: onButtonClick,
     isOpen,
     ref: buttonRef
-  }, rest), menuButton(menuID), /*#__PURE__*/React.createElement(ActionPopoverContext.Provider, {
+  }, rest, tagComponent("action-popover-wrapper", rest)), menuButton(menuID), /*#__PURE__*/React.createElement(ActionPopoverContext.Provider, {
     value: {
       setOpenPopover: setOpen,
       focusButton,
@@ -227,6 +226,8 @@ if (process.env.NODE_ENV !== "production") {
     "aria-label": PropTypes.string,
     "aria-labelledby": PropTypes.string,
     "children": PropTypes.node,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "horizontalAlignment": PropTypes.oneOf(["left", "right"]),
     "id": PropTypes.string,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/advanced-color-picker/advanced-color-picker.component.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { ModalProps } from "../modal";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface AdvancedColor {
     label: string;
     value: string;
 }
-export interface AdvancedColorPickerProps extends MarginProps, Pick<ModalProps, "restoreFocusOnClose"> {
+export interface AdvancedColorPickerProps extends MarginProps, Pick<ModalProps, "restoreFocusOnClose">, TagProps {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
     /**
@@ -14,7 +15,7 @@ export interface AdvancedColorPickerProps extends MarginProps, Pick<ModalProps,
      */
     "aria-label"?: string;
     /**
-     * Prop to specify the aria-labeledby property of the component
+     * Prop to specify the aria-labelledby property of the component
      * To be used when the title prop is a custom React Node,
      * or the component is labelled by an internal element other than the title.
      */

package/esm/components/advanced-color-picker/advanced-color-picker.component.js

@@ -9,6 +9,7 @@ import guid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { Dt, Dd } from "../definition-list";
 import Logger from "../../__internal__/utils/logger";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 let deprecateUncontrolledWarnTriggered = false;
 export const AdvancedColorPicker = ({
   "aria-describedby": ariaDescribedBy,
@@ -121,9 +122,7 @@ export const AdvancedColorPicker = ({
   }
   return /*#__PURE__*/React.createElement(StyledAdvancedColorPickerWrapper, _extends({
     m: "15px auto auto 15px"
-  }, filterStyledSystemMarginProps(props), {
-    "data-role": "advanced-color-picker-wrapper"
-  }), /*#__PURE__*/React.createElement(StyledAdvancedColorPickerCell, {
+  }, filterStyledSystemMarginProps(props), tagComponent("advanced-color-picker", props)), /*#__PURE__*/React.createElement(StyledAdvancedColorPickerCell, {
     "data-element": "color-picker-cell",
     "aria-label": l.advancedColorPicker.ariaLabel(),
     "aria-describedby": descriptionId.current,

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { DialogProps } from "../dialog";
-export declare const Alert: ({ children, size, topModalOverride, closeButtonDataProps, ...rest }: DialogProps) => React.JSX.Element;
+export declare const Alert: ({ children, size, topModalOverride, closeButtonDataProps, ...rest }: Omit<DialogProps, "data-component">) => React.JSX.Element;
 export default Alert;

package/esm/components/alert/alert.component.js

@@ -9,10 +9,11 @@ export const Alert = ({
   closeButtonDataProps,
   ...rest
 }) => /*#__PURE__*/React.createElement(Dialog, _extends({
-  "data-component": "alert",
   role: "alertdialog",
   size: size,
   topModalOverride: topModalOverride,
   closeButtonDataProps: closeButtonDataProps
-}, rest), children);
+}, rest, {
+  "data-component": "alert"
+}), children);
 export default Alert;

package/esm/components/anchor-navigation/anchor-navigation.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface AnchorNavigationProps extends Omit<TagProps, "data-component"> {
+export interface AnchorNavigationProps extends TagProps {
     /** Child elements */
     children?: React.ReactNode;
     /** The AnchorNavigationItems components to be rendered in the sticky navigation.

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

@@ -1,5 +1,6 @@
 import React from "react";
-export interface BadgeProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface BadgeProps extends TagProps {
     /** Prop to specify an aria-label for the component */
     "aria-label"?: string;
     /** The badge will be added to this element */
@@ -11,5 +12,5 @@ export interface BadgeProps {
     /** Callback fired when badge is clicked */
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 }
-export declare const Badge: ({ "aria-label": ariaLabel, children, counter, color, onClick, }: BadgeProps) => React.JSX.Element;
+export declare const Badge: ({ "aria-label": ariaLabel, children, counter, color, onClick, "data-element": dataElement, "data-role": dataRole, }: BadgeProps) => React.JSX.Element;
 export default Badge;

package/esm/components/badge/badge.component.js

@@ -7,7 +7,9 @@ export const Badge = ({
   children,
   counter = 0,
   color = "--colorsActionMajor500",
-  onClick
+  onClick,
+  "data-element": dataElement,
+  "data-role": dataRole
 }) => {
   const shouldDisplayCounter = +counter > 0;
   const counterToDisplay = +counter > 99 ? 99 : counter;
@@ -22,8 +24,9 @@ export const Badge = ({
     };
     if (shouldDisplayCounter) {
       return /*#__PURE__*/React.createElement(StyledBadge, _extends({
-        "data-role": "badge",
         "data-component": "badge",
+        "data-element": dataElement,
+        "data-role": dataRole,
         color: color
       }, props, {
         onFocus: () => {

package/esm/components/batch-selection/batch-selection.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export interface BatchSelectionProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface BatchSelectionProps extends TagProps {
     /** Content to be rendered after selected count */
     children: React.ReactNode;
     /** Color of the background, transparent if not defined */
@@ -11,5 +12,5 @@ export interface BatchSelectionProps {
     /** Number of selected elements */
     selectedCount: number;
 }
-export declare const BatchSelection: ({ disabled, children, colorTheme, selectedCount, hidden, }: BatchSelectionProps) => React.JSX.Element;
+export declare const BatchSelection: ({ disabled, children, colorTheme, selectedCount, hidden, "data-element": dataElement, "data-role": dataRole, }: BatchSelectionProps) => React.JSX.Element;
 export default BatchSelection;

package/esm/components/batch-selection/batch-selection.component.js

@@ -8,13 +8,16 @@ export const BatchSelection = ({
   children,
   colorTheme = "transparent",
   selectedCount,
-  hidden
+  hidden,
+  "data-element": dataElement,
+  "data-role": dataRole
 }) => {
   const l = useLocale();
   return /*#__PURE__*/React.createElement(StyledBatchSelection, {
     colorTheme: colorTheme,
     "data-component": "batch-selection",
-    "data-role": "batch-selection",
+    "data-element": dataElement,
+    "data-role": dataRole,
     disabled: disabled,
     hidden: hidden
   }, /*#__PURE__*/React.createElement(StyledSelectionCount, {

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

@@ -49,6 +49,8 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     opacity?: string | number;
     /** Set the container to be hidden from screen readers */
     "aria-hidden"?: "true" | "false";
+    /** @private @internal @ignore */
+    "data-component"?: string;
 }
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
 export default Box;

package/esm/components/breadcrumbs/breadcrumbs.component.js

@@ -17,15 +17,13 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(({
     }
   }, /*#__PURE__*/React.createElement(StyledBreadcrumbs, _extends({
     ref: ref,
-    role: "navigation"
-  }, tagComponent("breadcrumbs", rest), {
+    role: "navigation",
     "aria-label": l.breadcrumbs.ariaLabel()
-  }, rest), /*#__PURE__*/React.createElement("ol", null, children)));
+  }, rest, tagComponent("breadcrumbs", rest)), /*#__PURE__*/React.createElement("ol", null, children)));
 });
 if (process.env.NODE_ENV !== "production") {
   Breadcrumbs.propTypes = {
     "children": PropTypes.node,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "isDarkBackground": PropTypes.bool,

package/esm/components/breadcrumbs/crumb/crumb.component.js

@@ -19,7 +19,7 @@ const Crumb = /*#__PURE__*/React.forwardRef(({
     isCurrent: isCurrent,
     "aria-current": isCurrent ? "page" : undefined,
     isDarkBackground: isDarkBackground
-  }, tagComponent("crumb", rest), rest, !isCurrent && {
+  }, rest, tagComponent("crumb", rest), !isCurrent && {
     href,
     onClick
   }), children), !isCurrent && /*#__PURE__*/React.createElement(Divider, {
@@ -84,7 +84,6 @@ if (process.env.NODE_ENV !== "production") {
     "aria-valuenow": PropTypes.number,
     "aria-valuetext": PropTypes.string,
     "children": PropTypes.node,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "hasFocus": PropTypes.bool,

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

@@ -177,7 +177,6 @@ if (process.env.NODE_ENV !== "production") {
     "buttonType": PropTypes.oneOf(["darkBackground", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
     "children": PropTypes.node,
     "className": PropTypes.string,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "destructive": PropTypes.bool,

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { ButtonBarContextProps } from "./__internal__/button-bar.context";
-export interface ButtonBarProps extends ButtonBarContextProps, SpaceProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface ButtonBarProps extends ButtonBarContextProps, SpaceProps, TagProps {
     /** Button or IconButton Elements, to be rendered inside the component */
     children: React.ReactNode;
 }

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

@@ -3,13 +3,14 @@ import React from "react";
 import PropTypes from "prop-types";
 import StyledButtonBar from "./button-bar.style";
 import ButtonBarContext from "./__internal__/button-bar.context";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 export const ButtonBar = ({
   children,
   size = "medium",
   iconPosition = "before",
   fullWidth = false,
   ...rest
-}) => /*#__PURE__*/React.createElement(StyledButtonBar, _extends({}, rest, {
+}) => /*#__PURE__*/React.createElement(StyledButtonBar, _extends({}, rest, tagComponent("button-bar", rest), {
   fullWidth: fullWidth,
   size: size
 }), /*#__PURE__*/React.createElement(ButtonBarContext.Provider, {

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

@@ -46,7 +46,6 @@ if (process.env.NODE_ENV !== "production") {
     "buttonType": PropTypes.oneOf(["darkBackground", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
     "children": PropTypes.node,
     "className": PropTypes.string,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "destructive": PropTypes.bool,

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

@@ -38,9 +38,11 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     allowDeselect?: boolean;
     /** Disable all user interaction. */
     disabled?: boolean;
+    /** @private @internal @ignore */
+    "data-component"?: 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, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, helpAriaLabel, id, allowDeselect, disabled, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

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

@@ -3,8 +3,9 @@ import React, { useMemo, useState, useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import FormField from "../../../__internal__/form-field";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 import guid from "../../../__internal__/utils/helpers/guid";
-import StyledButtonToggleGroup, { StyledHintText } from "./button-toggle-group.style";
+import StyledButtonToggleGroup from "./button-toggle-group.style";
 import { ButtonToggle } from "..";
 import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
@@ -12,6 +13,7 @@ import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
 import Events from "../../../__internal__/utils/helpers/events";
 import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ButtonToggleGroupContext from "./__internal__/button-toggle-group.context";
+import HintText from "../../../__internal__/hint-text";
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
 const ButtonToggleGroup = ({
   children,
@@ -28,9 +30,6 @@ const ButtonToggleGroup = ({
   labelWidth,
   onChange,
   value,
-  "data-component": dataComponent = "button-toggle-group",
-  "data-element": dataElement,
-  "data-role": dataRole,
   helpAriaLabel,
   id,
   allowDeselect,
@@ -110,13 +109,10 @@ const ButtonToggleGroup = ({
     labelInline: computeLabelPropValues(labelInline),
     labelWidth: computeLabelPropValues(labelWidth),
     labelId: labelId.current,
-    "data-component": dataComponent,
-    "data-role": dataRole,
-    "data-element": dataElement,
     id: id,
     labelAs: "span",
     disabled: disabled
-  }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(ButtonToggleGroupContext.Provider, {
+  }, filterStyledSystemMarginProps(props), tagComponent(props["data-component"] ?? "button-toggle-group", props)), /*#__PURE__*/React.createElement(ButtonToggleGroupContext.Provider, {
     value: {
       onButtonClick,
       handleKeyDown,
@@ -129,9 +125,10 @@ const ButtonToggleGroup = ({
       childButtonCallbackRef,
       hintTextId: inputHint ? hintTextId.current : undefined
     }
-  }, inputHint && /*#__PURE__*/React.createElement(StyledHintText, {
+  }, inputHint && /*#__PURE__*/React.createElement(HintText, {
     id: hintTextId.current,
-    isDisabled: disabled
+    isDisabled: disabled,
+    marginBottom: "var(--spacing150)"
   }, inputHint), /*#__PURE__*/React.createElement(StyledButtonToggleGroup, _extends({
     ref: wrapperRef
   }, label ? {
@@ -143,9 +140,6 @@ const ButtonToggleGroup = ({
     inputWidth: inputWidth,
     fullWidth: fullWidth,
     role: "group",
-    "data-component": dataComponent,
-    "data-role": dataRole,
-    "data-element": dataElement,
     id: id,
     disabled: disabled
   }), children)))));

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

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

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

@@ -41,18 +41,6 @@ const StyledButtonToggleGroup = styled.div`
       width: ${`${inputWidth}%`};
     `}
 `;
-export const StyledHintText = styled.div`
-  ::after {
-    content: " ";
-  }
-
-  margin-top: var(--spacing000);
-  margin-bottom: var(--spacing150);
-  color: ${({
-  isDisabled
-}) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};
-  font-size: 14px;
-`;
 StyledButtonToggleGroup.defaultProps = {
   theme: baseTheme
 };