From 1beadc3871e378400ef11527403cd46f82039468 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Mon, 27 Jul 2026 16:21:24 +0300 Subject: [PATCH 01/14] feat(docs): update badge sample --- .../size/.devcontainer/devcontainer.json | 4 ++ samples/inputs/badge/size/.eslintrc.js | 25 +++++++++ samples/inputs/badge/size/README.md | 56 +++++++++++++++++++ samples/inputs/badge/size/index.html | 11 ++++ samples/inputs/badge/size/package.json | 42 ++++++++++++++ samples/inputs/badge/size/sandbox.config.json | 5 ++ samples/inputs/badge/size/src/index.css | 22 ++++++++ samples/inputs/badge/size/src/index.tsx | 29 ++++++++++ samples/inputs/badge/size/tsconfig.json | 29 ++++++++++ samples/inputs/badge/size/vite.config.js | 8 +++ .../type/.devcontainer/devcontainer.json | 4 ++ samples/inputs/badge/type/.eslintrc.js | 11 ++++ samples/inputs/badge/type/README.md | 56 +++++++++++++++++++ samples/inputs/badge/type/index.html | 11 ++++ samples/inputs/badge/type/package.json | 37 ++++++++++++ samples/inputs/badge/type/sandbox.config.json | 5 ++ samples/inputs/badge/type/src/index.css | 37 ++++++++++++ samples/inputs/badge/type/src/index.tsx | 33 +++++++++++ samples/inputs/badge/type/tsconfig.json | 13 +++++ samples/inputs/badge/type/vite.config.js | 8 +++ 20 files changed, 446 insertions(+) create mode 100644 samples/inputs/badge/size/.devcontainer/devcontainer.json create mode 100644 samples/inputs/badge/size/.eslintrc.js create mode 100644 samples/inputs/badge/size/README.md create mode 100644 samples/inputs/badge/size/index.html create mode 100644 samples/inputs/badge/size/package.json create mode 100644 samples/inputs/badge/size/sandbox.config.json create mode 100644 samples/inputs/badge/size/src/index.css create mode 100644 samples/inputs/badge/size/src/index.tsx create mode 100644 samples/inputs/badge/size/tsconfig.json create mode 100644 samples/inputs/badge/size/vite.config.js create mode 100644 samples/inputs/badge/type/.devcontainer/devcontainer.json create mode 100644 samples/inputs/badge/type/.eslintrc.js create mode 100644 samples/inputs/badge/type/README.md create mode 100644 samples/inputs/badge/type/index.html create mode 100644 samples/inputs/badge/type/package.json create mode 100644 samples/inputs/badge/type/sandbox.config.json create mode 100644 samples/inputs/badge/type/src/index.css create mode 100644 samples/inputs/badge/type/src/index.tsx create mode 100644 samples/inputs/badge/type/tsconfig.json create mode 100644 samples/inputs/badge/type/vite.config.js diff --git a/samples/inputs/badge/size/.devcontainer/devcontainer.json b/samples/inputs/badge/size/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/badge/size/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/badge/size/.eslintrc.js b/samples/inputs/badge/size/.eslintrc.js new file mode 100644 index 0000000000..d3ed87885e --- /dev/null +++ b/samples/inputs/badge/size/.eslintrc.js @@ -0,0 +1,25 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", + parserOptions: { + ecmaVersion: 2020, + sourceType: "module", + ecmaFeatures: { jsx: true } + }, + settings: { + react: { version: "999.999.999" } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended" + ], + rules: { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "react/react-in-jsx-scope": "off" + } +}; diff --git a/samples/inputs/badge/size/README.md b/samples/inputs/badge/size/README.md new file mode 100644 index 0000000000..43bc5c8900 --- /dev/null +++ b/samples/inputs/badge/size/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Size feature using [Badge](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/inputs/badge/size +``` + +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/inputs/badge/size/index.html b/samples/inputs/badge/size/index.html new file mode 100644 index 0000000000..c4eae48c06 --- /dev/null +++ b/samples/inputs/badge/size/index.html @@ -0,0 +1,11 @@ + + + + BadgeSize + + + +
+ + + diff --git a/samples/inputs/badge/size/package.json b/samples/inputs/badge/size/package.json new file mode 100644 index 0000000000..4f873e2d37 --- /dev/null +++ b/samples/inputs/badge/size/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-badge-size", + "description": "This project provides example of Badge Size 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": { + "@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", + "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/inputs/badge/size/sandbox.config.json b/samples/inputs/badge/size/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/badge/size/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/badge/size/src/index.css b/samples/inputs/badge/size/src/index.css new file mode 100644 index 0000000000..88ccdc5537 --- /dev/null +++ b/samples/inputs/badge/size/src/index.css @@ -0,0 +1,22 @@ +.badge-size { + display: flex; + align-items: center; + gap: 32px; + padding: 16px; +} + +.badge-size-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} + +.badge-size-item span { + color: var(--ig-gray-700); + font-size: 14px; +} + +.badge-large { --ig-size: var(--ig-size-large); } +.badge-medium { --ig-size: var(--ig-size-medium); } +.badge-small { --ig-size: var(--ig-size-small); } diff --git a/samples/inputs/badge/size/src/index.tsx b/samples/inputs/badge/size/src/index.tsx new file mode 100644 index 0000000000..8133c6d72f --- /dev/null +++ b/samples/inputs/badge/size/src/index.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrBadge } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default class BadgeSize extends React.Component { + public render(): JSX.Element { + return ( +
+
+ Large + +
+
+ Medium + +
+
+ Small + +
+
+ ); + } +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/badge/size/tsconfig.json b/samples/inputs/badge/size/tsconfig.json new file mode 100644 index 0000000000..8423942b50 --- /dev/null +++ b/samples/inputs/badge/size/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "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"], + "include": ["src"] +} diff --git a/samples/inputs/badge/size/vite.config.js b/samples/inputs/badge/size/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/badge/size/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/badge/type/.devcontainer/devcontainer.json b/samples/inputs/badge/type/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/badge/type/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/badge/type/.eslintrc.js b/samples/inputs/badge/type/.eslintrc.js new file mode 100644 index 0000000000..c2cac9dd96 --- /dev/null +++ b/samples/inputs/badge/type/.eslintrc.js @@ -0,0 +1,11 @@ +module.exports = { + parser: "@typescript-eslint/parser", + parserOptions: { ecmaVersion: 2020, sourceType: "module", ecmaFeatures: { jsx: true } }, + settings: { react: { version: "999.999.999" } }, + extends: ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"], + rules: { + "default-case": "off", "no-undef": "off", "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": "off", "@typescript-eslint/no-explicit-any": "off", + "react/react-in-jsx-scope": "off" + } +}; diff --git a/samples/inputs/badge/type/README.md b/samples/inputs/badge/type/README.md new file mode 100644 index 0000000000..9daca45c43 --- /dev/null +++ b/samples/inputs/badge/type/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Type feature using [Badge](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/inputs/badge/type +``` + +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/inputs/badge/type/index.html b/samples/inputs/badge/type/index.html new file mode 100644 index 0000000000..e6e3aa5702 --- /dev/null +++ b/samples/inputs/badge/type/index.html @@ -0,0 +1,11 @@ + + + + BadgeType + + + +
+ + + diff --git a/samples/inputs/badge/type/package.json b/samples/inputs/badge/type/package.json new file mode 100644 index 0000000000..15f063ec29 --- /dev/null +++ b/samples/inputs/badge/type/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-badge-type", + "description": "This project provides example of Badge Type 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": { + "@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", + "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/inputs/badge/type/sandbox.config.json b/samples/inputs/badge/type/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/badge/type/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/badge/type/src/index.css b/samples/inputs/badge/type/src/index.css new file mode 100644 index 0000000000..a8ae01aa56 --- /dev/null +++ b/samples/inputs/badge/type/src/index.css @@ -0,0 +1,37 @@ +.badge-type { + display: flex; + align-items: center; + gap: 32px; + padding: 16px; +} + +.badge-type-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} + +.badge-type-item span { + color: var(--ig-gray-700); + font-size: 14px; +} + +igc-badge { + color: #fff; +} + +igc-badge::part(base) { + color: #fff; +} + +.badge-check { + width: 1em; + height: 1em; + color: #fff; + fill: none; + stroke: currentColor; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 3; +} diff --git a/samples/inputs/badge/type/src/index.tsx b/samples/inputs/badge/type/src/index.tsx new file mode 100644 index 0000000000..0f300e64ef --- /dev/null +++ b/samples/inputs/badge/type/src/index.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrBadge } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default class BadgeType extends React.Component { + public render(): JSX.Element { + return ( +
+
+ Number + 12 +
+
+ Icon + + + + + +
+
+ Dot + +
+
+ ); + } +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/badge/type/tsconfig.json b/samples/inputs/badge/type/tsconfig.json new file mode 100644 index 0000000000..7dfd761170 --- /dev/null +++ b/samples/inputs/badge/type/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, "esModuleInterop": true, "baseUrl": ".", "outDir": "build/dist", + "module": "esnext", "target": "es5", "lib": ["es6", "dom"], "sourceMap": true, + "allowJs": true, "jsx": "react", "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"], + "include": ["src"] +} diff --git a/samples/inputs/badge/type/vite.config.js b/samples/inputs/badge/type/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/badge/type/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); From bc19c25ffd2cefa07f640d1438e3898a285a2a17 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Tue, 28 Jul 2026 14:05:38 +0300 Subject: [PATCH 02/14] fix(badge): update the samples to functional components --- samples/inputs/badge/dot/src/index.tsx | 18 +++++--------- samples/inputs/badge/outlined/src/index.tsx | 26 ++++++++------------- samples/inputs/badge/overview/src/index.tsx | 20 ++++++---------- samples/inputs/badge/shape/src/index.tsx | 13 +++-------- samples/inputs/badge/size/src/index.tsx | 4 +--- samples/inputs/badge/styling/src/index.tsx | 13 +++-------- samples/inputs/badge/type/src/index.tsx | 4 +--- samples/inputs/badge/variants/src/index.tsx | 13 +++-------- 8 files changed, 34 insertions(+), 77 deletions(-) diff --git a/samples/inputs/badge/dot/src/index.tsx b/samples/inputs/badge/dot/src/index.tsx index 45a07a4218..bea07fb027 100644 --- a/samples/inputs/badge/dot/src/index.tsx +++ b/samples/inputs/badge/dot/src/index.tsx @@ -3,18 +3,12 @@ import ReactDOM from 'react-dom/client'; import { IgrBadge } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeDot extends React.Component { - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- -
- ); - } +export default function BadgeDot(): JSX.Element { + return ( +
+ +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/badge/outlined/src/index.tsx b/samples/inputs/badge/outlined/src/index.tsx index 4e78560b1d..0db99a4815 100644 --- a/samples/inputs/badge/outlined/src/index.tsx +++ b/samples/inputs/badge/outlined/src/index.tsx @@ -4,22 +4,16 @@ import './index.css'; import { IgrBadge, IgrAvatar } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeOutlined extends React.Component { - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
-
- - -
- Terrance Orta -
- ); - } +export default function BadgeOutlined(): JSX.Element { + return ( +
+
+ + +
+ Terrance Orta +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/badge/overview/src/index.tsx b/samples/inputs/badge/overview/src/index.tsx index f44bcee40b..0a59ecdfbd 100644 --- a/samples/inputs/badge/overview/src/index.tsx +++ b/samples/inputs/badge/overview/src/index.tsx @@ -4,19 +4,13 @@ import './index.css'; import { IgrBadge, IgrAvatar } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeOverview extends React.Component { - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- - -
- ); - } +export default function BadgeOverview(): JSX.Element { + return ( +
+ + +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/badge/shape/src/index.tsx b/samples/inputs/badge/shape/src/index.tsx index abe11d2fd9..c23c45826d 100644 --- a/samples/inputs/badge/shape/src/index.tsx +++ b/samples/inputs/badge/shape/src/index.tsx @@ -4,19 +4,12 @@ import './index.css'; import { IgrBadge } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeShape extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( +export default function BadgeShape(): JSX.Element { + return (
- ); - } + ); } // rendering above class to the React DOM diff --git a/samples/inputs/badge/size/src/index.tsx b/samples/inputs/badge/size/src/index.tsx index 8133c6d72f..80d083fcd1 100644 --- a/samples/inputs/badge/size/src/index.tsx +++ b/samples/inputs/badge/size/src/index.tsx @@ -4,8 +4,7 @@ import './index.css'; import { IgrBadge } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeSize extends React.Component { - public render(): JSX.Element { +export default function BadgeSize(): JSX.Element { return (
@@ -22,7 +21,6 @@ export default class BadgeSize extends React.Component {
); - } } const root = ReactDOM.createRoot(document.getElementById('root')); diff --git a/samples/inputs/badge/styling/src/index.tsx b/samples/inputs/badge/styling/src/index.tsx index a1ef9955ab..86ec9e0e9c 100644 --- a/samples/inputs/badge/styling/src/index.tsx +++ b/samples/inputs/badge/styling/src/index.tsx @@ -4,19 +4,12 @@ import './index.css'; import { IgrBadge } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeStyling extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( +export default function BadgeStyling(): JSX.Element { + return (
- ); - } + ); } // rendering above class to the React DOM diff --git a/samples/inputs/badge/type/src/index.tsx b/samples/inputs/badge/type/src/index.tsx index 0f300e64ef..d539725f8e 100644 --- a/samples/inputs/badge/type/src/index.tsx +++ b/samples/inputs/badge/type/src/index.tsx @@ -4,8 +4,7 @@ import './index.css'; import { IgrBadge } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeType extends React.Component { - public render(): JSX.Element { +export default function BadgeType(): JSX.Element { return (
@@ -26,7 +25,6 @@ export default class BadgeType extends React.Component {
); - } } const root = ReactDOM.createRoot(document.getElementById('root')); diff --git a/samples/inputs/badge/variants/src/index.tsx b/samples/inputs/badge/variants/src/index.tsx index b036427cbc..cc6d9400e2 100644 --- a/samples/inputs/badge/variants/src/index.tsx +++ b/samples/inputs/badge/variants/src/index.tsx @@ -4,19 +4,12 @@ import './index.css'; import { IgrBadge } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeVariants extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( +export default function BadgeVariants(): JSX.Element { + return (
- ); - } + ); } // rendering above class to the React DOM From 8ed65fc57e26b065b1800f31ad1c81c733f312ea Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Tue, 28 Jul 2026 17:17:20 +0300 Subject: [PATCH 03/14] fix(badge): wrong bracket fix --- samples/inputs/badge/size/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/inputs/badge/size/package.json b/samples/inputs/badge/size/package.json index 4f873e2d37..3a1ccaa183 100644 --- a/samples/inputs/badge/size/package.json +++ b/samples/inputs/badge/size/package.json @@ -38,5 +38,5 @@ "not dead", "not ie <= 11", "not op_mini all" - } + ] } From 77e337f55c3057cb3758d6e6dc7cfa0eb5359b56 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Tue, 4 Aug 2026 17:21:10 +0300 Subject: [PATCH 04/14] feat(badge): merge last changes --- samples/inputs/badge/dot/src/index.css | 21 +++++++++++++++- samples/inputs/badge/dot/src/index.tsx | 19 ++++++++++++--- samples/inputs/badge/overview/src/index.css | 2 -- samples/inputs/badge/overview/src/index.tsx | 2 +- samples/inputs/badge/variants/src/index.css | 13 +++++++++- samples/inputs/badge/variants/src/index.tsx | 27 ++++++++++++++++----- 6 files changed, 69 insertions(+), 15 deletions(-) diff --git a/samples/inputs/badge/dot/src/index.css b/samples/inputs/badge/dot/src/index.css index 1f53b8aa05..792ec3a7ad 100644 --- a/samples/inputs/badge/dot/src/index.css +++ b/samples/inputs/badge/dot/src/index.css @@ -1,2 +1,21 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.wrapper { + display: flex; + position: relative; + width: fit-content; + margin: 15px 0 0 15px; +} + +igc-avatar igc-icon { + margin: 4px; +} + +igc-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(35%, -35%); + z-index: 1; +} \ No newline at end of file diff --git a/samples/inputs/badge/dot/src/index.tsx b/samples/inputs/badge/dot/src/index.tsx index bea07fb027..96a469b691 100644 --- a/samples/inputs/badge/dot/src/index.tsx +++ b/samples/inputs/badge/dot/src/index.tsx @@ -1,12 +1,23 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; -import { IgrBadge } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; +import './index.css'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; +const homeIcon = + ''; + export default function BadgeDot(): JSX.Element { + useEffect(() => { + registerIconFromText('home', homeIcon, 'material'); + }, []); + return ( -
- +
+ + + +
); } diff --git a/samples/inputs/badge/overview/src/index.css b/samples/inputs/badge/overview/src/index.css index 2ea157a65b..47b3eaf87e 100644 --- a/samples/inputs/badge/overview/src/index.css +++ b/samples/inputs/badge/overview/src/index.css @@ -2,8 +2,6 @@ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ igc-badge { - --size: 18px; - position: relative; right: 10px; } diff --git a/samples/inputs/badge/overview/src/index.tsx b/samples/inputs/badge/overview/src/index.tsx index 0a59ecdfbd..8ca2608a2d 100644 --- a/samples/inputs/badge/overview/src/index.tsx +++ b/samples/inputs/badge/overview/src/index.tsx @@ -7,7 +7,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function BadgeOverview(): JSX.Element { return (
- +
); diff --git a/samples/inputs/badge/variants/src/index.css b/samples/inputs/badge/variants/src/index.css index 1f53b8aa05..835cb52546 100644 --- a/samples/inputs/badge/variants/src/index.css +++ b/samples/inputs/badge/variants/src/index.css @@ -1,2 +1,13 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.wrapper { + position: relative; + margin: 15px 0 0 15px; +} + +igc-badge { + position: absolute; + bottom: 0; + left: 28px; +} \ No newline at end of file diff --git a/samples/inputs/badge/variants/src/index.tsx b/samples/inputs/badge/variants/src/index.tsx index cc6d9400e2..5388547879 100644 --- a/samples/inputs/badge/variants/src/index.tsx +++ b/samples/inputs/badge/variants/src/index.tsx @@ -1,17 +1,32 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; +const personIcon = + ''; +const checkIcon = + ''; + export default function BadgeVariants(): JSX.Element { + useEffect(() => { + registerIconFromText('person', personIcon, 'material'); + registerIconFromText('check', checkIcon, 'material'); + }, []); + return ( -
- -
+
+ + + + + + +
); } // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); From e499eadcb670e574f61655b0d93fa45aa63e9646 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 4 Aug 2026 17:41:00 +0300 Subject: [PATCH 05/14] Enable sample size reporting for iframe content resizing when requested. --- browser/src/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/browser/src/index.tsx b/browser/src/index.tsx index 8448fe8ebb..36e80a84fe 100644 --- a/browser/src/index.tsx +++ b/browser/src/index.tsx @@ -5,6 +5,7 @@ import { BrowserRouter } from "react-router-dom"; import SamplesBrowser from "./navigation/SamplesBrowser"; import RegisterServiceWorker from './serviceWorker'; import { createRoot } from 'react-dom/client'; +import { initSampleSizeReporter } from './sample-size-reporter'; import './index.css'; // styles shared between all samples @@ -21,6 +22,10 @@ import './index.css'; // styles shared between all samples // ); // }); +// Lets docs samples embedded with size their iframe to +// their content. Dormant unless the docs host asks for it. +initSampleSizeReporter(); + const container = document.getElementById('root'); const root = createRoot(container); root.render( From 2b8f863dbc2384c1b5200171bab7651c26b3749e Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 4 Aug 2026 17:36:49 +0300 Subject: [PATCH 06/14] fix(browser): resolve sample paths when clone folder name differs Transformer.getRelative made a repo-relative path by cutting the absolute path at the "igniteui-react-examples" string. When the repository is cloned into a differently named folder the match fails, the absolute path is used as SampleFolderPath, and the group/component/sample folders are then read off the wrong path segments - copying samples to src/ and writing a bogus routing group instead of src/samples//RoutingData.ts. Fall back to the repository root derived from the gulp working directory, so the path no longer depends on the name of the checkout folder. Co-Authored-By: Claude Opus 5 (1M context) --- browser/tasks/Transformer.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/browser/tasks/Transformer.ts b/browser/tasks/Transformer.ts index e037fe3109..a94b443bfd 100644 --- a/browser/tasks/Transformer.ts +++ b/browser/tasks/Transformer.ts @@ -454,6 +454,15 @@ class Transformer { return ".." + sampleFullPath; } + // the repository was cloned into a folder that is not named after it, + // so fall back to the repository root, which is the parent of ./browser + let repositoryRoot = pathModule.dirname(process.cwd()); + if (sampleFullPath.indexOf(repositoryRoot) === 0) { + let relativePath = sampleFullPath.substring(repositoryRoot.length); + relativePath = relativePath.split(pathModule.sep).join(process.env.PATH_SEP || '/'); + return ".." + relativePath; + } + console.log("failed on getRelative " + sampleFullPath); return sampleFullPath; } From d5ea90615362882c180db02ee6fc43325f5b00a9 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 5 Aug 2026 09:44:36 +0300 Subject: [PATCH 07/14] feat(browser): add sample size reporting for iframe content resizing Implement `initSampleSizeReporter` to enable iframe content to report its dimensions upon request, supporting dynamic resizing scenarios. --- browser/src/sample-size-reporter.ts | 86 +++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 browser/src/sample-size-reporter.ts diff --git a/browser/src/sample-size-reporter.ts b/browser/src/sample-size-reporter.ts new file mode 100644 index 0000000000..493678e20c --- /dev/null +++ b/browser/src/sample-size-reporter.ts @@ -0,0 +1,86 @@ +/** + * Demo-side half of the docs contract + * (astro-components/src/scripts/sample-widget.ts). + * + * The docs host posts { type: 'igd-sample-fit', width?: boolean } into the + * iframe when it loads. In response we neutralize the viewport-bound sizing + * this app inherits (shared.v8.css pins #root/html/body/main to height: 100%, + * and the samples browser chrome plus the shared .container/.sample wrappers + * chain another height: 100% on top — all of which can only echo the iframe's + * own height back) and report the content's size with + * { type: 'igd-sample-height', height, width? } immediately and on every + * resize. Demos embedded at a fixed height never receive the enable message, + * so this stays dormant for them and their percentage layouts are untouched. + */ +const FIT_ENABLE = 'igd-sample-fit'; +const FIT_REPORT = 'igd-sample-height'; + +export function initSampleSizeReporter(): void { + if (typeof window === 'undefined' || window.parent === window) { + return; + } + + let reportWidth = false; + let observer: ResizeObserver | null = null; + let styled = false; + // Captured from the host's enable message so replies go back to that exact + // origin instead of being broadcast to any window that happens to listen. + let hostOrigin = '*'; + + // Right-most element edge, mirroring the host's same-origin measurement: + // block-level content stretches to the viewport width, so the intrinsic + // width has to come from the element boxes, not the body itself. + const measureWidth = (): number | undefined => { + const body = document.body; + const left = body.getBoundingClientRect().left; + let right = left; + body.querySelectorAll('*').forEach(el => { + right = Math.max(right, el.getBoundingClientRect().right); + }); + if (right <= left) { + return undefined; + } + const cs = getComputedStyle(body); + return right - left + parseFloat(cs.paddingRight || '0') + parseFloat(cs.borderRightWidth || '0'); + }; + + const report = () => { + const height = Math.max( + document.documentElement.offsetHeight, + document.body.offsetHeight, + document.body.scrollHeight, + ); + window.parent.postMessage( + { type: FIT_REPORT, height, width: reportWidth ? measureWidth() : undefined }, + hostOrigin, + ); + }; + + window.addEventListener('message', (e: MessageEvent) => { + if (!e.data || e.data.type !== FIT_ENABLE) { + return; + } + reportWidth = Boolean(e.data.width); + hostOrigin = e.origin || '*'; + + if (!styled) { + styled = true; + const style = document.createElement('style'); + // Every link in the height: 100% chain has to be released, otherwise + // the first one left pinned re-anchors everything below it to the + // iframe height. !important also beats SamplesBrowser's inline + // height: 100% on .sbSwitch. + style.textContent = + 'html, body, #root, main { height: auto !important; overflow: visible !important; }' + + '.sbRoot, .sbContent, .sbSwitch { height: auto !important; overflow: visible !important; }' + + '.container, .sample { height: auto !important; overflow: visible !important; }'; + document.head.appendChild(style); + } + + report(); + if ('ResizeObserver' in window && !observer) { + observer = new ResizeObserver(report); + observer.observe(document.body); + } + }); +} From b58e0595d1636a92feb667a6a6d43f92edf5b462 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 5 Aug 2026 16:16:49 +0300 Subject: [PATCH 08/14] feat(badge): update badge samples --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/badge/dot/src/index.css | 155 ++++++++++++++++++-- samples/inputs/badge/dot/src/index.tsx | 68 ++++++++- samples/inputs/badge/outlined/src/index.css | 152 ++++++++++++++++--- samples/inputs/badge/outlined/src/index.tsx | 61 ++++++-- samples/inputs/badge/overview/src/index.css | 93 +++++++++++- samples/inputs/badge/overview/src/index.tsx | 47 +++++- samples/inputs/badge/shape/src/index.css | 53 ++++++- samples/inputs/badge/shape/src/index.tsx | 34 ++++- samples/inputs/badge/size/src/index.css | 46 +++++- samples/inputs/badge/size/src/index.tsx | 49 +++++-- samples/inputs/badge/styling/src/index.css | 91 +++++++++++- samples/inputs/badge/styling/src/index.tsx | 53 ++++++- samples/inputs/badge/type/src/index.css | 70 ++++++--- samples/inputs/badge/type/src/index.tsx | 66 ++++++--- samples/inputs/badge/variants/src/index.css | 83 ++++++++++- samples/inputs/badge/variants/src/index.tsx | 73 +++++++-- 18 files changed, 1049 insertions(+), 149 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index 4d9f02110e..4c9d026bf1 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-06-16 16:54:44","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-05 16:14:25","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index 4d9f02110e..4c9d026bf1 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-06-16 16:54:44","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-05 16:14:25","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/badge/dot/src/index.css b/samples/inputs/badge/dot/src/index.css index 792ec3a7ad..ab27b1660d 100644 --- a/samples/inputs/badge/dot/src/index.css +++ b/samples/inputs/badge/dot/src/index.css @@ -1,21 +1,152 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.wrapper { +#root, +html, +body, +main { + background: transparent; +} + +igc-badge { + --ig-size: var(--ig-size-small); + --ig-badge-dot-size: 0.5rem; +} + +igc-avatar { + --size: 40px; +} + +.icon-example igc-badge, +.avatar-example igc-badge, +.nav-icon igc-badge { + position: absolute; +} + +.icon-example igc-badge { + inset-block-start: 0; + inset-inline-end: 2px; +} + +.avatar-example igc-badge { + inset-block-start: -0.25rem; + inset-inline-end: -2px; +} + +.nav-icon igc-badge { + inset-block-start: -2px; + inset-inline-end: -6px; +} + +.badge-dot { display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 40px; + min-height: 7rem; +} + +.dot-example { position: relative; - width: fit-content; - margin: 15px 0 0 15px; } -igc-avatar igc-icon { - margin: 4px; +.icon-example, +.avatar-example, +.icon-circle { + display: flex; + align-items: center; + width: 36px; + height: 36px; } -igc-badge { - position: absolute; - top: 0; - right: 0; - transform: translate(35%, -35%); - z-index: 1; -} \ No newline at end of file +.icon-circle { + justify-content: center; + border-radius: 50%; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} + +.notifications-card, +.nav-card { + background: var(--ig-surface-500); + border-radius: 4px; + box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12); +} + +.notifications-card { + min-width: 272px; + padding: 8px 0; +} + +.notification-row { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + font-size: 14px; + color: var(--ig-gray-900); +} + +.row-indicator { + display: inline-flex; + justify-content: center; + width: 12px; +} + +.row-indicator igc-badge, +.nav-icon igc-badge { + --ig-badge-background-color: #0057A9; +} + +.row-indicator igc-badge::part(base), +.nav-icon igc-badge::part(base) { + background-color: #0057A9; +} + +.row-title { + flex: 1; +} + +.row-time { + font-size: 13px; + color: var(--ig-gray-900); +} + +.row-time.unread { + color: #0057A9; + font-weight: 600; +} + +.row-chevron { + --ig-size: 1; + + color: var(--ig-gray-600); + font-size: 18px; +} + +.nav-card { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; +} + +.nav-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + min-width: 56px; + color: var(--ig-gray-700); + font-size: 12px; +} + +.nav-item.active { + color: #0075D2; +} + +.nav-icon { + position: relative; + display: inline-flex; +} diff --git a/samples/inputs/badge/dot/src/index.tsx b/samples/inputs/badge/dot/src/index.tsx index 96a469b691..551a61e7b7 100644 --- a/samples/inputs/badge/dot/src/index.tsx +++ b/samples/inputs/badge/dot/src/index.tsx @@ -4,20 +4,76 @@ import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-rea import './index.css'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; +const notificationsIcon = + ''; +const chevronRightIcon = + ''; const homeIcon = - ''; + ''; +const personIcon = + ''; +const facebookMessengerIcon = + ''; + +const notifications = [ + { title: 'Contract renewal', time: '09:12', unread: true }, + { title: 'Weekly digest', time: 'Yesterday', unread: false } +]; + +const tabs = [ + { label: 'Home', icon: 'home', active: true, hasUpdates: false }, + { label: 'Chat', icon: 'facebookMessenger', active: false, hasUpdates: true }, + { label: 'Profile', icon: 'person', active: false, hasUpdates: false } +]; export default function BadgeDot(): JSX.Element { useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + registerIconFromText('chevron_right', chevronRightIcon, 'material'); registerIconFromText('home', homeIcon, 'material'); + registerIconFromText('person', personIcon, 'material'); + registerIconFromText('facebookMessenger', facebookMessengerIcon, 'material'); }, []); return ( -
- - - - +
+
+
+ +
+ +
+
+ {notifications.map((item) => ( +
+ + {item.unread && } + + {item.title} + {item.time} + +
+ ))} +
+
+ + +
+
+ {tabs.map((tab) => ( +
+ + + {tab.hasUpdates && } + + {tab.label} +
+ ))} +
); } diff --git a/samples/inputs/badge/outlined/src/index.css b/samples/inputs/badge/outlined/src/index.css index 151d518c9a..bac409ff92 100644 --- a/samples/inputs/badge/outlined/src/index.css +++ b/samples/inputs/badge/outlined/src/index.css @@ -1,35 +1,147 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.wrapper { +#root, +html, +body, +main { + background: transparent; +} + +igc-badge { + --ig-size: var(--ig-size-small); +} + +igc-avatar { + --size: 40px; + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +.outlined-example igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.outlined-example:nth-child(2) igc-badge { + inset-block-start: auto; + inset-block-end: -6px; + inset-inline-end: -6px; +} + +.step-marker igc-badge { + position: absolute; + inset-block-start: -1px; + inset-inline-end: -2px; +} + +.outlined-example igc-badge { + position: absolute; + inset-block-start: -6px; + inset-inline-end: -10px; +} + +.icon-circle igc-icon { + font-size: 20px; +} + +.badge-outlined { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 60px; + min-height: 7rem; +} + +.outlined-example { position: relative; display: flex; - width: fit-content; +} + +.icon-circle, +.step-circle { + display: flex; align-items: center; - margin-block: 1rem; - gap: 0.5rem; - padding: 0.5rem; - border: 1px solid var(--ig-gray-300); - border-radius: .25rem; + justify-content: center; + border-radius: 50%; } -igc-avatar { - @container style(--ig-theme: indigo) { - --ig-size: var(--ig-size-large); - } +.icon-circle { + width: 36px; + height: 36px; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} - anchor-name: --avatar; +.badge-info-blue { + --ig-badge-background-color: #0057A9; } -igc-badge { - --size: .75rem; +.badge-info-blue::part(base) { + background-color: #0057A9; +} - position: absolute; - inset-block-end: anchor(--avatar bottom); - inset-inline-end: anchor(--avatar right); +.payment-dot-blue { + --ig-badge-background-color: #0057A9; + --ig-badge-dot-size: 0.5rem; +} + +.payment-dot-blue::part(base) { + background-color: #0057A9; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} + +.steps { + display: flex; + align-items: flex-start; + gap: 8px; +} + +.step { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.step-marker { + position: relative; + display: flex; +} + +.step-circle { + width: 26px; + height: 26px; + background: var(--ig-gray-900); + color: var(--ig-gray-50); + font-size: 12px; +} + +.step-circle.pending { + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} + +.step-connector { + width: 56px; + margin-block-start: 13px; + border-block-start: 1px solid var(--ig-gray-900); +} + +.step-connector.pending { + border-block-start-style: dashed; + border-block-start-color: var(--ig-gray-400); } -span { - display: block; - font-weight: 600; +.step-label { + color: var(--ig-gray-700); + font-size: 13px; } diff --git a/samples/inputs/badge/outlined/src/index.tsx b/samples/inputs/badge/outlined/src/index.tsx index 0db99a4815..a110275e9b 100644 --- a/samples/inputs/badge/outlined/src/index.tsx +++ b/samples/inputs/badge/outlined/src/index.tsx @@ -1,18 +1,61 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge, IgrAvatar } from 'igniteui-react'; +import { IgrBadge, IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; +const favoriteBorderIcon = + ''; +const closeIcon = + ''; + +const steps = [ + { index: 1, label: 'Orders', current: false, pending: false }, + { index: 2, label: 'Payment', current: true, pending: false }, + { index: 3, label: 'Shipping', current: false, pending: true } +]; + export default function BadgeOutlined(): JSX.Element { + useEffect(() => { + registerIconFromText('favorite_border', favoriteBorderIcon, 'material'); + registerIconFromText('close', closeIcon, 'material'); + }, []); + return ( -
-
- - -
- Terrance Orta -
+
+
+
+ +
+ 23 +
+
+ + + + +
+
+ {steps.map((step, i) => ( + + {i > 0 && ( + + )} +
+
+ + {step.index} + + {step.current && ( + + )} +
+ {step.label} +
+ + ))} +
+
); } diff --git a/samples/inputs/badge/overview/src/index.css b/samples/inputs/badge/overview/src/index.css index 47b3eaf87e..3b7174e9e3 100644 --- a/samples/inputs/badge/overview/src/index.css +++ b/samples/inputs/badge/overview/src/index.css @@ -1,11 +1,98 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +#root, +html, +body, +main { + background: transparent; +} + +igc-avatar { + --size: 40px; +} + +igc-icon { + color: var(--ig-gray-700); + font-size: 1.5rem; +} + igc-badge { + --ig-size: var(--ig-size-small); + + position: absolute; + inset-block-start: -0.15rem; + inset-inline-end: -0.15rem; +} + +.avatar-example igc-badge { + inset-block-start: auto; + inset-block-end: -0.15rem; + inset-inline-end: -0.15rem; +} + +.avatar-example igc-icon { + color: var(--ig-gray-50); + fill: var(--ig-gray-50); +} + +.event-example igc-chip { + --ig-size: var(--ig-size-large); +} + +.event-example igc-chip::part(base) { + background-color: #E0E0E0; + border-radius: 999px; +} + +.event-example igc-badge { + inset-block-start: 0; + inset-inline-end: -0.8rem; +} + +.event-example igc-badge::part(base) { + background-color: #0057A9; + color: var(--ig-gray-50); +} + +.icon-example igc-badge { + inset-block-start: 0; + inset-inline-end: 0; +} + +.icon-example igc-badge::part(base) { + color: var(--ig-gray-50); +} + +.notification-example igc-badge { + inset-block-start: 0.5rem; + inset-inline-end: 0.5rem; + width: 0.5rem; +} + +.event-example { + min-width: auto; +} + +.badge-overview { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.badge-example { position: relative; - right: 10px; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2.5rem; + min-height: 2.5rem; } -igc-avatar { - margin-top: 6px; +.icon-example, +.notification-example { + width: 2.5rem; + height: 2.5rem; } diff --git a/samples/inputs/badge/overview/src/index.tsx b/samples/inputs/badge/overview/src/index.tsx index 8ca2608a2d..46b6333d63 100644 --- a/samples/inputs/badge/overview/src/index.tsx +++ b/samples/inputs/badge/overview/src/index.tsx @@ -1,14 +1,51 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge, IgrAvatar } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrChip, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; +const checkIcon = + ''; +const mailIcon = + ''; +const notificationsIcon = + ''; + export default function BadgeOverview(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + registerIconFromText('mail', mailIcon, 'material'); + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); + return ( -
- - +
+
+ + + + +
+
+ + + 2 + +
+
+ Events + + new + +
+
+ + +
); } diff --git a/samples/inputs/badge/shape/src/index.css b/samples/inputs/badge/shape/src/index.css index 1f53b8aa05..f2b02a55e9 100644 --- a/samples/inputs/badge/shape/src/index.css +++ b/samples/inputs/badge/shape/src/index.css @@ -1,2 +1,53 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +#root, +html, +body, +main { + background: transparent; +} + +.badge-shape { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.badge-shape-row { + display: grid; + grid-template-columns: 80px 40px 40px 40px; + align-items: center; + justify-items: center; + gap: 8px; +} + +.row-label { + justify-self: end; + color: var(--ig-gray-700); + font-size: 14px; +} + +.badge-small { + --ig-size: var(--ig-size-small); +} + +.badge-info-blue { + --ig-badge-background-color: #0057A9; +} + +.badge-info-blue::part(base) { + background-color: #0057A9; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} diff --git a/samples/inputs/badge/shape/src/index.tsx b/samples/inputs/badge/shape/src/index.tsx index c23c45826d..fe423f3edf 100644 --- a/samples/inputs/badge/shape/src/index.tsx +++ b/samples/inputs/badge/shape/src/index.tsx @@ -1,14 +1,40 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; +const checkIcon = + ''; + export default function BadgeShape(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + }, []); + return ( -
- +
+
+ Rounded + + + + 2 + + + +
+
+ Square + + + + 2 + + +
+
); } diff --git a/samples/inputs/badge/size/src/index.css b/samples/inputs/badge/size/src/index.css index 88ccdc5537..df94aa22c8 100644 --- a/samples/inputs/badge/size/src/index.css +++ b/samples/inputs/badge/size/src/index.css @@ -1,22 +1,54 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +#root, +html, +body, +main { + background: transparent; +} + .badge-size { display: flex; + flex-direction: column; align-items: center; - gap: 32px; - padding: 16px; + justify-content: center; + gap: 40px; + padding: 32px 16px; + min-height: 7rem; } -.badge-size-item { - display: flex; - flex-direction: column; +.badge-size-row { + display: grid; + grid-template-columns: 80px 32px 40px 40px; align-items: center; - gap: 12px; + justify-items: center; + gap: 8px; } -.badge-size-item span { +.row-label { + justify-self: end; color: var(--ig-gray-700); font-size: 14px; } +.badge-info-blue { + --ig-badge-background-color: #0057A9; +} + +.badge-info-blue::part(base) { + background-color: #0057A9; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} + .badge-large { --ig-size: var(--ig-size-large); } .badge-medium { --ig-size: var(--ig-size-medium); } .badge-small { --ig-size: var(--ig-size-small); } diff --git a/samples/inputs/badge/size/src/index.tsx b/samples/inputs/badge/size/src/index.tsx index 80d083fcd1..0a997231d4 100644 --- a/samples/inputs/badge/size/src/index.tsx +++ b/samples/inputs/badge/size/src/index.tsx @@ -1,25 +1,44 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; +const checkIcon = + ''; + export default function BadgeSize(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + }, []); + return ( -
-
- Large - -
-
- Medium - -
-
- Small - +
+
+ Small + + 2 + + + +
+
+ Medium + + 2 + + + +
+
+ Large + + 2 + + + +
-
); } diff --git a/samples/inputs/badge/styling/src/index.css b/samples/inputs/badge/styling/src/index.css index 516c162995..9402d83966 100644 --- a/samples/inputs/badge/styling/src/index.css +++ b/samples/inputs/badge/styling/src/index.css @@ -1,7 +1,90 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-badge::part(base) { - --background-color: var(--ig-error-A100); - --border-radius: 2px; -} \ No newline at end of file +#root, +html, +body, +main { + background: transparent; +} + +igc-badge { + --ig-size: var(--ig-size-small); +} + +.badge-teal { + --ig-badge-background-color: var(--ig-success-700); + --ig-badge-border-radius: 50%; +} + +.badge-amber { + --ig-badge-background-color: #C97C00; + --ig-badge-border-radius: 50%; +} + +.badge-magenta { + --ig-badge-background-color: #9C27B0; + --ig-badge-text-color: var(--ig-gray-50); + --ig-badge-border-radius: 50%; +} + +.badge-lime { + --ig-badge-background-color: var(--ig-success-700); + --ig-badge-border-radius: 50%; +} + +.badge-teal igc-icon, +.badge-amber igc-icon, +.styling-item.pink igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-teal igc-icon { + position: relative; +} + +.badge-teal igc-icon::after { + content: ""; + position: absolute; + inset: 50% auto auto 50%; + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--ig-success-700); + transform: translate(-50%, -50%); +} + +.styling-item igc-avatar { + --size: 40px; +} + +.styling-item.green igc-avatar { + --icon-color: #248436; + --ig-avatar-background: #A9CEB0; + --ig-avatar-color: #248436; +} + +.styling-item.pink igc-avatar { + --ig-avatar-background: #DA64FF; + --ig-avatar-color: var(--ig-gray-50); +} + +.styling-item igc-badge { + position: absolute; + inset-block-end: -2px; + inset-inline-end: -2px; +} + +.badge-styling { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 60px; + min-height: 7rem; +} + +.styling-item { + position: relative; + display: flex; +} diff --git a/samples/inputs/badge/styling/src/index.tsx b/samples/inputs/badge/styling/src/index.tsx index 86ec9e0e9c..ca4ee2ae91 100644 --- a/samples/inputs/badge/styling/src/index.tsx +++ b/samples/inputs/badge/styling/src/index.tsx @@ -1,14 +1,59 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; +const personIcon = + ''; +const photoCameraIcon = + ''; +const starBorderIcon = + ''; +const favoriteBorderIcon = + ''; + export default function BadgeStyling(): JSX.Element { + useEffect(() => { + registerIconFromText('person', personIcon, 'material'); + registerIconFromText('photo_camera', photoCameraIcon, 'material'); + registerIconFromText('star_border', starBorderIcon, 'material'); + registerIconFromText('favorite_border', favoriteBorderIcon, 'material'); + }, []); + return ( -
- +
+
+ + + + + + +
+
+ + + + +
+
+ + + + 2 +
+
+ +
+
); } diff --git a/samples/inputs/badge/type/src/index.css b/samples/inputs/badge/type/src/index.css index a8ae01aa56..5849738f8d 100644 --- a/samples/inputs/badge/type/src/index.css +++ b/samples/inputs/badge/type/src/index.css @@ -1,37 +1,65 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +#root, +html, +body, +main { + background: transparent; +} + +igc-avatar { + --size: 40px; +} + +igc-badge { + --ig-size: var(--ig-size-small); + + position: absolute; + inset-block-end: -6px; + inset-inline-end: -4px; +} + +.badge-type igc-badge::part(base), +.badge-type igc-badge igc-icon { + color: var(--ig-gray-50); +} + +.badge-type igc-badge igc-icon { + fill: var(--ig-gray-50); +} + .badge-type { display: flex; align-items: center; - gap: 32px; - padding: 16px; + justify-content: center; + gap: 60px; + min-height: 7rem; } .badge-type-item { display: flex; flex-direction: column; align-items: center; - gap: 12px; -} - -.badge-type-item span { - color: var(--ig-gray-700); - font-size: 14px; + justify-content: center; + gap: 16px; + min-width: 56px; + min-height: 72px; } -igc-badge { - color: #fff; +.avatar-wrapper { + position: relative; + display: flex; } -igc-badge::part(base) { - color: #fff; +.dot-badge { + inset-block-end: 0; + inset-inline-end: 0; + --ig-badge-dot-size: 0.5rem; } -.badge-check { - width: 1em; - height: 1em; - color: #fff; - fill: none; - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 3; +.badge-type-item span { + color: var(--ig-gray-700); + font-size: 12px; + line-height: 16px; } diff --git a/samples/inputs/badge/type/src/index.tsx b/samples/inputs/badge/type/src/index.tsx index d539725f8e..e5b881c715 100644 --- a/samples/inputs/badge/type/src/index.tsx +++ b/samples/inputs/badge/type/src/index.tsx @@ -1,29 +1,57 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; +const checkIcon = + ''; + export default function BadgeType(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + }, []); + return ( -
-
- Number - 12 -
-
- Icon - - - - - -
-
- Dot - +
+
+
+ + +
+ Dot +
+
+
+ + + + +
+ Icon +
+
+
+ + + 2 + +
+ Text +
-
); } diff --git a/samples/inputs/badge/variants/src/index.css b/samples/inputs/badge/variants/src/index.css index 835cb52546..5a5fbbcf98 100644 --- a/samples/inputs/badge/variants/src/index.css +++ b/samples/inputs/badge/variants/src/index.css @@ -1,13 +1,84 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.wrapper { - position: relative; - margin: 15px 0 0 15px; +#root, +html, +body, +main { + background: transparent; } igc-badge { + --ig-size: var(--ig-size-small); position: absolute; - bottom: 0; - left: 28px; -} \ No newline at end of file + inset-block-end: -4px; + inset-inline-end: -4px; +} + +igc-avatar { + --ig-size: var(--ig-size-small); + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +.variant-item:first-child igc-avatar igc-icon, +.variant-item:nth-child(4) igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-variants { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 40px; + min-height: 7rem; +} + +.variant-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + min-width: 56px; +} + +.variant-item span { + color: var(--ig-gray-700); + font-size: 13px; +} + +.avatar-wrapper { + position: relative; + display: flex; +} + +.badge-info-blue { + --ig-badge-background-color: #0057A9; +} + +.badge-info-blue::part(base) { + background-color: #0057A9; +} + +.badge-primary-blue { + --ig-badge-background-color: #0070BA; +} + +.badge-primary-blue::part(base) { + background-color: #0070BA; +} + +.badge-warning-black::part(base) { + background-color: #FAA419; + color: #000; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} diff --git a/samples/inputs/badge/variants/src/index.tsx b/samples/inputs/badge/variants/src/index.tsx index 5388547879..47cfdd62e8 100644 --- a/samples/inputs/badge/variants/src/index.tsx +++ b/samples/inputs/badge/variants/src/index.tsx @@ -4,25 +4,76 @@ import './index.css'; import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -const personIcon = - ''; const checkIcon = - ''; + ''; +const closeIcon = + ''; +const mailIcon = + ''; +const notificationsIcon = + ''; export default function BadgeVariants(): JSX.Element { useEffect(() => { - registerIconFromText('person', personIcon, 'material'); registerIconFromText('check', checkIcon, 'material'); + registerIconFromText('close', closeIcon, 'material'); + registerIconFromText('mail', mailIcon, 'material'); + registerIconFromText('notifications', notificationsIcon, 'material'); }, []); return ( -
- - - - - - +
+
+
+ + + + 2 +
+ Primary +
+
+
+ + + + +
+ Info +
+
+
+ + + + +
+ Success +
+
+
+ + + + 2 +
+ Warn +
+
+
+ + + + +
+ Error +
); } From 3ed912660ce1cecbaa74c0369db50280552e9413 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 5 Aug 2026 18:17:43 +0300 Subject: [PATCH 09/14] feat(badge): update badge samples --- samples/inputs/badge/dot/src/index.css | 1 - samples/inputs/badge/outlined/src/index.css | 1 - samples/inputs/badge/overview/src/index.css | 1 - samples/inputs/badge/size/src/index.css | 3 +-- samples/inputs/badge/styling/src/index.css | 3 +-- samples/inputs/badge/type/src/index.css | 1 - samples/inputs/badge/variants/src/index.css | 3 +-- 7 files changed, 3 insertions(+), 10 deletions(-) diff --git a/samples/inputs/badge/dot/src/index.css b/samples/inputs/badge/dot/src/index.css index ab27b1660d..3ed7a922c8 100644 --- a/samples/inputs/badge/dot/src/index.css +++ b/samples/inputs/badge/dot/src/index.css @@ -42,7 +42,6 @@ igc-avatar { display: flex; align-items: center; justify-content: center; - flex-wrap: wrap; gap: 40px; min-height: 7rem; } diff --git a/samples/inputs/badge/outlined/src/index.css b/samples/inputs/badge/outlined/src/index.css index bac409ff92..c5b3eacec2 100644 --- a/samples/inputs/badge/outlined/src/index.css +++ b/samples/inputs/badge/outlined/src/index.css @@ -48,7 +48,6 @@ igc-avatar { display: flex; align-items: center; justify-content: center; - flex-wrap: wrap; gap: 60px; min-height: 7rem; } diff --git a/samples/inputs/badge/overview/src/index.css b/samples/inputs/badge/overview/src/index.css index 3b7174e9e3..77d5d76f6b 100644 --- a/samples/inputs/badge/overview/src/index.css +++ b/samples/inputs/badge/overview/src/index.css @@ -19,7 +19,6 @@ igc-icon { igc-badge { --ig-size: var(--ig-size-small); - position: absolute; inset-block-start: -0.15rem; inset-inline-end: -0.15rem; diff --git a/samples/inputs/badge/size/src/index.css b/samples/inputs/badge/size/src/index.css index df94aa22c8..1d09cca5d4 100644 --- a/samples/inputs/badge/size/src/index.css +++ b/samples/inputs/badge/size/src/index.css @@ -14,8 +14,7 @@ main { align-items: center; justify-content: center; gap: 40px; - padding: 32px 16px; - min-height: 7rem; + padding: 32px; } .badge-size-row { diff --git a/samples/inputs/badge/styling/src/index.css b/samples/inputs/badge/styling/src/index.css index 9402d83966..f7d76cfdaa 100644 --- a/samples/inputs/badge/styling/src/index.css +++ b/samples/inputs/badge/styling/src/index.css @@ -5,7 +5,7 @@ html, body, main { - background: transparent; + background: transparent; } igc-badge { @@ -79,7 +79,6 @@ igc-badge { display: flex; align-items: center; justify-content: center; - flex-wrap: wrap; gap: 60px; min-height: 7rem; } diff --git a/samples/inputs/badge/type/src/index.css b/samples/inputs/badge/type/src/index.css index 5849738f8d..0d692ca4a2 100644 --- a/samples/inputs/badge/type/src/index.css +++ b/samples/inputs/badge/type/src/index.css @@ -14,7 +14,6 @@ igc-avatar { igc-badge { --ig-size: var(--ig-size-small); - position: absolute; inset-block-end: -6px; inset-inline-end: -4px; diff --git a/samples/inputs/badge/variants/src/index.css b/samples/inputs/badge/variants/src/index.css index 5a5fbbcf98..5722d6a6d9 100644 --- a/samples/inputs/badge/variants/src/index.css +++ b/samples/inputs/badge/variants/src/index.css @@ -5,7 +5,7 @@ html, body, main { - background: transparent; + background: transparent; } igc-badge { @@ -30,7 +30,6 @@ igc-avatar { display: flex; align-items: center; justify-content: center; - flex-wrap: wrap; gap: 40px; min-height: 7rem; } From e0fe68ad910eaca3e6a2c5ab7188102ace957d6f Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 5 Aug 2026 18:25:58 +0300 Subject: [PATCH 10/14] fix(badge): update size sample --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/badge/size/src/index.css | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index 4c9d026bf1..c837f1f282 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 16:14:25","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-05 18:24:57","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index 4c9d026bf1..c837f1f282 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 16:14:25","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-05 18:24:57","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/badge/size/src/index.css b/samples/inputs/badge/size/src/index.css index 1d09cca5d4..0374ef0c43 100644 --- a/samples/inputs/badge/size/src/index.css +++ b/samples/inputs/badge/size/src/index.css @@ -15,6 +15,7 @@ main { justify-content: center; gap: 40px; padding: 32px; + min-height: 7rem; } .badge-size-row { From 2f7e8361a36429d7cede8c1d5d152c99ad6c247e Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 5 Aug 2026 20:26:55 +0300 Subject: [PATCH 11/14] feat(badge): update background css --- browser/public/meta.json | 2 +- browser/src/index.css | 7 +++++++ browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/badge/dot/src/index.css | 7 ------- samples/inputs/badge/outlined/src/index.css | 7 ------- samples/inputs/badge/overview/src/index.css | 7 ------- samples/inputs/badge/shape/src/index.css | 7 ------- samples/inputs/badge/size/src/index.css | 7 ------- samples/inputs/badge/styling/src/index.css | 7 ------- samples/inputs/badge/type/src/index.css | 7 ------- samples/inputs/badge/variants/src/index.css | 7 ------- 11 files changed, 9 insertions(+), 58 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index c837f1f282..b2d05596b1 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 18:24:57","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-05 19:27:58","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/index.css b/browser/src/index.css index 65ceb68061..68ba452275 100644 --- a/browser/src/index.css +++ b/browser/src/index.css @@ -1,3 +1,10 @@ +#root, +html, +body, +main { + background: transparent; +} + .igx-grid__td img[src*="dl.infragistics.com/x/img/people"] { width: 62px; height: 62px; diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index c837f1f282..b2d05596b1 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 18:24:57","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-05 19:27:58","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/badge/dot/src/index.css b/samples/inputs/badge/dot/src/index.css index 3ed7a922c8..086ae8114d 100644 --- a/samples/inputs/badge/dot/src/index.css +++ b/samples/inputs/badge/dot/src/index.css @@ -1,13 +1,6 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -#root, -html, -body, -main { - background: transparent; -} - igc-badge { --ig-size: var(--ig-size-small); --ig-badge-dot-size: 0.5rem; diff --git a/samples/inputs/badge/outlined/src/index.css b/samples/inputs/badge/outlined/src/index.css index c5b3eacec2..20a8a4688a 100644 --- a/samples/inputs/badge/outlined/src/index.css +++ b/samples/inputs/badge/outlined/src/index.css @@ -1,13 +1,6 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -#root, -html, -body, -main { - background: transparent; -} - igc-badge { --ig-size: var(--ig-size-small); } diff --git a/samples/inputs/badge/overview/src/index.css b/samples/inputs/badge/overview/src/index.css index 77d5d76f6b..6a1e390d1f 100644 --- a/samples/inputs/badge/overview/src/index.css +++ b/samples/inputs/badge/overview/src/index.css @@ -1,13 +1,6 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -#root, -html, -body, -main { - background: transparent; -} - igc-avatar { --size: 40px; } diff --git a/samples/inputs/badge/shape/src/index.css b/samples/inputs/badge/shape/src/index.css index f2b02a55e9..cf9906aea1 100644 --- a/samples/inputs/badge/shape/src/index.css +++ b/samples/inputs/badge/shape/src/index.css @@ -1,13 +1,6 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -#root, -html, -body, -main { - background: transparent; -} - .badge-shape { display: flex; flex-direction: column; diff --git a/samples/inputs/badge/size/src/index.css b/samples/inputs/badge/size/src/index.css index 0374ef0c43..4b15b3dd4b 100644 --- a/samples/inputs/badge/size/src/index.css +++ b/samples/inputs/badge/size/src/index.css @@ -1,13 +1,6 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -#root, -html, -body, -main { - background: transparent; -} - .badge-size { display: flex; flex-direction: column; diff --git a/samples/inputs/badge/styling/src/index.css b/samples/inputs/badge/styling/src/index.css index f7d76cfdaa..f963940887 100644 --- a/samples/inputs/badge/styling/src/index.css +++ b/samples/inputs/badge/styling/src/index.css @@ -1,13 +1,6 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -#root, -html, -body, -main { - background: transparent; -} - igc-badge { --ig-size: var(--ig-size-small); } diff --git a/samples/inputs/badge/type/src/index.css b/samples/inputs/badge/type/src/index.css index 0d692ca4a2..521f3f4dcc 100644 --- a/samples/inputs/badge/type/src/index.css +++ b/samples/inputs/badge/type/src/index.css @@ -1,13 +1,6 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -#root, -html, -body, -main { - background: transparent; -} - igc-avatar { --size: 40px; } diff --git a/samples/inputs/badge/variants/src/index.css b/samples/inputs/badge/variants/src/index.css index 5722d6a6d9..f983e17588 100644 --- a/samples/inputs/badge/variants/src/index.css +++ b/samples/inputs/badge/variants/src/index.css @@ -1,13 +1,6 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -#root, -html, -body, -main { - background: transparent; -} - igc-badge { --ig-size: var(--ig-size-small); position: absolute; From d16296dbf11889507486aaa39e7d9983e7f04814 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 5 Aug 2026 22:10:13 +0300 Subject: [PATCH 12/14] feat(badge): add tailwind and icon samples --- browser/package.json | 2 + browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- browser/vite.config.js | 2 + .../icon/.devcontainer/devcontainer.json | 4 + samples/inputs/badge/icon/.eslintrc.js | 75 ++++++++++++++++ samples/inputs/badge/icon/README.md | 56 ++++++++++++ samples/inputs/badge/icon/index.html | 11 +++ samples/inputs/badge/icon/package.json | 42 +++++++++ samples/inputs/badge/icon/sandbox.config.json | 5 ++ samples/inputs/badge/icon/src/index.css | 85 +++++++++++++++++++ samples/inputs/badge/icon/src/index.tsx | 65 ++++++++++++++ samples/inputs/badge/icon/tsconfig.json | 44 ++++++++++ samples/inputs/badge/icon/vite.config.js | 12 +++ .../.devcontainer/devcontainer.json | 4 + .../badge/tailwind-styling/.eslintrc.js | 75 ++++++++++++++++ .../inputs/badge/tailwind-styling/README.md | 56 ++++++++++++ .../inputs/badge/tailwind-styling/index.html | 11 +++ .../badge/tailwind-styling/package.json | 44 ++++++++++ .../tailwind-styling/sandbox.config.json | 5 ++ .../badge/tailwind-styling/src/index.css | 74 ++++++++++++++++ .../badge/tailwind-styling/src/index.tsx | 63 ++++++++++++++ .../badge/tailwind-styling/tsconfig.json | 44 ++++++++++ .../badge/tailwind-styling/vite.config.js | 13 +++ 24 files changed, 794 insertions(+), 2 deletions(-) create mode 100644 samples/inputs/badge/icon/.devcontainer/devcontainer.json create mode 100644 samples/inputs/badge/icon/.eslintrc.js create mode 100644 samples/inputs/badge/icon/README.md create mode 100644 samples/inputs/badge/icon/index.html create mode 100644 samples/inputs/badge/icon/package.json create mode 100644 samples/inputs/badge/icon/sandbox.config.json create mode 100644 samples/inputs/badge/icon/src/index.css create mode 100644 samples/inputs/badge/icon/src/index.tsx create mode 100644 samples/inputs/badge/icon/tsconfig.json create mode 100644 samples/inputs/badge/icon/vite.config.js create mode 100644 samples/inputs/badge/tailwind-styling/.devcontainer/devcontainer.json create mode 100644 samples/inputs/badge/tailwind-styling/.eslintrc.js create mode 100644 samples/inputs/badge/tailwind-styling/README.md create mode 100644 samples/inputs/badge/tailwind-styling/index.html create mode 100644 samples/inputs/badge/tailwind-styling/package.json create mode 100644 samples/inputs/badge/tailwind-styling/sandbox.config.json create mode 100644 samples/inputs/badge/tailwind-styling/src/index.css create mode 100644 samples/inputs/badge/tailwind-styling/src/index.tsx create mode 100644 samples/inputs/badge/tailwind-styling/tsconfig.json create mode 100644 samples/inputs/badge/tailwind-styling/vite.config.js diff --git a/browser/package.json b/browser/package.json index 7138143a65..3e837e82e4 100644 --- a/browser/package.json +++ b/browser/package.json @@ -61,6 +61,7 @@ "@babel/plugin-proposal-private-property-in-object": "~7.21.11", "@babel/plugin-transform-class-static-block": "^7.26.0", "@babel/plugin-transform-private-property-in-object": "^7.25.9", + "@tailwindcss/vite": "^4.3.3", "@types/gulp": "^4.0.6", "@types/jest": "^29.2.0", "@types/node": "^24.7.1", @@ -99,6 +100,7 @@ "remark-frontmatter": "^2.0.0", "run-sequence": "^2.2.1", "sass": "^1.97.3", + "tailwindcss": "^4.3.3", "ts-loader": "^9.5.4", "ts-node": "^10.9.2", "typescript": "^4.8.4", diff --git a/browser/public/meta.json b/browser/public/meta.json index b2d05596b1..a38fbcd951 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 19:27:58","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-05 21:57:55","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index b2d05596b1..a38fbcd951 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 19:27:58","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-05 21:57:55","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/vite.config.js b/browser/vite.config.js index 6545f1e9dc..7767f85ff9 100644 --- a/browser/vite.config.js +++ b/browser/vite.config.js @@ -1,5 +1,6 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; import tsconfigPaths from 'vite-tsconfig-paths'; import path, { resolve } from 'path'; @@ -8,6 +9,7 @@ const jszipShimPath = path.resolve(__dirname, 'src/jszip-shim.js'); export default defineConfig(({ mode }) => ({ plugins: [ react(), + tailwindcss(), tsconfigPaths() ], base: mode === 'production' ? '/react-demos/' : '/', diff --git a/samples/inputs/badge/icon/.devcontainer/devcontainer.json b/samples/inputs/badge/icon/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/badge/icon/.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/inputs/badge/icon/.eslintrc.js b/samples/inputs/badge/icon/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/badge/icon/.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/inputs/badge/icon/README.md b/samples/inputs/badge/icon/README.md new file mode 100644 index 0000000000..90696beccc --- /dev/null +++ b/samples/inputs/badge/icon/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Icon feature using [Badge](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/inputs/badge/icon +``` + +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/inputs/badge/icon/index.html b/samples/inputs/badge/icon/index.html new file mode 100644 index 0000000000..1d6ac94067 --- /dev/null +++ b/samples/inputs/badge/icon/index.html @@ -0,0 +1,11 @@ + + + + BadgeIcon + + + +
+ + + diff --git a/samples/inputs/badge/icon/package.json b/samples/inputs/badge/icon/package.json new file mode 100644 index 0000000000..11098b7706 --- /dev/null +++ b/samples/inputs/badge/icon/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-badge-icon", + "description": "This project provides example of Badge Icon 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": { + "@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", + "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/inputs/badge/icon/sandbox.config.json b/samples/inputs/badge/icon/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/badge/icon/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/badge/icon/src/index.css b/samples/inputs/badge/icon/src/index.css new file mode 100644 index 0000000000..7996181645 --- /dev/null +++ b/samples/inputs/badge/icon/src/index.css @@ -0,0 +1,85 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-avatar { + --size: 40px; + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +igc-badge[variant="info"] { + --ig-badge-background-color: #0057A9; +} + +igc-badge[variant="info"]::part(base) { + background-color: #0057A9; +} + +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +.badge-star igc-icon { + color: var(--ig-gray-900); +} + +.icon-wrapper > igc-badge { + --ig-size: var(--ig-size-medium); + display: inline-flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.avatar-wrapper igc-badge { + --ig-size: var(--ig-size-small); + position: absolute; + inset-block-start: -4px; + inset-inline-end: -6px; +} + +.icon-wrapper { + display: flex; + align-items: flex-end; + justify-content: center; + width: 40px; + height: 40px; +} + +.badge-settings { + --ig-badge-background-color: #0070BA; +} + +.badge-settings::part(base) { + background-color: #0070BA; +} + +.badge-icon { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.badge-icon-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + min-width: 56px; +} + +.badge-icon-item span { + color: var(--ig-gray-700); + font-size: 12px; + transform: translateY(4px); +} + +.avatar-wrapper { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 40px; +} diff --git a/samples/inputs/badge/icon/src/index.tsx b/samples/inputs/badge/icon/src/index.tsx new file mode 100644 index 0000000000..bd4f68d39b --- /dev/null +++ b/samples/inputs/badge/icon/src/index.tsx @@ -0,0 +1,65 @@ +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/bootstrap.css'; + +const checkIcon = + ''; +const favoriteBorderIcon = + ''; +const notificationsIcon = + ''; +const starBorderIcon = + ''; +const settingsIcon = + ''; +const closeIcon = + ''; + +const badges = [ + { icon: 'check', variant: 'success', label: 'check' }, + { icon: 'favorite_border', variant: 'danger', label: 'favorite' }, + { icon: 'notifications', variant: 'info', label: 'notification' }, + { icon: 'star_border', variant: 'warning', label: 'star' }, + { icon: 'settings', variant: 'info', label: 'settings' } +]; + +export default function BadgeIcon(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + registerIconFromText('favorite_border', favoriteBorderIcon, 'material'); + registerIconFromText('notifications', notificationsIcon, 'material'); + registerIconFromText('star_border', starBorderIcon, 'material'); + registerIconFromText('settings', settingsIcon, 'material'); + registerIconFromText('close', closeIcon, 'material'); + }, []); + + return ( +
+ {badges.map((item) => ( +
+
+ + + +
+ {item.label} +
+ ))} +
+
+ + + + +
+ on avatar +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/badge/icon/tsconfig.json b/samples/inputs/badge/icon/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/badge/icon/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", + "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/inputs/badge/icon/vite.config.js b/samples/inputs/badge/icon/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/badge/icon/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/badge/tailwind-styling/.devcontainer/devcontainer.json b/samples/inputs/badge/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/.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/inputs/badge/tailwind-styling/.eslintrc.js b/samples/inputs/badge/tailwind-styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/.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/inputs/badge/tailwind-styling/README.md b/samples/inputs/badge/tailwind-styling/README.md new file mode 100644 index 0000000000..91b2086a6b --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Badge](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/inputs/badge/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/inputs/badge/tailwind-styling/index.html b/samples/inputs/badge/tailwind-styling/index.html new file mode 100644 index 0000000000..ce249e4444 --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + BadgeTailwindStyling + + + +
+ + + diff --git a/samples/inputs/badge/tailwind-styling/package.json b/samples/inputs/badge/tailwind-styling/package.json new file mode 100644 index 0000000000..a4300fd58d --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-badge-tailwind-styling", + "description": "This project provides example of Badge 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.1.14", + "@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.1.14", + "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/inputs/badge/tailwind-styling/sandbox.config.json b/samples/inputs/badge/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/badge/tailwind-styling/src/index.css b/samples/inputs/badge/tailwind-styling/src/index.css new file mode 100644 index 0000000000..101b4607d2 --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/src/index.css @@ -0,0 +1,74 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); + +igc-badge { + --ig-size: var(--ig-size-small); +} + +igc-avatar { + --size: 40px; + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-close { + --ig-badge-background-color: var(--ig-error-500); +} + +.badge-close::part(base) { + background-color: var(--ig-error-500); +} + +.badge-volume { + --ig-badge-background-color: #8B5BB1; +} + +.badge-volume::part(base) { + background-color: #8B5BB1; +} + +.badge-remove { + --ig-badge-background-color: var(--ig-gray-900); +} + +.badge-remove::part(base) { + background-color: var(--ig-gray-900); +} + +.badge-check { + --ig-badge-background-color: var(--ig-success-600); +} + +.badge-check::part(base) { + background-color: var(--ig-success-600); +} + +.badge-style { + position: absolute; + inset-block-end: -4px; + inset-inline-end: -4px; +} + +.badge-style::part(base) { + border-radius: 50%; +} + +.badge-style igc-icon { + color: var(--ig-gray-50); +} + +.badge-parent { + display: flex; + align-items: center; + justify-content: center; + gap: 3rem; + min-height: 7rem; +} diff --git a/samples/inputs/badge/tailwind-styling/src/index.tsx b/samples/inputs/badge/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..a34c17722e --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/src/index.tsx @@ -0,0 +1,63 @@ +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/bootstrap.css'; + +const personIcon = + ''; +const closeIcon = + ''; +const volumeOffIcon = + ''; +const removeIcon = + ''; +const checkIcon = + ''; + +export default function BadgeTailwindStyling(): JSX.Element { + useEffect(() => { + registerIconFromText('person', personIcon, 'material'); + registerIconFromText('close', closeIcon, 'material'); + registerIconFromText('volume_off', volumeOffIcon, 'material'); + registerIconFromText('remove', removeIcon, 'material'); + registerIconFromText('check', checkIcon, 'material'); + }, []); + + return ( +
+
+ + + + +
+
+ + + + + + +
+
+ + + + +
+
+ + + + + + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/badge/tailwind-styling/tsconfig.json b/samples/inputs/badge/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/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", + "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/inputs/badge/tailwind-styling/vite.config.js b/samples/inputs/badge/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..663868e022 --- /dev/null +++ b/samples/inputs/badge/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 + }, +}); \ No newline at end of file From 715604b538a48a384ed74d5cbf387c341ac6fb6b Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 5 Aug 2026 22:17:53 +0300 Subject: [PATCH 13/14] fix(badge): add package lock changes --- browser/package-lock.json | 632 +++++++++++++++++++++++++++++++++++++- 1 file changed, 625 insertions(+), 7 deletions(-) diff --git a/browser/package-lock.json b/browser/package-lock.json index e9ef98c0c9..3aae5f1550 100644 --- a/browser/package-lock.json +++ b/browser/package-lock.json @@ -53,6 +53,7 @@ "@babel/plugin-proposal-private-property-in-object": "~7.21.11", "@babel/plugin-transform-class-static-block": "^7.26.0", "@babel/plugin-transform-private-property-in-object": "^7.25.9", + "@tailwindcss/vite": "^4.3.3", "@types/gulp": "^4.0.6", "@types/jest": "^29.2.0", "@types/node": "^24.7.1", @@ -91,6 +92,7 @@ "remark-frontmatter": "^2.0.0", "run-sequence": "^2.2.1", "sass": "^1.97.3", + "tailwindcss": "^4.3.3", "ts-loader": "^9.5.4", "ts-node": "^10.9.2", "typescript": "^4.8.4", @@ -2186,6 +2188,344 @@ "dev": true, "license": "MIT" }, + "node_modules/@tailwindcss/node": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz", + "integrity": "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/remapping": "^2.3.5", + "enhanced-resolve": "^5.24.1", + "jiti": "^2.7.0", + "lightningcss": "1.32.0", + "magic-string": "^0.30.21", + "source-map-js": "^1.2.1", + "tailwindcss": "4.3.3" + } + }, + "node_modules/@tailwindcss/oxide": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.3.tgz", + "integrity": "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 20" + }, + "optionalDependencies": { + "@tailwindcss/oxide-android-arm64": "4.3.3", + "@tailwindcss/oxide-darwin-arm64": "4.3.3", + "@tailwindcss/oxide-darwin-x64": "4.3.3", + "@tailwindcss/oxide-freebsd-x64": "4.3.3", + "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3", + "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3", + "@tailwindcss/oxide-linux-arm64-musl": "4.3.3", + "@tailwindcss/oxide-linux-x64-gnu": "4.3.3", + "@tailwindcss/oxide-linux-x64-musl": "4.3.3", + "@tailwindcss/oxide-wasm32-wasi": "4.3.3", + "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3", + "@tailwindcss/oxide-win32-x64-msvc": "4.3.3" + } + }, + "node_modules/@tailwindcss/oxide-android-arm64": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.3.tgz", + "integrity": "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-darwin-arm64": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.3.tgz", + "integrity": "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-darwin-x64": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.3.tgz", + "integrity": "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-freebsd-x64": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.3.tgz", + "integrity": "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.3.tgz", + "integrity": "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-gnu": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.3.tgz", + "integrity": "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-musl": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.3.tgz", + "integrity": "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-gnu": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.3.tgz", + "integrity": "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-musl": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.3.tgz", + "integrity": "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.3.tgz", + "integrity": "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==", + "bundleDependencies": [ + "@napi-rs/wasm-runtime", + "@emnapi/core", + "@emnapi/runtime", + "@tybys/wasm-util", + "@emnapi/wasi-threads", + "tslib" + ], + "cpu": [ + "wasm32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/core": "^1.11.1", + "@emnapi/runtime": "^1.11.1", + "@emnapi/wasi-threads": "^1.2.2", + "@napi-rs/wasm-runtime": "^1.1.4", + "@tybys/wasm-util": "^0.10.2", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": { + "version": "1.11.1", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/wasi-threads": "1.2.2", + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": { + "version": "1.11.1", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": { + "version": "1.2.2", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": { + "version": "1.1.4", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@tybys/wasm-util": "^0.10.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Brooooooklyn" + }, + "peerDependencies": { + "@emnapi/core": "^1.7.1", + "@emnapi/runtime": "^1.7.1" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": { + "version": "0.10.2", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": { + "version": "2.8.1", + "dev": true, + "inBundle": true, + "license": "0BSD", + "optional": true + }, + "node_modules/@tailwindcss/oxide-win32-arm64-msvc": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.3.tgz", + "integrity": "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-win32-x64-msvc": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.3.tgz", + "integrity": "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/vite": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.3.tgz", + "integrity": "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@tailwindcss/node": "4.3.3", + "@tailwindcss/oxide": "4.3.3", + "tailwindcss": "4.3.3" + }, + "peerDependencies": { + "vite": "^5.2.0 || ^6 || ^7 || ^8" + } + }, "node_modules/@testing-library/dom": { "version": "10.4.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz", @@ -5910,23 +6250,23 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.20.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.0.tgz", - "integrity": "sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==", + "version": "5.24.5", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.24.5.tgz", + "integrity": "sha512-L1l8TNvomm6UVW5B253AGxQagSQr+vGwhMlrrfRS2qmhx46AMpMVJKQYLvWYbysTMY8VoicOvzHzoHMbyzB+4A==", "dev": true, "license": "MIT", "dependencies": { "graceful-fs": "^4.2.4", - "tapable": "^2.3.0" + "tapable": "^2.3.3" }, "engines": { "node": ">=10.13.0" } }, "node_modules/enhanced-resolve/node_modules/tapable": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz", - "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz", + "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==", "dev": true, "license": "MIT", "engines": { @@ -10691,6 +11031,16 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jiti": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz", + "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==", + "dev": true, + "license": "MIT", + "bin": { + "jiti": "lib/jiti-cli.mjs" + } + }, "node_modules/jose": { "version": "6.1.3", "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz", @@ -10987,6 +11337,267 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/lightningcss": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz", + "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==", + "dev": true, + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-android-arm64": "1.32.0", + "lightningcss-darwin-arm64": "1.32.0", + "lightningcss-darwin-x64": "1.32.0", + "lightningcss-freebsd-x64": "1.32.0", + "lightningcss-linux-arm-gnueabihf": "1.32.0", + "lightningcss-linux-arm64-gnu": "1.32.0", + "lightningcss-linux-arm64-musl": "1.32.0", + "lightningcss-linux-x64-gnu": "1.32.0", + "lightningcss-linux-x64-musl": "1.32.0", + "lightningcss-win32-arm64-msvc": "1.32.0", + "lightningcss-win32-x64-msvc": "1.32.0" + } + }, + "node_modules/lightningcss-android-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz", + "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz", + "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz", + "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz", + "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz", + "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz", + "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz", + "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz", + "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz", + "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz", + "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz", + "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/limiter": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz", @@ -16916,6 +17527,13 @@ "node": ">=16.0.0" } }, + "node_modules/tailwindcss": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz", + "integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==", + "dev": true, + "license": "MIT" + }, "node_modules/tapable": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", From 5c894ed6a3a53863571a7dfb0b833fdd1aa7c9a8 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 5 Aug 2026 23:56:20 +0300 Subject: [PATCH 14/14] fix(badge): update styling sample dot css --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/badge/styling/src/index.css | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index a38fbcd951..717bce6e87 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 21:57:55","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"} \ No newline at end of file diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index a38fbcd951..717bce6e87 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 21:57:55","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"} \ No newline at end of file diff --git a/samples/inputs/badge/styling/src/index.css b/samples/inputs/badge/styling/src/index.css index f963940887..d6d6fca0d4 100644 --- a/samples/inputs/badge/styling/src/index.css +++ b/samples/inputs/badge/styling/src/index.css @@ -24,6 +24,7 @@ igc-badge { .badge-lime { --ig-badge-background-color: var(--ig-success-700); --ig-badge-border-radius: 50%; + --ig-badge-dot-size: 0.5rem; } .badge-teal igc-icon,