From 9567e30602d5b4c476c7eeccdb52b674371cb23a Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 13 Aug 2026 17:08:28 +0300 Subject: [PATCH 1/5] feat(card): add card actions sample --- .../actions/.devcontainer/devcontainer.json | 4 + samples/layouts/card/actions/.eslintrc.js | 75 ++++++++++++++++ samples/layouts/card/actions/README.md | 56 ++++++++++++ samples/layouts/card/actions/index.html | 11 +++ samples/layouts/card/actions/package.json | 42 +++++++++ .../layouts/card/actions/sandbox.config.json | 5 ++ samples/layouts/card/actions/src/icons.ts | 14 +++ samples/layouts/card/actions/src/index.css | 41 +++++++++ samples/layouts/card/actions/src/index.tsx | 90 +++++++++++++++++++ samples/layouts/card/actions/tsconfig.json | 44 +++++++++ samples/layouts/card/actions/vite.config.js | 12 +++ 11 files changed, 394 insertions(+) create mode 100644 samples/layouts/card/actions/.devcontainer/devcontainer.json create mode 100644 samples/layouts/card/actions/.eslintrc.js create mode 100644 samples/layouts/card/actions/README.md create mode 100644 samples/layouts/card/actions/index.html create mode 100644 samples/layouts/card/actions/package.json create mode 100644 samples/layouts/card/actions/sandbox.config.json create mode 100644 samples/layouts/card/actions/src/icons.ts create mode 100644 samples/layouts/card/actions/src/index.css create mode 100644 samples/layouts/card/actions/src/index.tsx create mode 100644 samples/layouts/card/actions/tsconfig.json create mode 100644 samples/layouts/card/actions/vite.config.js diff --git a/samples/layouts/card/actions/.devcontainer/devcontainer.json b/samples/layouts/card/actions/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/card/actions/.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/card/actions/.eslintrc.js b/samples/layouts/card/actions/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/card/actions/.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/card/actions/README.md b/samples/layouts/card/actions/README.md new file mode 100644 index 0000000000..f8588ffefe --- /dev/null +++ b/samples/layouts/card/actions/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Actions feature using [Card](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/card/actions +``` + +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/card/actions/index.html b/samples/layouts/card/actions/index.html new file mode 100644 index 0000000000..8189a00d8f --- /dev/null +++ b/samples/layouts/card/actions/index.html @@ -0,0 +1,11 @@ + + + + CardStyling + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/card/actions/package.json b/samples/layouts/card/actions/package.json new file mode 100644 index 0000000000..4d4a31f58a --- /dev/null +++ b/samples/layouts/card/actions/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-card-actions", + "description": "This project provides example of Card Actions 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/layouts/card/actions/sandbox.config.json b/samples/layouts/card/actions/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/card/actions/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/card/actions/src/icons.ts b/samples/layouts/card/actions/src/icons.ts new file mode 100644 index 0000000000..4556f7ebde --- /dev/null +++ b/samples/layouts/card/actions/src/icons.ts @@ -0,0 +1,14 @@ +export const bookmarkIcon = + ""; + +export const shareIcon = + ""; + +export const scheduleIcon = + ""; + +export const visibilityIcon = + ""; + +export const moreIcon = + ""; diff --git a/samples/layouts/card/actions/src/index.css b/samples/layouts/card/actions/src/index.css new file mode 100644 index 0000000000..33719ab038 --- /dev/null +++ b/samples/layouts/card/actions/src/index.css @@ -0,0 +1,41 @@ +.actions-sample { + align-items: center; + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + gap: 24px; + justify-content: center; + padding: 24px; +} + +.actions-card { + width: min(360px, 100%); +} + +.actions-card.rail-card { + width: min(360px, 100%); +} + +.icon-actions { + display: flex; + gap: 8px; +} + +igc-card-content p { + margin: 0; +} + +.rail-layout { + align-items: stretch; + display: grid; + gap: 8px; + grid-template-columns: 1fr auto; +} + +.action-rail { + align-items: center; + border-left: 1px solid var(--ig-gray-300); + gap: 12px; + justify-content: center; + padding-inline-start: 12px; +} diff --git a/samples/layouts/card/actions/src/index.tsx b/samples/layouts/card/actions/src/index.tsx new file mode 100644 index 0000000000..3f94b29b0b --- /dev/null +++ b/samples/layouts/card/actions/src/index.tsx @@ -0,0 +1,90 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrCard, + IgrCardHeader, + IgrCardContent, + IgrCardActions, + IgrButton, + IgrIconButton, + IgrRipple, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import { + bookmarkIcon, + moreIcon, + scheduleIcon, + shareIcon, + visibilityIcon, +} from "./icons"; + +export default function CardActions() { + useEffect(() => { + registerIconFromText("bookmark", bookmarkIcon, "material"); + registerIconFromText("share", shareIcon, "material"); + registerIconFromText("schedule", scheduleIcon, "material"); + registerIconFromText("visibility", visibilityIcon, "material"); + registerIconFromText("more", moreIcon, "material"); + }, []); + + return ( +
+
+ + + Design Review + Today, 2:30 PM + + +

Review the latest card layouts and approve the selected direction.

+ + + Open + Dismiss +
+ + + + + + +
+ + +
+ +
+ +
+
+ + Publish Queue + 3 items waiting + + +

Review queued items before publishing.

+ +
+ + + + + + + + + + + + +
+ +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/card/actions/tsconfig.json b/samples/layouts/card/actions/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/card/actions/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/card/actions/vite.config.js b/samples/layouts/card/actions/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/card/actions/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 From e23c5b3af5f671c29eb2de22133c3de00b08a293 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 13 Aug 2026 17:08:58 +0300 Subject: [PATCH 2/5] feat(card): add tailwind styling sample --- .../.devcontainer/devcontainer.json | 4 + .../card/tailwind-styling/.eslintrc.js | 75 +++++++++++++++++++ .../layouts/card/tailwind-styling/README.md | 56 ++++++++++++++ .../layouts/card/tailwind-styling/index.html | 11 +++ .../card/tailwind-styling/package.json | 44 +++++++++++ .../card/tailwind-styling/sandbox.config.json | 5 ++ .../card/tailwind-styling/src/icons.ts | 8 ++ .../card/tailwind-styling/src/index.css | 8 ++ .../card/tailwind-styling/src/index.tsx | 63 ++++++++++++++++ .../card/tailwind-styling/tsconfig.json | 44 +++++++++++ .../card/tailwind-styling/vite.config.js | 13 ++++ 11 files changed, 331 insertions(+) create mode 100644 samples/layouts/card/tailwind-styling/.devcontainer/devcontainer.json create mode 100644 samples/layouts/card/tailwind-styling/.eslintrc.js create mode 100644 samples/layouts/card/tailwind-styling/README.md create mode 100644 samples/layouts/card/tailwind-styling/index.html create mode 100644 samples/layouts/card/tailwind-styling/package.json create mode 100644 samples/layouts/card/tailwind-styling/sandbox.config.json create mode 100644 samples/layouts/card/tailwind-styling/src/icons.ts create mode 100644 samples/layouts/card/tailwind-styling/src/index.css create mode 100644 samples/layouts/card/tailwind-styling/src/index.tsx create mode 100644 samples/layouts/card/tailwind-styling/tsconfig.json create mode 100644 samples/layouts/card/tailwind-styling/vite.config.js diff --git a/samples/layouts/card/tailwind-styling/.devcontainer/devcontainer.json b/samples/layouts/card/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/card/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/card/tailwind-styling/.eslintrc.js b/samples/layouts/card/tailwind-styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/card/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/card/tailwind-styling/README.md b/samples/layouts/card/tailwind-styling/README.md new file mode 100644 index 0000000000..d56077df55 --- /dev/null +++ b/samples/layouts/card/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Card](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/card/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/card/tailwind-styling/index.html b/samples/layouts/card/tailwind-styling/index.html new file mode 100644 index 0000000000..8189a00d8f --- /dev/null +++ b/samples/layouts/card/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + CardStyling + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/card/tailwind-styling/package.json b/samples/layouts/card/tailwind-styling/package.json new file mode 100644 index 0000000000..cf03fd388b --- /dev/null +++ b/samples/layouts/card/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-card-tailwind-styling", + "description": "This project provides example of 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": { + "@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", + "@tailwindcss/vite": "^4.1.14", + "tailwindcss": "^4.1.14" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/layouts/card/tailwind-styling/sandbox.config.json b/samples/layouts/card/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/card/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/card/tailwind-styling/src/icons.ts b/samples/layouts/card/tailwind-styling/src/icons.ts new file mode 100644 index 0000000000..4039bcb45e --- /dev/null +++ b/samples/layouts/card/tailwind-styling/src/icons.ts @@ -0,0 +1,8 @@ +export const twitterIcon = + ""; + +export const facebookIcon = + ""; + +export const instagramIcon = + ""; diff --git a/samples/layouts/card/tailwind-styling/src/index.css b/samples/layouts/card/tailwind-styling/src/index.css new file mode 100644 index 0000000000..f4588e46bf --- /dev/null +++ b/samples/layouts/card/tailwind-styling/src/index.css @@ -0,0 +1,8 @@ +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; + +.center { + align-items: center; +} diff --git a/samples/layouts/card/tailwind-styling/src/index.tsx b/samples/layouts/card/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..746743aafb --- /dev/null +++ b/samples/layouts/card/tailwind-styling/src/index.tsx @@ -0,0 +1,63 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrCard, + IgrCardMedia, + IgrCardHeader, + IgrCardContent, + IgrCardActions, + IgrIconButton, + IgrRipple, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import { facebookIcon, instagramIcon, twitterIcon } from "./icons"; + +export default function CardStyling() { + useEffect(() => { + registerIconFromText("facebook", facebookIcon, "material"); + registerIconFromText("twitter", twitterIcon, "material"); + registerIconFromText("instagram", instagramIcon, "material"); + }, []); + + return ( +
+
+ + + + + + Jane Doe + Professional Photographer + + +

+ Hi! I am Jane, photographer and filmmaker. Photography is a way of + feeling, of touching, of loving. What you have caught on film is + captured forever... it remembers little things, long after you + have forgotten everything. +

+ + +
+ + + + + + + + + +
+ + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/card/tailwind-styling/tsconfig.json b/samples/layouts/card/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/card/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/card/tailwind-styling/vite.config.js b/samples/layouts/card/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..c1fff0c83c --- /dev/null +++ b/samples/layouts/card/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 1fbd7cd714af116eae30054bc710eacf3bfaf3cb Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 13 Aug 2026 17:16:10 +0300 Subject: [PATCH 3/5] feat(card): refactor card layout styles and add icon support --- .../card/horizontal/src/CardHorizontal.css | 23 --------------- samples/layouts/card/horizontal/src/index.css | 28 +++++++++++++++++++ samples/layouts/card/horizontal/src/index.tsx | 3 +- .../card/overview/src/CardOverview.css | 8 ------ samples/layouts/card/overview/src/icons.ts | 5 ++++ samples/layouts/card/overview/src/index.css | 8 ++++++ samples/layouts/card/overview/src/index.tsx | 7 +---- .../src/CardSemiHorizontal.css | 23 --------------- .../card/semi-horizontal/src/index.css | 24 ++++++++++++++++ .../card/semi-horizontal/src/index.tsx | 1 - .../layouts/card/styling/src/CardStyling.css | 26 ----------------- samples/layouts/card/styling/src/icons.ts | 8 ++++++ samples/layouts/card/styling/src/index.css | 26 +++++++++++++++++ samples/layouts/card/styling/src/index.tsx | 9 +----- 14 files changed, 102 insertions(+), 97 deletions(-) delete mode 100644 samples/layouts/card/horizontal/src/CardHorizontal.css delete mode 100644 samples/layouts/card/overview/src/CardOverview.css create mode 100644 samples/layouts/card/overview/src/icons.ts delete mode 100644 samples/layouts/card/semi-horizontal/src/CardSemiHorizontal.css delete mode 100644 samples/layouts/card/styling/src/CardStyling.css create mode 100644 samples/layouts/card/styling/src/icons.ts diff --git a/samples/layouts/card/horizontal/src/CardHorizontal.css b/samples/layouts/card/horizontal/src/CardHorizontal.css deleted file mode 100644 index 996f2a0fbf..0000000000 --- a/samples/layouts/card/horizontal/src/CardHorizontal.css +++ /dev/null @@ -1,23 +0,0 @@ -.card-wrapper { - max-width: 400px; - min-width: 250px; -} - -.card-horizontal { - display: flex; - flex-direction: row; - flex: 1 1 0%; -} - -.card-horizontal img { - width: 64px; - height: 64px; -} - -.card-horizontal igc-card-actions { - justify-content: center; -} - -.divider { - border-right: 1px solid darkgray; -} diff --git a/samples/layouts/card/horizontal/src/index.css b/samples/layouts/card/horizontal/src/index.css index e69de29bb2..4f1ec47f3b 100644 --- a/samples/layouts/card/horizontal/src/index.css +++ b/samples/layouts/card/horizontal/src/index.css @@ -0,0 +1,28 @@ +.card-wrapper { + max-width: 400px; + min-width: 250px; +} + +.center { + align-items: center; + justify-content: center; +} + +.card-horizontal { + display: flex; + flex-direction: row; + flex: 1 1 0%; +} + +.card-horizontal img { + width: 64px; + height: 64px; +} + +.card-horizontal igc-card-actions { + justify-content: center; +} + +.divider { + border-right: 1px solid darkgray; +} diff --git a/samples/layouts/card/horizontal/src/index.tsx b/samples/layouts/card/horizontal/src/index.tsx index 7cab8d0f14..dd6a48f7ee 100644 --- a/samples/layouts/card/horizontal/src/index.tsx +++ b/samples/layouts/card/horizontal/src/index.tsx @@ -1,14 +1,13 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import './CardHorizontal.css'; import { IgrCard, IgrCardHeader, IgrCardContent, IgrCardActions } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function CardHorizontal() { return ( -
+
diff --git a/samples/layouts/card/overview/src/CardOverview.css b/samples/layouts/card/overview/src/CardOverview.css deleted file mode 100644 index 42c504d4b8..0000000000 --- a/samples/layouts/card/overview/src/CardOverview.css +++ /dev/null @@ -1,8 +0,0 @@ -.card-wrapper { - max-width: 320px; - min-width: 220px; -} - -.center { - align-items: center; -} \ No newline at end of file diff --git a/samples/layouts/card/overview/src/icons.ts b/samples/layouts/card/overview/src/icons.ts new file mode 100644 index 0000000000..eabd864a96 --- /dev/null +++ b/samples/layouts/card/overview/src/icons.ts @@ -0,0 +1,5 @@ +export const twitterIcon = + ''; + +export const facebookIcon = + ''; diff --git a/samples/layouts/card/overview/src/index.css b/samples/layouts/card/overview/src/index.css index e69de29bb2..1074999942 100644 --- a/samples/layouts/card/overview/src/index.css +++ b/samples/layouts/card/overview/src/index.css @@ -0,0 +1,8 @@ +.card-wrapper { + max-width: 320px; + min-width: 220px; +} + +.center { + align-items: center; +} diff --git a/samples/layouts/card/overview/src/index.tsx b/samples/layouts/card/overview/src/index.tsx index 290b71ae79..32950170d3 100644 --- a/samples/layouts/card/overview/src/index.tsx +++ b/samples/layouts/card/overview/src/index.tsx @@ -1,7 +1,6 @@ import React, { useEffect } from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; -import "./CardOverview.css"; import { IgrCard, IgrCardMedia, @@ -14,11 +13,7 @@ import { registerIconFromText, } from "igniteui-react"; import "igniteui-webcomponents/themes/light/bootstrap.css"; - -const twitterIcon = - ''; -const facebookIcon = - ''; +import { facebookIcon, twitterIcon } from "./icons"; export default function CardOverview() { useEffect(() => { diff --git a/samples/layouts/card/semi-horizontal/src/CardSemiHorizontal.css b/samples/layouts/card/semi-horizontal/src/CardSemiHorizontal.css deleted file mode 100644 index 3d7094fc63..0000000000 --- a/samples/layouts/card/semi-horizontal/src/CardSemiHorizontal.css +++ /dev/null @@ -1,23 +0,0 @@ -.card-wrapper { - max-width: 400px; - min-width: 250px; -} - -.semi-horizontal { - display: flex; - flex-direction: row; - flex-grow: 1; -} - -.card-media { - width: 96px; - min-width: 96px; -} - -.divider { - border-right: 1px solid darkgray; -} - -.center { - align-items: center; -} diff --git a/samples/layouts/card/semi-horizontal/src/index.css b/samples/layouts/card/semi-horizontal/src/index.css index e69de29bb2..bacfee166f 100644 --- a/samples/layouts/card/semi-horizontal/src/index.css +++ b/samples/layouts/card/semi-horizontal/src/index.css @@ -0,0 +1,24 @@ +.card-wrapper { + max-width: 400px; + min-width: 250px; +} + +.semi-horizontal { + display: flex; + flex-direction: row; + flex-grow: 1; +} + +.card-media { + width: 96px; + min-width: 96px; +} + +.divider { + border-right: 1px solid darkgray; +} + +.center { + align-items: center; + justify-content: center; +} diff --git a/samples/layouts/card/semi-horizontal/src/index.tsx b/samples/layouts/card/semi-horizontal/src/index.tsx index 0230d252a5..482b6b9459 100644 --- a/samples/layouts/card/semi-horizontal/src/index.tsx +++ b/samples/layouts/card/semi-horizontal/src/index.tsx @@ -1,7 +1,6 @@ import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; -import "./CardSemiHorizontal.css"; import { IgrCard, IgrCardHeader, diff --git a/samples/layouts/card/styling/src/CardStyling.css b/samples/layouts/card/styling/src/CardStyling.css deleted file mode 100644 index 06d127215e..0000000000 --- a/samples/layouts/card/styling/src/CardStyling.css +++ /dev/null @@ -1,26 +0,0 @@ -.card-wrapper { - max-width: 320px; - min-width: 220px; -} - -igc-card { - background-color: #011627; -} - -igc-card-content, -igc-card-header > *[slot="title"]{ - color: #FEFEFE; -} - -igc-card-header > *[slot="subtitle"] { - color: #ECAA53; - opacity: 0.9; -} - -igc-icon-button+igc-icon-button { - margin-left: 10px; -} - -.center { - align-items: center; -} \ No newline at end of file diff --git a/samples/layouts/card/styling/src/icons.ts b/samples/layouts/card/styling/src/icons.ts new file mode 100644 index 0000000000..4039bcb45e --- /dev/null +++ b/samples/layouts/card/styling/src/icons.ts @@ -0,0 +1,8 @@ +export const twitterIcon = + ""; + +export const facebookIcon = + ""; + +export const instagramIcon = + ""; diff --git a/samples/layouts/card/styling/src/index.css b/samples/layouts/card/styling/src/index.css index e69de29bb2..79113c5f33 100644 --- a/samples/layouts/card/styling/src/index.css +++ b/samples/layouts/card/styling/src/index.css @@ -0,0 +1,26 @@ +.card-wrapper { + max-width: 320px; + min-width: 220px; +} + +igc-card { + background-color: #011627; +} + +igc-card-content, +igc-card-header > *[slot="title"] { + color: #FEFEFE; +} + +igc-card-header > *[slot="subtitle"] { + color: #ECAA53; + opacity: 0.9; +} + +igc-icon-button + igc-icon-button { + margin-left: 10px; +} + +.center { + align-items: center; +} diff --git a/samples/layouts/card/styling/src/index.tsx b/samples/layouts/card/styling/src/index.tsx index f543934898..b15db789d2 100644 --- a/samples/layouts/card/styling/src/index.tsx +++ b/samples/layouts/card/styling/src/index.tsx @@ -1,7 +1,6 @@ import React, { useEffect } from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; -import "./CardStyling.css"; import { IgrCard, IgrCardMedia, @@ -13,13 +12,7 @@ import { registerIconFromText, } from "igniteui-react"; import "igniteui-webcomponents/themes/light/bootstrap.css"; - -const twitterIcon = - ""; -const facebookIcon = - ""; -const instagramIcon = - ""; +import { facebookIcon, instagramIcon, twitterIcon } from "./icons"; export default function CardStyling() { useEffect(() => { From b3490eeddc9034966dc2d1c61b286c3c06ec780f Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 13 Aug 2026 17:16:35 +0300 Subject: [PATCH 4/5] feat(tailwind): add Tailwind CSS support and update dependencies --- browser/package-lock.json | 634 +++++++++++++++++++++++++++++++++++++- browser/package.json | 2 + browser/vite.config.js | 2 + 3 files changed, 630 insertions(+), 8 deletions(-) diff --git a/browser/package-lock.json b/browser/package-lock.json index e9ef98c0c9..01a4d35be1 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.1.14", "@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.1.14", "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", @@ -5503,8 +5843,8 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "devOptional": true, "license": "Apache-2.0", - "optional": true, "engines": { "node": ">=8" } @@ -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", diff --git a/browser/package.json b/browser/package.json index 7138143a65..2a35f4a343 100644 --- a/browser/package.json +++ b/browser/package.json @@ -69,6 +69,7 @@ "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "^5.51.0", "@typescript-eslint/parser": "^5.51.0", + "@tailwindcss/vite": "^4.1.14", "@vitejs/plugin-react": "^5.0.4", "@vitest/browser": "^3.2.4", "browser-sync": "^3.0.4", @@ -101,6 +102,7 @@ "sass": "^1.97.3", "ts-loader": "^9.5.4", "ts-node": "^10.9.2", + "tailwindcss": "^4.1.14", "typescript": "^4.8.4", "vite": "^7.1.9", "vite-tsconfig-paths": "^5.1.4", 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/' : '/', From 318635ac26d5f00cfc299e356dc32983ed2a34c6 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Fri, 14 Aug 2026 12:40:56 +0300 Subject: [PATCH 5/5] fix(card): update Tailwind deps and styles --- browser/package-lock.json | 4 ++-- browser/package.json | 4 ++-- browser/src/index.css | 3 +++ samples/layouts/card/tailwind-styling/package.json | 4 ++-- samples/layouts/card/tailwind-styling/src/index.css | 1 - 5 files changed, 9 insertions(+), 7 deletions(-) diff --git a/browser/package-lock.json b/browser/package-lock.json index 01a4d35be1..fafc39a934 100644 --- a/browser/package-lock.json +++ b/browser/package-lock.json @@ -53,7 +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.1.14", + "@tailwindcss/vite": "^4.3.3", "@types/gulp": "^4.0.6", "@types/jest": "^29.2.0", "@types/node": "^24.7.1", @@ -92,7 +92,7 @@ "remark-frontmatter": "^2.0.0", "run-sequence": "^2.2.1", "sass": "^1.97.3", - "tailwindcss": "^4.1.14", + "tailwindcss": "^4.3.3", "ts-loader": "^9.5.4", "ts-node": "^10.9.2", "typescript": "^4.8.4", diff --git a/browser/package.json b/browser/package.json index 2a35f4a343..fc9d2a8f67 100644 --- a/browser/package.json +++ b/browser/package.json @@ -69,7 +69,7 @@ "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "^5.51.0", "@typescript-eslint/parser": "^5.51.0", - "@tailwindcss/vite": "^4.1.14", + "@tailwindcss/vite": "^4.3.3", "@vitejs/plugin-react": "^5.0.4", "@vitest/browser": "^3.2.4", "browser-sync": "^3.0.4", @@ -102,7 +102,7 @@ "sass": "^1.97.3", "ts-loader": "^9.5.4", "ts-node": "^10.9.2", - "tailwindcss": "^4.1.14", + "tailwindcss": "^4.3.3", "typescript": "^4.8.4", "vite": "^7.1.9", "vite-tsconfig-paths": "^5.1.4", diff --git a/browser/src/index.css b/browser/src/index.css index 65ceb68061..096d92acee 100644 --- a/browser/src/index.css +++ b/browser/src/index.css @@ -1,3 +1,6 @@ +@import "tailwindcss/utilities.css" layer(utilities); +@source "./samples/**/*.{ts,tsx,js,jsx}"; + .igx-grid__td img[src*="dl.infragistics.com/x/img/people"] { width: 62px; height: 62px; diff --git a/samples/layouts/card/tailwind-styling/package.json b/samples/layouts/card/tailwind-styling/package.json index cf03fd388b..2218f7f9ec 100644 --- a/samples/layouts/card/tailwind-styling/package.json +++ b/samples/layouts/card/tailwind-styling/package.json @@ -32,8 +32,8 @@ "vitest": "^3.2.4", "vitest-canvas-mock": "^0.3.3", "worker-loader": "^3.0.8", - "@tailwindcss/vite": "^4.1.14", - "tailwindcss": "^4.1.14" + "@tailwindcss/vite": "^4.3.3", + "tailwindcss": "^4.3.3" }, "browserslist": [ ">0.2%", diff --git a/samples/layouts/card/tailwind-styling/src/index.css b/samples/layouts/card/tailwind-styling/src/index.css index f4588e46bf..8f86843de1 100644 --- a/samples/layouts/card/tailwind-styling/src/index.css +++ b/samples/layouts/card/tailwind-styling/src/index.css @@ -1,4 +1,3 @@ -@layer theme, base, components, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); @source "./index.tsx";