Refactor #5437 - For ConfirmDialog/ConfirmPopup

components/lib/confirmdialog/BaseConfirmDialog.vue

@@ -14,6 +14,20 @@ export default {
         draggable: {
             type: Boolean,
             default: true
+        },
+        rejectButtonProps: {
+            type: Object,
+            default() {
+                return {
+                    text: true
+                };
+            }
+        },
+        acceptButtonProps: {
+            type: Object,
+            default() {
+                return {};
+            }
         }
     },
     style: ConfirmDialogStyle,

components/lib/confirmdialog/ConfirmDialog.d.ts

@@ -9,7 +9,7 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptions } from '../button';
+import { ButtonPassThroughOptions, ButtonProps } from '../button';
 import { ConfirmationOptions } from '../confirmationoptions';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@@ -184,6 +184,18 @@ export interface ConfirmDialogProps {
      * @defaultValue true
      */
     draggable?: boolean | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the reject button inside the component.
+     * @type {ButtonProps}
+     * @defaultValue { text: true }
+     */
+    rejectButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the accept button inside the component.
+     * @type {ButtonProps}
+     * @defaultValue {}
+     */
+    acceptButtonProps?: object | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {ConfirmDialogPassThroughOptions}

components/lib/confirmdialog/ConfirmDialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <CDialog
+    <Dialog
         v-model:visible="visible"
         role="alertdialog"
         :class="cx('root')"
@@ -28,22 +28,22 @@
             <component v-else :is="$slots.message" :message="confirmation"></component>
         </template>
         <template v-if="!$slots.container" #footer>
-            <CDButton :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :text="!confirmation.rejectClass" :autofocus="autoFocusReject" :unstyled="unstyled" :pt="ptm('rejectButton')">
+            <Button :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :autofocus="autoFocusReject" :unstyled="unstyled" v-bind="rejectButtonProps" :pt="ptm('rejectButton')" :text="rejectButtonProps.text">
                 <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                     <slot name="rejecticon">
                         <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
                     </slot>
                 </template>
-            </CDButton>
+            </Button>
-            <CDButton :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" @click="accept()" :autofocus="autoFocusAccept" :unstyled="unstyled" :pt="ptm('acceptButton')">
+            <Button :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" @click="accept()" :autofocus="autoFocusAccept" :unstyled="unstyled" v-bind="acceptButtonProps" :pt="ptm('acceptButton')">
                 <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
                     <slot name="accepticon">
                         <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />
                     </slot>
                 </template>
-            </CDButton>
+            </Button>
         </template>
-    </CDialog>
+    </Dialog>
 </template>
 
 <script>
@@ -132,10 +132,10 @@ export default {
             return this.confirmation ? this.confirmation.position : null;
         },
         acceptLabel() {
-            return this.confirmation ? this.confirmation.acceptLabel || this.$primevue.config.locale.accept : null;
+            return this.confirmation ? this.confirmation.acceptLabel || this.acceptButtonProps.label || this.$primevue.config.locale.accept : null;
         },
         rejectLabel() {
-            return this.confirmation ? this.confirmation.rejectLabel || this.$primevue.config.locale.reject : null;
+            return this.confirmation ? this.confirmation.rejectLabel || this.rejectButtonProps.label || this.$primevue.config.locale.reject : null;
         },
         acceptIcon() {
             return this.confirmation ? this.confirmation.acceptIcon : null;
@@ -154,8 +154,8 @@ export default {
         }
     },
     components: {
-        CDialog: Dialog,
+        Dialog,
-        CDButton: Button
+        Button
     }
 };
 </script>

components/lib/confirmpopup/BaseConfirmPopup.vue

@@ -6,7 +6,24 @@ export default {
     name: 'BaseConfirmPopup',
     extends: BaseComponent,
     props: {
-        group: String
+        group: String,
+        rejectButtonProps: {
+            type: Object,
+            default() {
+                return {
+                    size: 'small',
+                    text: true
+                };
+            }
+        },
+        acceptButtonProps: {
+            type: Object,
+            default() {
+                return {
+                    size: 'small'
+                };
+            }
+        }
     },
     style: ConfirmPopupStyle,
     provide() {

components/lib/confirmpopup/ConfirmPopup.d.ts

@@ -9,7 +9,7 @@
  */
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptions } from '../button';
+import { ButtonPassThroughOptions, ButtonProps } from '../button';
 import { ConfirmationOptions } from '../confirmationoptions';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@@ -138,6 +138,18 @@ export interface ConfirmPopupProps {
      * Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.
      */
     group?: string;
+    /**
+     * Used to pass all properties of the ButtonProps to the reject button inside the component.
+     * @type {ButtonProps}
+     * @defaultValue { size: 'small', text: true }
+     */
+    rejectButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the accept button inside the component.
+     * @type {ButtonProps}
+     * @defaultValue { size: 'small' }
+     */
+    acceptButtonProps?: object | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {ConfirmPopupPassThroughOptions}

components/lib/confirmpopup/ConfirmPopup.vue

@@ -15,39 +15,41 @@
                     </template>
                     <component v-else :is="$slots.message" :message="confirmation"></component>
                     <div :class="cx('footer')" v-bind="ptm('footer')">
-                        <CPButton
+                        <Button
                             :label="rejectLabel"
                             @click="reject()"
                             @keydown="onRejectKeydown"
                             :autofocus="autoFocusReject"
                             :class="[cx('rejectButton'), confirmation.rejectClass]"
-                            :size="{ small: !confirmation.rejectClass }"
-                            :text="!confirmation.rejectClass"
                             :unstyled="unstyled"
+                            v-bind="rejectButtonProps"
                             :pt="ptm('rejectButton')"
+                            :size="rejectButtonProps.size"
+                            :text="rejectButtonProps.text"
                         >
                             <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                                 <slot name="rejecticon">
                                     <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
                                 </slot>
                             </template>
-                        </CPButton>
+                        </Button>
-                        <CPButton
+                        <Button
                             :label="acceptLabel"
                             @click="accept()"
                             @keydown="onAcceptKeydown"
                             :autofocus="autoFocusAccept"
                             :class="[cx('acceptButton'), confirmation.acceptClass]"
-                            :size="{ small: !confirmation.acceptClass }"
                             :unstyled="unstyled"
+                            v-bind="acceptButtonProps"
                             :pt="ptm('acceptButton')"
+                            :size="acceptButtonProps.size"
                         >
                             <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
                                 <slot name="accepticon">
                                     <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />
                                 </slot>
                             </template>
-                        </CPButton>
+                        </Button>
                     </div>
                 </template>
             </div>
@@ -298,10 +300,10 @@ export default {
             return this.confirmation ? this.confirmation.message : null;
         },
         acceptLabel() {
-            return this.confirmation ? this.confirmation.acceptLabel || this.$primevue.config.locale.accept : null;
+            return this.confirmation ? this.confirmation.acceptLabel || this.acceptButtonProps.label || this.$primevue.config.locale.accept : null;
         },
         rejectLabel() {
-            return this.confirmation ? this.confirmation.rejectLabel || this.$primevue.config.locale.reject : null;
+            return this.confirmation ? this.confirmation.rejectLabel || this.rejectButtonProps.label || this.$primevue.config.locale.reject : null;
         },
         acceptIcon() {
             return this.confirmation ? this.confirmation.acceptIcon : null;
@@ -311,8 +313,8 @@ export default {
         }
     },
     components: {
-        CPButton: Button,
+        Button,
-        Portal: Portal
+        Portal
     },
     directives: {
         focustrap: FocusTrap