Add Fieldset icon templating support Related - #4226

primefaces · Apr 12, 2023 · 7a4dba8 · 7a4dba8
1 parent 26d6817
commit 7a4dba8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/components/lib/fieldset/Fieldset.js b/components/lib/fieldset/Fieldset.js
@@ -2,8 +2,10 @@ import * as React from 'react';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useMountEffect } from '../hooks/Hooks';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, UniqueComponentId } from '../utils/Utils';
+import { classNames, IconUtils, UniqueComponentId } from '../utils/Utils';
 import { FieldsetBase } from './FieldsetBase';
+import { PlusIcon } from '../icon/plus';
+import { MinusIcon } from '../icon/minus';
 
 export const Fieldset = React.forwardRef((inProps, ref) => {
     const props = FieldsetBase.getProps(inProps);
@@ -65,12 +67,12 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
 
     const createToggleIcon = () => {
         if (props.toggleable) {
-            const className = classNames('p-fieldset-toggler pi', {
-                'pi-plus': collapsed,
-                'pi-minus': !collapsed
-            });
+            const iconClassName = "p-fieldset-toggler";
 
-            return <span className={className}></span>;
+            const icon = collapsed ? props.expandIcon || <PlusIcon className={iconClassName} /> : props.collapseIcon || <MinusIcon className={iconClassName} />;
+            const toggleIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });
+
+            return toggleIcon;
         }
 
         return null;

diff --git a/components/lib/fieldset/FieldsetBase.js b/components/lib/fieldset/FieldsetBase.js
@@ -9,7 +9,9 @@ export const FieldsetBase = {
         style: null,
         toggleable: null,
         collapsed: null,
+        collapseIcon: null,
         transitionOptions: null,
+        expandIcon: null,
         onExpand: null,
         onCollapse: null,
         onToggle: null,

diff --git a/components/lib/fieldset/fieldset.d.ts b/components/lib/fieldset/fieldset.d.ts
@@ -9,6 +9,7 @@
  */
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
+import { IconType } from '../utils/utils';
 
 /**
  * Custom toggle event.
@@ -45,11 +46,19 @@ export interface FieldsetProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
      * @defaultValue false
      */
     collapsed?: boolean | undefined;
+    /**
+     * Icon of an expanded tab.
+     */
+    collapseIcon?: IconType<FieldsetProps> | undefined;
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      * @type {CSSTransitionProps}
      */
     transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Icon of an collapsed tab.
+     */
+    expandIcon?: IconType<FieldsetProps> | undefined;
     /**
      * Callback to invoke when a tab gets expanded.
      * @param {React.MouseEvent<HTMLElement>} event - Browser event.