From 38c7eb1844a5516faef001890bba1cfc90dcb287 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 16 Sep 2026 11:45:27 +0300 Subject: [PATCH 1/9] feat(checkbox): update samples content --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/checkbox/checking/index.html | 11 -- samples/inputs/checkbox/checking/package.json | 42 ------- .../inputs/checkbox/checking/src/index.css | 2 - .../inputs/checkbox/checking/src/index.tsx | 26 ---- samples/inputs/checkbox/disabled/README.md | 56 --------- samples/inputs/checkbox/disabled/package.json | 42 ------- .../checkbox/disabled/sandbox.config.json | 5 - .../inputs/checkbox/disabled/src/index.css | 2 - .../inputs/checkbox/disabled/src/index.tsx | 26 ---- .../.devcontainer/devcontainer.json | 4 - .../checkbox/indeterminate/.eslintrc.js | 75 ------------ .../inputs/checkbox/indeterminate/README.md | 56 --------- .../inputs/checkbox/indeterminate/index.html | 11 -- .../indeterminate/sandbox.config.json | 5 - .../checkbox/indeterminate/src/index.css | 2 - .../checkbox/indeterminate/src/index.tsx | 26 ---- .../checkbox/indeterminate/tsconfig.json | 44 ------- .../checkbox/indeterminate/vite.config.js | 12 -- .../label/.devcontainer/devcontainer.json | 4 - samples/inputs/checkbox/label/.eslintrc.js | 75 ------------ .../inputs/checkbox/label/sandbox.config.json | 5 - .../label/src/CheckboxLabelStyles.css | 5 - samples/inputs/checkbox/label/src/index.css | 2 - samples/inputs/checkbox/label/src/index.tsx | 29 ----- samples/inputs/checkbox/label/tsconfig.json | 44 ------- samples/inputs/checkbox/label/vite.config.js | 12 -- .../inputs/checkbox/overview/src/index.css | 68 ++++++++++- .../inputs/checkbox/overview/src/index.tsx | 94 ++++++++++++--- .../.devcontainer/devcontainer.json | 0 .../{checking => states}/.eslintrc.js | 0 .../checkbox/{label => states}/README.md | 8 +- .../checkbox/{label => states}/index.html | 2 +- .../checkbox/{label => states}/package.json | 4 +- .../{checking => states}/sandbox.config.json | 0 samples/inputs/checkbox/states/src/index.css | 29 +++++ samples/inputs/checkbox/states/src/index.tsx | 44 +++++++ .../{checking => states}/tsconfig.json | 0 .../{checking => states}/vite.config.js | 0 samples/inputs/checkbox/styling/src/index.css | 97 ++++++++++++++- samples/inputs/checkbox/styling/src/index.tsx | 74 ++++++++++-- .../.devcontainer/devcontainer.json | 2 +- .../.eslintrc.js | 2 +- .../{checking => tailwind-styling}/README.md | 8 +- .../{disabled => tailwind-styling}/index.html | 4 +- .../package.json | 6 +- .../tailwind-styling/sandbox.config.json | 5 + .../checkbox/tailwind-styling/src/index.css | 88 ++++++++++++++ .../checkbox/tailwind-styling/src/index.tsx | 112 ++++++++++++++++++ .../tsconfig.json | 0 .../vite.config.js | 9 +- 52 files changed, 604 insertions(+), 679 deletions(-) delete mode 100644 samples/inputs/checkbox/checking/index.html delete mode 100644 samples/inputs/checkbox/checking/package.json delete mode 100644 samples/inputs/checkbox/checking/src/index.css delete mode 100644 samples/inputs/checkbox/checking/src/index.tsx delete mode 100644 samples/inputs/checkbox/disabled/README.md delete mode 100644 samples/inputs/checkbox/disabled/package.json delete mode 100644 samples/inputs/checkbox/disabled/sandbox.config.json delete mode 100644 samples/inputs/checkbox/disabled/src/index.css delete mode 100644 samples/inputs/checkbox/disabled/src/index.tsx delete mode 100644 samples/inputs/checkbox/indeterminate/.devcontainer/devcontainer.json delete mode 100644 samples/inputs/checkbox/indeterminate/.eslintrc.js delete mode 100644 samples/inputs/checkbox/indeterminate/README.md delete mode 100644 samples/inputs/checkbox/indeterminate/index.html delete mode 100644 samples/inputs/checkbox/indeterminate/sandbox.config.json delete mode 100644 samples/inputs/checkbox/indeterminate/src/index.css delete mode 100644 samples/inputs/checkbox/indeterminate/src/index.tsx delete mode 100644 samples/inputs/checkbox/indeterminate/tsconfig.json delete mode 100644 samples/inputs/checkbox/indeterminate/vite.config.js delete mode 100644 samples/inputs/checkbox/label/.devcontainer/devcontainer.json delete mode 100644 samples/inputs/checkbox/label/.eslintrc.js delete mode 100644 samples/inputs/checkbox/label/sandbox.config.json delete mode 100644 samples/inputs/checkbox/label/src/CheckboxLabelStyles.css delete mode 100644 samples/inputs/checkbox/label/src/index.css delete mode 100644 samples/inputs/checkbox/label/src/index.tsx delete mode 100644 samples/inputs/checkbox/label/tsconfig.json delete mode 100644 samples/inputs/checkbox/label/vite.config.js rename samples/inputs/checkbox/{checking => states}/.devcontainer/devcontainer.json (100%) rename samples/inputs/checkbox/{checking => states}/.eslintrc.js (100%) rename samples/inputs/checkbox/{label => states}/README.md (86%) rename samples/inputs/checkbox/{label => states}/index.html (87%) rename samples/inputs/checkbox/{label => states}/package.json (87%) rename samples/inputs/checkbox/{checking => states}/sandbox.config.json (100%) create mode 100644 samples/inputs/checkbox/states/src/index.css create mode 100644 samples/inputs/checkbox/states/src/index.tsx rename samples/inputs/checkbox/{checking => states}/tsconfig.json (100%) rename samples/inputs/checkbox/{checking => states}/vite.config.js (100%) rename samples/inputs/checkbox/{disabled => tailwind-styling}/.devcontainer/devcontainer.json (97%) rename samples/inputs/checkbox/{disabled => tailwind-styling}/.eslintrc.js (99%) rename samples/inputs/checkbox/{checking => tailwind-styling}/README.md (85%) rename samples/inputs/checkbox/{disabled => tailwind-styling}/index.html (82%) rename samples/inputs/checkbox/{indeterminate => tailwind-styling}/package.json (81%) create mode 100644 samples/inputs/checkbox/tailwind-styling/sandbox.config.json create mode 100644 samples/inputs/checkbox/tailwind-styling/src/index.css create mode 100644 samples/inputs/checkbox/tailwind-styling/src/index.tsx rename samples/inputs/checkbox/{disabled => tailwind-styling}/tsconfig.json (100%) rename samples/inputs/checkbox/{disabled => tailwind-styling}/vite.config.js (53%) diff --git a/browser/public/meta.json b/browser/public/meta.json index 528f88907d..c14fb22a8e 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-10 00:01:40","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-09-16 11:38:50","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 528f88907d..c14fb22a8e 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-10 00:01:40","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-09-16 11:38:50","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/checkbox/checking/index.html b/samples/inputs/checkbox/checking/index.html deleted file mode 100644 index ab52da5ca7..0000000000 --- a/samples/inputs/checkbox/checking/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - CheckboxChecking - - - -
- - - \ No newline at end of file diff --git a/samples/inputs/checkbox/checking/package.json b/samples/inputs/checkbox/checking/package.json deleted file mode 100644 index 3c6f5bd68b..0000000000 --- a/samples/inputs/checkbox/checking/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "react-checkbox-checking", - "description": "This project provides example of Checkbox Checking using Infragistics React components", - "author": "Infragistics", - "homepage": ".", - "version": "1.4.0", - "private": true, - "scripts": { - "start": "vite --port 4200", - "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", - "preview": "vite preview", - "test": "vitest" - }, - "dependencies": { - "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", - "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", - "react": "^19.2.0", - "react-dom": "^19.2.0", - "tslib": "^2.4.0" - }, - "devDependencies": { - "@types/jest": "^29.2.0", - "@types/node": "^24.7.1", - "@types/react": "^18.0.24", - "@types/react-dom": "^18.0.8", - "@vitejs/plugin-react": "^5.0.4", - "@vitest/browser": "^3.2.4", - "typescript": "^4.8.4", - "vite": "^7.1.9", - "vitest": "^3.2.4", - "vitest-canvas-mock": "^0.3.3", - "worker-loader": "^3.0.8" - }, - "browserslist": [ - ">0.2%", - "not dead", - "not ie <= 11", - "not op_mini all" - ] -} diff --git a/samples/inputs/checkbox/checking/src/index.css b/samples/inputs/checkbox/checking/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/inputs/checkbox/checking/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/checkbox/checking/src/index.tsx b/samples/inputs/checkbox/checking/src/index.tsx deleted file mode 100644 index 76cdf7abb6..0000000000 --- a/samples/inputs/checkbox/checking/src/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrCheckbox } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default class CheckboxChecked extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- - Label - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/inputs/checkbox/disabled/README.md b/samples/inputs/checkbox/disabled/README.md deleted file mode 100644 index 2d3952da22..0000000000 --- a/samples/inputs/checkbox/disabled/README.md +++ /dev/null @@ -1,56 +0,0 @@ - - - -This folder contains implementation of React application with example of Disabled feature using [Checkbox](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. - - - - - - View Docs - - - View Code - - - Run Sample - - - Run Sample - - - - -## Branches - -> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. - -## Instructions - -Follow these instructions to run this example: - - -``` -git clone https://github.com/IgniteUI/igniteui-react-examples.git -git checkout master -cd ./igniteui-react-examples -cd ./samples/inputs/checkbox/disabled -``` - -open above folder in VS Code or type: -``` -code . -``` - -In terminal window, run: -``` -npm install --legacy-peer-deps -npm run-script start -``` - -Then open http://localhost:4200/ in your browser - - -## Learn More - -To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/checkbox/disabled/package.json b/samples/inputs/checkbox/disabled/package.json deleted file mode 100644 index 762f30cb2b..0000000000 --- a/samples/inputs/checkbox/disabled/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "react-checkbox-disabled", - "description": "This project provides example of Checkbox Disabled using Infragistics React components", - "author": "Infragistics", - "homepage": ".", - "version": "1.4.0", - "private": true, - "scripts": { - "start": "vite --port 4200", - "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", - "preview": "vite preview", - "test": "vitest" - }, - "dependencies": { - "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", - "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", - "react": "^19.2.0", - "react-dom": "^19.2.0", - "tslib": "^2.4.0" - }, - "devDependencies": { - "@types/jest": "^29.2.0", - "@types/node": "^24.7.1", - "@types/react": "^18.0.24", - "@types/react-dom": "^18.0.8", - "@vitejs/plugin-react": "^5.0.4", - "@vitest/browser": "^3.2.4", - "typescript": "^4.8.4", - "vite": "^7.1.9", - "vitest": "^3.2.4", - "vitest-canvas-mock": "^0.3.3", - "worker-loader": "^3.0.8" - }, - "browserslist": [ - ">0.2%", - "not dead", - "not ie <= 11", - "not op_mini all" - ] -} diff --git a/samples/inputs/checkbox/disabled/sandbox.config.json b/samples/inputs/checkbox/disabled/sandbox.config.json deleted file mode 100644 index 00acba0c10..0000000000 --- a/samples/inputs/checkbox/disabled/sandbox.config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "infiniteLoopProtection": false, - "hardReloadOnChange": false, - "view": "browser" -} \ No newline at end of file diff --git a/samples/inputs/checkbox/disabled/src/index.css b/samples/inputs/checkbox/disabled/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/inputs/checkbox/disabled/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/checkbox/disabled/src/index.tsx b/samples/inputs/checkbox/disabled/src/index.tsx deleted file mode 100644 index bee5314a60..0000000000 --- a/samples/inputs/checkbox/disabled/src/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrCheckbox } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default class CheckboxDisabled extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- - Label - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/inputs/checkbox/indeterminate/.devcontainer/devcontainer.json b/samples/inputs/checkbox/indeterminate/.devcontainer/devcontainer.json deleted file mode 100644 index e0b8e9c925..0000000000 --- a/samples/inputs/checkbox/indeterminate/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:22" -} \ No newline at end of file diff --git a/samples/inputs/checkbox/indeterminate/.eslintrc.js b/samples/inputs/checkbox/indeterminate/.eslintrc.js deleted file mode 100644 index b45160a9ee..0000000000 --- a/samples/inputs/checkbox/indeterminate/.eslintrc.js +++ /dev/null @@ -1,75 +0,0 @@ -// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project -module.exports = { - parser: "@typescript-eslint/parser", // Specifies the ESLint parser - parserOptions: { - ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features - sourceType: "module", // Allows for the use of imports - ecmaFeatures: { - jsx: true // Allows for the parsing of JSX - } - }, - settings: { - react: { - version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use - } - }, - extends: [ - "eslint:recommended", - "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react - "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin - ], - rules: { - // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs - "default-case": "off", - "no-undef": "off", - "no-unused-vars": "off", - "no-extend-native": "off", - "no-throw-literal": "off", - "no-useless-concat": "off", - "no-mixed-operators": "off", - "no-prototype-builtins": "off", - "prefer-const": "off", - "prefer-rest-params": "off", - "jsx-a11y/alt-text": "off", - "jsx-a11y/iframe-has-title": "off", - "@typescript-eslint/no-unused-vars": "off", - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-inferrable-types": "off", - "@typescript-eslint/no-useless-constructor": "off", - "@typescript-eslint/no-use-before-define": "off", - "@typescript-eslint/no-non-null-assertion": "off", - "@typescript-eslint/interface-name-prefix": "off", - "@typescript-eslint/prefer-namespace-keyword": "off", - "@typescript-eslint/explicit-function-return-type": "off", - "@typescript-eslint/explicit-module-boundary-types": "off" - }, - "overrides": [ - { - "files": ["*.ts", "*.tsx"], - "rules": { - "default-case": "off", - "no-undef": "off", - "no-unused-vars": "off", - "no-extend-native": "off", - "no-throw-literal": "off", - "no-useless-concat": "off", - "no-mixed-operators": "off", - "no-prototype-builtins": "off", - "prefer-const": "off", - "prefer-rest-params": "off", - "jsx-a11y/alt-text": "off", - "jsx-a11y/iframe-has-title": "off", - "@typescript-eslint/no-unused-vars": "off", - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-inferrable-types": "off", - "@typescript-eslint/no-useless-constructor": "off", - "@typescript-eslint/no-use-before-define": "off", - "@typescript-eslint/no-non-null-assertion": "off", - "@typescript-eslint/interface-name-prefix": "off", - "@typescript-eslint/prefer-namespace-keyword": "off", - "@typescript-eslint/explicit-function-return-type": "off", - "@typescript-eslint/explicit-module-boundary-types": "off" - } - } - ] - }; \ No newline at end of file diff --git a/samples/inputs/checkbox/indeterminate/README.md b/samples/inputs/checkbox/indeterminate/README.md deleted file mode 100644 index ad1522f565..0000000000 --- a/samples/inputs/checkbox/indeterminate/README.md +++ /dev/null @@ -1,56 +0,0 @@ - - - -This folder contains implementation of React application with example of Indeterminate feature using [Checkbox](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. - - - - - - View Docs - - - View Code - - - Run Sample - - - Run Sample - - - - -## Branches - -> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. - -## Instructions - -Follow these instructions to run this example: - - -``` -git clone https://github.com/IgniteUI/igniteui-react-examples.git -git checkout master -cd ./igniteui-react-examples -cd ./samples/inputs/checkbox/indeterminate -``` - -open above folder in VS Code or type: -``` -code . -``` - -In terminal window, run: -``` -npm install --legacy-peer-deps -npm run-script start -``` - -Then open http://localhost:4200/ in your browser - - -## Learn More - -To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/checkbox/indeterminate/index.html b/samples/inputs/checkbox/indeterminate/index.html deleted file mode 100644 index 6ebed15856..0000000000 --- a/samples/inputs/checkbox/indeterminate/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - CheckboIndeterminate - - - -
- - - \ No newline at end of file diff --git a/samples/inputs/checkbox/indeterminate/sandbox.config.json b/samples/inputs/checkbox/indeterminate/sandbox.config.json deleted file mode 100644 index 00acba0c10..0000000000 --- a/samples/inputs/checkbox/indeterminate/sandbox.config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "infiniteLoopProtection": false, - "hardReloadOnChange": false, - "view": "browser" -} \ No newline at end of file diff --git a/samples/inputs/checkbox/indeterminate/src/index.css b/samples/inputs/checkbox/indeterminate/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/inputs/checkbox/indeterminate/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/checkbox/indeterminate/src/index.tsx b/samples/inputs/checkbox/indeterminate/src/index.tsx deleted file mode 100644 index 990fdd25d6..0000000000 --- a/samples/inputs/checkbox/indeterminate/src/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrCheckbox, IgrCheckboxModule } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default class CheckboxIndeterminate extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- - Label - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/inputs/checkbox/indeterminate/tsconfig.json b/samples/inputs/checkbox/indeterminate/tsconfig.json deleted file mode 100644 index e7db8a94f5..0000000000 --- a/samples/inputs/checkbox/indeterminate/tsconfig.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "compilerOptions": { - "resolveJsonModule": true, - "esModuleInterop": true, - "baseUrl": ".", - "outDir": "build/dist", - "module": "esnext", - "target": "es5", - "lib": [ - "es6", - "dom" - ], - "sourceMap": true, - "allowJs": true, - "jsx": "react", - "moduleResolution": "node", - "rootDir": "src", - "forceConsistentCasingInFileNames": true, - "noImplicitReturns": true, - "noImplicitThis": true, - "noImplicitAny": true, - "noUnusedLocals": false, - "importHelpers": true, - "allowSyntheticDefaultImports": true, - "skipLibCheck": true, - "strict": false, - "isolatedModules": true, - "noEmit": true - }, - "exclude": [ - "node_modules", - "build", - "scripts", - "acceptance-tests", - "webpack", - "jest", - "src/setupTests.ts", - "**/odatajs-4.0.0.js", - "config-overrides.js" - ], - "include": [ - "src" - ] -} diff --git a/samples/inputs/checkbox/indeterminate/vite.config.js b/samples/inputs/checkbox/indeterminate/vite.config.js deleted file mode 100644 index 1744dbc719..0000000000 --- a/samples/inputs/checkbox/indeterminate/vite.config.js +++ /dev/null @@ -1,12 +0,0 @@ -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; - -export default defineConfig({ - plugins: [react()], - build: { - outDir: 'build' - }, - server: { - open: false - }, -}); \ No newline at end of file diff --git a/samples/inputs/checkbox/label/.devcontainer/devcontainer.json b/samples/inputs/checkbox/label/.devcontainer/devcontainer.json deleted file mode 100644 index e0b8e9c925..0000000000 --- a/samples/inputs/checkbox/label/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:22" -} \ No newline at end of file diff --git a/samples/inputs/checkbox/label/.eslintrc.js b/samples/inputs/checkbox/label/.eslintrc.js deleted file mode 100644 index b45160a9ee..0000000000 --- a/samples/inputs/checkbox/label/.eslintrc.js +++ /dev/null @@ -1,75 +0,0 @@ -// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project -module.exports = { - parser: "@typescript-eslint/parser", // Specifies the ESLint parser - parserOptions: { - ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features - sourceType: "module", // Allows for the use of imports - ecmaFeatures: { - jsx: true // Allows for the parsing of JSX - } - }, - settings: { - react: { - version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use - } - }, - extends: [ - "eslint:recommended", - "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react - "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin - ], - rules: { - // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs - "default-case": "off", - "no-undef": "off", - "no-unused-vars": "off", - "no-extend-native": "off", - "no-throw-literal": "off", - "no-useless-concat": "off", - "no-mixed-operators": "off", - "no-prototype-builtins": "off", - "prefer-const": "off", - "prefer-rest-params": "off", - "jsx-a11y/alt-text": "off", - "jsx-a11y/iframe-has-title": "off", - "@typescript-eslint/no-unused-vars": "off", - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-inferrable-types": "off", - "@typescript-eslint/no-useless-constructor": "off", - "@typescript-eslint/no-use-before-define": "off", - "@typescript-eslint/no-non-null-assertion": "off", - "@typescript-eslint/interface-name-prefix": "off", - "@typescript-eslint/prefer-namespace-keyword": "off", - "@typescript-eslint/explicit-function-return-type": "off", - "@typescript-eslint/explicit-module-boundary-types": "off" - }, - "overrides": [ - { - "files": ["*.ts", "*.tsx"], - "rules": { - "default-case": "off", - "no-undef": "off", - "no-unused-vars": "off", - "no-extend-native": "off", - "no-throw-literal": "off", - "no-useless-concat": "off", - "no-mixed-operators": "off", - "no-prototype-builtins": "off", - "prefer-const": "off", - "prefer-rest-params": "off", - "jsx-a11y/alt-text": "off", - "jsx-a11y/iframe-has-title": "off", - "@typescript-eslint/no-unused-vars": "off", - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-inferrable-types": "off", - "@typescript-eslint/no-useless-constructor": "off", - "@typescript-eslint/no-use-before-define": "off", - "@typescript-eslint/no-non-null-assertion": "off", - "@typescript-eslint/interface-name-prefix": "off", - "@typescript-eslint/prefer-namespace-keyword": "off", - "@typescript-eslint/explicit-function-return-type": "off", - "@typescript-eslint/explicit-module-boundary-types": "off" - } - } - ] - }; \ No newline at end of file diff --git a/samples/inputs/checkbox/label/sandbox.config.json b/samples/inputs/checkbox/label/sandbox.config.json deleted file mode 100644 index 00acba0c10..0000000000 --- a/samples/inputs/checkbox/label/sandbox.config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "infiniteLoopProtection": false, - "hardReloadOnChange": false, - "view": "browser" -} \ No newline at end of file diff --git a/samples/inputs/checkbox/label/src/CheckboxLabelStyles.css b/samples/inputs/checkbox/label/src/CheckboxLabelStyles.css deleted file mode 100644 index 21bf881ab2..0000000000 --- a/samples/inputs/checkbox/label/src/CheckboxLabelStyles.css +++ /dev/null @@ -1,5 +0,0 @@ -.wrapper { - display: flex; - align-items: center; - gap: 0.5rem; -} \ No newline at end of file diff --git a/samples/inputs/checkbox/label/src/index.css b/samples/inputs/checkbox/label/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/inputs/checkbox/label/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/checkbox/label/src/index.tsx b/samples/inputs/checkbox/label/src/index.tsx deleted file mode 100644 index bb155f3d0b..0000000000 --- a/samples/inputs/checkbox/label/src/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import './CheckboxLabelStyles.css' -import { IgrCheckbox } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default class CheckboxLabel extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- Label -
- Label - -
-
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/inputs/checkbox/label/tsconfig.json b/samples/inputs/checkbox/label/tsconfig.json deleted file mode 100644 index e7db8a94f5..0000000000 --- a/samples/inputs/checkbox/label/tsconfig.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "compilerOptions": { - "resolveJsonModule": true, - "esModuleInterop": true, - "baseUrl": ".", - "outDir": "build/dist", - "module": "esnext", - "target": "es5", - "lib": [ - "es6", - "dom" - ], - "sourceMap": true, - "allowJs": true, - "jsx": "react", - "moduleResolution": "node", - "rootDir": "src", - "forceConsistentCasingInFileNames": true, - "noImplicitReturns": true, - "noImplicitThis": true, - "noImplicitAny": true, - "noUnusedLocals": false, - "importHelpers": true, - "allowSyntheticDefaultImports": true, - "skipLibCheck": true, - "strict": false, - "isolatedModules": true, - "noEmit": true - }, - "exclude": [ - "node_modules", - "build", - "scripts", - "acceptance-tests", - "webpack", - "jest", - "src/setupTests.ts", - "**/odatajs-4.0.0.js", - "config-overrides.js" - ], - "include": [ - "src" - ] -} diff --git a/samples/inputs/checkbox/label/vite.config.js b/samples/inputs/checkbox/label/vite.config.js deleted file mode 100644 index 1744dbc719..0000000000 --- a/samples/inputs/checkbox/label/vite.config.js +++ /dev/null @@ -1,12 +0,0 @@ -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; - -export default defineConfig({ - plugins: [react()], - build: { - outDir: 'build' - }, - server: { - open: false - }, -}); \ No newline at end of file diff --git a/samples/inputs/checkbox/overview/src/index.css b/samples/inputs/checkbox/overview/src/index.css index 1f53b8aa05..729f44bdf9 100644 --- a/samples/inputs/checkbox/overview/src/index.css +++ b/samples/inputs/checkbox/overview/src/index.css @@ -1,2 +1,68 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.shopping-list { + position: relative; + display: flex; + flex-direction: column; + gap: 1rem; + width: 22.5rem; + height: 24.3125rem; + padding: 1rem; + border-radius: 0.25rem; + background: var(--ig-surface-100); + box-shadow: 0 0.0625rem 0.25rem rgb(0 0 0 / 16%); +} + +.list-group { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.group-title { + margin: 0 0 0.25rem; + color: var(--ig-primary-500); + font-size: 0.625rem; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.list-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; +} + +.item-menu::part(base) { + color: var(--ig-gray-500); +} + +.add-item { + position: absolute; + right: 1rem; + bottom: 1rem; +} + +.add-item::part(base) { + border-radius: 50%; + background-color: var(--ig-primary-500); + color: var(--ig-gray-50); + transition: background-color 150ms ease, box-shadow 150ms ease; +} + +.add-item:hover::part(base) { + background-color: var(--ig-primary-600); + color: var(--ig-gray-50); + box-shadow: 0 0.125rem 0.375rem rgb(0 0 0 / 24%); +} \ No newline at end of file diff --git a/samples/inputs/checkbox/overview/src/index.tsx b/samples/inputs/checkbox/overview/src/index.tsx index 1cfec221ac..566fd598f1 100644 --- a/samples/inputs/checkbox/overview/src/index.tsx +++ b/samples/inputs/checkbox/overview/src/index.tsx @@ -1,24 +1,90 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrCheckbox } from 'igniteui-react'; +import { IgrButton, IgrCheckbox, IgrIcon, IgrIconButton, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class CheckboxOverview extends React.Component { +const icons = [ + { name: 'more_vert', text: '' }, + { name: 'add', text: '' }, +]; - constructor(props: any) { - super(props); - } +interface ShoppingItem { + label: string; + checked: boolean; +} - public render(): JSX.Element { - return ( -
- - Checkbox - -
+interface ShoppingGroup { + title: string; + items: ShoppingItem[]; +} + +const initialGroups: ShoppingGroup[] = [ + { + title: 'Grocery store', + items: [ + { label: 'Bread', checked: false }, + { label: 'Milk 4l', checked: false }, + { label: 'Eggs 1 pack', checked: true }, + ], + }, + { + title: 'Fruit and vegetable shop', + items: [ + { label: 'Strawberries', checked: false }, + { label: 'Lemons', checked: false }, + { label: 'Single Line Item', checked: true }, + ], + }, +]; + +export default function CheckboxOverview(): JSX.Element { + const [groups, setGroups] = useState(initialGroups); + + useEffect(() => { + icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material')); + }, []); + + const toggleItem = (groupIndex: number, itemIndex: number, checked: boolean) => { + setGroups((current) => + current.map((group, gi) => + gi !== groupIndex + ? group + : { + ...group, + items: group.items.map((item, ii) => (ii === itemIndex ? { ...item, checked } : item)), + } + ) ); - } + }; + + return ( +
+
+ {groups.map((group, groupIndex) => ( +
+

{group.title}

+ {group.items.map((item, itemIndex) => ( +
+ toggleItem(groupIndex, itemIndex, e.detail.checked)} + > + {item.label} + + + + +
+ ))} +
+ ))} + + + +
+
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/checkbox/checking/.devcontainer/devcontainer.json b/samples/inputs/checkbox/states/.devcontainer/devcontainer.json similarity index 100% rename from samples/inputs/checkbox/checking/.devcontainer/devcontainer.json rename to samples/inputs/checkbox/states/.devcontainer/devcontainer.json diff --git a/samples/inputs/checkbox/checking/.eslintrc.js b/samples/inputs/checkbox/states/.eslintrc.js similarity index 100% rename from samples/inputs/checkbox/checking/.eslintrc.js rename to samples/inputs/checkbox/states/.eslintrc.js diff --git a/samples/inputs/checkbox/label/README.md b/samples/inputs/checkbox/states/README.md similarity index 86% rename from samples/inputs/checkbox/label/README.md rename to samples/inputs/checkbox/states/README.md index e285c4fd54..dfaa1a464f 100644 --- a/samples/inputs/checkbox/label/README.md +++ b/samples/inputs/checkbox/states/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Label feature using [Checkbox](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 States feature using [Checkbox](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 Label f 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/inputs/checkbox/label +cd ./samples/inputs/checkbox/states ``` open above folder in VS Code or type: diff --git a/samples/inputs/checkbox/label/index.html b/samples/inputs/checkbox/states/index.html similarity index 87% rename from samples/inputs/checkbox/label/index.html rename to samples/inputs/checkbox/states/index.html index 4cb798b3ad..63366f3d9c 100644 --- a/samples/inputs/checkbox/label/index.html +++ b/samples/inputs/checkbox/states/index.html @@ -1,7 +1,7 @@ - Checkbox Label + Checkbox States diff --git a/samples/inputs/checkbox/label/package.json b/samples/inputs/checkbox/states/package.json similarity index 87% rename from samples/inputs/checkbox/label/package.json rename to samples/inputs/checkbox/states/package.json index 7291ea8f45..6ccbed4fd3 100644 --- a/samples/inputs/checkbox/label/package.json +++ b/samples/inputs/checkbox/states/package.json @@ -1,6 +1,6 @@ { - "name": "react-checkbox-label", - "description": "This project provides example of Checkbox Label using Infragistics React components", + "name": "react-checkbox-states", + "description": "This project provides an example of Checkbox states using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/checkbox/checking/sandbox.config.json b/samples/inputs/checkbox/states/sandbox.config.json similarity index 100% rename from samples/inputs/checkbox/checking/sandbox.config.json rename to samples/inputs/checkbox/states/sandbox.config.json diff --git a/samples/inputs/checkbox/states/src/index.css b/samples/inputs/checkbox/states/src/index.css new file mode 100644 index 0000000000..dd5580038e --- /dev/null +++ b/samples/inputs/checkbox/states/src/index.css @@ -0,0 +1,29 @@ +/* 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; +} + +.states { + display: flex; + align-items: flex-end; + gap: 4.5rem; +} + +.state { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} + +.state-label { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); +} \ No newline at end of file diff --git a/samples/inputs/checkbox/states/src/index.tsx b/samples/inputs/checkbox/states/src/index.tsx new file mode 100644 index 0000000000..247074b38c --- /dev/null +++ b/samples/inputs/checkbox/states/src/index.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrCheckbox } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default class CheckboxStates extends React.Component { + public render(): JSX.Element { + return ( +
+
+
+ Indeterminate + +
+
+ On + +
+
+ Off + +
+
+ Disabled + +
+
+ Invalid + +
+
+ Required + +
+
+
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/checkbox/checking/tsconfig.json b/samples/inputs/checkbox/states/tsconfig.json similarity index 100% rename from samples/inputs/checkbox/checking/tsconfig.json rename to samples/inputs/checkbox/states/tsconfig.json diff --git a/samples/inputs/checkbox/checking/vite.config.js b/samples/inputs/checkbox/states/vite.config.js similarity index 100% rename from samples/inputs/checkbox/checking/vite.config.js rename to samples/inputs/checkbox/states/vite.config.js diff --git a/samples/inputs/checkbox/styling/src/index.css b/samples/inputs/checkbox/styling/src/index.css index 4ab6ad20e1..06c1e3ccc8 100644 --- a/samples/inputs/checkbox/styling/src/index.css +++ b/samples/inputs/checkbox/styling/src/index.css @@ -1,10 +1,97 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-checkbox::part(indicator) { - --tick-color: var(--ig-secondary-500-contrast); /* check icon color */ +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; } - -igc-checkbox::part(control checked)::after { - --fill-color: var(--ig-secondary-500); /* checkbox background color */ + +.team-card { + display: flex; + flex-direction: column; + gap: 0.25rem; + width: 24.3125rem; + height: 22.5rem; + padding: 1rem; + border-radius: 0.5rem; + background: var(--ig-surface-500); + box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 12%); +} + +.team-title { + margin: 0 0 0.5rem; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 10px; + font-weight: 400; + font-style: normal; + line-height: 16px; + letter-spacing: 1.5px; + text-transform: uppercase; +} + +.select-all::part(base), +.member::part(base) { + width: 100%; + justify-content: space-between; + padding: 0.5rem; + border-radius: 0.25rem; +} + +.select-all::part(label) { + color: var(--ig-primary-500); + font-size: 1rem; +} + +.member::part(label) { + width: 100%; + color: var(--ig-gray-900); +} + +.member-selected::part(base) { + background: var(--ig-primary-50); +} + +.select-all::part(indicator), +.member::part(indicator) { + --tick-color: var(--ig-primary-500-contrast); +} + +.select-all::part(control checked)::after, +.member::part(control checked)::after { + --fill-color: var(--ig-primary-500); +} + +.member-info { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.member-info igc-avatar { + --ig-size: var(--ig-size-small); +} + +.member-text { + display: flex; + flex-direction: column; + line-height: 1.25; +} + +.member-name { + font-size: 0.875rem; + font-weight: 600; +} + +.member-email { + color: var(--ig-gray-600); + font-size: 0.75rem; +} + +.continue-button { + margin-top: 1rem; + align-self: flex-end; } \ No newline at end of file diff --git a/samples/inputs/checkbox/styling/src/index.tsx b/samples/inputs/checkbox/styling/src/index.tsx index 255b14044c..6d59cc803b 100644 --- a/samples/inputs/checkbox/styling/src/index.tsx +++ b/samples/inputs/checkbox/styling/src/index.tsx @@ -1,24 +1,72 @@ -import React from 'react'; +import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrCheckbox } from 'igniteui-react'; +import { IgrAvatar, IgrButton, IgrCheckbox } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class CheckboxStyling extends React.Component { +interface TeamMember { + name: string; + email: string; + avatar: string; + selected: boolean; +} + +const initialMembers: TeamMember[] = [ + { name: 'Emily Potter', email: 'emily@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png', selected: false }, + { name: 'Alex Lima', email: 'alex@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-05.png', selected: true }, + { name: 'Mateo García', email: 'mateo@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png', selected: false }, + { name: 'Kate Roberts', email: 'kate@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png', selected: false }, +]; + +export default function CheckboxStyling(): JSX.Element { + const [members, setMembers] = useState(initialMembers); + + const allSelected = members.every((member) => member.selected); - constructor(props: any) { - super(props); - } + const toggleAll = (checked: boolean) => { + setMembers((current) => current.map((member) => ({ ...member, selected: checked }))); + }; - public render(): JSX.Element { - return ( -
- - Checkbox + const toggleMember = (index: number, checked: boolean) => { + setMembers((current) => current.map((member, i) => (i === index ? { ...member, selected: checked } : member))); + }; + + return ( +
+
+

Team members

+ + toggleAll(e.detail.checked)} + > + Select all + + {members.map((member, index) => ( + toggleMember(index, e.detail.checked)} + > + + + + {member.name} + {member.email} + + + + ))} + + Continue
- ); - } +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/checkbox/disabled/.devcontainer/devcontainer.json b/samples/inputs/checkbox/tailwind-styling/.devcontainer/devcontainer.json similarity index 97% rename from samples/inputs/checkbox/disabled/.devcontainer/devcontainer.json rename to samples/inputs/checkbox/tailwind-styling/.devcontainer/devcontainer.json index e0b8e9c925..ff434ecd44 100644 --- a/samples/inputs/checkbox/disabled/.devcontainer/devcontainer.json +++ b/samples/inputs/checkbox/tailwind-styling/.devcontainer/devcontainer.json @@ -1,4 +1,4 @@ { "name": "Node.js", "image": "mcr.microsoft.com/devcontainers/javascript-node:22" -} \ No newline at end of file +} diff --git a/samples/inputs/checkbox/disabled/.eslintrc.js b/samples/inputs/checkbox/tailwind-styling/.eslintrc.js similarity index 99% rename from samples/inputs/checkbox/disabled/.eslintrc.js rename to samples/inputs/checkbox/tailwind-styling/.eslintrc.js index b45160a9ee..ea01229020 100644 --- a/samples/inputs/checkbox/disabled/.eslintrc.js +++ b/samples/inputs/checkbox/tailwind-styling/.eslintrc.js @@ -72,4 +72,4 @@ module.exports = { } } ] - }; \ No newline at end of file + }; diff --git a/samples/inputs/checkbox/checking/README.md b/samples/inputs/checkbox/tailwind-styling/README.md similarity index 85% rename from samples/inputs/checkbox/checking/README.md rename to samples/inputs/checkbox/tailwind-styling/README.md index bf96b4bbcc..f25df553f4 100644 --- a/samples/inputs/checkbox/checking/README.md +++ b/samples/inputs/checkbox/tailwind-styling/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Checking feature using [Checkbox](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 Tailwind Styling feature using [Checkbox](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 Checkin 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/inputs/checkbox/checking +cd ./samples/inputs/checkbox/tailwind-styling ``` open above folder in VS Code or type: diff --git a/samples/inputs/checkbox/disabled/index.html b/samples/inputs/checkbox/tailwind-styling/index.html similarity index 82% rename from samples/inputs/checkbox/disabled/index.html rename to samples/inputs/checkbox/tailwind-styling/index.html index d39728f106..db2c2e9fe3 100644 --- a/samples/inputs/checkbox/disabled/index.html +++ b/samples/inputs/checkbox/tailwind-styling/index.html @@ -1,11 +1,11 @@ - Checkbox Disabled + CheckboxTailwindStyling
- \ No newline at end of file + diff --git a/samples/inputs/checkbox/indeterminate/package.json b/samples/inputs/checkbox/tailwind-styling/package.json similarity index 81% rename from samples/inputs/checkbox/indeterminate/package.json rename to samples/inputs/checkbox/tailwind-styling/package.json index 250e3bf096..a6a0b838a0 100644 --- a/samples/inputs/checkbox/indeterminate/package.json +++ b/samples/inputs/checkbox/tailwind-styling/package.json @@ -1,6 +1,6 @@ { - "name": "react-checkbox-indeterminate", - "description": "This project provides example of Checkbox Indeterminate using Infragistics React components", + "name": "react-checkbox-tailwind-styling", + "description": "This project provides example of Checkbox Tailwind Styling using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", @@ -21,12 +21,14 @@ "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", diff --git a/samples/inputs/checkbox/tailwind-styling/sandbox.config.json b/samples/inputs/checkbox/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..20199570e4 --- /dev/null +++ b/samples/inputs/checkbox/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/checkbox/tailwind-styling/src/index.css b/samples/inputs/checkbox/tailwind-styling/src/index.css new file mode 100644 index 0000000000..8fdaeea243 --- /dev/null +++ b/samples/inputs/checkbox/tailwind-styling/src/index.css @@ -0,0 +1,88 @@ +/* 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); + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.filter-panel { + display: flex; + flex-direction: column; + gap: 0.75rem; + width: 11rem; + font-family: "Aktiv Grotesk", sans-serif; + padding: 1rem; + border: 1px solid var(--ig-primary-500); + border-radius: 0.5rem; + background: var(--color-white); +} + +.filter-section { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.section-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0; + border: 0; + background: transparent; + color: var(--ig-primary-800); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 0.875rem; + font-weight: 700; + cursor: pointer; +} + +.section-options { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding-left: 0.75rem; +} + +.section-chevron { + color: var(--ig-gray-800); + transition: transform 150ms ease-in-out; +} + +.rotate-180 { + transform: rotate(180deg); +} + +.filter-option::part(label) { + color: var(--ig-gray-800); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.5rem; + letter-spacing: 0.1px; +} + +.filter-option::part(indicator) { + --tick-color: var(--color-white); +} + +.filter-option::part(control) { + --empty-color: var(--color-slate-400); + --border-radius: 0.125rem; +} + +.filter-option::part(control checked)::after { + --fill-color: var(--color-blue-600); +} + +.filter-option:hover::part(control) { + --empty-color: var(--color-blue-600); +} diff --git a/samples/inputs/checkbox/tailwind-styling/src/index.tsx b/samples/inputs/checkbox/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..8f15a607a0 --- /dev/null +++ b/samples/inputs/checkbox/tailwind-styling/src/index.tsx @@ -0,0 +1,112 @@ +import React, { useEffect, useState } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrCheckbox, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const icons = [ + { name: 'expand_more', text: '' }, +]; + +interface FilterSection { + title: string; + options: { label: string; checked: boolean }[]; +} + +const initialSections: FilterSection[] = [ + { + title: 'Brand', + options: [ + { label: 'Nike', checked: true }, + { label: 'Roxy', checked: false }, + { label: 'Guess', checked: false }, + ], + }, + { + title: 'Color', + options: [ + { label: 'Black', checked: false }, + { label: 'White', checked: false }, + { label: 'Blue', checked: false }, + ], + }, + { + title: 'Size', + options: [ + { label: 'Small', checked: false }, + { label: 'Medium', checked: false }, + { label: 'Large', checked: false }, + ], + }, +]; + +export default function CheckboxTailwindStyling(): JSX.Element { + const [sections, setSections] = useState(initialSections); + const [expanded, setExpanded] = useState(['Brand']); + + useEffect(() => { + icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material')); + }, []); + + const toggleOption = (sectionIndex: number, optionIndex: number, checked: boolean) => { + setSections((current) => + current.map((section, si) => + si !== sectionIndex + ? section + : { + ...section, + options: section.options.map((option, oi) => + oi === optionIndex ? { ...option, checked } : option + ), + } + ) + ); + }; + + return ( +
+
+ {sections.map((section, sectionIndex) => ( +
+ + {expanded.includes(section.title) && ( +
+ {section.options.map((option, optionIndex) => ( + toggleOption(sectionIndex, optionIndex, e.detail.checked)} + > + {option.label} + + ))} +
+ )} +
+ ))} +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/checkbox/disabled/tsconfig.json b/samples/inputs/checkbox/tailwind-styling/tsconfig.json similarity index 100% rename from samples/inputs/checkbox/disabled/tsconfig.json rename to samples/inputs/checkbox/tailwind-styling/tsconfig.json diff --git a/samples/inputs/checkbox/disabled/vite.config.js b/samples/inputs/checkbox/tailwind-styling/vite.config.js similarity index 53% rename from samples/inputs/checkbox/disabled/vite.config.js rename to samples/inputs/checkbox/tailwind-styling/vite.config.js index 1744dbc719..4043727956 100644 --- a/samples/inputs/checkbox/disabled/vite.config.js +++ b/samples/inputs/checkbox/tailwind-styling/vite.config.js @@ -1,12 +1,13 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ - plugins: [react()], + plugins: [react(), tailwindcss()], build: { - outDir: 'build' + outDir: 'build', }, server: { - open: false + open: false, }, -}); \ No newline at end of file +}); From f98427a92ad7642c6d3cb3bb046fc53be93ae2fe Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 16 Sep 2026 12:08:27 +0300 Subject: [PATCH 2/9] fix(checkbox): update tailwind sample --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/checkbox/tailwind-styling/src/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index c14fb22a8e..adadecf1d5 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-16 11:38:50","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-16 12:03:39","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 c14fb22a8e..adadecf1d5 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-16 11:38:50","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-16 12:03:39","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/checkbox/tailwind-styling/src/index.tsx b/samples/inputs/checkbox/tailwind-styling/src/index.tsx index 8f15a607a0..ae14511713 100644 --- a/samples/inputs/checkbox/tailwind-styling/src/index.tsx +++ b/samples/inputs/checkbox/tailwind-styling/src/index.tsx @@ -42,7 +42,7 @@ const initialSections: FilterSection[] = [ export default function CheckboxTailwindStyling(): JSX.Element { const [sections, setSections] = useState(initialSections); - const [expanded, setExpanded] = useState(['Brand']); + const [expanded, setExpanded] = useState(['Brand', 'Color', 'Size']); useEffect(() => { icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material')); From cb6fa77d6da2891542ee415b2b935b0e2d75d1ed Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 16 Sep 2026 20:56:18 +0300 Subject: [PATCH 3/9] fix(checkbox): update overview and tailwind-styling samples --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- .../inputs/checkbox/overview/src/index.css | 53 ++++++++++--- .../inputs/checkbox/overview/src/index.tsx | 28 ++++--- .../checkbox/tailwind-styling/src/index.css | 74 ++++++++++++++----- .../checkbox/tailwind-styling/src/index.tsx | 56 ++++---------- 6 files changed, 130 insertions(+), 85 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index adadecf1d5..bed902f66e 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-16 12:03:39","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-16 20:54:20","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 adadecf1d5..bed902f66e 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-16 12:03:39","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-16 20:54:20","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/checkbox/overview/src/index.css b/samples/inputs/checkbox/overview/src/index.css index 729f44bdf9..041d5d14cd 100644 --- a/samples/inputs/checkbox/overview/src/index.css +++ b/samples/inputs/checkbox/overview/src/index.css @@ -22,26 +22,55 @@ box-shadow: 0 0.0625rem 0.25rem rgb(0 0 0 / 16%); } -.list-group { - display: flex; - flex-direction: column; +.list { + background: transparent; + border: none; gap: 0.25rem; } +/* igc-list-header/item expose no "base" part, so the hosts are styled directly */ +.group-header { + padding: 0; +} + +.shopping-item + .group-header { + margin-top: 0.75rem; +} + .group-title { - margin: 0 0 0.25rem; color: var(--ig-primary-500); - font-size: 0.625rem; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; } -.list-item { - display: flex; - align-items: center; - justify-content: space-between; +.shopping-item { + padding: 0; gap: 0.5rem; + background: transparent; + border-bottom: none; + --border-color: transparent; + --border-width: 0; +} + +.shopping-item:hover, +.shopping-item:focus-within { + background: transparent; +} + +.shopping-item::part(content) { + display: none; +} + +.shopping-item::part(end) { + margin-inline-start: auto; +} + +.shopping-item-checked, +.shopping-item-checked:hover, +.shopping-item-checked:focus-within { + background: var(--ig-primary-50); +} + +.shopping-item igc-checkbox::part(control checked)::after { + --fill-color: var(--ig-primary-500); } .item-menu::part(base) { diff --git a/samples/inputs/checkbox/overview/src/index.tsx b/samples/inputs/checkbox/overview/src/index.tsx index 566fd598f1..13cbc89e43 100644 --- a/samples/inputs/checkbox/overview/src/index.tsx +++ b/samples/inputs/checkbox/overview/src/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrButton, IgrCheckbox, IgrIcon, IgrIconButton, registerIconFromText } from 'igniteui-react'; +import { IgrButton, IgrCheckbox, IgrIcon, IgrIconButton, IgrList, IgrListHeader, IgrListItem, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; const icons = [ @@ -61,24 +61,30 @@ export default function CheckboxOverview(): JSX.Element { return (
- {groups.map((group, groupIndex) => ( -
-

{group.title}

- {group.items.map((item, itemIndex) => ( -
+ + {groups.map((group, groupIndex) => [ + + {group.title} + , + ...group.items.map((item, itemIndex) => ( + toggleItem(groupIndex, itemIndex, e.detail.checked)} > {item.label} - + -
- ))} -
- ))} + + )), + ])} + diff --git a/samples/inputs/checkbox/tailwind-styling/src/index.css b/samples/inputs/checkbox/tailwind-styling/src/index.css index 8fdaeea243..2b8d6dd5b8 100644 --- a/samples/inputs/checkbox/tailwind-styling/src/index.css +++ b/samples/inputs/checkbox/tailwind-styling/src/index.css @@ -14,51 +14,87 @@ } .filter-panel { + /* brand blue, overrides the theme-derived shade */ + --ig-primary-800: #004699; display: flex; flex-direction: column; - gap: 0.75rem; - width: 11rem; + box-sizing: border-box; + width: 218px; font-family: "Aktiv Grotesk", sans-serif; - padding: 1rem; + padding: 8px; border: 1px solid var(--ig-primary-500); - border-radius: 0.5rem; + border-radius: 16px; background: var(--color-white); } .filter-section { display: flex; flex-direction: column; - gap: 0.75rem; } -.section-header { +igc-accordion { display: flex; - align-items: center; - justify-content: space-between; - padding: 0; + flex-direction: column; + padding: 8px 0; +} + +igc-expansion-panel { + border: 0; + border-radius: 0; + background: transparent; + border-bottom: 1px solid var(--ig-gray-200); +} + +igc-expansion-panel:last-of-type { + border-bottom: 0; +} + +igc-expansion-panel:last-of-type .section-options { + padding-bottom: 0; +} + +igc-expansion-panel::part(header) { + padding: 0.25rem 1rem 0.5rem; border: 0; + border-radius: 0; background: transparent; color: var(--ig-primary-800); font-family: "Aktiv Grotesk", sans-serif; font-size: 0.875rem; font-weight: 700; - cursor: pointer; } -.section-options { - display: flex; - flex-direction: column; - gap: 0.5rem; - padding-left: 0.75rem; +igc-expansion-panel::part(content) { + padding: 0; + border: 0; + background: transparent; +} + +igc-expansion-panel::part(title) { + color: var(--ig-primary-800); + font-size: 1rem; + font-weight: 700; + line-height: 1.25rem; } -.section-chevron { +.panel-title { + color: var(--ig-primary-800); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 1rem; + font-weight: 700; + line-height: 1.25rem; +} + +igc-expansion-panel::part(indicator) { color: var(--ig-gray-800); - transition: transform 150ms ease-in-out; } -.rotate-180 { - transform: rotate(180deg); +.section-options { + display: flex; + flex-direction: column; + gap: 1rem; + margin: -0.5rem 0 -1rem; + padding: 0 0 1rem; } .filter-option::part(label) { diff --git a/samples/inputs/checkbox/tailwind-styling/src/index.tsx b/samples/inputs/checkbox/tailwind-styling/src/index.tsx index ae14511713..ff8fe3f20b 100644 --- a/samples/inputs/checkbox/tailwind-styling/src/index.tsx +++ b/samples/inputs/checkbox/tailwind-styling/src/index.tsx @@ -1,13 +1,9 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrCheckbox, IgrIcon, registerIconFromText } from 'igniteui-react'; +import { IgrAccordion, IgrCheckbox, IgrExpansionPanel } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -const icons = [ - { name: 'expand_more', text: '' }, -]; - interface FilterSection { title: string; options: { label: string; checked: boolean }[]; @@ -26,28 +22,23 @@ const initialSections: FilterSection[] = [ title: 'Color', options: [ { label: 'Black', checked: false }, - { label: 'White', checked: false }, - { label: 'Blue', checked: false }, + { label: 'White', checked: true }, + { label: 'Gray', checked: false }, ], }, { title: 'Size', options: [ { label: 'Small', checked: false }, - { label: 'Medium', checked: false }, + { label: 'Medium', checked: true }, { label: 'Large', checked: false }, + { label: 'Extra large', checked: false }, ], }, ]; export default function CheckboxTailwindStyling(): JSX.Element { const [sections, setSections] = useState(initialSections); - const [expanded, setExpanded] = useState(['Brand', 'Color', 'Size']); - - useEffect(() => { - icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material')); - }, []); - const toggleOption = (sectionIndex: number, optionIndex: number, checked: boolean) => { setSections((current) => current.map((section, si) => @@ -65,29 +56,12 @@ export default function CheckboxTailwindStyling(): JSX.Element { return (
-
- {sections.map((section, sectionIndex) => ( -
- - {expanded.includes(section.title) && ( -
+
+ + {sections.map((section, sectionIndex) => ( + + {section.title} +
{section.options.map((option, optionIndex) => ( ))}
- )} -
- ))} + + ))} +
); From 528525beada11bc288af0a4484b4f9b6f1668aa1 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 17 Sep 2026 11:10:51 +0300 Subject: [PATCH 4/9] fix(checkbox): overview header --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/checkbox/overview/src/index.css | 7 ++++++- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index bed902f66e..43c00061f7 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-16 20:54:20","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-17 11:09:50","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 bed902f66e..43c00061f7 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-16 20:54:20","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-17 11:09:50","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/checkbox/overview/src/index.css b/samples/inputs/checkbox/overview/src/index.css index 041d5d14cd..a06d063f0d 100644 --- a/samples/inputs/checkbox/overview/src/index.css +++ b/samples/inputs/checkbox/overview/src/index.css @@ -28,9 +28,14 @@ gap: 0.25rem; } -/* igc-list-header/item expose no "base" part, so the hosts are styled directly */ .group-header { padding: 0; + font-family: var(--ig-body-1-font-family); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: none; } .shopping-item + .group-header { From c7e15b6568dc33bd3308f9282360721b342521c8 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 17 Sep 2026 11:25:18 +0300 Subject: [PATCH 5/9] fix(checkbox): update tailwind sample --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- .../checkbox/tailwind-styling/src/index.css | 17 +++++++++++++---- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index 43c00061f7..bd1def0aa0 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-17 11:09:50","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-17 11:24:23","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 43c00061f7..bd1def0aa0 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-17 11:09:50","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-17 11:24:23","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/checkbox/tailwind-styling/src/index.css b/samples/inputs/checkbox/tailwind-styling/src/index.css index 2b8d6dd5b8..2e67549ed9 100644 --- a/samples/inputs/checkbox/tailwind-styling/src/index.css +++ b/samples/inputs/checkbox/tailwind-styling/src/index.css @@ -97,6 +97,14 @@ igc-expansion-panel::part(indicator) { padding: 0 0 1rem; } +.filter-option { + --size: 20px; +} + +.filter-option::part(control) { + --size: 20px; +} + .filter-option::part(label) { color: var(--ig-gray-800); font-family: "Aktiv Grotesk", sans-serif; @@ -107,18 +115,19 @@ igc-expansion-panel::part(indicator) { } .filter-option::part(indicator) { - --tick-color: var(--color-white); + --tick-color: var(--ig-gray-50); + --indicator-size: 1rem; } .filter-option::part(control) { - --empty-color: var(--color-slate-400); + --empty-color: var(--ig-gray-400); --border-radius: 0.125rem; } .filter-option::part(control checked)::after { - --fill-color: var(--color-blue-600); + --fill-color: var(--ig-primary-500); } .filter-option:hover::part(control) { - --empty-color: var(--color-blue-600); + --empty-color: var(--ig-primary-500); } From 32cec52324085bf049f15d4ce2e6eb53a0318ad2 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 17 Sep 2026 11:37:21 +0300 Subject: [PATCH 6/9] fix(checkbox): update overview active lines --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/checkbox/overview/src/index.css | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index bd1def0aa0..1f170dec73 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-17 11:24:23","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-17 11:36:14","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 bd1def0aa0..1f170dec73 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-17 11:24:23","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-17 11:36:14","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/checkbox/overview/src/index.css b/samples/inputs/checkbox/overview/src/index.css index a06d063f0d..35e3c71d75 100644 --- a/samples/inputs/checkbox/overview/src/index.css +++ b/samples/inputs/checkbox/overview/src/index.css @@ -64,6 +64,10 @@ display: none; } +.shopping-item::part(start) { + margin-inline-start: 0.5rem; +} + .shopping-item::part(end) { margin-inline-start: auto; } From 76bd330d461ce50c0658437773c7bccffcfed736 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 17 Sep 2026 12:34:21 +0300 Subject: [PATCH 7/9] fix(checkbox): update samples content --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/checkbox/states/src/index.tsx | 8 +++- samples/inputs/checkbox/styling/src/index.css | 48 ++++++++++--------- samples/inputs/checkbox/styling/src/index.tsx | 40 +++++++++------- .../checkbox/tailwind-styling/src/index.tsx | 19 +++++++- 6 files changed, 75 insertions(+), 44 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index 1f170dec73..a3d251f8ee 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-17 11:36:14","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-17 12:33:10","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 1f170dec73..a3d251f8ee 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-17 11:36:14","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-17 12:33:10","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/checkbox/states/src/index.tsx b/samples/inputs/checkbox/states/src/index.tsx index 247074b38c..48a93b9e96 100644 --- a/samples/inputs/checkbox/states/src/index.tsx +++ b/samples/inputs/checkbox/states/src/index.tsx @@ -5,10 +5,16 @@ import { IgrCheckbox } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default class CheckboxStates extends React.Component { + + // the checkboxes are display-only, so user interaction is blocked + public preventToggle(e: React.SyntheticEvent): void { + e.preventDefault(); + } + public render(): JSX.Element { return (
-
+
Indeterminate diff --git a/samples/inputs/checkbox/styling/src/index.css b/samples/inputs/checkbox/styling/src/index.css index 06c1e3ccc8..f18549dbe3 100644 --- a/samples/inputs/checkbox/styling/src/index.css +++ b/samples/inputs/checkbox/styling/src/index.css @@ -14,7 +14,6 @@ flex-direction: column; gap: 0.25rem; width: 24.3125rem; - height: 22.5rem; padding: 1rem; border-radius: 0.5rem; background: var(--ig-surface-500); @@ -33,8 +32,7 @@ text-transform: uppercase; } -.select-all::part(base), -.member::part(base) { +.select-all::part(base) { width: 100%; justify-content: space-between; padding: 0.5rem; @@ -46,41 +44,47 @@ font-size: 1rem; } -.member::part(label) { - width: 100%; - color: var(--ig-gray-900); +.members { + background: transparent; + border: none; + gap: 0.25rem; + overflow: hidden; } -.member-selected::part(base) { +.member { + gap: 0.75rem; + border-radius: 0.25rem; + background: transparent; + border-bottom: none; + --border-color: transparent; + --border-width: 0; +} + +.member:hover, +.member:focus-within { + background: transparent; +} + +.member-selected, +.member-selected:hover, +.member-selected:focus-within { background: var(--ig-primary-50); } .select-all::part(indicator), -.member::part(indicator) { +.member-check::part(indicator) { --tick-color: var(--ig-primary-500-contrast); } .select-all::part(control checked)::after, -.member::part(control checked)::after { +.member-check::part(control checked)::after { --fill-color: var(--ig-primary-500); } -.member-info { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.member-info igc-avatar { +.member igc-avatar { --ig-size: var(--ig-size-small); } -.member-text { - display: flex; - flex-direction: column; - line-height: 1.25; -} - .member-name { font-size: 0.875rem; font-weight: 600; diff --git a/samples/inputs/checkbox/styling/src/index.tsx b/samples/inputs/checkbox/styling/src/index.tsx index 6d59cc803b..4695b0de54 100644 --- a/samples/inputs/checkbox/styling/src/index.tsx +++ b/samples/inputs/checkbox/styling/src/index.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrAvatar, IgrButton, IgrCheckbox } from 'igniteui-react'; +import { IgrAvatar, IgrButton, IgrCheckbox, IgrList, IgrListItem } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; interface TeamMember { @@ -22,6 +22,7 @@ export default function CheckboxStyling(): JSX.Element { const [members, setMembers] = useState(initialMembers); const allSelected = members.every((member) => member.selected); + const someSelected = members.some((member) => member.selected); const toggleAll = (checked: boolean) => { setMembers((current) => current.map((member) => ({ ...member, selected: checked }))); @@ -40,28 +41,31 @@ export default function CheckboxStyling(): JSX.Element { className="select-all" labelPosition="before" checked={allSelected} + indeterminate={someSelected && !allSelected} onChange={(e) => toggleAll(e.detail.checked)} > Select all - {members.map((member, index) => ( - toggleMember(index, e.detail.checked)} - > - - - - {member.name} - {member.email} - - - - ))} + + {members.map((member, index) => ( + + + {member.name} + {member.email} + toggleMember(index, e.detail.checked)} + /> + + ))} + Continue
diff --git a/samples/inputs/checkbox/tailwind-styling/src/index.tsx b/samples/inputs/checkbox/tailwind-styling/src/index.tsx index ff8fe3f20b..26bbd7edec 100644 --- a/samples/inputs/checkbox/tailwind-styling/src/index.tsx +++ b/samples/inputs/checkbox/tailwind-styling/src/index.tsx @@ -6,12 +6,14 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; interface FilterSection { title: string; + open: boolean; options: { label: string; checked: boolean }[]; } const initialSections: FilterSection[] = [ { title: 'Brand', + open: true, options: [ { label: 'Nike', checked: true }, { label: 'Roxy', checked: false }, @@ -20,6 +22,7 @@ const initialSections: FilterSection[] = [ }, { title: 'Color', + open: true, options: [ { label: 'Black', checked: false }, { label: 'White', checked: true }, @@ -28,6 +31,7 @@ const initialSections: FilterSection[] = [ }, { title: 'Size', + open: true, options: [ { label: 'Small', checked: false }, { label: 'Medium', checked: true }, @@ -54,12 +58,25 @@ export default function CheckboxTailwindStyling(): JSX.Element { ); }; + const toggleSection = (sectionIndex: number, open: boolean) => { + setSections((current) => + current.map((section, si) => (si === sectionIndex ? { ...section, open } : section)) + ); + }; + return (
{sections.map((section, sectionIndex) => ( - + toggleSection(sectionIndex, true)} + onClosed={() => toggleSection(sectionIndex, false)} + > {section.title}
{section.options.map((option, optionIndex) => ( From cedda5bbd4ca7861aaaf0b9f2f6abf6c74cbecc4 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 17 Sep 2026 13:15:24 +0300 Subject: [PATCH 8/9] fix(checkbox): update state sample cursor --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/checkbox/states/src/index.css | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index a3d251f8ee..c739c2d00d 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-17 12:33:10","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-17 13:14:38","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 a3d251f8ee..c739c2d00d 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-17 12:33:10","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-17 13:14:38","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/checkbox/states/src/index.css b/samples/inputs/checkbox/states/src/index.css index dd5580038e..a815232e2b 100644 --- a/samples/inputs/checkbox/states/src/index.css +++ b/samples/inputs/checkbox/states/src/index.css @@ -22,6 +22,10 @@ gap: 0.75rem; } +.state igc-checkbox::part(base) { + cursor: default; +} + .state-label { font: 500 14px / 24px "Aktiv Grotesk", sans-serif; letter-spacing: 0.1px; From 9fc01fd504090b5fa0416f213b0cb044e4c6f2a4 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 17 Sep 2026 15:41:27 +0300 Subject: [PATCH 9/9] fix(checkbox): update tailwind sample --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/checkbox/tailwind-styling/src/index.css | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index c739c2d00d..6368bdfe04 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-17 13:14:38","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-17 14:25:20","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 c739c2d00d..6368bdfe04 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-17 13:14:38","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-17 14:25:20","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/checkbox/tailwind-styling/src/index.css b/samples/inputs/checkbox/tailwind-styling/src/index.css index 2e67549ed9..339c58f55e 100644 --- a/samples/inputs/checkbox/tailwind-styling/src/index.css +++ b/samples/inputs/checkbox/tailwind-styling/src/index.css @@ -14,7 +14,6 @@ } .filter-panel { - /* brand blue, overrides the theme-derived shade */ --ig-primary-800: #004699; display: flex; flex-direction: column; @@ -24,7 +23,7 @@ padding: 8px; border: 1px solid var(--ig-primary-500); border-radius: 16px; - background: var(--color-white); + background: var(--ig-surface-100); } .filter-section {