diff --git a/browser/package-lock.json b/browser/package-lock.json index 3aae5f1550..a250139e76 100644 --- a/browser/package-lock.json +++ b/browser/package-lock.json @@ -4519,9 +4519,9 @@ } }, "node_modules/baseline-browser-mapping": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz", - "integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==", + "version": "2.11.12", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.12.tgz", + "integrity": "sha512-r7WnVImvVCeFpf2DOXfy41aPWzeNg3H/A2X4dKmy1QL0MSyyk/e7z8ihJ3N6Nn2PsdhkVlqnEfnUE4a05P2aTA==", "dev": true, "license": "Apache-2.0", "bin": { @@ -4767,9 +4767,9 @@ } }, "node_modules/browserslist": { - "version": "4.28.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz", - "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==", + "version": "4.28.7", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.7.tgz", + "integrity": "sha512-JxV13hNrFxqjOc8alRbq9dK1MM79NEXYpma2B2J4wAtpWS5zIEIKqWPGCl7N4o7Uc7B7itylh7SuDujATRyyTw==", "dev": true, "funding": [ { @@ -4787,11 +4787,11 @@ ], "license": "MIT", "dependencies": { - "baseline-browser-mapping": "^2.9.0", - "caniuse-lite": "^1.0.30001759", - "electron-to-chromium": "^1.5.263", - "node-releases": "^2.0.27", - "update-browserslist-db": "^1.2.0" + "baseline-browser-mapping": "^2.10.44", + "caniuse-lite": "^1.0.30001806", + "electron-to-chromium": "^1.5.393", + "node-releases": "^2.0.51", + "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" @@ -4942,9 +4942,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001776", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001776.tgz", - "integrity": "sha512-sg01JDPzZ9jGshqKSckOQthXnYwOEP50jeVFhaSFbZcOy05TiuuaffDOfcwtCisJ9kNQuLBFibYywv2Bgm9osw==", + "version": "1.0.30001806", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001806.tgz", + "integrity": "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==", "dev": true, "funding": [ { @@ -5843,8 +5843,8 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "devOptional": true, "license": "Apache-2.0", - "optional": true, "engines": { "node": ">=8" } @@ -6070,9 +6070,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.5.307", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.307.tgz", - "integrity": "sha512-5z3uFKBWjiNR44nFcYdkcXjKMbg5KXNdciu7mhTPo9tB7NbqSNP2sSnGR+fqknZSCwKkBN+oxiiajWs4dT6ORg==", + "version": "1.5.400", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.400.tgz", + "integrity": "sha512-96EWDNjM59SYflgeV5Ylsf4EMiq1a25YjCnJH7cxn/AF2H3pILRweaUnoLax0yKHWdpOzY6JKEu45e8irqZIHA==", "dev": true, "license": "ISC" }, @@ -13175,11 +13175,14 @@ } }, "node_modules/node-releases": { - "version": "2.0.36", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.36.tgz", - "integrity": "sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==", + "version": "2.0.52", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.52.tgz", + "integrity": "sha512-MRlTqhAfoMx/4mhEbPo3Hi02g9LJZaJkka69V6h67Cb1gjrAG0jsTE4CZX1eptNx+VCAwJmfpnDIF4P0Nh1A7A==", "dev": true, - "license": "MIT" + "license": "MIT", + "engines": { + "node": ">=18" + } }, "node_modules/normalize-package-data": { "version": "2.5.0", diff --git a/browser/public/meta.json b/browser/public/meta.json index 717bce6e87..878e6465e4 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"} diff --git a/browser/src/index.css b/browser/src/index.css index 68ba452275..f5c1f70900 100644 --- a/browser/src/index.css +++ b/browser/src/index.css @@ -1,3 +1,6 @@ +@import "tailwindcss/utilities.css" layer(utilities); +@source "./samples/**/*.{ts,tsx,js,jsx}"; + #root, html, body, diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index 717bce6e87..878e6465e4 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"} diff --git a/samples/layouts/avatar/icon/src/index.css b/samples/layouts/avatar/icon/src/index.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/samples/layouts/avatar/icon/src/index.tsx b/samples/layouts/avatar/icon/src/index.tsx deleted file mode 100644 index 706a5ceac4..0000000000 --- a/samples/layouts/avatar/icon/src/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { useEffect } from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - - -const homeIcon = - ''; - -export default function AvatarIcon() { - - useEffect(() => { - registerIconFromText("home", homeIcon, "material"); - }, []); - - return ( -
- - - -
- ); -} - -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/layouts/avatar/image/src/index.tsx b/samples/layouts/avatar/image/src/index.tsx index e14eb26bc6..70af5a5a41 100644 --- a/samples/layouts/avatar/image/src/index.tsx +++ b/samples/layouts/avatar/image/src/index.tsx @@ -8,7 +8,7 @@ export default function AvatarImage() { return (
- +
); } diff --git a/samples/layouts/avatar/initials/src/index.css b/samples/layouts/avatar/initials/src/index.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/samples/layouts/avatar/initials/src/index.tsx b/samples/layouts/avatar/initials/src/index.tsx deleted file mode 100644 index 402d22ac49..0000000000 --- a/samples/layouts/avatar/initials/src/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default function AvatarInitials() { - - return ( -
- -
- ); -} - -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/layouts/avatar/icon/.devcontainer/devcontainer.json b/samples/layouts/avatar/overview/.devcontainer/devcontainer.json similarity index 100% rename from samples/layouts/avatar/icon/.devcontainer/devcontainer.json rename to samples/layouts/avatar/overview/.devcontainer/devcontainer.json diff --git a/samples/layouts/avatar/icon/.eslintrc.js b/samples/layouts/avatar/overview/.eslintrc.js similarity index 100% rename from samples/layouts/avatar/icon/.eslintrc.js rename to samples/layouts/avatar/overview/.eslintrc.js diff --git a/samples/layouts/avatar/initials/README.md b/samples/layouts/avatar/overview/README.md similarity index 91% rename from samples/layouts/avatar/initials/README.md rename to samples/layouts/avatar/overview/README.md index 37058af143..9a54ce74bc 100644 --- a/samples/layouts/avatar/initials/README.md +++ b/samples/layouts/avatar/overview/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Initials feature using [Avatar](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Overview feature using [Avatar](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Initial View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git git checkout master cd ./igniteui-react-examples -cd ./samples/layouts/avatar/initials +cd ./samples/layouts/avatar/overview ``` open above folder in VS Code or type: diff --git a/samples/layouts/avatar/initials/index.html b/samples/layouts/avatar/overview/index.html similarity index 85% rename from samples/layouts/avatar/initials/index.html rename to samples/layouts/avatar/overview/index.html index 84267d5944..283cc238f6 100644 --- a/samples/layouts/avatar/initials/index.html +++ b/samples/layouts/avatar/overview/index.html @@ -1,11 +1,11 @@ - AvatarInitials + AvatarOverview
- \ No newline at end of file + diff --git a/samples/layouts/avatar/initials/package.json b/samples/layouts/avatar/overview/package.json similarity index 87% rename from samples/layouts/avatar/initials/package.json rename to samples/layouts/avatar/overview/package.json index a5a7b54e4d..9be32ebca8 100644 --- a/samples/layouts/avatar/initials/package.json +++ b/samples/layouts/avatar/overview/package.json @@ -1,6 +1,6 @@ { - "name": "react-avatar-initials", - "description": "This project provides example of Avatar Initials using Infragistics React components", + "name": "react-avatar-overview", + "description": "This project provides example of Avatar Overview using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/layouts/avatar/icon/sandbox.config.json b/samples/layouts/avatar/overview/sandbox.config.json similarity index 100% rename from samples/layouts/avatar/icon/sandbox.config.json rename to samples/layouts/avatar/overview/sandbox.config.json diff --git a/samples/layouts/avatar/overview/src/index.css b/samples/layouts/avatar/overview/src/index.css new file mode 100644 index 0000000000..e5faf87285 --- /dev/null +++ b/samples/layouts/avatar/overview/src/index.css @@ -0,0 +1,49 @@ +.avatar-overview-sample { + display: flex; + align-items: center; + justify-content: center; + gap: 90px; +} + +.size-large { + --ig-size: var(--ig-size-large); +} + +.avatar-with-badge { + position: relative; + display: inline-flex; +} + +.avatar-status { + position: absolute; + right: 6px; + bottom: 6px; +} + +.avatar-stack { + display: inline-flex; + align-items: center; +} + +.avatar-stack .size-large { + margin-left: -24px; +} + +.avatar-stack .size-large:first-child { + margin-left: 0; +} + +.avatar-stack .size-large::part(base) { + border: 4px solid #fff; + box-sizing: border-box; +} + +.avatar-stack .size-large:last-child { + --ig-avatar-background: #e8eef6; + --ig-avatar-color: #6f8097; +} + +.avatar-stack .size-large:last-child::part(initials) { + font-size: 32px; + font-weight: 500; +} diff --git a/samples/layouts/avatar/overview/src/index.tsx b/samples/layouts/avatar/overview/src/index.tsx new file mode 100644 index 0000000000..2892a11193 --- /dev/null +++ b/samples/layouts/avatar/overview/src/index.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrAvatar, IgrBadge } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; + +export default function AvatarOverview() { + return ( +
+ + + + + + + + + + + +
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/avatar/icon/tsconfig.json b/samples/layouts/avatar/overview/tsconfig.json similarity index 100% rename from samples/layouts/avatar/icon/tsconfig.json rename to samples/layouts/avatar/overview/tsconfig.json diff --git a/samples/layouts/avatar/icon/vite.config.js b/samples/layouts/avatar/overview/vite.config.js similarity index 100% rename from samples/layouts/avatar/icon/vite.config.js rename to samples/layouts/avatar/overview/vite.config.js diff --git a/samples/layouts/avatar/shape/src/index.css b/samples/layouts/avatar/shape/src/index.css index e69de29bb2..a477d54e9d 100644 --- a/samples/layouts/avatar/shape/src/index.css +++ b/samples/layouts/avatar/shape/src/index.css @@ -0,0 +1,52 @@ +.avatar-overview-sample { + display: flex; + align-items: center; + justify-content: center; + gap: 90px; + min-height: 100vh; +} + +.size-small { + --ig-size: var(--ig-size-small); +} + +.avatar-variant { + display: inline-flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.avatar-label { + color: var(--ig-gray-600); + font-size: 0.875rem; + line-height: 1.25rem; +} + +.avatar-with-badge { + position: relative; + display: inline-flex; +} + +.avatar-status { + --size: 18px; + position: absolute; + right: -4px; + bottom: -4px; + font-size: 0.75rem; + line-height: 1; +} + +.avatar-dot-badge { + --size: 12px; + right: 3px; + bottom: 3px; +} + +.avatar-count-badge { + --ig-badge-text-color: #ffffff; +} + +.avatar-check-badge { + --ig-badge-icon-color: #ffffff; +} diff --git a/samples/layouts/avatar/shape/src/index.tsx b/samples/layouts/avatar/shape/src/index.tsx index 62fe5a460a..adaaac1538 100644 --- a/samples/layouts/avatar/shape/src/index.tsx +++ b/samples/layouts/avatar/shape/src/index.tsx @@ -1,27 +1,86 @@ -import React, { useEffect } from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrAvatar, + IgrBadge, + IgrIcon, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; -const homeIcon = - ''; +const mailIcon = + ''; + +const checkIcon = + ''; export default function AvatarShape() { + useEffect(() => { + registerIconFromText("mail", mailIcon, "material"); + registerIconFromText("check", checkIcon, "material"); + }, []); + + return ( +
+
+ + + + + Circle +
+ +
+ + + + + + 2 + + + Square +
- useEffect(() => { - registerIconFromText("home", homeIcon, "material"); - }, []); - - return ( -
- - - -
- ); +
+ + + + + + + Rounded +
+
+ ); } // rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/avatar/size/src/index.css b/samples/layouts/avatar/size/src/index.css index 325c9f8e57..00002afa14 100644 --- a/samples/layouts/avatar/size/src/index.css +++ b/samples/layouts/avatar/size/src/index.css @@ -1,16 +1,60 @@ -.size-small { - --ig-size: var(--ig-size-small); +.avatar-overview-sample { + display: flex; + align-items: center; + justify-content: center; + gap: 90px; + min-height: 100vh; } +.size-large { + --ig-size: var(--ig-size-large); +} .size-medium { - --ig-size: var(--ig-size-medium); + --ig-size: var(--ig-size-medium); +} +.size-small { + --ig-size: var(--ig-size-small); } -.size-large { - --ig-size: var(--ig-size-large); +.avatar-variant { + display: inline-flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.avatar-with-badge { + width: 88px; + height: 88px; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.avatar-label { + color: var(--ig-gray-600); + font-size: 0.875rem; + line-height: 1.25rem; +} + +.avatar-status { + --size: 18px; + position: absolute; + right: var(--badge-offset); + bottom: var(--badge-offset); + font-size: 0.75rem; + line-height: 1; +} + +.avatar-with-badge:has(.size-large) { + --badge-offset: 7px; +} + +.avatar-with-badge:has(.size-medium) { + --badge-offset: 15px; } -.sample { - flex-direction: row; - gap: 10px; +.avatar-with-badge:has(.size-small) { + --badge-offset: 24px; } diff --git a/samples/layouts/avatar/size/src/index.tsx b/samples/layouts/avatar/size/src/index.tsx index dfb5f9bb60..e2cff6bac6 100644 --- a/samples/layouts/avatar/size/src/index.tsx +++ b/samples/layouts/avatar/size/src/index.tsx @@ -1,20 +1,69 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrAvatar, IgrBadge } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; export default function AvatarSize() { + return ( +
+
+ + + + + Large +
- return ( -
- - - -
- ); +
+ + + + + Medium +
+ +
+ + + + + Small +
+
+ ); } // rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/avatar/styling/src/index.css b/samples/layouts/avatar/styling/src/index.css index df45dd1716..4f5edce1c6 100644 --- a/samples/layouts/avatar/styling/src/index.css +++ b/samples/layouts/avatar/styling/src/index.css @@ -1,51 +1,43 @@ -.sizes .size-small { - --ig-size: var(--ig-size-small); +.sample { + display: flex; + align-items: center; + justify-content: center; } -.sizes .size-medium { - --ig-size: var(--ig-size-medium); +.chat-list { + width: 344px; + max-width: 100%; } -.sizes .size-large, -.size-large { - --ig-size: var(--ig-size-large); +.size-small { + --ig-size: var(--ig-size-small); } -.sample { - display: flex; - flex-direction: row; - justify-content: space-around; - gap: 10px; - margin-top: 20px; +.size-medium { + --ig-size: var(--ig-size-medium); } -.sizes { - display: flex; - flex-direction: row; - gap: 10px; +.size-large { + --ig-size: var(--ig-size-large); } -igc-avatar { - --ig-avatar-background: var(--ig-success-100); +.avatar-with-badge { + position: relative; + display: inline-flex; } -igc-avatar::part(base) { - border: 2px solid var(--ig-error-500); +.avatar-status { + --ig-badge-icon-color: #ffffff; + position: absolute; + right: -4px; + bottom: -4px; } -igc-avatar::part(initials) { - color: var(--ig-success-500-contrast); - background: var(--ig-error-500); - padding: 5px 10px; - margin: 10px; - border-radius: 50px; - /* border: 1px solid greenyellow; */ +.avatar-muted-badge { + --ig-badge-background-color: var(--ig-gray-300); + --ig-badge-icon-color: var(--ig-gray-700); } -igc-avatar::part(image) { - border-radius: 20px; - padding: 5px; - border: 2px solid var(--ig-primary-500); +.avatar-muted { + --ig-avatar-background: #D2DBE8; } - - diff --git a/samples/layouts/avatar/styling/src/index.tsx b/samples/layouts/avatar/styling/src/index.tsx index 3a751e8659..0d427044c9 100644 --- a/samples/layouts/avatar/styling/src/index.tsx +++ b/samples/layouts/avatar/styling/src/index.tsx @@ -1,36 +1,187 @@ -import React, { useEffect } from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrList, + IgrListHeader, + IgrListItem, + IgrAvatar, + IgrBadge, + IgrIcon, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; +const checkIcon = + ''; -const homeIcon = - ''; +const calendarIcon = + ''; + +const xIcon = + ''; + +const horizontalRuleIcon = + ''; + +const groupIcon = + ''; + +type AvatarListItem = { + title: string; + subtitle: string; + end: string; + avatar: { + src?: string; + icon?: string; + initials?: string; + alt: string; + className?: string; + }; + badge?: { + icon: string; + variant: "success" | "info" | "warning" | "danger" | "primary"; + className?: string; + }; +}; + +type AvatarListSection = { + header: string; + items: AvatarListItem[]; +}; + +const sections: AvatarListSection[] = [ + { + header: "Chats", + items: [ + { + title: "Nick Evans", + subtitle: "Hi Samira, thanks for the ...", + end: "9:44 AM", + avatar: { + src: "https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png", + alt: "A profile photo of Nick Evans.", + }, + badge: { + icon: "check", + variant: "success", + }, + }, + { + title: "James Ford", + subtitle: "I'll send the text and im ...", + end: "8:30 AM", + avatar: { + initials: "JF", + alt: "A profile photo of Nick Evans.", + className: "avatar-muted", + }, + badge: { + icon: "x", + variant: "primary", + className: "avatar-muted-badge", + }, + }, + { + title: "Kate Porter", + subtitle: "That's great!", + end: "Yesterday", + avatar: { + src: "https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png", + alt: "A profile photo of Nick Evans.", + }, + badge: { + icon: "horizontalRule", + variant: "danger", + }, + }, + ], + }, + { + header: "Meetings", + items: [ + { + title: "Weekly Meeting", + subtitle: "https://www.infra.com", + end: "Monday", + avatar: { + icon: "calendar", + alt: "Calendar Icon.", + }, + }, + { + title: "Design Discussion", + subtitle: "https://www.infra.com", + end: "11:30 AM", + avatar: { + icon: "group", + alt: "Group Icon.", + }, + }, + ], + }, +]; + +function renderAvatar(item: AvatarListItem) { + return ( + + {item.avatar.icon && ( + + )} + + ); +} export default function AvatarStyling() { + useEffect(() => { + registerIconFromText("calendar", calendarIcon, "material"); + registerIconFromText("check", checkIcon, "material"); + registerIconFromText("x", xIcon, "material"); + registerIconFromText("horizontalRule", horizontalRuleIcon, "material"); + registerIconFromText("group", groupIcon, "material"); + }, []); - useEffect(() => { - registerIconFromText("home", homeIcon, "material"); - }, []); - - return ( -
- - - -
- - - -
-
- ); + return ( +
+ + {sections.map((section) => ( + + {section.header} + {section.items.map((item) => ( + +
+ {renderAvatar(item)} + {item.badge && ( + + + + )} +
+

{item.title}

+ {item.subtitle} +
{item.end}
+ + ))} + + ))} + +
+ ); } // rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/avatar/initials/.devcontainer/devcontainer.json b/samples/layouts/avatar/tailwind-styling/.devcontainer/devcontainer.json similarity index 100% rename from samples/layouts/avatar/initials/.devcontainer/devcontainer.json rename to samples/layouts/avatar/tailwind-styling/.devcontainer/devcontainer.json diff --git a/samples/layouts/avatar/initials/.eslintrc.js b/samples/layouts/avatar/tailwind-styling/.eslintrc.js similarity index 100% rename from samples/layouts/avatar/initials/.eslintrc.js rename to samples/layouts/avatar/tailwind-styling/.eslintrc.js diff --git a/samples/layouts/avatar/tailwind-styling/README.md b/samples/layouts/avatar/tailwind-styling/README.md new file mode 100644 index 0000000000..782eb476b1 --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Avatar](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/layouts/avatar/tailwind-styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/layouts/avatar/tailwind-styling/index.html b/samples/layouts/avatar/tailwind-styling/index.html new file mode 100644 index 0000000000..e5ae645b18 --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + AvatarTailwindStyling + + + +
+ + + diff --git a/samples/layouts/avatar/tailwind-styling/package.json b/samples/layouts/avatar/tailwind-styling/package.json new file mode 100644 index 0000000000..771b99ef8d --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-avatar-tailwind-styling", + "description": "This project provides example of Avatar Tailwind styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.3.3", + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "tailwindcss": "^4.3.3", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/layouts/avatar/initials/sandbox.config.json b/samples/layouts/avatar/tailwind-styling/sandbox.config.json similarity index 100% rename from samples/layouts/avatar/initials/sandbox.config.json rename to samples/layouts/avatar/tailwind-styling/sandbox.config.json diff --git a/samples/layouts/avatar/tailwind-styling/src/icons.ts b/samples/layouts/avatar/tailwind-styling/src/icons.ts new file mode 100644 index 0000000000..1e53ff276b --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/src/icons.ts @@ -0,0 +1,11 @@ +export const instagramIcon = + ''; + +export const berealIcon = + ''; + +export const threadsIcon = + ''; + +export const plusIcon = + ''; diff --git a/samples/layouts/avatar/tailwind-styling/src/index.css b/samples/layouts/avatar/tailwind-styling/src/index.css new file mode 100644 index 0000000000..40be077dd4 --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/src/index.css @@ -0,0 +1,3 @@ +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; diff --git a/samples/layouts/avatar/tailwind-styling/src/index.tsx b/samples/layouts/avatar/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..f592b9bdba --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/src/index.tsx @@ -0,0 +1,180 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrAvatar, + IgrButton, + IgrCard, + IgrCardActions, + IgrCardContent, + IgrCardHeader, + IgrCardMedia, + IgrDivider, + IgrIcon, + IgrIconButton, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; +import { berealIcon, instagramIcon, plusIcon, threadsIcon } from "./icons"; + +const profileStats = [ + { value: "23.9K", label: "Likes" }, + { value: "163", label: "Posts" }, + { value: "23.9K", label: "Views" }, +]; + +export default function AvatarTailwindStyling() { + useEffect(() => { + registerIconFromText("instagram", instagramIcon, "material"); + registerIconFromText("bereal", berealIcon, "material"); + registerIconFromText("threads", threadsIcon, "material"); + registerIconFromText("plus", plusIcon, "material"); + }, []); + + return ( +
+ + + Cafe interior + + + + Kate Thompson + + +

+ 3D Artist. Turning polygons into worlds and immersive digital + realities +

+
+ {profileStats.map((stat, index) => ( + +
+ + {stat.value} + + + {stat.label} + +
+ {index < profileStats.length - 1 && ( + + )} + + ))} +
+ + + + + FOLLOW + + + +
+ + + +
+ + + + + + + + + Kate Thompson + + +

+ 3D Artist. Turning polygons into worlds and immersive digital + realities +

+
+ {profileStats.map((stat, index) => ( + +
+ + {stat.value} + + + {stat.label} + +
+ {index < profileStats.length - 1 && ( + + )} + + ))} +
+ + + + + FOLLOW + + + +
+ + + +
+ + +
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/avatar/initials/tsconfig.json b/samples/layouts/avatar/tailwind-styling/tsconfig.json similarity index 100% rename from samples/layouts/avatar/initials/tsconfig.json rename to samples/layouts/avatar/tailwind-styling/tsconfig.json diff --git a/samples/layouts/avatar/tailwind-styling/vite.config.js b/samples/layouts/avatar/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..c1fff0c83c --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); diff --git a/samples/layouts/avatar/variants/.devcontainer/devcontainer.json b/samples/layouts/avatar/variants/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/avatar/variants/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/avatar/variants/.eslintrc.js b/samples/layouts/avatar/variants/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/avatar/variants/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/layouts/avatar/icon/README.md b/samples/layouts/avatar/variants/README.md similarity index 86% rename from samples/layouts/avatar/icon/README.md rename to samples/layouts/avatar/variants/README.md index f5bed3792e..1c79b80274 100644 --- a/samples/layouts/avatar/icon/README.md +++ b/samples/layouts/avatar/variants/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Icon feature using [Avatar](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Variants feature using [Avatar](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Icon fe View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git git checkout master cd ./igniteui-react-examples -cd ./samples/layouts/avatar/icon +cd ./samples/layouts/avatar/variants ``` open above folder in VS Code or type: diff --git a/samples/layouts/avatar/icon/index.html b/samples/layouts/avatar/variants/index.html similarity index 85% rename from samples/layouts/avatar/icon/index.html rename to samples/layouts/avatar/variants/index.html index 289c161876..b4669ae346 100644 --- a/samples/layouts/avatar/icon/index.html +++ b/samples/layouts/avatar/variants/index.html @@ -1,11 +1,11 @@ - AvatarIcon + AvatarVariants
- \ No newline at end of file + diff --git a/samples/layouts/avatar/icon/package.json b/samples/layouts/avatar/variants/package.json similarity index 86% rename from samples/layouts/avatar/icon/package.json rename to samples/layouts/avatar/variants/package.json index 388946038c..2edc46b8a0 100644 --- a/samples/layouts/avatar/icon/package.json +++ b/samples/layouts/avatar/variants/package.json @@ -1,6 +1,6 @@ { - "name": "react-date-picker-overview", - "description": "This project provides example of Date Picker Overview using Infragistics React components", + "name": "react-avatar-variants", + "description": "This project provides example of Avatar Variants using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/layouts/avatar/variants/sandbox.config.json b/samples/layouts/avatar/variants/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/avatar/variants/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/avatar/variants/src/index.css b/samples/layouts/avatar/variants/src/index.css new file mode 100644 index 0000000000..a477d54e9d --- /dev/null +++ b/samples/layouts/avatar/variants/src/index.css @@ -0,0 +1,52 @@ +.avatar-overview-sample { + display: flex; + align-items: center; + justify-content: center; + gap: 90px; + min-height: 100vh; +} + +.size-small { + --ig-size: var(--ig-size-small); +} + +.avatar-variant { + display: inline-flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.avatar-label { + color: var(--ig-gray-600); + font-size: 0.875rem; + line-height: 1.25rem; +} + +.avatar-with-badge { + position: relative; + display: inline-flex; +} + +.avatar-status { + --size: 18px; + position: absolute; + right: -4px; + bottom: -4px; + font-size: 0.75rem; + line-height: 1; +} + +.avatar-dot-badge { + --size: 12px; + right: 3px; + bottom: 3px; +} + +.avatar-count-badge { + --ig-badge-text-color: #ffffff; +} + +.avatar-check-badge { + --ig-badge-icon-color: #ffffff; +} diff --git a/samples/layouts/avatar/variants/src/index.tsx b/samples/layouts/avatar/variants/src/index.tsx new file mode 100644 index 0000000000..45146dccea --- /dev/null +++ b/samples/layouts/avatar/variants/src/index.tsx @@ -0,0 +1,86 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrAvatar, + IgrBadge, + IgrIcon, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; + +const mailIcon = + ''; + +const checkIcon = + ''; + +export default function AvatarVariants() { + useEffect(() => { + registerIconFromText("mail", mailIcon, "material"); + registerIconFromText("check", checkIcon, "material"); + }, []); + + return ( +
+
+ + + + + Image +
+ +
+ + + + + + 2 + + + Icon +
+ +
+ + + + + + + Initials +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/avatar/variants/tsconfig.json b/samples/layouts/avatar/variants/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/avatar/variants/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/layouts/avatar/initials/vite.config.js b/samples/layouts/avatar/variants/vite.config.js similarity index 100% rename from samples/layouts/avatar/initials/vite.config.js rename to samples/layouts/avatar/variants/vite.config.js