Fix delete button non-icon layout and support custom text (#38)

- fix `DeleteAction` component layout when it's
  supposed to render a button (`iconOnly == false`)
- add support for custom text in button

Author: freestingo

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- the `DeleteAction` component now correctly displays the delete button, and supports custom text.
+
 ## [2.8.0] - 2023-09-05
 
 ### Fixed

cypress/cypress/component/DeleteAction/DeleteAction.cy.tsx

@@ -4,6 +4,7 @@ import { faker } from "@faker-js/faker";
 
 describe("DeleteAction.cy.tsx", () => {
   it("delete action works", () => {
+    const buttonText = faker.random.word();
     const deleteButtonText = faker.random.word();
     const cancelButtonText = faker.random.word();
     const text = faker.random.words(10);
@@ -12,23 +13,24 @@ describe("DeleteAction.cy.tsx", () => {
     cy.mount(
       <DeleteAction
         onDelete={cy.spy().as("onDelete")}
+        buttonText={buttonText}
         deleteButtonText={deleteButtonText}
         cancelButtonText={cancelButtonText}
         text={text}
         title={title}
-        iconOnly
       />,
     );
 
-    // Check if correct default icon is drawn, open dialog, check title and press close icon
-    cy.get("[data-cy-root] > svg").should("have.class", "fa-trash").click();
+    // Check if correct default icon and text are drawn, open dialog, check title and press close icon
+    cy.get("[data-cy-root]").parents("body").get(".btn-danger").should("have.text", buttonText);
+    cy.get("[data-cy-root] svg").should("have.class", "fa-trash").click();
     cy.get("[data-cy-root]").parents("body").get(".modal-dialog .modal-header h5").should("have.text", title);
     cy.get("[data-cy-root]").parents("body").get(".modal-dialog .modal-header button.btn-close").click();
     cy.get("@onDelete").should("not.be.calledOn");
     cy.get("[data-cy-root]").parents("body").get(".modal-dialog").should("not.exist");
 
     // Open dialog, check text, cancel button and press cancel button
-    cy.get("[data-cy-root] > svg").should("have.class", "fa-trash").click();
+    cy.get("[data-cy-root] svg").should("have.class", "fa-trash").click();
     cy.get("[data-cy-root]").parents("body").get(".modal-dialog .modal-body").should("have.text", text);
     cy.get("[data-cy-root]")
       .parents("body")
@@ -39,7 +41,7 @@ describe("DeleteAction.cy.tsx", () => {
     cy.get("[data-cy-root]").parents("body").get(".modal-dialog").should("not.exist");
 
     // Open dialog, check delete button and press delete button
-    cy.get("[data-cy-root] > svg").should("have.class", "fa-trash").click();
+    cy.get("[data-cy-root] svg").should("have.class", "fa-trash").click();
     cy.get("[data-cy-root]").parents("body").get(".modal-dialog .modal-footer .btn-danger").should("have.text", deleteButtonText).click();
     cy.get("@onDelete").should("be.calledOnce");
   });

src/lib/DeleteAction/DeleteAction.tsx

@@ -6,6 +6,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
 interface DeleteActionProps {
   title?: string;
   text?: string;
+  buttonText?: string;
   deleteButtonText?: string;
   cancelButtonText?: string;
   iconOnly?: boolean;
@@ -15,6 +16,7 @@ interface DeleteActionProps {
 function DeleteAction({
   title = "Delete Entry",
   text = "Are you sure to Delete this Entry?",
+  buttonText = "Delete",
   deleteButtonText = "Delete",
   cancelButtonText = "Cancel",
   iconOnly = false,
@@ -29,8 +31,9 @@ function DeleteAction({
       {iconOnly ? (
         <FontAwesomeIcon icon={faTrash} style={{ marginRight: "5px", cursor: "pointer" }} onClick={toggle} />
       ) : (
-        <Button color="danger" close onClick={toggle}>
-          <FontAwesomeIcon icon={faTrash} />
+        <Button color="danger" onClick={toggle}>
+          <FontAwesomeIcon style={{ marginRight: "5px" }} icon={faTrash} />
+          {buttonText}
         </Button>
       )}
       <Modal isOpen={showModal} toggle={toggle}>