Merge pull request #6388 from Sage/FE-6251_data-props-confirms-buttons

feat(confirm): make data tag props available on cancel and confirm buttons - FE-6251

src/components/confirm/confirm.component.tsx

@@ -8,6 +8,7 @@ import Button from "../button/button.component";
 import Icon, { IconType } from "../icon";
 import Loader from "../loader";
 import useLocale from "../../hooks/__internal__/useLocale";
+import tagComponent, { TagProps } from "../../__internal__/utils/helpers/tags";
 
 export interface ConfirmProps
   extends Omit<
@@ -55,6 +56,10 @@ export interface ConfirmProps
   confirmButtonIconPosition?: "before" | "after";
   /** Defines an Icon type within the confirm button (see Icon for options) */
   confirmButtonIconType?: IconType;
+  /** Data tag prop bag for cancelButton */
+  cancelButtonDataProps?: TagProps;
+  /** Data tag prop bag for confirmButton */
+  confirmButtonDataProps?: TagProps;
   /** Makes cancel button disabled */
   disableCancel?: boolean;
   /** Makes confirm button disabled */
@@ -81,6 +86,8 @@ export const Confirm = ({
   cancelButtonIconPosition,
   confirmButtonIconType,
   confirmButtonIconPosition,
+  cancelButtonDataProps,
+  confirmButtonDataProps,
   cancelLabel,
   onCancel,
   disableCancel,
@@ -122,12 +129,15 @@ export const Confirm = ({
             ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
           ) => void
         }
-        data-element="cancel"
         buttonType={cancelButtonType}
         destructive={cancelButtonDestructive}
         disabled={disableCancel}
         iconType={cancelButtonIconType}
         iconPosition={cancelButtonIconPosition}
+        {...tagComponent("cancel", {
+          "data-element": "cancel",
+          ...cancelButtonDataProps,
+        })}
       >
         {cancelLabel || l.confirm.no()}
       </Button>
@@ -142,13 +152,16 @@ export const Confirm = ({
           ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
         ) => void
       }
-      data-element="confirm"
       buttonType={confirmButtonType}
       destructive={confirmButtonDestructive}
       disabled={isLoadingConfirm || disableConfirm}
       ml={2}
       iconType={confirmButtonIconType}
       iconPosition={confirmButtonIconPosition}
+      {...tagComponent("confirm", {
+        "data-element": "confirm",
+        ...confirmButtonDataProps,
+      })}
     >
       {isLoadingConfirm ? (
         <Loader isInsideButton isActive />

src/components/confirm/confirm.pw.tsx

@@ -495,6 +495,38 @@ test.describe("should render Confirm component", () => {
       "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
     );
   });
+
+  test(`should check custom data tags are correctly applied to their respective buttons`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(
+      <ConfirmComponent
+        onCancel={() => {}}
+        onConfirm={() => {}}
+        cancelButtonDataProps={{
+          "data-element": "bang",
+          "data-role": "wallop",
+        }}
+        confirmButtonDataProps={{
+          "data-element": "bar",
+          "data-role": "wiz",
+        }}
+        open
+      />
+    );
+
+    const cancelButton = getDataElementByValue(page, "bang");
+    const confirmButton = getDataElementByValue(page, "bar");
+
+    await expect(cancelButton).toHaveAttribute("data-component", "cancel");
+    await expect(cancelButton).toHaveAttribute("data-element", "bang");
+    await expect(cancelButton).toHaveAttribute("data-role", "wallop");
+
+    await expect(confirmButton).toHaveAttribute("data-component", "confirm");
+    await expect(confirmButton).toHaveAttribute("data-element", "bar");
+    await expect(confirmButton).toHaveAttribute("data-role", "wiz");
+  });
 });
 
 test.describe("should render Confirm component for event tests", () => {

src/components/confirm/confirm.spec.tsx

@@ -14,6 +14,7 @@ import IconButton from "../icon-button";
 import StyledIconButton from "../icon-button/icon-button.style";
 import { StyledDialog } from "../dialog/dialog.style";
 import Logger from "../../__internal__/utils/logger";
+import { rootTagTest } from "../../__internal__/utils/helpers/tags/tags-specs";
 
 // mock Logger.deprecate so that no console warnings occur while running the tests
 const loggerSpy = jest.spyOn(Logger, "deprecate");
@@ -490,4 +491,35 @@ describe("Confirm", () => {
       )
     );
   });
+
+  it("has proper data attributes applied to elements", () => {
+    wrapper = mount(
+      <Confirm
+        cancelButtonIconType="bin"
+        onCancel={() => {}}
+        onConfirm={() => {}}
+        cancelButtonDataProps={{
+          "data-element": "bang",
+          "data-role": "wallop",
+        }}
+        confirmButtonDataProps={{
+          "data-element": "bar",
+          "data-role": "wiz",
+        }}
+        open
+      />
+    );
+    const cancelButton = wrapper
+      .find(Button)
+      .filter('[data-component="cancel"]')
+      .at(0);
+
+    const confirmButton = wrapper
+      .find(Button)
+      .filter('[data-component="confirm"]')
+      .at(0);
+
+    rootTagTest(cancelButton, "cancel", "bang", "wallop");
+    rootTagTest(confirmButton, "confirm", "bar", "wiz");
+  });
 });

src/components/confirm/confirm.stories.mdx

@@ -106,6 +106,12 @@ Allows to set variant which is supported in `<Button />` and it will be applied
   <Story name="isLoadingConfirm" story={stories.IsLoadingConfirm} />
 </Canvas>
 
+### Confirm with Custom Data Tags
+
+<Canvas>
+  <Story name="data tags" story={stories.DefaultWithCustomDataTags} />
+</Canvas>
+
 ## Props
 
 ### Confirm

src/components/confirm/confirm.stories.tsx

@@ -25,6 +25,33 @@ export const Default = () => {
   );
 };
 
+export const DefaultWithCustomDataTags = () => {
+  const [isOpen, setIsOpen] = useState(defaultOpenState);
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Confirm</Button>
+      <Confirm
+        cancelButtonDestructive
+        title="Are you sure?"
+        subtitle="Subtitle"
+        open={isOpen}
+        onConfirm={() => setIsOpen(false)}
+        onCancel={() => setIsOpen(false)}
+        cancelButtonDataProps={{
+          "data-element": "bang",
+          "data-role": "wallop",
+        }}
+        confirmButtonDataProps={{
+          "data-element": "bar",
+          "data-role": "wiz",
+        }}
+      >
+        Content
+      </Confirm>
+    </>
+  );
+};
+
 export const SingleAction = () => {
   const [isOpen, setIsOpen] = useState(defaultOpenState);
   return (