Refactor #4602 - for Chip

primefaces · Jul 6, 2023 · 503f404 · 503f404
1 parent eac31f5
commit 503f404
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 38 deletions.
diff --git a/components/lib/chip/Chip.css b/components/lib/chip/Chip.css
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
-import { ChipBase } from './ChipBase';
-import { TimesCircleIcon } from '../icons/timescircle';
 import { PrimeReactContext } from '../api/Api';
+import { useStyle } from '../hooks/Hooks';
+import { TimesCircleIcon } from '../icons/timescircle';
+import { IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
+import { ChipBase } from './ChipBase';
 
 export const Chip = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -12,7 +13,9 @@ export const Chip = React.memo(
         const elementRef = React.useRef(null);
         const [visibleState, setVisibleState] = React.useState(true);
 
-        const { ptm } = ChipBase.setMetaData({
+        useStyle(ChipBase.css.styles, { name: 'primereact_chip_style' });
+
+        const { ptm, cx } = ChipBase.setMetaData({
             props
         });
 
@@ -38,7 +41,7 @@ export const Chip = React.memo(
                 {
                     key: 'removeIcon',
                     tabIndex: 0,
-                    className: 'p-chip-remove-icon',
+                    className: cx('removeIcon'),
                     onClick: close,
                     onKeyDown
                 },
@@ -62,7 +65,7 @@ export const Chip = React.memo(
                 const chipIconProps = mergeProps(
                     {
                         key: 'icon',
-                        className: 'p-chip-icon'
+                        className: cx('icon')
                     },
                     ptm('icon')
                 );
@@ -74,7 +77,7 @@ export const Chip = React.memo(
                 const labelProps = mergeProps(
                     {
                         key: 'label',
-                        className: 'p-chip-text'
+                        className: cx('label')
                     },
                     ptm('label')
                 );
@@ -90,21 +93,13 @@ export const Chip = React.memo(
         };
 
         const createElement = () => {
-            const className = classNames(
-                'p-chip p-component',
-                {
-                    'p-chip-image': props.image != null
-                },
-                props.className
-            );
-
             const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
 
             const rootProps = mergeProps(
                 {
                     ref: elementRef,
                     style: props.style,
-                    className: className
+                    className: cx('root')
                 },
                 ChipBase.getOtherProps(props),
                 ptm('root')

diff --git a/components/lib/chip/ChipBase.js b/components/lib/chip/ChipBase.js
@@ -1,4 +1,5 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/utils';
 
 export const ChipBase = ComponentBase.extend({
     defaultProps: {
@@ -15,5 +16,43 @@ export const ChipBase = ComponentBase.extend({
         onImageError: null,
         onRemove: null,
         children: undefined
+    },
+    css: {
+        classes: {
+            root: ({ props }) =>
+                classNames(
+                    'p-chip p-component',
+                    {
+                        'p-chip-image': props.image != null
+                    },
+                    props.className
+                ),
+            removeIcon: 'p-chip-remove-icon',
+            icon: 'p-chip-icon',
+            label: 'p-chip-text'
+        },
+        styles: `
+        .p-chip {
+            display: inline-flex;
+            align-items: center;
+        }
+        
+        .p-chip-text {
+            line-height: 1.5;
+        }
+        
+        .p-chip-icon.pi {
+            line-height: 1.5;
+        }
+        
+        .p-chip .p-chip-remove-icon {
+            line-height: 1.5;
+            cursor: pointer;
+        }
+        
+        .p-chip img {
+            border-radius: 50%;
+        }
+        `
     }
 });
diff --git a/components/lib/chip/chip.d.ts b/components/lib/chip/chip.d.ts
@@ -111,6 +111,11 @@ export interface ChipProps extends Omit<React.DetailedHTMLProps<React.HTMLAttrib
      * @type {ChipPassThroughOptions}
      */
     pt?: ChipPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -69,7 +69,6 @@
 @import "../components/lib/splitter/Splitter.css";
 @import "../components/lib/confirmpopup/ConfirmPopup.css";
 @import "../components/lib/scrolltop/ScrollTop.css";
-@import "../components/lib/chip/Chip.css";
 @import "../components/lib/cascadeselect/CascadeSelect.css";
 @import "../components/lib/treeselect/TreeSelect.css";
 @import "../components/lib/virtualscroller/VirtualScroller.css";