diff --git a/components/lib/fieldset/Fieldset.css b/components/lib/fieldset/Fieldset.css deleted file mode 100644 index dfb7d553de..0000000000 --- a/components/lib/fieldset/Fieldset.css +++ /dev/null @@ -1,18 +0,0 @@ -.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.js b/components/lib/fieldset/Fieldset.js index bcff15fdef..0225894f5a 100644 --- 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 index cbb8c75395..0dbb9a291b 100644 --- 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 index a531d1ad4b..5e2a0cf99e 100644 --- a/components/lib/fieldset/fieldset.d.ts +++ b/components/lib/fieldset/fieldset.d.ts @@ -160,6 +160,11 @@ export interface FieldsetProps extends Omit