Improve Sidebar custom icon implementation Related - #4220

Add Sidebar icon templating support Related - #4226
primefaces · Apr 6, 2023 · c804e58 · c804e58
1 parent f0b0352
commit c804e58
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.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, ZIndexUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils, ZIndexUtils, IconUtils } from '../utils/Utils';
 import { SidebarBase } from './SidebarBase';
+import { TimesIcon } from '../icon/times';
 
 export const Sidebar = React.forwardRef((inProps, ref) => {
     const props = SidebarBase.getProps(inProps);
@@ -160,12 +161,15 @@ export const Sidebar = React.forwardRef((inProps, ref) => {
     });
 
     const createCloseIcon = () => {
-        if (props.showCloseIcon) {
-            const ariaLabel = props.ariaCloseLabel || localeOption('close');
+        const iconClassName = 'p-sidebar-close-icon';
+        const icon = props.closeIcon || <TimesIcon className={iconClassName} />;
+        const closeIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });
+        const ariaLabel = props.ariaCloseLabel || localeOption('close');
 
+        if (props.showCloseIcon) {
             return (
                 <button type="button" ref={closeIconRef} className="p-sidebar-close p-sidebar-icon p-link" onClick={onClose} aria-label={ariaLabel}>
-                    <span className="p-sidebar-close-icon pi pi-times" aria-hidden="true" />
+                    {closeIcon}
                     <Ripple />
                 </button>
             );

diff --git a/components/lib/sidebar/SidebarBase.js b/components/lib/sidebar/SidebarBase.js
@@ -15,6 +15,7 @@ export const SidebarBase = {
         baseZIndex: 0,
         dismissable: true,
         showCloseIcon: true,
+        closeIcon: null,
         ariaCloseLabel: null,
         closeOnEscape: true,
         icons: null,

diff --git a/components/lib/sidebar/sidebar.d.ts b/components/lib/sidebar/sidebar.d.ts
@@ -9,6 +9,7 @@
  */
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
+import { IconType } from '../utils';
 
 /**
  * Defines valid properties in Sidebar component. In addition to these, all properties of HTMLDivElement can be used in this component.
@@ -58,6 +59,10 @@ export interface SidebarProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
      * @defaultValue true
      */
     showCloseIcon?: boolean | undefined;
+    /**
+     * Icon of the close button.
+     */
+    closeIcon?: IconType<SidebarProps> | undefined;
     /**
      * Aria label of the close icon.
      * @defaultValue close