Fix #11929: Confirm add yes/no icon handling (#11981)

primefaces · May 22, 2024 · 380a939 · 380a939
1 parent e0b2fcf
commit 380a939
Show file tree

Hide file tree

Showing 12 changed files with 189 additions and 89 deletions.
diff --git a/docs/15_0_0/gettingstarted/whatsnew.md b/docs/15_0_0/gettingstarted/whatsnew.md
@@ -19,8 +19,10 @@ Look into [migration guide](https://primefaces.github.io/primefaces/15_0_0/#/../
 * ConfirmDialog/ConfirmPopup
     * `yesButtonLabel`: overrides label of 'Yes' button (and restores it before the global confirm dialog is reused elsewhere)
     * `yesButtonClass`: adds given class to 'Yes' button (and removes it before the global confirm dialog is reused elsewhere)
+    * `yesButtonIcon`: overrides icon of 'Yes' button (and removes it before the global confirm dialog is reused elsewhere)
     * `noButtonLabel`: overrides label of 'No' button (and restores it before the global confirm dialog is reused elsewhere)
     * `noButtonClass`: adds given class to 'No' button (and removes it before the global confirm dialog is reused elsewhere)
+    * `noButtonIcon`: overrides icon of 'No' button (and removes it before the global confirm dialog is reused elsewhere)
     * `confirmMessage`: facet on the parent component of the `p:confirm` behavior. Can be used as message content instead of the `p:confirm` `message` attribute.
 
 * FeedReader

diff --git a/primefaces-integration-tests/src/main/webapp/confirmdialog/confirmDialog001.xhtml b/primefaces-integration-tests/src/main/webapp/confirmdialog/confirmDialog001.xhtml
@@ -22,19 +22,21 @@
 				<p:confirm header="Confirmation"
 					message="Do you want to delete this record?"
 					icon="pi pi-info-circle" 
-					yesButtonLabel="Delete Me!"
-					yesButtonClass="bg-red-500 text-white" 
-					noButtonLabel="Keep this!"
-					noButtonClass="bg-green-500 text-white" />
+                    yesButtonLabel="Delete Me!"
+                    yesButtonClass="bg-red-600 text-white" 
+                    yesButtonIcon="pi pi-trash"
+                    noButtonLabel="Keep this!"
+                    noButtonClass="bg-green-600 text-white" 
+                    noButtonIcon="pi pi-heart"/>
 			</p:commandButton>
 
             <p:commandButton id="nonAjax" value="Non-Ajax" action="#{confirmDialog001.nonAjax}" styleClass="ui-button-warning" icon="pi pi-question" ajax="false">
                 <p:confirm header="Confirmation" message="Submit this page and reload?" icon="pi pi-question-circle"/>
             </p:commandButton>
 
             <p:confirmDialog id="confirmdialog" global="true" showEffect="fade" hideEffect="fade" responsive="true" width="350">
-                <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes"/>
-                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no ui-button-flat"/>
+                <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="pi pi-check"/>
+                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no ui-button-flat" icon="pi pi-times"/>
             </p:confirmDialog>
         </h:form>
 

diff --git a/primefaces-integration-tests/src/main/webapp/confirmpopup/confirmPopup001.xhtml b/primefaces-integration-tests/src/main/webapp/confirmpopup/confirmPopup001.xhtml
@@ -23,14 +23,16 @@
                     message="Do you want to delete this record?"
                     icon="pi pi-info-circle" 
                     yesButtonLabel="Delete Me!"
-                    yesButtonClass="bg-red-500 text-white" 
+                    yesButtonClass="bg-red-600 text-white" 
+                    yesButtonIcon="pi pi-trash"
                     noButtonLabel="Keep this!"
-                    noButtonClass="bg-green-500 text-white" />
+                    noButtonClass="bg-green-600 text-white" 
+                    noButtonIcon="pi pi-heart"/>
             </p:commandButton>
 
             <p:confirmPopup id="confirmpopup" global="true" showEffect="fade" hideEffect="fade">
-                <p:commandButton value="Yes" type="button" styleClass="ui-confirm-popup-yes"/>
-                <p:commandButton value="No" type="button" styleClass="ui-confirm-popup-no ui-button-flat"/>
+                <p:commandButton value="Yes" type="button" styleClass="ui-confirm-popup-yes" icon="pi pi-check"/>
+                <p:commandButton value="No" type="button" styleClass="ui-confirm-popup-no ui-button-flat" icon="pi pi-times"/>
             </p:confirmPopup>
         </h:form>
 

diff --git a/...sts/src/test/java/org/primefaces/integrationtests/confirmdialog/ConfirmDialog001Test.java b/...sts/src/test/java/org/primefaces/integrationtests/confirmdialog/ConfirmDialog001Test.java
@@ -29,6 +29,7 @@
 import org.junit.jupiter.api.DisplayName;
 import org.junit.jupiter.api.Order;
 import org.junit.jupiter.api.Test;
+import org.openqa.selenium.By;
 import org.openqa.selenium.ElementClickInterceptedException;
 import org.openqa.selenium.WebDriverException;
 import org.openqa.selenium.support.FindBy;
@@ -99,7 +100,8 @@ void confirmNo(Page page) {
         page.confirm.click();
         CommandButton noButton = dialog.getNoButton();
         assertEquals("No", noButton.getText());
-        assertCss(noButton, "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-confirmdialog-no ui-button-flat");
+        assertCss(noButton, "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-confirmdialog-no ui-button-flat");
+        assertCss(noButton.findElement(By.className("ui-icon")), "ui-button-icon-left ui-icon ui-c pi pi-times");
 
         // Act
         noButton.click();
@@ -119,7 +121,8 @@ void confirmYes(Page page) {
         assertTrue(dialog.isVisible());
         CommandButton yesButton = dialog.getYesButton();
         assertEquals("Yes", yesButton.getText());
-        assertCss(yesButton, "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-confirmdialog-yes");
+        assertCss(yesButton, "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-confirmdialog-yes");
+        assertCss(yesButton.findElement(By.className("ui-icon")), "ui-button-icon-left ui-icon ui-c pi pi-check");
 
         // Act
         PrimeSelenium.guardAjax(yesButton).click();
@@ -140,7 +143,8 @@ void deleteNo(Page page) {
         CommandButton noButton = dialog.getNoButton();
         assertEquals("Keep this!", noButton.getText());
         assertCss(noButton,
-                "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-confirmdialog-no ui-button-flat bg-green-500 text-white");
+                "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-confirmdialog-no ui-button-flat bg-green-600 text-white");
+        assertCss(noButton.findElement(By.className("ui-icon")), "ui-button-icon-left ui-icon ui-c pi pi-heart");
 
         // Act
         dialog.getNoButton().click();
@@ -163,7 +167,8 @@ void deleteYes(Page page) {
         page.delete.click();
         CommandButton yesButton = dialog.getYesButton();
         assertEquals("Delete Me!", yesButton.getText());
-        assertCss(yesButton, "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-confirmdialog-yes bg-red-500 text-white");
+        assertCss(yesButton, "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-confirmdialog-yes bg-red-600 text-white");
+        assertCss(yesButton.findElement(By.className("ui-icon")), "ui-button-icon-left ui-icon ui-c pi pi-trash");
 
         // Act
         PrimeSelenium.guardAjax(yesButton).click();

diff --git a/...tests/src/test/java/org/primefaces/integrationtests/confirmpopup/ConfirmPopup001Test.java b/...tests/src/test/java/org/primefaces/integrationtests/confirmpopup/ConfirmPopup001Test.java
@@ -29,6 +29,7 @@
 import org.junit.jupiter.api.DisplayName;
 import org.junit.jupiter.api.Order;
 import org.junit.jupiter.api.Test;
+import org.openqa.selenium.By;
 import org.openqa.selenium.support.FindBy;
 import org.primefaces.selenium.AbstractPrimePage;
 import org.primefaces.selenium.AbstractPrimePageTest;
@@ -87,7 +88,8 @@ void confirmNo(Page page) {
         CommandButton noButton = popup.getNoButton();
         assertEquals("No", noButton.getText());
         assertCss(noButton,
-                "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-confirm-popup-no ui-button-flat");
+                "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-confirm-popup-no ui-button-flat");
+        assertCss(noButton.findElement(By.className("ui-icon")), "ui-button-icon-left ui-icon ui-c pi pi-times");
 
         // Act
         noButton.click();
@@ -108,7 +110,8 @@ void confirmYes(Page page) {
         page.confirm.click();
         CommandButton yesButton = popup.getYesButton();
         assertEquals("Yes", yesButton.getText());
-        assertCss(yesButton, "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-confirm-popup-yes");
+        assertCss(yesButton, "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-confirm-popup-yes ui-state-focus");
+        assertCss(yesButton.findElement(By.className("ui-icon")), "ui-button-icon-left ui-icon ui-c pi pi-check");
 
         // Act
         PrimeSelenium.guardAjax(yesButton).click();
@@ -130,7 +133,8 @@ void deleteNo(Page page) {
         CommandButton noButton = popup.getNoButton();
         assertEquals("Keep this!", noButton.getText());
         assertCss(noButton,
-                "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-confirm-popup-no ui-button-flat bg-green-500 text-white");
+                "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-confirm-popup-no ui-button-flat bg-green-600 text-white");
+        assertCss(noButton.findElement(By.className("ui-icon")), "ui-button-icon-left ui-icon ui-c pi pi-heart");
 
         // Act
         noButton.click();
@@ -154,7 +158,9 @@ void deleteYes(Page page) {
         page.delete.click();
         CommandButton yesButton = popup.getYesButton();
         assertEquals("Delete Me!", yesButton.getText());
-        assertCss(yesButton, "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-confirm-popup-yes bg-red-500 text-white");
+        assertCss(yesButton,
+                "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-confirm-popup-yes bg-red-600 text-white ui-state-focus");
+        assertCss(yesButton.findElement(By.className("ui-icon")), "ui-button-icon-left ui-icon ui-c pi pi-trash");
 
         // Act
         PrimeSelenium.guardAjax(yesButton).click();

diff --git a/primefaces-showcase/src/main/webapp/ui/overlay/confirmDialog.xhtml b/primefaces-showcase/src/main/webapp/ui/overlay/confirmDialog.xhtml
@@ -25,17 +25,19 @@
                     <p:confirm header="Confirmation" message="Are you sure you want to proceed?" icon="pi pi-exclamation-triangle"/>
                 </p:commandButton>
 
-		<p:commandButton value="Delete" action="#{confirmView.delete}"	update="message" styleClass="ui-button-danger mr-2" icon="pi pi-times">
-                    <p:confirm header="Confirmation"
-				message="Do you want to delete this record?"
-				icon="pi pi-info-circle"
-				yesButtonLabel="Delete Me!"
-				yesButtonClass="bg-red-500 text-white"
-				noButtonLabel="Keep this!"
-				noButtonClass="bg-green-500 text-white" />
-		</p:commandButton>
-
-		<p:commandButton value="Non-Ajax" action="#{confirmView.nonAjax}" styleClass="ui-button-warning mr-2" icon="pi pi-question" ajax="false">
+				<p:commandButton value="Delete" action="#{confirmView.delete}" update="message" styleClass="ui-button-danger mr-2" icon="pi pi-times">
+					<p:confirm header="Confirmation"
+						message="Do you want to delete this record?"
+						icon="pi pi-info-circle" 
+						yesButtonLabel="Delete Me!"
+						yesButtonClass="bg-red-600 text-white" 
+						yesButtonIcon="pi pi-trash"
+						noButtonLabel="Keep this!" 
+						noButtonClass="bg-green-600 text-white"
+						noButtonIcon="pi pi-heart" />
+				</p:commandButton>
+
+				<p:commandButton value="Non-Ajax" action="#{confirmView.nonAjax}" styleClass="ui-button-warning mr-2" icon="pi pi-question" ajax="false">
                     <p:confirm header="Confirmation" message="Submit this page and reload?" icon="pi pi-question-circle"/>
                 </p:commandButton>
 
@@ -49,8 +51,8 @@
                 </p:commandButton>
 
                 <p:confirmDialog global="true" showEffect="fade" hideEffect="fade" responsive="true" width="350">
-                    <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no ui-button-flat"/>
-                    <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" />
+                    <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no ui-button-flat" icon="pi pi-times"/>
+                    <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="pi pi-check"/>
                 </p:confirmDialog>
             </h:form>
         </div>

diff --git a/primefaces-showcase/src/main/webapp/ui/overlay/confirmPopup.xhtml b/primefaces-showcase/src/main/webapp/ui/overlay/confirmPopup.xhtml
@@ -30,18 +30,20 @@
 						message="Do you want to delete this record?"
 						icon="pi pi-info-circle" 
 						yesButtonLabel="Delete Me!"
-						yesButtonClass="bg-red-500 text-white" 
+						yesButtonClass="bg-red-600 text-white" 
+						yesButtonIcon="pi pi-trash"
 						noButtonLabel="Keep this!"
-						noButtonClass="bg-green-500 text-white" />
+						noButtonClass="bg-green-600 text-white" 
+						noButtonIcon="pi pi-heart"/>
 				</p:commandButton>
 
                 <p:commandButton value="Non-Ajax" action="#{confirmView.nonAjax}" styleClass="ui-button-warning" icon="pi pi-question" ajax="false">
                     <p:confirm type="popup" header="Confirmation" message="Submit this page and reload?" icon="pi pi-question-circle"/>
                 </p:commandButton>
 
                 <p:confirmPopup global="true">
-                    <p:commandButton value="No" type="button" styleClass="ui-confirm-popup-no ui-button-flat"/>
-                    <p:commandButton value="Yes" type="button" styleClass="ui-confirm-popup-yes" />
+                    <p:commandButton value="No" type="button" styleClass="ui-confirm-popup-no ui-button-flat" icon="pi pi-times"/>
+                    <p:commandButton value="Yes" type="button" styleClass="ui-confirm-popup-yes" icon="pi pi-check"/>
                 </p:confirmPopup>
             </h:form>
         </div>

diff --git a/primefaces/src/main/java/org/primefaces/behavior/confirm/ConfirmBehavior.java b/primefaces/src/main/java/org/primefaces/behavior/confirm/ConfirmBehavior.java
@@ -46,8 +46,10 @@ public enum PropertyKeys implements BehaviorAttribute {
         icon(String.class),
         yesButtonLabel(String.class),
         yesButtonClass(String.class),
+        yesButtonIcon(String.class),
         noButtonLabel(String.class),
         noButtonClass(String.class),
+        noButtonIcon(String.class),
         disabled(Boolean.class),
         beforeShow(String.class),
         escape(Boolean.class);
@@ -92,8 +94,10 @@ public String getScript(ClientBehaviorContext behaviorContext) {
         String beforeShow = JSONObject.quote(getBeforeShow());
         String yesButtonClass = JSONObject.quote(getYesButtonClass());
         String yesButtonLabel = JSONObject.quote(getYesButtonLabel());
+        String yesButtonIcon = JSONObject.quote(getYesButtonIcon());
         String noButtonClass = JSONObject.quote(getNoButtonClass());
         String noButtonLabel = JSONObject.quote(getNoButtonLabel());
+        String noButtonIcon = JSONObject.quote(getNoButtonIcon());
 
         source = (source == null) ? component.getClientId(context) : source;
 
@@ -108,8 +112,10 @@ public String getScript(ClientBehaviorContext behaviorContext) {
                                                    + ",message:" + messageText
                                                    + ",yesButtonClass:" + yesButtonClass
                                                    + ",yesButtonLabel:" + yesButtonLabel
+                                                   + ",yesButtonIcon:" + yesButtonIcon
                                                    + ",noButtonClass:" + noButtonClass
                                                    + ",noButtonLabel:" + noButtonLabel
+                                                   + ",noButtonIcon:" + noButtonIcon
                                                    + ",icon:\"" + (icon == null ? "" : icon)
                                                    + "\",beforeShow:" + beforeShow
                                                    + "});return false;";
@@ -208,6 +214,14 @@ public void setYesButtonClass(String yesButtonClass) {
         put(PropertyKeys.yesButtonClass, yesButtonClass);
     }
 
+    public String getYesButtonIcon() {
+        return eval(PropertyKeys.yesButtonIcon, null);
+    }
+
+    public void setYesButtonIcon(String yesButtonIcon) {
+        put(PropertyKeys.yesButtonIcon, yesButtonIcon);
+    }
+
     public String getNoButtonLabel() {
         return eval(PropertyKeys.noButtonLabel, null);
     }
@@ -223,4 +237,12 @@ public String getNoButtonClass() {
     public void setNoButtonClass(String noButtonClass) {
         put(PropertyKeys.noButtonClass, noButtonClass);
     }
+
+    public String getNoButtonIcon() {
+        return eval(PropertyKeys.noButtonIcon, null);
+    }
+
+    public void setNoButtonIcon(String noButtonIcon) {
+        put(PropertyKeys.noButtonIcon, noButtonIcon);
+    }
 }
diff --git a/primefaces/src/main/resources/META-INF/primefaces.taglib.xml b/primefaces/src/main/resources/META-INF/primefaces.taglib.xml
@@ -545,6 +545,12 @@
             <required>false</required>
             <type>java.lang.String</type>
         </attribute>
+        <attribute>
+            <description><![CDATA[Overrides icon of 'Yes' button (and removes it before the global confirm dialog is reused elsewhere)]]></description>
+            <name>yesButtonIcon</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
         <attribute>
             <description><![CDATA[Overrides label of 'No' button (and restores it before the global confirm dialog is reused elsewhere)]]></description>
             <name>noButtonLabel</name>
@@ -557,6 +563,12 @@
             <required>false</required>
             <type>java.lang.String</type>
         </attribute>
+        <attribute>
+            <description><![CDATA[Overrides icon of 'No' button (and removes it before the global confirm dialog is reused elsewhere)]]></description>
+            <name>noButtonIcon</name>
+            <required>false</required>
+            <type>java.lang.String</type>
+        </attribute>
         <attribute>
             <description>
                 <![CDATA[Callback to execute before displaying confirmation dialog. Return false to prevent dialog from appearing.]]>