diff --git a/browser/public/meta.json b/browser/public/meta.json index 528f88907d..6368bdfe04 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-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 528f88907d..6368bdfe04 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-17 14:25:20","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..35e3c71d75 100644 --- a/samples/inputs/checkbox/overview/src/index.css +++ b/samples/inputs/checkbox/overview/src/index.css @@ -1,2 +1,106 @@ /* 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 { + background: transparent; + border: none; + gap: 0.25rem; +} + +.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 { + margin-top: 0.75rem; +} + +.group-title { + color: var(--ig-primary-500); +} + +.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(start) { + margin-inline-start: 0.5rem; +} + +.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) { + 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..13cbc89e43 100644 --- a/samples/inputs/checkbox/overview/src/index.tsx +++ b/samples/inputs/checkbox/overview/src/index.tsx @@ -1,24 +1,96 @@ -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, IgrList, IgrListHeader, IgrListItem, 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..a815232e2b --- /dev/null +++ b/samples/inputs/checkbox/states/src/index.css @@ -0,0 +1,33 @@ +/* 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 igc-checkbox::part(base) { + cursor: default; +} + +.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..48a93b9e96 --- /dev/null +++ b/samples/inputs/checkbox/states/src/index.tsx @@ -0,0 +1,50 @@ +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 { + + // the checkboxes are display-only, so user interaction is blocked + public preventToggle(e: React.SyntheticEvent): void { + e.preventDefault(); + } + + 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..f18549dbe3 100644 --- a/samples/inputs/checkbox/styling/src/index.css +++ b/samples/inputs/checkbox/styling/src/index.css @@ -1,10 +1,101 @@ /* 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; + 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) { + 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; +} + +.members { + background: transparent; + border: none; + gap: 0.25rem; + overflow: hidden; +} + +.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-check::part(indicator) { + --tick-color: var(--ig-primary-500-contrast); +} + +.select-all::part(control checked)::after, +.member-check::part(control checked)::after { + --fill-color: var(--ig-primary-500); +} + +.member igc-avatar { + --ig-size: var(--ig-size-small); +} + +.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..4695b0de54 100644 --- a/samples/inputs/checkbox/styling/src/index.tsx +++ b/samples/inputs/checkbox/styling/src/index.tsx @@ -1,24 +1,76 @@ -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, IgrList, IgrListItem } 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); + const someSelected = members.some((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) => ( + + + {member.name} + {member.email} + toggleMember(index, e.detail.checked)} + /> + + ))} + + + 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..339c58f55e --- /dev/null +++ b/samples/inputs/checkbox/tailwind-styling/src/index.css @@ -0,0 +1,132 @@ +/* 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 { + --ig-primary-800: #004699; + display: flex; + flex-direction: column; + box-sizing: border-box; + width: 218px; + font-family: "Aktiv Grotesk", sans-serif; + padding: 8px; + border: 1px solid var(--ig-primary-500); + border-radius: 16px; + background: var(--ig-surface-100); +} + +.filter-section { + display: flex; + flex-direction: column; +} + +igc-accordion { + display: flex; + 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; +} + +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; +} + +.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); +} + +.section-options { + display: flex; + flex-direction: column; + gap: 1rem; + margin: -0.5rem 0 -1rem; + 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; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.5rem; + letter-spacing: 0.1px; +} + +.filter-option::part(indicator) { + --tick-color: var(--ig-gray-50); + --indicator-size: 1rem; +} + +.filter-option::part(control) { + --empty-color: var(--ig-gray-400); + --border-radius: 0.125rem; +} + +.filter-option::part(control checked)::after { + --fill-color: var(--ig-primary-500); +} + +.filter-option:hover::part(control) { + --empty-color: var(--ig-primary-500); +} 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..26bbd7edec --- /dev/null +++ b/samples/inputs/checkbox/tailwind-styling/src/index.tsx @@ -0,0 +1,103 @@ +import React, { useState } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrAccordion, IgrCheckbox, IgrExpansionPanel } from 'igniteui-react'; +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 }, + { label: 'Guess', checked: false }, + ], + }, + { + title: 'Color', + open: true, + options: [ + { label: 'Black', checked: false }, + { label: 'White', checked: true }, + { label: 'Gray', checked: false }, + ], + }, + { + title: 'Size', + open: true, + options: [ + { label: 'Small', 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 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 + ), + } + ) + ); + }; + + 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) => ( + 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 +});