Refactor #4602 - for Fieldset

primefaces · Jul 5, 2023 · 3e2bb20 · 3e2bb20
1 parent 2cb1e37
commit 3e2bb20
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 38 deletions.
diff --git a/components/lib/fieldset/Fieldset.css b/components/lib/fieldset/Fieldset.css
diff --git a/components/lib/fieldset/Fieldset.js b/components/lib/fieldset/Fieldset.js
@@ -1,17 +1,16 @@
 import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
-import { useMountEffect } from '../hooks/Hooks';
+import { useMountEffect, useStyle } from '../hooks/Hooks';
+import { MinusIcon } from '../icons/minus';
+import { PlusIcon } from '../icons/plus';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, IconUtils, mergeProps, UniqueComponentId } from '../utils/Utils';
+import { IconUtils, UniqueComponentId, mergeProps } from '../utils/Utils';
 import { FieldsetBase } from './FieldsetBase';
-import { PlusIcon } from '../icons/plus';
-import { MinusIcon } from '../icons/minus';
-import { PrimeReactContext } from '../api/Api';
 
 export const Fieldset = React.forwardRef((inProps, ref) => {
     const context = React.useContext(PrimeReactContext);
     const props = FieldsetBase.getProps(inProps, context);
-
     const [idState, setIdState] = React.useState(props.id);
     const [collapsedState, setCollapsedState] = React.useState(props.collapsed);
     const collapsed = props.toggleable ? (props.onToggle ? props.collapsed : collapsedState) : false;
@@ -20,7 +19,9 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
     const headerId = idState + '_header';
     const contentId = idState + '_content';
 
-    const { ptm } = FieldsetBase.setMetaData({
+    useStyle(FieldsetBase.css.styles, { name: 'primereact_fieldset_style' });
+
+    const { ptm, cx } = FieldsetBase.setMetaData({
         props,
         state: {
             id: idState,
@@ -68,7 +69,7 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
     const createContent = () => {
         const contentProps = mergeProps(
             {
-                className: 'p-fieldset-content'
+                className: cx('content')
             },
             ptm('content')
         );
@@ -80,7 +81,7 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
                 'aria-hidden': collapsed,
                 role: 'region',
                 'aria-labelledby': headerId,
-                className: 'p-toggleable-content'
+                className: cx('toggleableContent')
             },
             ptm('toggleableContent')
         );
@@ -98,7 +99,7 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
         if (props.toggleable) {
             const togglerIconProps = mergeProps(
                 {
-                    className: 'p-fieldset-toggler'
+                    className: cx('togglericon')
                 },
                 ptm('togglericon')
             );
@@ -115,7 +116,7 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
     const createLegendContent = () => {
         const legendTextProps = mergeProps(
             {
-                className: 'p-fieldset-legend-text'
+                className: cx('legendTitle')
             },
             ptm('legendTitle')
         );
@@ -153,7 +154,7 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
     const createLegend = () => {
         const legendProps = mergeProps(
             {
-                className: 'p-fieldset-legend p-unselectable-text',
+                className: cx('legend'),
                 onClick: toggle
             },
 
@@ -178,13 +179,7 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
             id: idState,
             ref: elementRef,
             style: props.style,
-            className: classNames(
-                'p-fieldset p-component',
-                {
-                    'p-fieldset-toggleable': props.toggleable
-                },
-                props.className
-            ),
+            className: cx('root'),
             onClick: props.onClick
         },
         FieldsetBase.getOtherProps(props),

diff --git a/components/lib/fieldset/FieldsetBase.js b/components/lib/fieldset/FieldsetBase.js
@@ -1,4 +1,5 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/utils';
 
 export const FieldsetBase = ComponentBase.extend({
     defaultProps: {
@@ -17,5 +18,38 @@ export const FieldsetBase = ComponentBase.extend({
         onToggle: null,
         onClick: null,
         children: undefined
+    },
+    css: {
+        classes: {
+            root: ({ props }) =>
+                classNames('p-fieldset p-component', {
+                    'p-fieldset-toggleable': props.toggleable
+                }),
+            toggleableContent: 'p-toggleable-content',
+            togglericon: 'p-fieldset-toggler',
+            legendTitle: 'p-fieldset-legend-text',
+            legend: 'p-fieldset-legend p-unselectable-text',
+            content: 'p-fieldset-content'
+        },
+        styles: `
+        .p-fieldset-legend > a,
+        .p-fieldset-legend > span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .p-fieldset-toggleable .p-fieldset-legend a {
+            cursor: pointer;
+            user-select: none;
+            overflow: hidden;
+            position: relative;
+            text-decoration: none;
+        }
+        
+        .p-fieldset-legend-text {
+            line-height: 1;
+        }
+        `
     }
 });
diff --git a/components/lib/fieldset/fieldset.d.ts b/components/lib/fieldset/fieldset.d.ts
@@ -160,6 +160,11 @@ export interface FieldsetProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
      * @type {FieldsetPassThroughOptions}
      */
     pt?: FieldsetPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -19,7 +19,6 @@
 @import "../components/lib/dialog/Dialog.css";
 @import "../components/lib/dropdown/Dropdown.css";
 @import "../components/lib/editor/Editor.css";
-@import "../components/lib/fieldset/Fieldset.css";
 @import "../components/lib/fileupload/FileUpload.css";
 @import "../components/lib/toast/Toast.css";
 @import "../components/lib/inplace/Inplace.css";