From 2968491216ad5bd5f9c74c74775c904c9d8c1446 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Tue, 6 Oct 2026 14:48:07 +0300 Subject: [PATCH 1/2] feat(icon): update samples content --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- .../.devcontainer/devcontainer.json | 0 .../icon/{sizing => overview}/.eslintrc.js | 0 samples/layouts/icon/overview/README.md | 56 ++++++++ samples/layouts/icon/overview/index.html | 11 ++ samples/layouts/icon/overview/package.json | 42 ++++++ .../{sizing => overview}/sandbox.config.json | 0 samples/layouts/icon/overview/src/index.css | 18 +++ samples/layouts/icon/overview/src/index.tsx | 50 +++++++ .../icon/{sizing => overview}/tsconfig.json | 0 .../icon/{sizing => overview}/vite.config.js | 0 .../icon/size/.devcontainer/devcontainer.json | 4 + samples/layouts/icon/size/.eslintrc.js | 75 +++++++++++ .../layouts/icon/{sizing => size}/README.md | 8 +- .../layouts/icon/{sizing => size}/index.html | 2 +- .../icon/{sizing => size}/package.json | 4 +- samples/layouts/icon/size/sandbox.config.json | 5 + samples/layouts/icon/size/src/index.css | 42 ++++++ samples/layouts/icon/size/src/index.tsx | 30 +++++ samples/layouts/icon/size/tsconfig.json | 44 +++++++ samples/layouts/icon/size/vite.config.js | 12 ++ .../layouts/icon/sizing/src/IconSizing.css | 18 --- samples/layouts/icon/sizing/src/index.css | 0 samples/layouts/icon/sizing/src/index.tsx | 33 ----- .../layouts/icon/styling/src/IconStyling.css | 11 -- samples/layouts/icon/styling/src/index.css | 124 ++++++++++++++++++ samples/layouts/icon/styling/src/index.tsx | 71 +++++++--- .../.devcontainer/devcontainer.json | 4 + .../icon/tailwind-styling/.eslintrc.js | 75 +++++++++++ .../layouts/icon/tailwind-styling/README.md | 56 ++++++++ .../layouts/icon/tailwind-styling/index.html | 11 ++ .../icon/tailwind-styling/package.json | 44 +++++++ .../icon/tailwind-styling/sandbox.config.json | 5 + .../icon/tailwind-styling/src/index.css | 13 ++ .../icon/tailwind-styling/src/index.tsx | 75 +++++++++++ .../icon/tailwind-styling/tsconfig.json | 44 +++++++ .../icon/tailwind-styling/vite.config.js | 13 ++ 38 files changed, 916 insertions(+), 88 deletions(-) rename samples/layouts/icon/{sizing => overview}/.devcontainer/devcontainer.json (100%) rename samples/layouts/icon/{sizing => overview}/.eslintrc.js (100%) create mode 100644 samples/layouts/icon/overview/README.md create mode 100644 samples/layouts/icon/overview/index.html create mode 100644 samples/layouts/icon/overview/package.json rename samples/layouts/icon/{sizing => overview}/sandbox.config.json (100%) create mode 100644 samples/layouts/icon/overview/src/index.css create mode 100644 samples/layouts/icon/overview/src/index.tsx rename samples/layouts/icon/{sizing => overview}/tsconfig.json (100%) rename samples/layouts/icon/{sizing => overview}/vite.config.js (100%) create mode 100644 samples/layouts/icon/size/.devcontainer/devcontainer.json create mode 100644 samples/layouts/icon/size/.eslintrc.js rename samples/layouts/icon/{sizing => size}/README.md (86%) rename samples/layouts/icon/{sizing => size}/index.html (89%) rename samples/layouts/icon/{sizing => size}/package.json (88%) create mode 100644 samples/layouts/icon/size/sandbox.config.json create mode 100644 samples/layouts/icon/size/src/index.css create mode 100644 samples/layouts/icon/size/src/index.tsx create mode 100644 samples/layouts/icon/size/tsconfig.json create mode 100644 samples/layouts/icon/size/vite.config.js delete mode 100644 samples/layouts/icon/sizing/src/IconSizing.css delete mode 100644 samples/layouts/icon/sizing/src/index.css delete mode 100644 samples/layouts/icon/sizing/src/index.tsx delete mode 100644 samples/layouts/icon/styling/src/IconStyling.css create mode 100644 samples/layouts/icon/tailwind-styling/.devcontainer/devcontainer.json create mode 100644 samples/layouts/icon/tailwind-styling/.eslintrc.js create mode 100644 samples/layouts/icon/tailwind-styling/README.md create mode 100644 samples/layouts/icon/tailwind-styling/index.html create mode 100644 samples/layouts/icon/tailwind-styling/package.json create mode 100644 samples/layouts/icon/tailwind-styling/sandbox.config.json create mode 100644 samples/layouts/icon/tailwind-styling/src/index.css create mode 100644 samples/layouts/icon/tailwind-styling/src/index.tsx create mode 100644 samples/layouts/icon/tailwind-styling/tsconfig.json create mode 100644 samples/layouts/icon/tailwind-styling/vite.config.js diff --git a/browser/public/meta.json b/browser/public/meta.json index abc53cbbe5..39018f97a3 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-28 13:50:58","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-10-06 14:30:34","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 abc53cbbe5..39018f97a3 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-28 13:50:58","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-10-06 14:30:34","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/layouts/icon/sizing/.devcontainer/devcontainer.json b/samples/layouts/icon/overview/.devcontainer/devcontainer.json similarity index 100% rename from samples/layouts/icon/sizing/.devcontainer/devcontainer.json rename to samples/layouts/icon/overview/.devcontainer/devcontainer.json diff --git a/samples/layouts/icon/sizing/.eslintrc.js b/samples/layouts/icon/overview/.eslintrc.js similarity index 100% rename from samples/layouts/icon/sizing/.eslintrc.js rename to samples/layouts/icon/overview/.eslintrc.js diff --git a/samples/layouts/icon/overview/README.md b/samples/layouts/icon/overview/README.md new file mode 100644 index 0000000000..abf3d05fc2 --- /dev/null +++ b/samples/layouts/icon/overview/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Overview feature using [Icon](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/layouts/icon/overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/layouts/icon/overview/index.html b/samples/layouts/icon/overview/index.html new file mode 100644 index 0000000000..807ed50612 --- /dev/null +++ b/samples/layouts/icon/overview/index.html @@ -0,0 +1,11 @@ + + + + IconOverview + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/icon/overview/package.json b/samples/layouts/icon/overview/package.json new file mode 100644 index 0000000000..da2fe65a79 --- /dev/null +++ b/samples/layouts/icon/overview/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-icon-overview", + "description": "This project provides example of Icon Overview 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.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.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/layouts/icon/sizing/sandbox.config.json b/samples/layouts/icon/overview/sandbox.config.json similarity index 100% rename from samples/layouts/icon/sizing/sandbox.config.json rename to samples/layouts/icon/overview/sandbox.config.json diff --git a/samples/layouts/icon/overview/src/index.css b/samples/layouts/icon/overview/src/index.css new file mode 100644 index 0000000000..87fc4044da --- /dev/null +++ b/samples/layouts/icon/overview/src/index.css @@ -0,0 +1,18 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.menu { + height: auto; +} + +.menu igc-nav-drawer-item { + isolation: isolate; +} diff --git a/samples/layouts/icon/overview/src/index.tsx b/samples/layouts/icon/overview/src/index.tsx new file mode 100644 index 0000000000..569c1d1f37 --- /dev/null +++ b/samples/layouts/icon/overview/src/index.tsx @@ -0,0 +1,50 @@ +import React, { useEffect, useState } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrIcon, IgrNavDrawer, IgrNavDrawerItem, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const icons = [ + { name: 'home', text: '' }, + { name: 'mail', text: '' }, + { name: 'assignment', text: '' }, + { name: 'settings', text: '' }, + { name: 'feedback', text: '' }, +]; + +const menuItems = [ + { label: 'Home', icon: 'home' }, + { label: 'Inbox', icon: 'mail' }, + { label: 'Reports', icon: 'assignment' }, + { label: 'Settings', icon: 'settings' }, + { label: 'Support', icon: 'feedback' }, +]; + +export default function IconOverview(): JSX.Element { + const [activeItem, setActiveItem] = useState('Home'); + + useEffect(() => { + icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material')); + }, []); + + return ( +
+ + {menuItems.map((item) => ( + setActiveItem(item.label)} + > + + {item.label} + + ))} + +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/icon/sizing/tsconfig.json b/samples/layouts/icon/overview/tsconfig.json similarity index 100% rename from samples/layouts/icon/sizing/tsconfig.json rename to samples/layouts/icon/overview/tsconfig.json diff --git a/samples/layouts/icon/sizing/vite.config.js b/samples/layouts/icon/overview/vite.config.js similarity index 100% rename from samples/layouts/icon/sizing/vite.config.js rename to samples/layouts/icon/overview/vite.config.js diff --git a/samples/layouts/icon/size/.devcontainer/devcontainer.json b/samples/layouts/icon/size/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/icon/size/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/icon/size/.eslintrc.js b/samples/layouts/icon/size/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/icon/size/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/layouts/icon/sizing/README.md b/samples/layouts/icon/size/README.md similarity index 86% rename from samples/layouts/icon/sizing/README.md rename to samples/layouts/icon/size/README.md index 7e6e54e9a1..17e8b29684 100644 --- a/samples/layouts/icon/sizing/README.md +++ b/samples/layouts/icon/size/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Sizing feature using [Icon](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Size feature using [Icon](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Sizing View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git git checkout master cd ./igniteui-react-examples -cd ./samples/layouts/icon/sizing +cd ./samples/layouts/icon/size ``` open above folder in VS Code or type: diff --git a/samples/layouts/icon/sizing/index.html b/samples/layouts/icon/size/index.html similarity index 89% rename from samples/layouts/icon/sizing/index.html rename to samples/layouts/icon/size/index.html index 2569468e7a..769de7dc64 100644 --- a/samples/layouts/icon/sizing/index.html +++ b/samples/layouts/icon/size/index.html @@ -1,7 +1,7 @@ - IconSizing + IconSize diff --git a/samples/layouts/icon/sizing/package.json b/samples/layouts/icon/size/package.json similarity index 88% rename from samples/layouts/icon/sizing/package.json rename to samples/layouts/icon/size/package.json index f08bf4a29f..ceaa1e8a8a 100644 --- a/samples/layouts/icon/sizing/package.json +++ b/samples/layouts/icon/size/package.json @@ -1,6 +1,6 @@ { - "name": "react-icon-sizing", - "description": "This project provides example of Icon Sizing using Infragistics React components", + "name": "react-icon-size", + "description": "This project provides example of Icon Size using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/layouts/icon/size/sandbox.config.json b/samples/layouts/icon/size/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/icon/size/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/icon/size/src/index.css b/samples/layouts/icon/size/src/index.css new file mode 100644 index 0000000000..0fe9fefd55 --- /dev/null +++ b/samples/layouts/icon/size/src/index.css @@ -0,0 +1,42 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.icon-sizes { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-items: center; + column-gap: 4.25rem; + row-gap: 1.0625rem; +} + +.icon-sizes igc-icon { + color: var(--ig-gray-800); +} + +.size-large { + --ig-size: var(--ig-size-large); +} + +.size-medium { + --ig-size: var(--ig-size-medium); +} + +.size-small { + --ig-size: var(--ig-size-small); +} + +.size-label { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", Arial, sans-serif; + font-size: 0.875rem; + line-height: 1.25rem; +} diff --git a/samples/layouts/icon/size/src/index.tsx b/samples/layouts/icon/size/src/index.tsx new file mode 100644 index 0000000000..22780138e7 --- /dev/null +++ b/samples/layouts/icon/size/src/index.tsx @@ -0,0 +1,30 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const notificationsIcon = ''; + +export default function IconSize(): JSX.Element { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); + + return ( +
+
+ + Large + + Medium + + Small +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/icon/size/tsconfig.json b/samples/layouts/icon/size/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/icon/size/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/layouts/icon/size/vite.config.js b/samples/layouts/icon/size/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/icon/size/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/layouts/icon/sizing/src/IconSizing.css b/samples/layouts/icon/sizing/src/IconSizing.css deleted file mode 100644 index e4e1805d77..0000000000 --- a/samples/layouts/icon/sizing/src/IconSizing.css +++ /dev/null @@ -1,18 +0,0 @@ -.horizontal-border-container { - display: flex; - align-items: center; - width: 400px; - border: 1px solid gainsboro; -} - -.size-small { - --ig-size: var(--ig-size-small); -} - -.size-medium { - --ig-size: var(--ig-size-medium); -} - -.size-large { - --ig-size: var(--ig-size-large); -} \ No newline at end of file diff --git a/samples/layouts/icon/sizing/src/index.css b/samples/layouts/icon/sizing/src/index.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/samples/layouts/icon/sizing/src/index.tsx b/samples/layouts/icon/sizing/src/index.tsx deleted file mode 100644 index 3c1952ac27..0000000000 --- a/samples/layouts/icon/sizing/src/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import './IconSizing.css'; -import { IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -const buildIcon = - ''; - -export default class IconSizing extends React.Component { - - constructor(props: any) { - super(props); - registerIconFromText("build", buildIcon, "material"); - } - - public render(): JSX.Element { - return ( -
-
- - - -
-
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/layouts/icon/styling/src/IconStyling.css b/samples/layouts/icon/styling/src/IconStyling.css deleted file mode 100644 index 73b24e3db7..0000000000 --- a/samples/layouts/icon/styling/src/IconStyling.css +++ /dev/null @@ -1,11 +0,0 @@ -.horizontal-border-container { - display: flex; - align-items: center; - width: 400px; - border: 1px solid gainsboro; -} - -igc-icon { - --size: 48px; - color: var(--ig-primary-500); -} \ No newline at end of file diff --git a/samples/layouts/icon/styling/src/index.css b/samples/layouts/icon/styling/src/index.css index e69de29bb2..2195778dfd 100644 --- a/samples/layouts/icon/styling/src/index.css +++ b/samples/layouts/icon/styling/src/index.css @@ -0,0 +1,124 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.icon-styling { + --ig-font-family: "Aktiv Grotesk", Arial, sans-serif; + + display: flex; + flex-direction: column; + align-items: center; + gap: 2.8125rem; +} + +.button-row { + display: flex; + align-items: center; + gap: 1.5rem; +} + +.button-row igc-button::part(base) { + font-size: 0.875rem; + font-weight: 500; + letter-spacing: 0.1px; + text-transform: none; +} + +.download-button::part(base) { + border-color: #a9b8cc; + background: #e5ebf3; + color: #344b65; + box-shadow: none; +} + +.download-button igc-icon { + color: #344b65; +} + +.continue-button { + --ig-outlined-button-hover-background: rgb(0 93 204 / 8%); + --ig-outlined-button-focus-hover-background: rgb(0 93 204 / 8%); + --ig-outlined-button-active-background: rgb(0 93 204 / 16%); + --ig-outlined-button-focus-background: rgb(0 93 204 / 16%); + --ig-outlined-button-focus-visible-background: rgb(0 93 204 / 16%); +} + +.continue-button::part(base) { + border-color: #005dcc; + color: #005dcc; +} + +.continue-button igc-icon { + color: #005dcc; +} + +.delete-button { + --ig-outlined-button-hover-background: rgb(223 27 116 / 8%); + --ig-outlined-button-focus-hover-background: rgb(223 27 116 / 8%); + --ig-outlined-button-active-background: rgb(223 27 116 / 16%); + --ig-outlined-button-focus-background: rgb(223 27 116 / 16%); + --ig-outlined-button-focus-visible-background: rgb(223 27 116 / 16%); +} + +.delete-button::part(base) { + border-color: #df1b74; + color: #df1b74; +} + +.delete-button igc-icon { + color: #df1b74; +} + +.add-button { + --ig-size: var(--ig-size-small); + --ig-fab-button-size: 2.25rem; +} + +.add-button::part(base) { + border-color: #0176ff; + border-radius: 50%; + background: #cce4ff; + box-shadow: none; +} + +.add-button igc-icon { + color: #005dcc; +} + +.icon-toolbar { + display: flex; + gap: 1.5rem; + padding: 0.5rem; + border: 1px solid #e5ebf3; + border-radius: 999px; + background: #fff; +} + +.icon-toolbar igc-button { + --ig-flat-button-hover-background: #f8f8f8; + --ig-flat-button-active-background: #e0e0e0; +} + +.icon-toolbar igc-button::part(base) { + width: 1.5rem; + min-width: 0; + height: 1.5rem; + padding: 0; + border-radius: 50%; +} + +.icon-toolbar igc-icon { + color: #344b65; +} + +.icon-toolbar igc-tooltip { + --ig-tooltip-background: rgb(52 75 101 / 90%); + --ig-tooltip-text-color: #fff; +} diff --git a/samples/layouts/icon/styling/src/index.tsx b/samples/layouts/icon/styling/src/index.tsx index 0136db33a3..ac6cc70b45 100644 --- a/samples/layouts/icon/styling/src/index.tsx +++ b/samples/layouts/icon/styling/src/index.tsx @@ -1,29 +1,66 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import './IconStyling.css'; -import { IgrIcon, registerIconFromText } from 'igniteui-react'; +import { IgrButton, IgrIcon, IgrTooltip, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -const searchIcon = - ''; +const icons = [ + { name: 'download', text: '' }, + { name: 'arrow_forward', text: '' }, + { name: 'delete', text: '' }, + { name: 'add', text: '' }, + { name: 'edit', text: '' }, + { name: 'content_copy', text: '' }, + { name: 'share', text: '' }, +]; -export default class IconStyling extends React.Component { +const actions = [ + { id: 'edit-action', icon: 'edit', label: 'Edit' }, + { id: 'copy-action', icon: 'content_copy', label: 'Copy' }, + { id: 'share-action', icon: 'share', label: 'Share' }, + { id: 'delete-action', icon: 'delete', label: 'Delete' }, +]; - constructor(props: any) { - super(props); - registerIconFromText("search", searchIcon, "material"); - } +export default function IconStyling(): JSX.Element { + useEffect(() => { + icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material')); + }, []); - public render(): JSX.Element { - return ( -
-
- + return ( +
+
+
+ + + Download + + + Continue + + + + + Delete + + + + +
+
+ {actions.map((action) => ( + + + + + + {action.label} + + + ))}
- ); - } +
+ ); } // rendering above class to the React DOM diff --git a/samples/layouts/icon/tailwind-styling/.devcontainer/devcontainer.json b/samples/layouts/icon/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/icon/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/layouts/icon/tailwind-styling/.eslintrc.js b/samples/layouts/icon/tailwind-styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/icon/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/layouts/icon/tailwind-styling/README.md b/samples/layouts/icon/tailwind-styling/README.md new file mode 100644 index 0000000000..94ffbc320e --- /dev/null +++ b/samples/layouts/icon/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Icon](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/layouts/icon/tailwind-styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/layouts/icon/tailwind-styling/index.html b/samples/layouts/icon/tailwind-styling/index.html new file mode 100644 index 0000000000..e15d6b1710 --- /dev/null +++ b/samples/layouts/icon/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + IconTailwindStyling + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/icon/tailwind-styling/package.json b/samples/layouts/icon/tailwind-styling/package.json new file mode 100644 index 0000000000..a40cbbc393 --- /dev/null +++ b/samples/layouts/icon/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-icon-tailwind-styling", + "description": "This project provides example of Icon 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.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.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/layouts/icon/tailwind-styling/sandbox.config.json b/samples/layouts/icon/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/icon/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/layouts/icon/tailwind-styling/src/index.css b/samples/layouts/icon/tailwind-styling/src/index.css new file mode 100644 index 0000000000..5104e478d3 --- /dev/null +++ b/samples/layouts/icon/tailwind-styling/src/index.css @@ -0,0 +1,13 @@ +/* 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); +@source "./index.tsx"; + +@theme { + --color-form-ink: #344b65; + --color-form-error: #ff134a; + --color-form-border: #d2dbe8; +} diff --git a/samples/layouts/icon/tailwind-styling/src/index.tsx b/samples/layouts/icon/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..68d449555d --- /dev/null +++ b/samples/layouts/icon/tailwind-styling/src/index.tsx @@ -0,0 +1,75 @@ +import React, { useEffect, useState } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrIcon, IgrInput, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const icons = [ + { name: 'search', text: '' }, + { name: 'visibility', text: '' }, + { name: 'visibility_off', text: '' }, + { name: 'mail', text: '' }, + { name: 'info', text: '' }, +]; + +const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + +const fieldClasses = 'w-[260px] [--ig-input-group-input-prefix-background:transparent] [--ig-input-group-input-prefix-background--filled:transparent] [--ig-input-group-input-prefix-background--focused:transparent] [--ig-input-group-input-suffix-background:transparent] [--ig-input-group-input-suffix-background--filled:transparent] [--ig-input-group-input-suffix-background--focused:transparent] [--ig-input-group-placeholder-color:var(--color-form-ink)] [--ig-input-group-hover-placeholder-color:var(--color-form-ink)] [&::part(input)]:shadow-none [&::part(label)]:text-xs [&::part(label)]:leading-4 [&::part(label)]:uppercase [&::part(label)]:text-form-ink'; +const focusClasses = 'focus-within:[--ig-input-group-border-color:var(--ig-primary-500)]'; +const invalidClasses = '[--ig-input-group-border-color:var(--color-form-error)] [--ig-input-group-error-secondary-color:var(--color-form-error)] [&::part(input)]:border-e-0'; + +export default function IconTailwindStyling(): JSX.Element { + const [passwordVisible, setPasswordVisible] = useState(false); + const [email, setEmail] = useState('ana@'); + const emailInvalid = !emailPattern.test(email); + + useEffect(() => { + icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material')); + }, []); + + return ( +
+
+ + + + + setPasswordVisible(!passwordVisible)} + > + + + + ) => setEmail(e.detail)} + > + + {emailInvalid && } + {emailInvalid && Enter a complete address} + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/icon/tailwind-styling/tsconfig.json b/samples/layouts/icon/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/icon/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-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/layouts/icon/tailwind-styling/vite.config.js b/samples/layouts/icon/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..4043727956 --- /dev/null +++ b/samples/layouts/icon/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, + }, +}); From 06b49bccd14e7a4a27a5bc7ce7f722d9dec74d8f Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 7 Oct 2026 12:50:02 +0300 Subject: [PATCH 2/2] fix(icon): update tailwind sample --- samples/layouts/icon/tailwind-styling/src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/layouts/icon/tailwind-styling/src/index.tsx b/samples/layouts/icon/tailwind-styling/src/index.tsx index 68d449555d..464e07a717 100644 --- a/samples/layouts/icon/tailwind-styling/src/index.tsx +++ b/samples/layouts/icon/tailwind-styling/src/index.tsx @@ -45,7 +45,7 @@ export default function IconTailwindStyling(): JSX.Element { > setPasswordVisible(!passwordVisible)}