diff --git a/components/lib/tag/Tag.css b/components/lib/tag/Tag.css deleted file mode 100644 index dc1bd3328f..0000000000 --- a/components/lib/tag/Tag.css +++ /dev/null @@ -1,15 +0,0 @@ -.p-tag { - display: inline-flex; - align-items: center; - justify-content: center; -} - -.p-tag-icon, -.p-tag-value, -.p-tag-icon.pi { - line-height: 1.5; -} - -.p-tag.p-tag-rounded { - border-radius: 10rem; -} \ No newline at end of file diff --git a/components/lib/tag/Tag.js b/components/lib/tag/Tag.js index d084ef8c23..c14841e2a6 100644 --- a/components/lib/tag/Tag.js +++ b/components/lib/tag/Tag.js @@ -1,28 +1,24 @@ import * as React from 'react'; +import { PrimeReactContext } from '../api/Api'; +import { useStyle } from '../hooks/Hooks'; import { classNames, IconUtils, mergeProps } from '../utils/Utils'; import { TagBase } from './TagBase'; -import { PrimeReactContext } from '../api/Api'; export const Tag = React.forwardRef((inProps, ref) => { const context = React.useContext(PrimeReactContext); const props = TagBase.getProps(inProps, context); - const { ptm } = TagBase.setMetaData({ + + useStyle(TagBase.css.styles, { name: 'primereact_tag_style' }); + + const { ptm, cx } = TagBase.setMetaData({ props }); const elementRef = React.useRef(null); - const className = classNames( - 'p-tag p-component', - { - [`p-tag-${props.severity}`]: props.severity !== null, - 'p-tag-rounded': props.rounded - }, - props.className - ); const iconProps = mergeProps( { - className: 'p-tag-icon' + className: cx('icon') }, ptm('icon') ); @@ -37,7 +33,7 @@ export const Tag = React.forwardRef((inProps, ref) => { const rootProps = mergeProps( { ref: elementRef, - className, + className: cx('root'), style: props.style }, TagBase.getOtherProps(props), @@ -46,7 +42,7 @@ export const Tag = React.forwardRef((inProps, ref) => { const valueProps = mergeProps( { - className: 'p-tag-value' + className: cx('value') }, ptm('value') ); diff --git a/components/lib/tag/TagBase.js b/components/lib/tag/TagBase.js index 67d172ec4f..7a7b4ba4f2 100644 --- a/components/lib/tag/TagBase.js +++ b/components/lib/tag/TagBase.js @@ -1,4 +1,5 @@ import { ComponentBase } from '../componentbase/ComponentBase'; +import { classNames } from '../utils/utils'; export const TagBase = ComponentBase.extend({ defaultProps: { @@ -10,5 +11,37 @@ export const TagBase = ComponentBase.extend({ style: null, className: null, children: undefined + }, + css: { + classes: { + value: 'p-tag-value', + icon: 'p-tag-icon', + root: ({ props }) => + classNames( + 'p-tag p-component', + { + [`p-tag-${props.severity}`]: props.severity !== null, + 'p-tag-rounded': props.rounded + }, + props.className + ) + }, + styles: ` + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, + .p-tag-value, + .p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } + ` } }); diff --git a/components/lib/tag/tag.d.ts b/components/lib/tag/tag.d.ts index 9d8c29ff90..ea242ae23b 100644 --- a/components/lib/tag/tag.d.ts +++ b/components/lib/tag/tag.d.ts @@ -71,6 +71,11 @@ export interface TagProps extends Omit