Refactor #4602 - for Tag

primefaces · Jul 10, 2023 · f8099b0 · f8099b0
1 parent 3e94b9c
commit f8099b0
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 29 deletions.
diff --git a/components/lib/tag/Tag.css b/components/lib/tag/Tag.css
diff --git 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
@@ -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
@@ -71,6 +71,11 @@ export interface TagProps extends Omit<React.DetailedHTMLProps<React.HTMLAttribu
      * @type {TagPassThroughOptions}
      */
     pt?: TagPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -58,7 +58,6 @@
 @import "../components/lib/timeline/Timeline.css";
 @import "../components/lib/avatar/Avatar.css";
 @import "../components/lib/avatargroup/AvatarGroup.css";
-@import "../components/lib/tag/Tag.css";
 @import "../components/lib/divider/Divider.css";
 @import "../components/lib/splitter/Splitter.css";
 @import "../components/lib/confirmpopup/ConfirmPopup.css";