carbon-react 128.0.0 → 128.2.0

package/README.md

@@ -4,7 +4,7 @@ Carbon is a [React](https://react.dev/) component library developed by Sage.
 
 ## Getting started
 
-Our [getting started guide](https://carbon.sage.com/?path=/story/getting-started-installation--page) provides instructions on how to install and use the Carbon library.
+Our [getting started guide](https://carbon.sage.com/?path=/docs/getting-started-installation--docs) provides instructions on how to install and use the Carbon library.
 
 ## Examples
 

package/esm/__internal__/checkable-input/checkable-input.component.d.ts

@@ -27,6 +27,8 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
     labelWidth?: number;
     /** Flag to configure component as mandatory */
     required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
     /** If true the label switches position with the input */
     reverse?: boolean;
     /** Size of the component */

package/esm/__internal__/checkable-input/checkable-input.component.js

@@ -32,6 +32,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
   onChange,
   onFocus,
   required,
+  isOptional,
   reverse = false,
   validationOnLabel,
   warning,
@@ -53,7 +54,6 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     label,
     fieldHelp
   });
-  const isRadio = type === "radio";
   const formFieldProps = {
     disabled,
     loading,
@@ -74,7 +74,8 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     validationIconId: validationId,
     // We don't want an asterisk on each radio control, only the legend
     // However, we still want the input element to receive the required prop
-    isRequired: isRadio ? undefined : required,
+    isRequired: required,
+    isOptional,
     useValidationIcon: validationOnLabel
   };
   const inputProps = {
@@ -203,6 +204,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

package/esm/__internal__/fieldset/fieldset.style.js

@@ -26,11 +26,10 @@ const StyledLegendContent = styled.span`
         content: "*";
         line-height: 24px;
         color: var(--colorsSemanticNegative500);
-        font-weight: 700;
-        margin-left: var(--spacing100);
+        font-weight: var(--fontWeights700);
+        margin-left: var(--spacing050);
         position: relative;
         top: 1px;
-        left: -4px;
       }
     `}
 
@@ -39,8 +38,9 @@ const StyledLegendContent = styled.span`
 }) => isOptional && css`
       ::after {
         content: "(optional)";
-        font-weight: 350; //TODO: (tokens) use token var(--fontWeights400) - FE-6022
-        margin-left: 4px;
+        color: var(--colorsUtilityYin055);
+        font-weight: var(--fontWeights400);
+        margin-left: var(--spacing050);
       }
     `}
 
@@ -58,7 +58,8 @@ const StyledLegend = styled.legend`
   align-items: center;
   margin-bottom: var(--spacing100);
   padding: 0;
-  font-weight: 600;
+  font-weight: var(--fontWeights700);
+  color: var(--colorsUtilityYin090);
   ${({
   inline,
   width,

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

@@ -53,7 +53,7 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     fieldHelpInline?: boolean;
     /** Id of the element a label should be bound to */
     id: string;
-    /** [Legacy] Flag to configure component as optional in Form */
+    /** Flag to configure component as optional in Form */
     isOptional?: boolean;
     /** Flag to configure component as mandatory */
     isRequired?: boolean;

package/esm/__internal__/form-field/form-field.component.js

@@ -50,6 +50,7 @@ const FormField = ({
     return Object.keys(validationProps).find(propName => validationProps[propName]);
   }, [error, warning, info, disabled]);
   !(invalidValidationProp === undefined) ? process.env.NODE_ENV !== "production" ? invariant(false, `Prop \`${invalidValidationProp}\` cannot be used in conjunction with \`disabled\`. ` + "Use `readOnly` if you require users to see validations with a non-interactive field") : invariant(false) : void 0;
+  !!(isRequired && isOptional) ? process.env.NODE_ENV !== "production" ? invariant(false, "an input cannot be set to both required and optional at the same time") : invariant(false) : void 0;
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
   let inlineLabel = labelInline;
   if (adaptiveLabelBreakpoint) {

package/esm/__internal__/label/label.style.js

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 const StyledLabel = styled.label`
   color: var(--colorsUtilityYin090);
   display: block;
-  font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
+  font-weight: var(--fontWeights700);
 
   ${({
   isRequired
@@ -10,8 +10,8 @@ const StyledLabel = styled.label`
       ::after {
         content: "*";
         color: var(--colorsSemanticNegative500);
-        font-weight: 700;
-        margin-left: var(--spacing100);
+        font-weight: var(--fontWeights700);
+        margin-left: var(--spacing050);
       }
     `}
 
@@ -51,8 +51,9 @@ export const StyledLabelContainer = styled.div`
 }) => optional && css`
       ::after {
         content: "(optional)";
-        font-weight: 350; //TODO: (tokens) use token var(--fontWeights400)
-        margin-left: 4px;
+        font-weight: var(--fontWeights400);
+        margin-left: var(--spacing050);
+        color: var(--colorsUtilityYin055);
       }
     `}
 `;

package/esm/__spec_helper__/test-utils.d.ts

@@ -1,12 +1,8 @@
-/// <reference types="react" />
-import { ReactWrapper, ShallowWrapper } from "enzyme";
+import { ReactWrapper } from "enzyme";
 import { LayoutProps, FlexboxProps, BackgroundProps, PositionProps, GridProps } from "styled-system";
-import { ReactTestRendererJSON } from "react-test-renderer";
 import { mockMatchMedia } from "./mock-match-media";
 declare const toCSSCase: (str: string) => string;
-declare const assertStyleMatch: <Props>(styleSpec: {
-    [key: string]: string | number | undefined;
-}, component: HTMLElement | ReactWrapper<Props, {}, import("react").Component<{}, {}, any>> | ShallowWrapper<Props, {}, import("react").Component<{}, {}, any>> | ReactTestRendererJSON | ReactTestRendererJSON[] | null, opts?: jest.Options) => void;
+declare const assertStyleMatch: any;
 declare const makeArrayKeys: (n: number) => number[];
 declare const keyboard: Record<string, () => void>;
 declare const simulate: {
@@ -14,10 +10,10 @@ declare const simulate: {
         shiftKey: boolean;
     } | undefined) => void>;
 };
-declare const listFrom: (wrapper: ReactWrapper) => ReactWrapper<import("enzyme").HTMLAttributes, any, import("react").Component<{}, {}, any>>;
-declare const childrenFrom: (node: ReactWrapper) => ReactWrapper<any, any, import("react").Component<{}, {}, any>>;
+declare const listFrom: (wrapper: ReactWrapper) => ReactWrapper;
+declare const childrenFrom: (node: ReactWrapper) => ReactWrapper;
 declare const hoverList: (wrapper: ReactWrapper) => (item: number) => void;
-declare const click: (wrapper: ReactWrapper) => ReactWrapper<{}, {}, import("react").Component<{}, {}, any>>;
+declare const click: unknown;
 declare const selectedItemOf: (wrapper: ReactWrapper) => number;
 declare const assertKeyboardTraversal: ({ num, nonSelectables, }: {
     num: number;

package/esm/__spec_helper__/test-utils.js

@@ -11,6 +11,8 @@ const humpToDash = (acc, char) => `${acc}${isUpper(char) ? `-${char.toLowerCase(
 const toCSSCase = str => {
   return str.split("").reduce(humpToDash, "");
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const assertStyleMatch = (styleSpec, component, opts) => {
   Object.entries(styleSpec).forEach(([attr, value]) => {
     expect(component).toHaveStyleRule(toCSSCase(attr), value, opts);

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, ...rest }: DialogProps) => React.JSX.Element;
+export declare const Alert: ({ children, size, topModalOverride, closeButtonDataProps, ...rest }: DialogProps) => React.JSX.Element;
 export default Alert;

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

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

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

@@ -5,7 +5,7 @@ export interface ButtonMinorProps extends ButtonProps {
     isInPassword?: boolean;
 }
 export declare const ButtonMinor: {
-    ({ buttonType: buttonTypeProp, size: sizeProp, iconPosition: iconPositionProp, fullWidth: fullWidthProp, ...rest }: ButtonMinorProps): React.JSX.Element;
+    ({ buttonType: buttonTypeProp, disabled, destructive, size: sizeProp, iconPosition: iconPositionProp, fullWidth: fullWidthProp, ...rest }: ButtonMinorProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonMinor;

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

@@ -5,6 +5,8 @@ import StyledButtonMinor from "./button-minor.style";
 import { ButtonBarContext } from "../button-bar/button-bar.component";
 export const ButtonMinor = ({
   buttonType: buttonTypeProp = "secondary",
+  disabled = false,
+  destructive = false,
   size: sizeProp = "medium",
   iconPosition: iconPositionProp = "before",
   fullWidth: fullWidthProp = false,
@@ -25,7 +27,9 @@ export const ButtonMinor = ({
     size: size,
     fullWidth: fullWidth,
     iconPosition: iconPosition,
-    buttonType: buttonType
+    buttonType: buttonType,
+    disabled: disabled,
+    destructive: destructive
   }, rest));
 };
 ButtonMinor.displayName = "ButtonMinor";

package/esm/components/checkbox/{checkbox-group.component.d.ts → checkbox-group/checkbox-group.component.d.ts}

@@ -1,6 +1,6 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-import { ValidationProps } from "../../__internal__/validations";
+import { ValidationProps } from "../../../__internal__/validations";
 export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     /** The content for the CheckboxGroup Legend */
     legend?: string;
@@ -20,6 +20,8 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     labelSpacing?: 1 | 2;
     /** Flag to configure component as mandatory */
     required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
     /** Overrides the default tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** When true, Checkboxes are in line */

package/esm/components/checkbox/{checkbox-group.component.js → checkbox-group/checkbox-group.component.js}

@@ -1,16 +1,16 @@
 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); }
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import StyledCheckboxGroup, { StyledHintText } from "./checkbox-group.style";
-import Fieldset from "../../__internal__/fieldset";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import FormSpacingProvider from "../../__internal__/form-spacing-provider";
-import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
-import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
-import Box from "../../components/box";
-import { ErrorBorder } from "../../components/textbox/textbox.style";
+import Fieldset from "../../../__internal__/fieldset";
+import { filterStyledSystemMarginProps } from "../../../style/utils";
+import { TooltipProvider } from "../../../__internal__/tooltip-provider";
+import FormSpacingProvider from "../../../__internal__/form-spacing-provider";
+import { NewValidationContext } from "../../carbon-provider/carbon-provider.component";
+import ValidationMessage from "../../../__internal__/validation-message/validation-message.component";
+import Box from "../../box";
+import { ErrorBorder } from "../../textbox/textbox.style";
 export const CheckboxGroupContext = /*#__PURE__*/React.createContext({});
 export const CheckboxGroup = props => {
   const {
@@ -23,6 +23,7 @@ export const CheckboxGroup = props => {
     warning,
     info,
     required,
+    isOptional,
     legendInline,
     legendWidth,
     legendAlign,
@@ -40,7 +41,8 @@ export const CheckboxGroup = props => {
     error: error,
     warning: warning,
     info: info,
-    isRequired: required
+    isRequired: required,
+    isOptional: isOptional
   }, tagComponent("checkboxgroup", props), {
     blockGroupBehaviour: !(error || warning)
   }, filterStyledSystemMarginProps(props)), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, null, legendHelp), /*#__PURE__*/React.createElement(Box, {
@@ -73,7 +75,8 @@ export const CheckboxGroup = props => {
     error: error,
     warning: warning,
     info: info,
-    isRequired: required
+    isRequired: required,
+    isOptional: isOptional
   }, tagComponent("checkboxgroup", props), {
     blockGroupBehaviour: !(error || warning || info)
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {

package/esm/components/checkbox/{checkbox-group.style.js → checkbox-group/checkbox-group.style.js}

@@ -1,9 +1,9 @@
 import styled, { css } from "styled-components";
-import StyledFormField from "../../__internal__/form-field/form-field.style";
-import StyledIcon from "../icon/icon.style";
-import CheckboxStyle from "./checkbox.style";
-import { StyledLabelContainer } from "../../__internal__/label/label.style";
-import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
+import StyledFormField from "../../../__internal__/form-field/form-field.style";
+import StyledIcon from "../../icon/icon.style";
+import CheckboxStyle from "../checkbox.style";
+import { StyledLabelContainer } from "../../../__internal__/label/label.style";
+import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style";
 export const StyledHintText = styled.div`
   margin-top: -4px;
   margin-bottom: 8px;

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

@@ -6,7 +6,7 @@ import CheckableInput from "../../__internal__/checkable-input/checkable-input.c
 import CheckboxSvg from "./checkbox-svg.component";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import { CheckboxGroupContext } from "./checkbox-group.component";
+import { CheckboxGroupContext } from "./checkbox-group/checkbox-group.component";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
@@ -30,6 +30,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   labelWidth,
   adaptiveSpacingBreakpoint,
   required,
+  isOptional,
   error,
   warning,
   info,
@@ -84,6 +85,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     labelHelp,
     labelSpacing,
     required,
+    isOptional,
     fieldHelpInline,
     checked,
     disabled,
@@ -225,6 +227,7 @@ if (process.env.NODE_ENV !== "production") {
     })]),
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

package/esm/components/checkbox/index.d.ts

@@ -1,4 +1,4 @@
-export { default as CheckboxGroup } from "./checkbox-group.component";
-export type { CheckboxGroupProps } from "./checkbox-group.component";
+export { default as CheckboxGroup } from "./checkbox-group/checkbox-group.component";
+export type { CheckboxGroupProps } from "./checkbox-group/checkbox-group.component";
 export { default as Checkbox } from "./checkbox.component";
 export type { CheckboxProps } from "./checkbox.component";

package/esm/components/checkbox/index.js

@@ -1,2 +1,2 @@
-export { default as CheckboxGroup } from "./checkbox-group.component";
+export { default as CheckboxGroup } from "./checkbox-group/checkbox-group.component";
 export { default as Checkbox } from "./checkbox.component";

package/esm/components/date-range/date-range.component.d.ts

@@ -80,9 +80,13 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
     validationOnLabel?: boolean;
     /** Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** Flag to configure component as mandatory. */
+    required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 export declare const DateRange: {
-    ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, ...rest }: DateRangeProps): React.JSX.Element;
+    ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, isOptional, ...rest }: DateRangeProps): React.JSX.Element;
     displayName: string;
 };
 export default DateRange;

package/esm/components/date-range/date-range.component.js

@@ -24,6 +24,8 @@ export const DateRange = ({
   value,
   startRef,
   endRef,
+  required,
+  isOptional,
   ...rest
 }) => {
   const l = useLocale();
@@ -186,7 +188,9 @@ export const DateRange = ({
       onBlur: handleOnBlur,
       onChange: onChangeCallback,
       onKeyDown: ev => handleOnKeyDown(ev, propsKey),
-      ...props
+      ...props,
+      required,
+      isOptional
     };
   };
   return /*#__PURE__*/React.createElement(StyledDateRange, _extends({}, tagComponent("date-range", rest), {

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

@@ -33,8 +33,6 @@ export interface DecimalProps extends Omit<CommonTextboxProps, "onChange" | "onB
     precision?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15;
     /** If true, the component will be read-only */
     readOnly?: boolean;
-    /** Flag to configure component as mandatory */
-    required?: boolean;
     /** The value of the input if it's used as a controlled component */
     value?: string;
     /** The locale string - default en */

package/esm/components/decimal/decimal.component.js

@@ -20,7 +20,6 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
   id,
   name,
   allowEmptyValue = false,
-  required,
   locale,
   value,
   inputRef,
@@ -177,7 +176,6 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
     onKeyPress: onKeyPress,
     align: align,
     readOnly: readOnly,
-    required: required,
     inputWidth: inputWidth,
     onChange: handleOnChange,
     onBlur: handleOnBlur,
@@ -304,6 +302,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputRef": PropTypes.func,
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

package/esm/components/definition-list/{dd.component.js → dd/dd.component.js}

@@ -1,8 +1,8 @@
 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); }
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
-import { StyledDd } from "./definition-list.style";
-import DlContext from "./__internal__/dl.context";
+import { StyledDd } from "../definition-list.style";
+import DlContext from "../__internal__/dl.context";
 const Dd = ({
   children,
   ...rest

package/esm/components/definition-list/dl.component.js

@@ -10,16 +10,18 @@ const Dl = ({
   ddTextAlign = "left",
   asSingleColumn = false,
   ...rest
-}) => /*#__PURE__*/React.createElement(StyledDl, _extends({
-  w: w,
-  "data-component": "dl",
-  asSingleColumn: asSingleColumn
-}, rest), /*#__PURE__*/React.createElement(DlContext.Provider, {
-  value: {
-    asSingleColumn,
-    dtTextAlign,
-    ddTextAlign
-  }
-}, children));
+}) => {
+  return /*#__PURE__*/React.createElement(StyledDl, _extends({
+    w: w,
+    "data-component": "dl",
+    asSingleColumn: asSingleColumn
+  }, rest), /*#__PURE__*/React.createElement(DlContext.Provider, {
+    value: {
+      asSingleColumn,
+      dtTextAlign,
+      ddTextAlign
+    }
+  }, children));
+};
 Dl.displayName = "Dl";
 export default Dl;

package/esm/components/definition-list/{dt.component.js → dt/dt.component.js}

@@ -1,8 +1,8 @@
 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); }
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
-import { StyledDt } from "./definition-list.style";
-import DlContext from "./__internal__/dl.context";
+import { StyledDt } from "../definition-list.style";
+import DlContext from "../__internal__/dl.context";
 const Dt = ({
   children,
   ...rest

package/esm/components/definition-list/index.d.ts

@@ -1,6 +1,6 @@
 export type { DlProps } from "./dl.component";
 export { default as Dl } from "./dl.component";
-export type { DtProps } from "./dt.component";
-export { default as Dt } from "./dt.component";
-export type { DdProps } from "./dd.component";
-export { default as Dd } from "./dd.component";
+export type { DtProps } from "./dt/dt.component";
+export { default as Dt } from "./dt/dt.component";
+export type { DdProps } from "./dd/dd.component";
+export { default as Dd } from "./dd/dd.component";

package/esm/components/definition-list/index.js

@@ -1,3 +1,3 @@
 export { default as Dl } from "./dl.component";
-export { default as Dt } from "./dt.component";
-export { default as Dd } from "./dd.component";
+export { default as Dt } from "./dt/dt.component";
+export { default as Dd } from "./dd/dd.component";

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { ModalProps } from "../modal";
-import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { DialogSizes } from "./dialog.config";
 import { CustomRefObject } from "../../__internal__/focus-trap";
 declare const PADDING_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
@@ -46,6 +46,8 @@ export interface DialogProps extends ModalProps, TagProps {
     onCancel?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Determines if the close icon is shown */
     showCloseIcon?: boolean;
+    /** Data tag prop bag for close Button */
+    closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** Size of dialog, default size is 750px */
     size?: DialogSizes;
     /** Subtitle displayed at top of dialog */

package/esm/components/dialog/dialog.component.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
 import Heading from "../heading";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
 import { StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogInnerContent } from "./dialog.style";
 import { TOP_MARGIN } from "./dialog.config";
@@ -36,6 +37,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
   greyBackground = false,
   focusableContainers,
   topModalOverride,
+  closeButtonDataProps,
   ...rest
 }, ref) => {
   const locale = useLocale();
@@ -110,12 +112,14 @@ const Dialog = /*#__PURE__*/forwardRef(({
   }, [centerDialog, open, height]);
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
-    return /*#__PURE__*/React.createElement(IconButton, {
-      "data-element": "close",
+    return /*#__PURE__*/React.createElement(IconButton, _extends({
       "aria-label": locale.dialog.ariaLabels.close(),
       onClick: onCancel,
       disabled: disableClose
-    }, /*#__PURE__*/React.createElement(Icon, {
+    }, tagComponent("close", {
+      "data-element": "close",
+      ...closeButtonDataProps
+    })), /*#__PURE__*/React.createElement(Icon, {
       type: "close"
     }));
   };
@@ -193,6 +197,10 @@ if (process.env.NODE_ENV !== "production") {
     "bespokeFocusTrap": PropTypes.func,
     "children": PropTypes.node,
     "className": PropTypes.string,
+    "closeButtonDataProps": PropTypes.shape({
+      "data-element": PropTypes.string,
+      "data-role": PropTypes.string
+    }),
     "contentPadding": PropTypes.shape({
       "p": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
       "px": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),

package/esm/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { ModalProps } from "../modal";
 import { CustomRefObject } from "../../__internal__/focus-trap";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface DialogFullScreenProps extends ModalProps {
     /** Prop to specify the aria-describedby property of the DialogFullscreen component */
     "aria-describedby"?: string;
@@ -39,6 +40,8 @@ export interface DialogFullScreenProps extends ModalProps {
     pagesStyling?: boolean;
     /** Determines if the close icon is shown */
     showCloseIcon?: boolean;
+    /** Data tag prop bag for close Button */
+    closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** Subtitle displayed at top of dialog */
     subtitle?: string;
     /** Title displayed at top of dialog */
@@ -52,5 +55,5 @@ export interface DialogFullScreenProps extends ModalProps {
     /** A custom close event handler */
     onCancel?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const DialogFullScreen: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disableAutoFocus, focusFirstElement, bespokeFocusTrap, open, children, title, subtitle, pagesStyling, headerChildren, showCloseIcon, disableContentPadding, disableEscKey, onCancel, contentRef, help, role, focusableContainers, focusableSelectors, topModalOverride, ...rest }: DialogFullScreenProps) => React.JSX.Element;
+export declare const DialogFullScreen: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disableAutoFocus, focusFirstElement, bespokeFocusTrap, open, children, title, subtitle, pagesStyling, headerChildren, showCloseIcon, disableContentPadding, disableEscKey, onCancel, contentRef, help, role, focusableContainers, focusableSelectors, topModalOverride, closeButtonDataProps, ...rest }: DialogFullScreenProps) => React.JSX.Element;
 export default DialogFullScreen;

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -13,6 +13,7 @@ import Icon from "../icon";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
 import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 export const DialogFullScreen = ({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
@@ -36,6 +37,7 @@ export const DialogFullScreen = ({
   focusableContainers,
   focusableSelectors,
   topModalOverride,
+  closeButtonDataProps,
   ...rest
 }) => {
   const locale = useLocale();
@@ -51,11 +53,13 @@ export const DialogFullScreen = ({
   const isTopModal = useModalAria(dialogRef);
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
-    return /*#__PURE__*/React.createElement(IconButton, {
-      "data-element": "close",
+    return /*#__PURE__*/React.createElement(IconButton, _extends({
       "aria-label": locale.dialogFullScreen.ariaLabels.close(),
       onClick: onCancel
-    }, /*#__PURE__*/React.createElement(Icon, {
+    }, tagComponent("close", {
+      "data-element": "close",
+      ...closeButtonDataProps
+    })), /*#__PURE__*/React.createElement(Icon, {
       type: "close"
     }));
   };