Skip to content

Remove deprecated modules for rating samples #841

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: vnext
Choose a base branch
from
Open

Remove deprecated modules for rating samples #841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions samples/inputs/rating/basic/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrRating, IgrRatingModule,} from 'igniteui-react';
import { IgrRating } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrRatingModule.register();

export default class RatingOverview extends React.Component<any, any> {

constructor(props: any) {
Expand Down
36 changes: 16 additions & 20 deletions samples/inputs/rating/custom/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react';
import { IgrRating, IgrRatingSymbol, IgrIcon, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrRatingModule.register();
IgrRatingSymbolModule.register();
IgrIconModule.register();

const emptyHeart = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 241.597 220.057' version='1.0'><path style='opacity:.98000004;fill:none;stroke:#000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0' d='M243.452 1708.979c-26.934.23-51.58 21.476-55.081 48.293-3.114 23.844 7.33 47.4 23.968 64.215 27.515 27.805 61.227 49.794 83.447 82.547 4.39-4.689 9.278-12.066 14.227-17.529 25.23-27.85 58.166-48.013 80.865-78.155 17.175-22.806 19.103-58.113-.538-80.405-18.25-20.712-51.76-25.17-74.37-9.254-8.226 5.791-15.274 13.37-19.932 22.312-10.053-19.32-30.534-32.214-52.586-32.024z' transform='translate(-175.323 -1696.476)'/></svg>";
const heartIcon = '<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" id="svg1" viewBox="0 0 475.82 442.01" version="1.0"> <g id="layer1" transform="translate(-134.07 -225.8)"> <path id="path7" d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.75 135.93 170.08 228.56 303.3 87.57-132.4 228.56-172.85 228.56-303.3 0-66.24-53.76-120-120-120-48.05 0-89.4 28.37-108.56 69.18-19.16-40.81-60.52-69.18-108.56-69.18z" stroke="#000" stroke-width="18.7" fill="#e60000"/> </g> </svg>';

Expand All @@ -23,25 +19,25 @@ export default class RatingCustomSymbols extends React.Component<any, any> {
return (
<div className="container sample">
<IgrRating className="size-large" label="Rate Experience" step={.5} value={3} hoverPreview={true}>
<IgrRatingSymbol key="0">
<div key="div0"><IgrIcon name='heart' collection="material" key="default0"></IgrIcon></div>
<div key="empty-div0" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty0"></IgrIcon></div>
<IgrRatingSymbol>
<div><IgrIcon name='heart' collection="material"></IgrIcon></div>
<div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
</IgrRatingSymbol>
<IgrRatingSymbol key="1">
<div key="div1"><IgrIcon name='heart' collection="material" key="default1"></IgrIcon></div>
<div key="empty-div1" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty1"></IgrIcon></div>
<IgrRatingSymbol>
<div><IgrIcon name='heart' collection="material"></IgrIcon></div>
<div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
</IgrRatingSymbol>
<IgrRatingSymbol key="2">
<div key="div2"><IgrIcon name='heart' collection="material" key="default2"></IgrIcon></div>
<div key="empty-div2" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty2"></IgrIcon></div>
<IgrRatingSymbol>
<div><IgrIcon name='heart' collection="material"></IgrIcon></div>
<div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
</IgrRatingSymbol>
<IgrRatingSymbol key="3">
<div key="div3"><IgrIcon name='heart' collection="material" key="default3"></IgrIcon></div>
<div key="empty-div3" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty3"></IgrIcon></div>
<IgrRatingSymbol>
<div><IgrIcon name='heart' collection="material"></IgrIcon></div>
<div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
</IgrRatingSymbol>
<IgrRatingSymbol key="4">
<div key="div4"><IgrIcon name='heart' collection="material" key="default4"></IgrIcon></div>
<div key="empty-div4" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty4"></IgrIcon></div>
<IgrRatingSymbol>
<div><IgrIcon name='heart' collection="material"></IgrIcon></div>
<div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
</IgrRatingSymbol>
</IgrRating>
</div>
Expand Down
36 changes: 16 additions & 20 deletions samples/inputs/rating/empty/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react';
import { IgrRating, IgrRatingSymbol, IgrIcon, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrRatingModule.register();
IgrRatingSymbolModule.register();
IgrIconModule.register();

const bandageIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bdbandage-desc bdbandage-title" fit="" preserveAspectRatio="xMidYMid meet"><title id="bdbandage-title">Bandage Icon</title><desc id="bdbandage-desc">A picture depicting a bandage.</desc><path d="M3.212 10.03a3 3 0 010-4.242l2.576-2.576a3 3 0 014.242 0l.556.556-6.818 6.818zm17.5.334L10.364 20.707a4 4 0 01-5.657 0l-1.414-1.414a4 4 0 010-5.657L13.636 3.293a4 4 0 015.657 0l1.414 1.414a4 4 0 010 5.657zM14 5a1 1 0 101-1 1 1 0 00-1 1zm-2.5 2.5a1 1 0 101-1 1 1 0 00-1 1zM9 10a1 1 0 101-1 1 1 0 00-1 1zm-4 6a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm.75 3.25a1 1 0 10-1-1 1 1 0 001 1zM10 19a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zM15 14a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zM20 9a1 1 0 10-1 1 1 1 0 001-1zm.232 4.414l-6.818 6.818.556.556a3 3 0 004.242 0l2.576-2.576a3 3 0 000-4.242z"></path></svg>';
const bacteriaIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bcbacteria-desc bcbacteria-title" fit="" preserveAspectRatio="xMidYMid meet"><title id="bcbacteria-title">Bacteria Icon</title><desc id="bcbacteria-desc">A picture depicting a bacteria.</desc><path d="M20.867 7.664h-1.3a4.439 4.439 0 00-.467-1.157l.914-.915a1.132 1.132 0 00-1.6-1.6l-.915.914a4.477 4.477 0 00-1.157-.478V3.133a1.133 1.133 0 10-2.265 0v1.294a4.491 4.491 0 00-1.157.478L12 3.991a1.132 1.132 0 00-1.6 1.6l.8.8L9.6 8l-.8-.8a1.133 1.133 0 10-1.6 1.6l.8.8-1.6 1.6-.8-.8A1.132 1.132 0 004 12l.914.914a4.453 4.453 0 00-.477 1.157H3.133a1.133 1.133 0 100 2.265h1.3a4.439 4.439 0 00.477 1.157l-.914.915a1.132 1.132 0 001.6 1.6l.915-.914a4.439 4.439 0 001.157.477v1.3a1.133 1.133 0 102.265 0v-1.3a4.453 4.453 0 001.157-.477l.914.914a1.132 1.132 0 001.6-1.6l-.8-.8 1.6-1.6.8.8a1.133 1.133 0 101.6-1.6l-.8-.8 1.6-1.6.8.8a1.132 1.132 0 101.6-1.6l-.914-.914a4.453 4.453 0 00.477-1.157h1.3a1.133 1.133 0 100-2.265zM15 11a2 2 0 112-2 2 2 0 01-2 2zm-5.5 5a1.5 1.5 0 111.5-1.5A1.5 1.5 0 019.5 16z"></path></svg>';

Expand All @@ -23,25 +19,25 @@ export default class RatingEmptyAndSelected extends React.Component<any, any> {
return (
<div className="container sample">
<IgrRating>
<IgrRatingSymbol key="0">
<div key="div0"><IgrIcon name='bandage' collection="material" key="default0"></IgrIcon></div>
<div key="empty-div0" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty0"></IgrIcon></div>
<IgrRatingSymbol>
<div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
<div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>
</IgrRatingSymbol>
<IgrRatingSymbol key="1">
<div key="div1"><IgrIcon name='bandage' collection="material" key="default1"></IgrIcon></div>
<div key="empty-div1" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty1"></IgrIcon></div>
<IgrRatingSymbol>
<div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
<div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>
</IgrRatingSymbol>
<IgrRatingSymbol key="2">
<div key="div2"><IgrIcon name='bandage' collection="material" key="default2"></IgrIcon></div>
<div key="empty-div2" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty2"></IgrIcon></div>
<IgrRatingSymbol>
<div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
<div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>
</IgrRatingSymbol>
<IgrRatingSymbol key="3">
<div key="div3"><IgrIcon name='bandage' collection="material" key="default3"></IgrIcon></div>
<div key="empty-div3" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty3"></IgrIcon></div>
<IgrRatingSymbol>
<div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
<div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>
</IgrRatingSymbol>
<IgrRatingSymbol key="4">
<div key="div4"><IgrIcon name='bandage' collection="material" key="default4"></IgrIcon></div>
<div key="empty-div4" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty4"></IgrIcon></div>
<IgrRatingSymbol>
<div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
<div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>
</IgrRatingSymbol>
</IgrRating>
</div>
Expand Down
35 changes: 16 additions & 19 deletions samples/inputs/rating/single-selection/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIconModule } from 'igniteui-react';
import { IgrRating, IgrRatingSymbol } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrRatingModule.register();
IgrRatingSymbolModule.register();
IgrIconModule.register();
export default class RatingSingleSelection extends React.Component<any, any> {

constructor(props: any) {
Expand All @@ -17,25 +14,25 @@ export default class RatingSingleSelection extends React.Component<any, any> {
return (
<div className="container sample">
<IgrRating label="Rate Experience" single={true}>
<IgrRatingSymbol key="0">
<div key="div0">😣</div>
<div key="empty-div0" slot="empty">😣</div>
<IgrRatingSymbol>
<div>😣</div>
<div slot="empty">😣</div>
</IgrRatingSymbol>
<IgrRatingSymbol key="1">
<div key="div1">😔</div>
<div key="empty-div1" slot="empty">😔</div>
<IgrRatingSymbol>
<div>😔</div>
<div slot="empty">😔</div>
</IgrRatingSymbol>
<IgrRatingSymbol key="2">
<div key="div2">😐</div>
<div key="empty-div2" slot="empty">😐</div>
<IgrRatingSymbol>
<div>😐</div>
<div slot="empty">😐</div>
</IgrRatingSymbol>
<IgrRatingSymbol key="3">
<div key="div3">🙂</div>
<div key="empty-div3" slot="empty">🙂</div>
<IgrRatingSymbol>
<div>🙂</div>
<div slot="empty">🙂</div>
</IgrRatingSymbol>
<IgrRatingSymbol key="4">
<div key="div4">😆</div>
<div key="empty-div4" slot="empty">😆</div>
<IgrRatingSymbol>
<div>😆</div>
<div slot="empty">😆</div>
</IgrRatingSymbol>
</IgrRating>
</div>
Expand Down
4 changes: 1 addition & 3 deletions samples/inputs/rating/styling/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrRating, IgrRatingModule,} from 'igniteui-react';
import { IgrRating } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrRatingModule.register();

export default class RatingStyling extends React.Component<any, any> {

constructor(props: any) {
Expand Down