Add Dialog icon templating support Related - #4226

primefaces · Apr 11, 2023 · 6c7c30f · 6c7c30f
1 parent a2c0d49
commit 6c7c30f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
@@ -4,8 +4,9 @@ import { CSSTransition } from '../csstransition/CSSTransition';
 import { useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { classNames, DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
 import { DialogBase } from './DialogBase';
+import { TimesIcon } from '../icon/times';
 
 export const Dialog = React.forwardRef((inProps, ref) => {
     const props = DialogBase.getProps(inProps);
@@ -412,10 +413,13 @@ export const Dialog = React.forwardRef((inProps, ref) => {
     const createCloseIcon = () => {
         if (props.closable) {
             const ariaLabel = props.ariaCloseIconLabel || localeOption('close');
+            const iconProps = { className: 'p-dialog-header-close-icon', 'aria-hidden': true };
+            const icon = props.closeIcon || <TimesIcon {...iconProps} />;
+            const headerCloseIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
 
             return (
                 <button ref={closeRef} type="button" className="p-dialog-header-icon p-dialog-header-close p-link" aria-label={ariaLabel} onClick={onClose}>
-                    <span className="p-dialog-header-close-icon pi pi-times" aria-hidden="true"></span>
+                    {headerCloseIcon}
                     <Ripple />
                 </button>
             );

diff --git a/components/lib/dialog/DialogBase.js b/components/lib/dialog/DialogBase.js
@@ -10,6 +10,7 @@ export const DialogBase = {
         breakpoints: null,
         className: null,
         closable: true,
+        closeIcon: null,
         closeOnEscape: true,
         contentClassName: null,
         contentStyle: null,

diff --git a/components/lib/dialog/dialog.d.ts b/components/lib/dialog/dialog.d.ts
@@ -9,6 +9,7 @@
  */
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
+import { IconType } from '../utils/utils';
 
 /**
  * Dialog break options
@@ -119,6 +120,10 @@ export interface DialogProps {
      * Style class of the header section.
      */
     headerClassName?: string | undefined;
+    /**
+     * Icon to display in the dialog close button.
+     */
+    closeIcon?: IconType<DialogProps> | undefined;
     /**
      * Style of the header section.
      */

diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
@@ -84,7 +84,7 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
      */
     className?: string | undefined;
     /**
-     * Icon class of the dropdown icon.
+     * Icon of the dropdown.
      */
     clearIcon?: IconType<DropdownProps> | undefined;
     /**