Skip to content

feature(avatar): update avatar samples for new documentation #1092

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
IMinchev64 wants to merge 9 commits into
base: vnext
Choose a base branch
from
Open

feature(avatar): update avatar samples for new documentation #1092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
96c4cff
chore(avatar): add assets
IMinchev64 Aug 3, 2026
5d0c17c
refactor(avatar): change icon sample to overview
IMinchev64 Aug 3, 2026
d442fd6
refactor(avatar): change initials sample to variants
IMinchev64 Aug 3, 2026
3ab90d0
refactor(avatara): modify size and style samples
IMinchev64 Aug 3, 2026
f3080ba
feature(avatar): add tailwind styling sample
IMinchev64 Aug 4, 2026
32997ec
refactor(avatar): tailwind sample import icon svgs
IMinchev64 Aug 4, 2026
633e503
refactor(avatar): refactor sample assets
IMinchev64 Aug 4, 2026
13df6e7
refactor(avatar): update avatar color in styling sample
IMinchev64 Aug 4, 2026
ffd9c97
fix(avatar): update tailwind sample styles
IMinchev64 Aug 5, 2026
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
519 changes: 498 additions & 21 deletions browser/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions browser/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@
"@typescript-eslint/parser": "^5.51.0",
"@vitejs/plugin-react": "^5.0.4",
"@vitest/browser": "^3.2.4",
"autoprefixer": "^10.5.4",
"browser-sync": "^3.0.4",
"del": "^5.1.0",
"eslint": "^8.33.0",
Expand Down Expand Up @@ -99,6 +100,7 @@
"remark-frontmatter": "^2.0.0",
"run-sequence": "^2.2.1",
"sass": "^1.97.3",
"tailwindcss": "^3.4.19",
"ts-loader": "^9.5.4",
"ts-node": "^10.9.2",
"typescript": "^4.8.4",
Expand Down
6 changes: 6 additions & 0 deletions browser/postcss.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
2 changes: 1 addition & 1 deletion browser/public/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"version":"23.2.915","date":"2026-06-16 16:54:44","note":"this file is auto-generated"}
{"version":"23.2.915","date":"2026-08-03 17:55:36","note":"this file is auto-generated"}
2 changes: 2 additions & 0 deletions browser/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@tailwind utilities;

.igx-grid__td img[src*="dl.infragistics.com/x/img/people"] {
width: 62px;
height: 62px;
Expand Down
2 changes: 1 addition & 1 deletion browser/src/navigation/SamplesBrowser.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"version":"23.2.915","date":"2026-06-16 16:54:44","note":"this file is auto-generated"}
{"version":"23.2.915","date":"2026-08-03 17:55:36","note":"this file is auto-generated"}
9 changes: 9 additions & 0 deletions browser/tailwind.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
module.exports = {
content: [
"./src/**/*.{ts,tsx}",
"../samples/layouts/avatar/tailwind-styling/src/**/*.{ts,tsx}",
],
corePlugins: {
preflight: false,
},
};
Empty file removed samples/layouts/avatar/icon/src/index.css
View file
Open in desktop
Empty file.
28 changes: 0 additions & 28 deletions samples/layouts/avatar/icon/src/index.tsx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion samples/layouts/avatar/image/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function AvatarImage() {

return (
<div className="container sample">
<IgrAvatar src="https://dl.infragistics.com/x/img/people/men/11.png" alt="A photo of a man." />
<IgrAvatar src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png" alt="A photo of a man." />
</div>
);
}
Expand Down
Empty file removed samples/layouts/avatar/initials/src/index.css
View file
Open in desktop
Empty file.
18 changes: 0 additions & 18 deletions samples/layouts/avatar/initials/src/index.tsx
View file
Open in desktop

This file was deleted.

0 ...atar/icon/.devcontainer/devcontainer.json → .../overview/.devcontainer/devcontainer.json
View file
Open in desktop
File renamed without changes.
0 samples/layouts/avatar/icon/.eslintrc.js → samples/layouts/avatar/overview/.eslintrc.js
View file
Open in desktop
File renamed without changes.
8 changes: 4 additions & 4 deletions samples/layouts/avatar/initials/README.md → samples/layouts/avatar/overview/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->

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.


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
Expand All @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Initial
<a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
</a>
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/avatar/initials" rel="noopener noreferrer">
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/avatar/overview" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
</a>
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/layouts/avatar/initials?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/layouts/avatar/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
</a>
</body>
Expand All @@ -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:
Expand Down
4 changes: 2 additions & 2 deletions samples/layouts/avatar/initials/index.html → samples/layouts/avatar/overview/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>AvatarInitials</title>
<title>AvatarOverview</title>
<link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
</html>
4 changes: 2 additions & 2 deletions samples/layouts/avatar/initials/package.json → samples/layouts/avatar/overview/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
0 ...s/layouts/avatar/icon/sandbox.config.json → ...youts/avatar/overview/sandbox.config.json
View file
Open in desktop
File renamed without changes.
49 changes: 49 additions & 0 deletions samples/layouts/avatar/overview/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
62 changes: 62 additions & 0 deletions samples/layouts/avatar/overview/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="sample avatar-overview-sample">
<IgrAvatar
className="size-large"
shape="circle"
src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
alt="A profile photo of a man."
/>
<span className="avatar-with-badge">
<IgrAvatar
className="size-large"
shape="circle"
src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
alt="A profile photo of a man."
/>
<IgrBadge
className="avatar-status size-large"
dot={true}
outlined={true}
variant="success"
/>
</span>
<span className="avatar-stack" aria-label="Project members">
<IgrAvatar
className="size-large"
shape="circle"
src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
alt="A profile photo of a man."
/>
<IgrAvatar
className="size-large"
shape="circle"
src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
alt="A profile photo of a man."
/>
<IgrAvatar
className="size-large"
shape="circle"
src="https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png"
alt="A profile photo of a man."
/>
<IgrAvatar
className="size-large"
shape="circle"
initials="+3"
alt="A profile photo of a man."
/>
</span>
</div>
);
}

// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<AvatarOverview />);
0 samples/layouts/avatar/icon/tsconfig.json → ...les/layouts/avatar/overview/tsconfig.json
View file
Open in desktop
File renamed without changes.
0 samples/layouts/avatar/icon/vite.config.js → ...es/layouts/avatar/overview/vite.config.js
View file
Open in desktop
File renamed without changes.
52 changes: 52 additions & 0 deletions samples/layouts/avatar/shape/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Loading