Refactor #3219 - Rating: Add icon templates

api-generator/components/rating.js

@@ -23,6 +23,18 @@ const RatingProps = [
         default: 'false',
         description: 'When present, changing the value is not possible.'
     },
+    {
+        name: 'style',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the component.'
+    },
+    {
+        name: 'className',
+        type: 'string',
+        default: 'null',
+        description: 'ClassName of the component.'
+    },
     {
         name: 'stars',
         type: 'number',
@@ -47,18 +59,6 @@ const RatingProps = [
         default: 'null',
         description: 'Properties of the cancel icon.'
     },
-    {
-        name: 'style',
-        type: 'object',
-        default: 'null',
-        description: 'Inline style of the component.'
-    },
-    {
-        name: 'className',
-        type: 'string',
-        default: 'null',
-        description: 'ClassName of the component.'
-    },
     {
         name: 'onIcon',
         type: 'string',

components/lib/rating/Rating.css

@@ -3,10 +3,12 @@
     align-items: center;
 }
 
-.p-rating-icon {
+.p-rating-item {
+    display: flex;
+    align-items: center;
     cursor: pointer;
 }
 
-.p-rating.p-readonly .p-rating-icon {
+.p-rating.p-readonly .p-rating-item {
     cursor: default;
 }

components/lib/rating/Rating.js

@@ -58,23 +58,25 @@ export const Rating = React.memo(
 
         const createIcons = () => {
             return Array.from({ length: props.stars }, (_, i) => i + 1).map((value) => {
-                const icon = value <= props.value ? { class: props.onIcon, props: props.onIconProps } : { class: props.offIcon, props: props.offIconProps };
-                const content = IconUtils.getJSXIcon(icon.class, { ...icon.props });
+                const active = value <= props.value;
+                const className = classNames('p-rating-item', { 'p-rating-item-active': active });
+                const icon = active ? { type: props.onIcon, props: props.onIconProps } : { type: props.offIcon, props: props.offIconProps };
+                const content = IconUtils.getJSXIcon(icon.type, { className: 'p-rating-icon', ...icon.props }, { props });
                 return (
-                    <span key={value} className="p-rating-icon" tabIndex={tabIndex} onClick={(e) => rate(e, value)} onKeyDown={(e) => onStarKeyDown(e, value)}>
+                    <div key={value} className={className} tabIndex={tabIndex} onClick={(e) => rate(e, value)} onKeyDown={(e) => onStarKeyDown(e, value)}>
                         {content}
-                    </span>
+                    </div>
                 );
             });
         };
 
         const createCancelIcon = () => {
             if (props.cancel) {
-                const content = IconUtils.getJSXIcon(props.cancelIcon, { ...props.cancelIconProps });
+                const content = IconUtils.getJSXIcon(props.cancelIcon, { className: 'p-rating-icon p-rating-cancel', ...props.cancelIconProps }, { props });
                 return (
-                    <span className="p-rating-icon" onClick={clear} tabIndex={tabIndex} onKeyDown={onCancelKeyDown}>
+                    <div className="p-rating-item p-rating-cancel-item" onClick={clear} tabIndex={tabIndex} onKeyDown={onCancelKeyDown}>
                         {content}
-                    </span>
+                    </div>
                 );
             }
 
@@ -127,7 +129,7 @@ Rating.defaultProps = {
     onChange: null,
     onIcon: 'pi pi-star-fill',
     offIcon: 'pi pi-star',
-    cancelIcon: 'p-rating-icon p-rating-cancel pi pi-ban',
+    cancelIcon: 'pi pi-ban',
     cancelIconProps: null,
     onIconProps: null,
     offIconProps: null

components/lib/rating/rating.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import TooltipOptions from '../tooltip/tooltipoptions';
 import { IconType } from '../utils';
+
 interface RatingChangeTargetOptions {
     name: string;
     id: string;
@@ -27,8 +28,8 @@ export interface RatingProps extends Omit<React.DetailedHTMLProps<React.InputHTM
     children?: React.ReactNode;
     onIcon?: IconType<RatingProps>;
     offIcon?: IconType<RatingProps>;
-    cancelIcon: IconType<RatingProps>;
-    cancelIconProps: React.HTMLAttributes<HTMLSpanElement>;
+    cancelIcon?: IconType<RatingProps>;
+    cancelIconProps?: React.HTMLAttributes<HTMLSpanElement>;
     onIconProps?: React.HTMLAttributes<HTMLSpanElement>;
     offIconProps?: React.HTMLAttributes<HTMLSpanElement>;
 }

pages/rating/index.js

@@ -1,18 +1,17 @@
+import getConfig from 'next/config';
+import Head from 'next/head';
 import React, { useState } from 'react';
-import { Rating } from '../../components/lib/rating/Rating';
-import RatingDoc from '../../components/doc/rating';
 import { DocActions } from '../../components/doc/common/docactions';
-import Head from 'next/head';
-import * as CustomImage from './custom-icon.png';
-import * as CustomImageActive from './custom-icon-active.png';
-import * as CustomCancelImage from './cancel.png';
-import Image from 'next/image';
+import RatingDoc from '../../components/doc/rating';
+import { Rating } from '../../components/lib/rating/Rating';
 
 const RatingDemo = () => {
     const [val1, setVal1] = useState(null);
     const [val2, setVal2] = useState(null);
     const [val3, setVal3] = useState(null);
 
+    const contextPath = getConfig().publicRuntimeConfig.contextPath;
+
     return (
         <div>
             <Head>
@@ -22,7 +21,7 @@ const RatingDemo = () => {
             <div className="content-section introduction">
                 <div className="feature-intro">
                     <h1>Rating</h1>
-                    <p>Rating componentsis a star based selection input.</p>
+                    <p>Rating component is a star based selection input.</p>
                 </div>
 
                 <DocActions github="rating/index.js" />
@@ -42,13 +41,23 @@ const RatingDemo = () => {
                     <h5>Disabled</h5>
                     <Rating value={8} disabled stars={10} />
 
-                    <h5>Customization</h5>
+                    <h5>Template</h5>
                     <Rating
                         value={val3}
-                        onIcon={<Image src={CustomImageActive} alt="custom-image-active" width="30px" height="30px" />}
-                        offIcon={<Image src={CustomImage} alt="custom-image" width="30px" height="30px" />}
                         onChange={(e) => setVal3(e.value)}
-                        cancelIcon={<Image src={CustomCancelImage} alt="custom-cancel-image" width="30px" height="30px" />}
+                        cancelIcon={
+                            <img src={`${contextPath}/images/rating/cancel.png`} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="20px" height="20px" />
+                        }
+                        onIcon={
+                            <img
+                                src={`${contextPath}/images/rating/custom-icon-active.png`}
+                                onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')}
+                                alt="custom-image-active"
+                                width="20px"
+                                height="20px"
+                            />
+                        }
+                        offIcon={<img src={`${contextPath}/images/rating/custom-icon.png`} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="20px" height="20px" />}
                     />
                 </div>
             </div>

public/themes/arya-blue/theme.css

@@ -1496,30 +1496,29 @@
   background: #2396f2;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.25rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:focus {
+.p-rating .p-rating-item:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #93cbf9;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #64B5F6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #64B5F6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -2764,8 +2763,7 @@
   background: #1e1e1e;
 }
 .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
   background-color: #1e1e1e;
 }
 .p-datatable .p-datatable-loading-icon {

public/themes/arya-green/theme.css

@@ -1496,30 +1496,29 @@
   background: #54b358;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.25rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:focus {
+.p-rating .p-rating-item:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #a7d8a9;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #81C784;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #81C784;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -2764,8 +2763,7 @@
   background: #1e1e1e;
 }
 .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
   background-color: #1e1e1e;
 }
 .p-datatable .p-datatable-loading-icon {

public/themes/arya-orange/theme.css

@@ -1496,30 +1496,29 @@
   background: #ffc50c;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.25rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:focus {
+.p-rating .p-rating-item:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #ffe284;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #FFD54F;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #FFD54F;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -2764,8 +2763,7 @@
   background: #1e1e1e;
 }
 .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
   background-color: #1e1e1e;
 }
 .p-datatable .p-datatable-loading-icon {

public/themes/arya-purple/theme.css

@@ -1496,30 +1496,29 @@
   background: #a241b2;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.25rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:focus {
+.p-rating .p-rating-item:focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #cf95d9;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #BA68C8;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #BA68C8;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -2764,8 +2763,7 @@
   background: #1e1e1e;
 }
 .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
   background-color: #1e1e1e;
 }
 .p-datatable .p-datatable-loading-icon {