From db3c2ed0c4c73789c20b3f0208cc51888b8709ca Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Tue, 28 Jul 2026 13:44:07 +0300 Subject: [PATCH 1/5] feat(button-group): add layout sample --- .../layout/.devcontainer/devcontainer.json | 4 ++ samples/inputs/button-group/layout/README.md | 56 +++++++++++++++++++ samples/inputs/button-group/layout/index.html | 11 ++++ .../inputs/button-group/layout/package.json | 12 ++++ .../button-group/layout/sandbox.config.json | 5 ++ .../inputs/button-group/layout/src/index.css | 16 ++++++ .../inputs/button-group/layout/src/index.tsx | 33 +++++++++++ .../inputs/button-group/layout/tsconfig.json | 4 ++ .../inputs/button-group/layout/vite.config.js | 8 +++ 9 files changed, 149 insertions(+) create mode 100644 samples/inputs/button-group/layout/.devcontainer/devcontainer.json create mode 100644 samples/inputs/button-group/layout/README.md create mode 100644 samples/inputs/button-group/layout/index.html create mode 100644 samples/inputs/button-group/layout/package.json create mode 100644 samples/inputs/button-group/layout/sandbox.config.json create mode 100644 samples/inputs/button-group/layout/src/index.css create mode 100644 samples/inputs/button-group/layout/src/index.tsx create mode 100644 samples/inputs/button-group/layout/tsconfig.json create mode 100644 samples/inputs/button-group/layout/vite.config.js diff --git a/samples/inputs/button-group/layout/.devcontainer/devcontainer.json b/samples/inputs/button-group/layout/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/button-group/layout/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/button-group/layout/README.md b/samples/inputs/button-group/layout/README.md new file mode 100644 index 0000000000..aec7b45ba3 --- /dev/null +++ b/samples/inputs/button-group/layout/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Layout feature using [Button Group](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/button-group/layout +``` + +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/button-group/layout/index.html b/samples/inputs/button-group/layout/index.html new file mode 100644 index 0000000000..13b945c37d --- /dev/null +++ b/samples/inputs/button-group/layout/index.html @@ -0,0 +1,11 @@ + + + + ButtonGroupLayout + + + +
+ + + diff --git a/samples/inputs/button-group/layout/package.json b/samples/inputs/button-group/layout/package.json new file mode 100644 index 0000000000..d752aa858d --- /dev/null +++ b/samples/inputs/button-group/layout/package.json @@ -0,0 +1,12 @@ +{ + "name": "react-button-group-layout", + "description": "This project provides example of Button Group Layout 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/button-group/layout/sandbox.config.json b/samples/inputs/button-group/layout/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/button-group/layout/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/button-group/layout/src/index.css b/samples/inputs/button-group/layout/src/index.css new file mode 100644 index 0000000000..cb83a91792 --- /dev/null +++ b/samples/inputs/button-group/layout/src/index.css @@ -0,0 +1,16 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample-column { + display: flex; + flex-direction: column; +} + +igc-button-group { + display: inline-block; + max-width: 400px; +} + +igc-ripple { + --color: grey; +} diff --git a/samples/inputs/button-group/layout/src/index.tsx b/samples/inputs/button-group/layout/src/index.tsx new file mode 100644 index 0000000000..a326469d60 --- /dev/null +++ b/samples/inputs/button-group/layout/src/index.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { IgrButton, IgrButtonGroup, IgrRipple } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; +import './index.css'; + +export default function ButtonGroupLayout() { + return ( +
+ + + Left + + + + Center + + + + Right + + + + Justify + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button-group/layout/tsconfig.json b/samples/inputs/button-group/layout/tsconfig.json new file mode 100644 index 0000000000..b6c88bff68 --- /dev/null +++ b/samples/inputs/button-group/layout/tsconfig.json @@ -0,0 +1,4 @@ +{ + "compilerOptions": { "resolveJsonModule": true, "esModuleInterop": true, "baseUrl": ".", "outDir": "build/dist", "module": "esnext", "target": "es5", "lib": ["es6", "dom"], "sourceMap": true, "allowJs": true, "jsx": "react", "moduleResolution": "node", "rootDir": "src", "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": true, "noUnusedLocals": false, "importHelpers": true, "allowSyntheticDefaultImports": true, "skipLibCheck": true, "strict": false, "isolatedModules": true, "noEmit": true }, + "exclude": ["node_modules", "build"], "include": ["src"] +} diff --git a/samples/inputs/button-group/layout/vite.config.js b/samples/inputs/button-group/layout/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/button-group/layout/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); From f1f18935978c136b6abcf586fdfc8a04ac9d1b1b Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Tue, 28 Jul 2026 17:15:04 +0300 Subject: [PATCH 2/5] feat(button-group): update the samples --- .../inputs/button-group/layout/src/index.css | 5 -- .../inputs/button-group/layout/src/index.tsx | 22 ++++---- .../toggle/.devcontainer/devcontainer.json | 4 ++ samples/inputs/button-group/toggle/README.md | 56 +++++++++++++++++++ samples/inputs/button-group/toggle/index.html | 11 ++++ .../inputs/button-group/toggle/package.json | 12 ++++ .../button-group/toggle/sandbox.config.json | 5 ++ .../inputs/button-group/toggle/src/index.css | 7 +++ .../inputs/button-group/toggle/src/index.tsx | 35 ++++++++++++ .../inputs/button-group/toggle/tsconfig.json | 4 ++ .../inputs/button-group/toggle/vite.config.js | 3 + 11 files changed, 148 insertions(+), 16 deletions(-) create mode 100644 samples/inputs/button-group/toggle/.devcontainer/devcontainer.json create mode 100644 samples/inputs/button-group/toggle/README.md create mode 100644 samples/inputs/button-group/toggle/index.html create mode 100644 samples/inputs/button-group/toggle/package.json create mode 100644 samples/inputs/button-group/toggle/sandbox.config.json create mode 100644 samples/inputs/button-group/toggle/src/index.css create mode 100644 samples/inputs/button-group/toggle/src/index.tsx create mode 100644 samples/inputs/button-group/toggle/tsconfig.json create mode 100644 samples/inputs/button-group/toggle/vite.config.js diff --git a/samples/inputs/button-group/layout/src/index.css b/samples/inputs/button-group/layout/src/index.css index cb83a91792..e41c7c710b 100644 --- a/samples/inputs/button-group/layout/src/index.css +++ b/samples/inputs/button-group/layout/src/index.css @@ -1,11 +1,6 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.sample-column { - display: flex; - flex-direction: column; -} - igc-button-group { display: inline-block; max-width: 400px; diff --git a/samples/inputs/button-group/layout/src/index.tsx b/samples/inputs/button-group/layout/src/index.tsx index a326469d60..79642810f6 100644 --- a/samples/inputs/button-group/layout/src/index.tsx +++ b/samples/inputs/button-group/layout/src/index.tsx @@ -1,31 +1,31 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import { IgrButton, IgrButtonGroup, IgrRipple } from 'igniteui-react'; +import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; import './index.css'; export default function ButtonGroupLayout() { return ( -
+
- + Left - - + + Center - - + + Right - - + + Justify - + -
+ ); } diff --git a/samples/inputs/button-group/toggle/.devcontainer/devcontainer.json b/samples/inputs/button-group/toggle/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/button-group/toggle/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/button-group/toggle/README.md b/samples/inputs/button-group/toggle/README.md new file mode 100644 index 0000000000..9ef12c8101 --- /dev/null +++ b/samples/inputs/button-group/toggle/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Toggle feature using [Button Group](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/button-group/toggle +``` + +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/button-group/toggle/index.html b/samples/inputs/button-group/toggle/index.html new file mode 100644 index 0000000000..77a3ada1be --- /dev/null +++ b/samples/inputs/button-group/toggle/index.html @@ -0,0 +1,11 @@ + + + + ButtonGroupToggle + + + +
+ + + diff --git a/samples/inputs/button-group/toggle/package.json b/samples/inputs/button-group/toggle/package.json new file mode 100644 index 0000000000..8bf9f83f14 --- /dev/null +++ b/samples/inputs/button-group/toggle/package.json @@ -0,0 +1,12 @@ +{ + "name": "react-button-group-toggle", + "description": "This project provides example of Button Group Toggle 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/button-group/toggle/sandbox.config.json b/samples/inputs/button-group/toggle/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/button-group/toggle/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/button-group/toggle/src/index.css b/samples/inputs/button-group/toggle/src/index.css new file mode 100644 index 0000000000..c0a1435f1f --- /dev/null +++ b/samples/inputs/button-group/toggle/src/index.css @@ -0,0 +1,7 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-button-group { + display: inline-block; + width: 300px; +} diff --git a/samples/inputs/button-group/toggle/src/index.tsx b/samples/inputs/button-group/toggle/src/index.tsx new file mode 100644 index 0000000000..30b15d4334 --- /dev/null +++ b/samples/inputs/button-group/toggle/src/index.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { + IgrButtonGroup, + IgrIcon, + IgrToggleButton, + registerIconFromText, +} from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; +import './index.css'; + +const icons = [ + ['border_top', ''], + ['border_right', ''], + ['border_bottom', ''], + ['border_left', ''], +]; + +icons.forEach(([name, text]) => registerIconFromText(name, text, 'material')); + +export default function ButtonGroupToggle() { + return ( +
+ + + + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button-group/toggle/tsconfig.json b/samples/inputs/button-group/toggle/tsconfig.json new file mode 100644 index 0000000000..b6c88bff68 --- /dev/null +++ b/samples/inputs/button-group/toggle/tsconfig.json @@ -0,0 +1,4 @@ +{ + "compilerOptions": { "resolveJsonModule": true, "esModuleInterop": true, "baseUrl": ".", "outDir": "build/dist", "module": "esnext", "target": "es5", "lib": ["es6", "dom"], "sourceMap": true, "allowJs": true, "jsx": "react", "moduleResolution": "node", "rootDir": "src", "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": true, "noUnusedLocals": false, "importHelpers": true, "allowSyntheticDefaultImports": true, "skipLibCheck": true, "strict": false, "isolatedModules": true, "noEmit": true }, + "exclude": ["node_modules", "build"], "include": ["src"] +} diff --git a/samples/inputs/button-group/toggle/vite.config.js b/samples/inputs/button-group/toggle/vite.config.js new file mode 100644 index 0000000000..2225220a7e --- /dev/null +++ b/samples/inputs/button-group/toggle/vite.config.js @@ -0,0 +1,3 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +export default defineConfig({ plugins: [react()], build: { outDir: 'build' }, server: { open: false } }); From a9b8fb3717dfdf64bc522b746e818d4d461d2aab Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 12 Aug 2026 12:09:51 +0300 Subject: [PATCH 3/5] feat(button-group): update samples content --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- .../alignment/src/ButtonGroupAlignment.css | 36 ++++++++- .../button-group/alignment/src/index.tsx | 52 ++++++------ .../.devcontainer/devcontainer.json | 4 + .../button-group/buttons-amount/.eslintrc.js | 75 ++++++++++++++++++ .../button-group/buttons-amount/README.md | 56 +++++++++++++ .../button-group/buttons-amount/index.html | 11 +++ .../button-group/buttons-amount/package.json | 42 ++++++++++ .../buttons-amount/sandbox.config.json | 5 ++ .../src/ButtonGroupButtonsAmount.css | 33 ++++++++ .../button-group/buttons-amount/src/index.css | 2 + .../button-group/buttons-amount/src/index.tsx | 29 +++++++ .../button-group/buttons-amount/tsconfig.json | 44 +++++++++++ .../buttons-amount/vite.config.js | 12 +++ .../.devcontainer/devcontainer.json | 0 .../button-group/custom-toggle/README.md | 56 +++++++++++++ .../{toggle => custom-toggle}/index.html | 2 +- .../{toggle => custom-toggle}/package.json | 4 +- .../sandbox.config.json | 0 .../{toggle => custom-toggle}/src/index.css | 6 ++ .../{toggle => custom-toggle}/src/index.tsx | 4 +- .../{toggle => custom-toggle}/tsconfig.json | 0 .../{toggle => custom-toggle}/vite.config.js | 0 .../.devcontainer/devcontainer.json | 4 + .../interaction-states/.eslintrc.js | 75 ++++++++++++++++++ .../button-group/interaction-states/README.md | 56 +++++++++++++ .../interaction-states/index.html | 11 +++ .../interaction-states/package.json | 42 ++++++++++ .../interaction-states/sandbox.config.json | 5 ++ .../src/ButtonGroupInteractionStates.css | 33 ++++++++ .../interaction-states/src/index.css | 2 + .../interaction-states/src/index.tsx | 46 +++++++++++ .../interaction-states/tsconfig.json | 44 +++++++++++ .../interaction-states/vite.config.js | 12 +++ .../layout/src/ButtonGroupLayout.css | 19 +++++ .../inputs/button-group/layout/src/index.tsx | 68 ++++++++++------ .../overview/src/ButtonGroupOverview.css | 34 +++++++- .../button-group/overview/src/index.tsx | 79 ++++++++++--------- .../button-group/size/src/ButtonGroupSize.css | 28 +++++++ .../inputs/button-group/size/src/index.tsx | 55 ++++++------- .../states/.devcontainer/devcontainer.json | 4 + .../inputs/button-group/states/.eslintrc.js | 75 ++++++++++++++++++ .../button-group/{toggle => states}/README.md | 8 +- samples/inputs/button-group/states/index.html | 11 +++ .../inputs/button-group/states/package.json | 42 ++++++++++ .../button-group/states/sandbox.config.json | 5 ++ .../states/src/ButtonGroupStates.css | 73 +++++++++++++++++ .../inputs/button-group/states/src/index.css | 2 + .../inputs/button-group/states/src/index.tsx | 49 ++++++++++++ .../inputs/button-group/states/tsconfig.json | 44 +++++++++++ .../inputs/button-group/states/vite.config.js | 12 +++ .../styling/src/ButtonGroupStyling.css | 37 +++++---- .../inputs/button-group/styling/src/index.tsx | 44 +++++------ .../.devcontainer/devcontainer.json | 4 + .../tailwind-styling/.eslintrc.js | 75 ++++++++++++++++++ .../button-group/tailwind-styling/README.md | 56 +++++++++++++ .../button-group/tailwind-styling/index.html | 11 +++ .../tailwind-styling/package.json | 44 +++++++++++ .../tailwind-styling/sandbox.config.json | 5 ++ .../tailwind-styling/src/index.css | 32 ++++++++ .../tailwind-styling/src/index.tsx | 30 +++++++ .../tailwind-styling/tsconfig.json | 44 +++++++++++ .../tailwind-styling/vite.config.js | 13 +++ 64 files changed, 1636 insertions(+), 174 deletions(-) create mode 100644 samples/inputs/button-group/buttons-amount/.devcontainer/devcontainer.json create mode 100644 samples/inputs/button-group/buttons-amount/.eslintrc.js create mode 100644 samples/inputs/button-group/buttons-amount/README.md create mode 100644 samples/inputs/button-group/buttons-amount/index.html create mode 100644 samples/inputs/button-group/buttons-amount/package.json create mode 100644 samples/inputs/button-group/buttons-amount/sandbox.config.json create mode 100644 samples/inputs/button-group/buttons-amount/src/ButtonGroupButtonsAmount.css create mode 100644 samples/inputs/button-group/buttons-amount/src/index.css create mode 100644 samples/inputs/button-group/buttons-amount/src/index.tsx create mode 100644 samples/inputs/button-group/buttons-amount/tsconfig.json create mode 100644 samples/inputs/button-group/buttons-amount/vite.config.js rename samples/inputs/button-group/{toggle => custom-toggle}/.devcontainer/devcontainer.json (100%) create mode 100644 samples/inputs/button-group/custom-toggle/README.md rename samples/inputs/button-group/{toggle => custom-toggle}/index.html (85%) rename samples/inputs/button-group/{toggle => custom-toggle}/package.json (90%) rename samples/inputs/button-group/{toggle => custom-toggle}/sandbox.config.json (100%) rename samples/inputs/button-group/{toggle => custom-toggle}/src/index.css (64%) rename samples/inputs/button-group/{toggle => custom-toggle}/src/index.tsx (95%) rename samples/inputs/button-group/{toggle => custom-toggle}/tsconfig.json (100%) rename samples/inputs/button-group/{toggle => custom-toggle}/vite.config.js (100%) create mode 100644 samples/inputs/button-group/interaction-states/.devcontainer/devcontainer.json create mode 100644 samples/inputs/button-group/interaction-states/.eslintrc.js create mode 100644 samples/inputs/button-group/interaction-states/README.md create mode 100644 samples/inputs/button-group/interaction-states/index.html create mode 100644 samples/inputs/button-group/interaction-states/package.json create mode 100644 samples/inputs/button-group/interaction-states/sandbox.config.json create mode 100644 samples/inputs/button-group/interaction-states/src/ButtonGroupInteractionStates.css create mode 100644 samples/inputs/button-group/interaction-states/src/index.css create mode 100644 samples/inputs/button-group/interaction-states/src/index.tsx create mode 100644 samples/inputs/button-group/interaction-states/tsconfig.json create mode 100644 samples/inputs/button-group/interaction-states/vite.config.js create mode 100644 samples/inputs/button-group/layout/src/ButtonGroupLayout.css create mode 100644 samples/inputs/button-group/size/src/ButtonGroupSize.css create mode 100644 samples/inputs/button-group/states/.devcontainer/devcontainer.json create mode 100644 samples/inputs/button-group/states/.eslintrc.js rename samples/inputs/button-group/{toggle => states}/README.md (91%) create mode 100644 samples/inputs/button-group/states/index.html create mode 100644 samples/inputs/button-group/states/package.json create mode 100644 samples/inputs/button-group/states/sandbox.config.json create mode 100644 samples/inputs/button-group/states/src/ButtonGroupStates.css create mode 100644 samples/inputs/button-group/states/src/index.css create mode 100644 samples/inputs/button-group/states/src/index.tsx create mode 100644 samples/inputs/button-group/states/tsconfig.json create mode 100644 samples/inputs/button-group/states/vite.config.js create mode 100644 samples/inputs/button-group/tailwind-styling/.devcontainer/devcontainer.json create mode 100644 samples/inputs/button-group/tailwind-styling/.eslintrc.js create mode 100644 samples/inputs/button-group/tailwind-styling/README.md create mode 100644 samples/inputs/button-group/tailwind-styling/index.html create mode 100644 samples/inputs/button-group/tailwind-styling/package.json create mode 100644 samples/inputs/button-group/tailwind-styling/sandbox.config.json create mode 100644 samples/inputs/button-group/tailwind-styling/src/index.css create mode 100644 samples/inputs/button-group/tailwind-styling/src/index.tsx create mode 100644 samples/inputs/button-group/tailwind-styling/tsconfig.json create mode 100644 samples/inputs/button-group/tailwind-styling/vite.config.js diff --git a/browser/public/meta.json b/browser/public/meta.json index 717bce6e87..bd6279127a 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-12 11:31:48","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 717bce6e87..bd6279127a 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-12 11:31:48","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css b/samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css index cd5bbb1bef..170fbf74d4 100644 --- a/samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css +++ b/samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css @@ -1,7 +1,35 @@ -igc-button-group { - width: 200px; -} - igc-ripple { --color: gray; +} + +.button-group-alignment { + display: flex; + align-items: flex-start; + justify-content: center; + gap: 60px; + padding: 24px; +} + +.button-group-alignment-item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + gap: 16px; +} + +.button-group-alignment-item igc-button-group { + width: 240px; +} + +.button-group-alignment-item:first-child igc-button-group { + width: 320px; +} + +.button-group-alignment-item span { + width: 100%; + text-align: center; + color: var(--ig-gray-700); + font-size: 12px; + line-height: 16px; } \ No newline at end of file diff --git a/samples/inputs/button-group/alignment/src/index.tsx b/samples/inputs/button-group/alignment/src/index.tsx index eca7498af0..6dea1b4ca4 100644 --- a/samples/inputs/button-group/alignment/src/index.tsx +++ b/samples/inputs/button-group/alignment/src/index.tsx @@ -1,40 +1,38 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import { - IgrButtonGroup, - IgrRipple, - IgrToggleButton, - } from 'igniteui-react'; +import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; import './ButtonGroupAlignment.css'; import './index.css'; +const cities = ['Sofia', 'London', 'New York']; -export default function ButtonGroupAlignment() { +const alignments: Array<'horizontal' | 'vertical'> = ['horizontal', 'vertical']; + +export default function ButtonGroupAlignment(): JSX.Element { return ( -
- - - Sofia - - - - London - - - - New York - - - - Tokyo - - - -
+
+ {alignments.map((alignment) => ( +
+ {alignment.charAt(0).toUpperCase() + alignment.slice(1)} + + {cities.map((city) => ( + + {city} + + + ))} + +
+ ))} +
); } // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); diff --git a/samples/inputs/button-group/buttons-amount/.devcontainer/devcontainer.json b/samples/inputs/button-group/buttons-amount/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/button-group/buttons-amount/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/button-group/buttons-amount/.eslintrc.js b/samples/inputs/button-group/buttons-amount/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/button-group/buttons-amount/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/inputs/button-group/buttons-amount/README.md b/samples/inputs/button-group/buttons-amount/README.md new file mode 100644 index 0000000000..d5a10bbffe --- /dev/null +++ b/samples/inputs/button-group/buttons-amount/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Buttons Amount feature using [Button Group](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/button-group/buttons-amount +``` + +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/button-group/buttons-amount/index.html b/samples/inputs/button-group/buttons-amount/index.html new file mode 100644 index 0000000000..92bbbba23b --- /dev/null +++ b/samples/inputs/button-group/buttons-amount/index.html @@ -0,0 +1,11 @@ + + + + Button Group Buttons Amount + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/button-group/buttons-amount/package.json b/samples/inputs/button-group/buttons-amount/package.json new file mode 100644 index 0000000000..416832e5c2 --- /dev/null +++ b/samples/inputs/button-group/buttons-amount/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-button-group-buttons-amount", + "description": "This project provides example of Button Group Buttons Amount 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/button-group/buttons-amount/sandbox.config.json b/samples/inputs/button-group/buttons-amount/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/button-group/buttons-amount/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/button-group/buttons-amount/src/ButtonGroupButtonsAmount.css b/samples/inputs/button-group/buttons-amount/src/ButtonGroupButtonsAmount.css new file mode 100644 index 0000000000..13ff4d8840 --- /dev/null +++ b/samples/inputs/button-group/buttons-amount/src/ButtonGroupButtonsAmount.css @@ -0,0 +1,33 @@ +igc-ripple { + --color: gray; +} + +.button-group-buttons-amount { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 36px; +} + +.button-group-buttons-amount-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + flex: 0 0 auto; +} + +.button-group-buttons-amount-item igc-button-group { + width: max-content; +} + +.button-group-buttons-amount-item igc-toggle-button { + min-width: 88px; +} + +.button-group-buttons-amount-item span { + color: var(--ig-gray-700); + font-size: 12px; + line-height: 16px; +} \ No newline at end of file diff --git a/samples/inputs/button-group/buttons-amount/src/index.css b/samples/inputs/button-group/buttons-amount/src/index.css new file mode 100644 index 0000000000..1f53b8aa05 --- /dev/null +++ b/samples/inputs/button-group/buttons-amount/src/index.css @@ -0,0 +1,2 @@ +/* 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/button-group/buttons-amount/src/index.tsx b/samples/inputs/button-group/buttons-amount/src/index.tsx new file mode 100644 index 0000000000..903ee45d40 --- /dev/null +++ b/samples/inputs/button-group/buttons-amount/src/index.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; +import './ButtonGroupButtonsAmount.css'; +import './index.css'; + +const names = ['Doc', 'Happy', 'Sneezy', 'Sleepy', 'Bashful', 'Grumpy', 'Dopey']; + +export default function ButtonGroupButtonsAmount(): JSX.Element { + return ( +
+
+ + {names.map((name) => ( + + {name} + + + ))} + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button-group/buttons-amount/tsconfig.json b/samples/inputs/button-group/buttons-amount/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/button-group/buttons-amount/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/button-group/buttons-amount/vite.config.js b/samples/inputs/button-group/buttons-amount/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/button-group/buttons-amount/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/button-group/toggle/.devcontainer/devcontainer.json b/samples/inputs/button-group/custom-toggle/.devcontainer/devcontainer.json similarity index 100% rename from samples/inputs/button-group/toggle/.devcontainer/devcontainer.json rename to samples/inputs/button-group/custom-toggle/.devcontainer/devcontainer.json diff --git a/samples/inputs/button-group/custom-toggle/README.md b/samples/inputs/button-group/custom-toggle/README.md new file mode 100644 index 0000000000..1c208de31c --- /dev/null +++ b/samples/inputs/button-group/custom-toggle/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Custom Toggle feature using [Button Group](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/button-group/custom-toggle +``` + +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/button-group/toggle/index.html b/samples/inputs/button-group/custom-toggle/index.html similarity index 85% rename from samples/inputs/button-group/toggle/index.html rename to samples/inputs/button-group/custom-toggle/index.html index 77a3ada1be..463d25df58 100644 --- a/samples/inputs/button-group/toggle/index.html +++ b/samples/inputs/button-group/custom-toggle/index.html @@ -1,7 +1,7 @@ - ButtonGroupToggle + ButtonGroupCustomToggle diff --git a/samples/inputs/button-group/toggle/package.json b/samples/inputs/button-group/custom-toggle/package.json similarity index 90% rename from samples/inputs/button-group/toggle/package.json rename to samples/inputs/button-group/custom-toggle/package.json index 8bf9f83f14..4e7c8b93f5 100644 --- a/samples/inputs/button-group/toggle/package.json +++ b/samples/inputs/button-group/custom-toggle/package.json @@ -1,6 +1,6 @@ { - "name": "react-button-group-toggle", - "description": "This project provides example of Button Group Toggle using Infragistics React components", + "name": "react-button-group-custom-toggle", + "description": "This project provides example of Button Group Custom Toggle using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/button-group/toggle/sandbox.config.json b/samples/inputs/button-group/custom-toggle/sandbox.config.json similarity index 100% rename from samples/inputs/button-group/toggle/sandbox.config.json rename to samples/inputs/button-group/custom-toggle/sandbox.config.json diff --git a/samples/inputs/button-group/toggle/src/index.css b/samples/inputs/button-group/custom-toggle/src/index.css similarity index 64% rename from samples/inputs/button-group/toggle/src/index.css rename to samples/inputs/button-group/custom-toggle/src/index.css index c0a1435f1f..06a54b66a2 100644 --- a/samples/inputs/button-group/toggle/src/index.css +++ b/samples/inputs/button-group/custom-toggle/src/index.css @@ -5,3 +5,9 @@ igc-button-group { display: inline-block; width: 300px; } + +.container.sample { + display: flex; + justify-content: center; + align-items: center; +} diff --git a/samples/inputs/button-group/toggle/src/index.tsx b/samples/inputs/button-group/custom-toggle/src/index.tsx similarity index 95% rename from samples/inputs/button-group/toggle/src/index.tsx rename to samples/inputs/button-group/custom-toggle/src/index.tsx index 30b15d4334..fe93f01e7f 100644 --- a/samples/inputs/button-group/toggle/src/index.tsx +++ b/samples/inputs/button-group/custom-toggle/src/index.tsx @@ -18,7 +18,7 @@ const icons = [ icons.forEach(([name, text]) => registerIconFromText(name, text, 'material')); -export default function ButtonGroupToggle() { +export default function ButtonGroupCustomToggle() { return (
@@ -32,4 +32,4 @@ export default function ButtonGroupToggle() { } const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); diff --git a/samples/inputs/button-group/toggle/tsconfig.json b/samples/inputs/button-group/custom-toggle/tsconfig.json similarity index 100% rename from samples/inputs/button-group/toggle/tsconfig.json rename to samples/inputs/button-group/custom-toggle/tsconfig.json diff --git a/samples/inputs/button-group/toggle/vite.config.js b/samples/inputs/button-group/custom-toggle/vite.config.js similarity index 100% rename from samples/inputs/button-group/toggle/vite.config.js rename to samples/inputs/button-group/custom-toggle/vite.config.js diff --git a/samples/inputs/button-group/interaction-states/.devcontainer/devcontainer.json b/samples/inputs/button-group/interaction-states/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/button-group/interaction-states/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/button-group/interaction-states/.eslintrc.js b/samples/inputs/button-group/interaction-states/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/button-group/interaction-states/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/inputs/button-group/interaction-states/README.md b/samples/inputs/button-group/interaction-states/README.md new file mode 100644 index 0000000000..7d0259d580 --- /dev/null +++ b/samples/inputs/button-group/interaction-states/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Interaction States feature using [Button Group](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/button-group/interaction-states +``` + +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/button-group/interaction-states/index.html b/samples/inputs/button-group/interaction-states/index.html new file mode 100644 index 0000000000..0ce785b95d --- /dev/null +++ b/samples/inputs/button-group/interaction-states/index.html @@ -0,0 +1,11 @@ + + + + Button Group Interaction States + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/button-group/interaction-states/package.json b/samples/inputs/button-group/interaction-states/package.json new file mode 100644 index 0000000000..d097528edf --- /dev/null +++ b/samples/inputs/button-group/interaction-states/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-button-group-interaction-states", + "description": "This project provides example of Button Group Interaction States 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/button-group/interaction-states/sandbox.config.json b/samples/inputs/button-group/interaction-states/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/button-group/interaction-states/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/button-group/interaction-states/src/ButtonGroupInteractionStates.css b/samples/inputs/button-group/interaction-states/src/ButtonGroupInteractionStates.css new file mode 100644 index 0000000000..cf89a782a1 --- /dev/null +++ b/samples/inputs/button-group/interaction-states/src/ButtonGroupInteractionStates.css @@ -0,0 +1,33 @@ +igc-ripple { + --color: gray; +} + +.button-group-interaction-states { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 20px; + padding: 20px; +} + +.button-group-interaction-states-row { + display: grid; + grid-template-columns: 120px 160px 160px; + align-items: center; + gap: 16px; +} + +.button-group-interaction-states .row-label, +.button-group-interaction-states .column-label { + color: var(--ig-gray-700); + font-size: 12px; + line-height: 16px; + font-weight: 600; +} + +.button-group-interaction-states-row igc-button-group:not([disabled]) igc-toggle-button[selected]::part(toggle) { + background: var(--item-active-background); + border-color: var(--item-active-border-color); + color: var(--item-selected-text-color); +} \ No newline at end of file diff --git a/samples/inputs/button-group/interaction-states/src/index.css b/samples/inputs/button-group/interaction-states/src/index.css new file mode 100644 index 0000000000..1f53b8aa05 --- /dev/null +++ b/samples/inputs/button-group/interaction-states/src/index.css @@ -0,0 +1,2 @@ +/* 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/button-group/interaction-states/src/index.tsx b/samples/inputs/button-group/interaction-states/src/index.tsx new file mode 100644 index 0000000000..77e39628a2 --- /dev/null +++ b/samples/inputs/button-group/interaction-states/src/index.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; +import './ButtonGroupInteractionStates.css'; +import './index.css'; + +const rows: Array<{ label: string; selected: boolean }> = [ + { label: 'Selected / Off', selected: false }, + { label: 'Selected / On', selected: true } +]; + +export default function ButtonGroupInteractionStates(): JSX.Element { + return ( +
+
+ + Enabled + Disabled +
+ {rows.map((row) => ( +
+ {row.label} + + + Device + + + + + + Cloud + + +
+ ))} +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button-group/interaction-states/tsconfig.json b/samples/inputs/button-group/interaction-states/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/button-group/interaction-states/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/button-group/interaction-states/vite.config.js b/samples/inputs/button-group/interaction-states/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/button-group/interaction-states/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/button-group/layout/src/ButtonGroupLayout.css b/samples/inputs/button-group/layout/src/ButtonGroupLayout.css new file mode 100644 index 0000000000..936a3bc2f3 --- /dev/null +++ b/samples/inputs/button-group/layout/src/ButtonGroupLayout.css @@ -0,0 +1,19 @@ +igc-ripple { + --color: gray; +} + +.button-group-layout { + display: flex; + align-items: center; + justify-content: center; + gap: 80px; + min-height: 7rem; +} + +.button-group-layout igc-toggle-button { + min-width: 100px; +} + +.button-group-layout igc-icon { + --size: 20px; +} diff --git a/samples/inputs/button-group/layout/src/index.tsx b/samples/inputs/button-group/layout/src/index.tsx index 79642810f6..3bc28e0a57 100644 --- a/samples/inputs/button-group/layout/src/index.tsx +++ b/samples/inputs/button-group/layout/src/index.tsx @@ -1,32 +1,50 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; -import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; +import { IgrButtonGroup, IgrIcon, IgrRipple, IgrToggleButton, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; +import './ButtonGroupLayout.css'; import './index.css'; -export default function ButtonGroupLayout() { - return ( -
- - - Left - - - - Center - - - - Right - - - - Justify - - - -
- ); +const alignLeftIcon = + ''; +const alignCenterIcon = + ''; +const alignRightIcon = + ''; + +const layouts = [ + { value: 'left', label: 'Left', icon: 'align-left' }, + { value: 'center', label: 'Center', icon: 'align-center' }, + { value: 'right', label: 'Right', icon: 'align-right' } +]; + +export default function ButtonGroupLayout(): JSX.Element { + useEffect(() => { + registerIconFromText('align-left', alignLeftIcon, 'material'); + registerIconFromText('align-center', alignCenterIcon, 'material'); + registerIconFromText('align-right', alignRightIcon, 'material'); + }, []); + + return ( +
+ + {layouts.map((layout) => ( + + {layout.label} + + + ))} + + + {layouts.map((layout) => ( + + + + + ))} + +
+ ); } const root = ReactDOM.createRoot(document.getElementById('root')); diff --git a/samples/inputs/button-group/overview/src/ButtonGroupOverview.css b/samples/inputs/button-group/overview/src/ButtonGroupOverview.css index 8ebfaa184d..c11e28b62c 100644 --- a/samples/inputs/button-group/overview/src/ButtonGroupOverview.css +++ b/samples/inputs/button-group/overview/src/ButtonGroupOverview.css @@ -1,7 +1,39 @@ + .container.sample { + display: flex; + flex-direction: column; + align-items: center; +} + igc-button-group { - max-width: 400px; + display: block; + width: 280px; + max-width: 100%; } igc-ripple { --color: gray; +} + +.album { + margin-top: 8px; + width: 280px; + max-width: 100%; +} + +.album-title { + display: inline-block; + margin-bottom: 8px; + color: #1f89d4; +} + +.album-photos { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 4px; +} + +.album-photos img { + width: 100%; + object-fit: cover; + display: block; } \ No newline at end of file diff --git a/samples/inputs/button-group/overview/src/index.tsx b/samples/inputs/button-group/overview/src/index.tsx index a7ceedc44a..923e753db6 100644 --- a/samples/inputs/button-group/overview/src/index.tsx +++ b/samples/inputs/button-group/overview/src/index.tsx @@ -1,63 +1,68 @@ -import React, { useEffect } from 'react'; +import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import { IgrButtonGroup, - IgrIcon, IgrRipple, IgrToggleButton, - registerIconFromText, } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; import './ButtonGroupOverview.css'; import './index.css'; -const icons = [ - { - name: 'format_align_left', - iconText: '', +const albums = { + device: { + title: 'Trip around the world', + photos: [ + 'https://picsum.photos/id/1015/300/220', + 'https://picsum.photos/id/1016/300/220', + 'https://picsum.photos/id/1018/300/220', + 'https://picsum.photos/id/1019/300/220', + ], }, - { - name: 'format_align_center', - iconText: '', + cloud: { + title: 'Trip around the world', + photos: [ + 'https://picsum.photos/id/1036/300/220', + 'https://picsum.photos/id/1051/300/220', + 'https://picsum.photos/id/1062/300/220', + 'https://picsum.photos/id/1067/300/220', + ], }, - { - name: 'format_align_right', - iconText: '', - }, - { - name: 'format_align_justify', - iconText: '', - }, -]; +}; export default function ButtonGroupOverview() { - useEffect(() => { - icons.forEach((icon) => { - registerIconFromText(icon.name, icon.iconText, 'material'); - }); - }, []) + const [source, setSource] = useState<'device' | 'cloud'>('cloud'); + const album = albums[source]; return (
- - - - - - - + ) => { + if (e.detail === 'device' || e.detail === 'cloud') { + setSource(e.detail); + } + }} + > + + Device - - + + Cloud - - - - + +
+ {album.title} +
+ {album.photos.map((photo) => ( + {album.title} + ))} +
+
); } diff --git a/samples/inputs/button-group/size/src/ButtonGroupSize.css b/samples/inputs/button-group/size/src/ButtonGroupSize.css new file mode 100644 index 0000000000..384a4e4545 --- /dev/null +++ b/samples/inputs/button-group/size/src/ButtonGroupSize.css @@ -0,0 +1,28 @@ +igc-ripple { + --color: gray; +} + +.button-group-size { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 32px; + padding: 13px; +} + +.button-group-size-item { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 32px; +} + +.button-group-size-item span { + width: 52px; + text-align: right; + color: var(--ig-gray-700); + font-size: 12px; + line-height: 16px; +} diff --git a/samples/inputs/button-group/size/src/index.tsx b/samples/inputs/button-group/size/src/index.tsx index 06cbe8b3de..9bda790d7b 100644 --- a/samples/inputs/button-group/size/src/index.tsx +++ b/samples/inputs/button-group/size/src/index.tsx @@ -1,39 +1,40 @@ -import React, { useState } from 'react'; +import React from 'react'; import ReactDOM from 'react-dom/client'; -import { - IgrButtonGroup, - IgrComponentValueChangedEventArgs, - IgrToggleButton, - } from 'igniteui-react'; +import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; +import './ButtonGroupSize.css'; import './index.css'; -export default function ButtonGroupSize() { - const [style, setStyle] = useState({ '--ig-size': 'var(--ig-size-large)' } as React.CSSProperties) +const cities = ['Sofia', 'London', 'New York']; - function onSelect(args: IgrComponentValueChangedEventArgs) { - setStyle({ - '--ig-size': `var(--ig-size-${args.detail})` - } as React.CSSProperties) - } +const sizes = ['small', 'medium', 'large']; +export default function ButtonGroupSize(): JSX.Element { return ( -
- - - Small - - - Medium - - - Large - - -
+
+ {sizes.map((size) => ( +
+ {size.charAt(0).toUpperCase() + size.slice(1)} + + {cities.map((city) => ( + + {city} + + + ))} + +
+ ))} +
); } // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); diff --git a/samples/inputs/button-group/states/.devcontainer/devcontainer.json b/samples/inputs/button-group/states/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/button-group/states/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/button-group/states/.eslintrc.js b/samples/inputs/button-group/states/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/button-group/states/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/inputs/button-group/toggle/README.md b/samples/inputs/button-group/states/README.md similarity index 91% rename from samples/inputs/button-group/toggle/README.md rename to samples/inputs/button-group/states/README.md index 9ef12c8101..9c6295d419 100644 --- a/samples/inputs/button-group/toggle/README.md +++ b/samples/inputs/button-group/states/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Toggle feature using [Button Group](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 [Button Group](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 Toggle 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/button-group/toggle +cd ./samples/inputs/button-group/states ``` open above folder in VS Code or type: diff --git a/samples/inputs/button-group/states/index.html b/samples/inputs/button-group/states/index.html new file mode 100644 index 0000000000..88d23d139e --- /dev/null +++ b/samples/inputs/button-group/states/index.html @@ -0,0 +1,11 @@ + + + + Button Group States + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/button-group/states/package.json b/samples/inputs/button-group/states/package.json new file mode 100644 index 0000000000..7cb0718c2e --- /dev/null +++ b/samples/inputs/button-group/states/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-button-group-states", + "description": "This project provides example of Button Group States 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/button-group/states/sandbox.config.json b/samples/inputs/button-group/states/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/button-group/states/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/button-group/states/src/ButtonGroupStates.css b/samples/inputs/button-group/states/src/ButtonGroupStates.css new file mode 100644 index 0000000000..d2213b6b22 --- /dev/null +++ b/samples/inputs/button-group/states/src/ButtonGroupStates.css @@ -0,0 +1,73 @@ +igc-ripple { + --color: gray; +} + +.button-group-states { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 20px; + padding: 20px; +} + +.button-group-states-row { + display: grid; + grid-template-columns: 120px 164px 164px 164px; + align-items: center; + gap: 16px; +} + +.button-group-states .row-label, +.button-group-states .column-label { + color: var(--ig-gray-700); + font-size: 12px; + line-height: 16px; + font-weight: 600; +} + +.button-group-states .column-label { + text-align: center; +} + +.button-group-states igc-button-group { + width: 164px; +} + +.button-group-states igc-toggle-button { + width: 100%; +} + +.button-group-states igc-icon { + font-size: 16px; +} + +.button-group-states igc-toggle-button[selected]::part(toggle) { + background: var(--item-active-background); + border-color: var(--item-active-border-color); + color: var(--item-hover-text-color); +} + +.button-group-states igc-toggle-button.state-hover:not([selected])::part(toggle) { + background: var(--item-hover-background); + border-color: var(--item-hover-border-color); + color: var(--item-hover-text-color); +} + +.button-group-states igc-toggle-button.state-focused:not([selected])::part(toggle) { + background: var(--item-focused-hover-background); + border-color: var(--item-focused-hover-border-color); + color: var(--item-focused-hover-text-color); +} + +.button-group-states igc-toggle-button.state-hover[selected]::part(toggle) { + background: var(--item-selected-active-background); + border-color: var(--item-selected-active-border-color); + color: var(--item-selected-hover-text-color); +} + +.button-group-states igc-toggle-button.state-focused[selected]::part(toggle) { + background: var(--item-selected-active-background); + border-color: var(--item-selected-active-border-color); + color: var(--item-focused-hover-text-color); +} \ No newline at end of file diff --git a/samples/inputs/button-group/states/src/index.css b/samples/inputs/button-group/states/src/index.css new file mode 100644 index 0000000000..1f53b8aa05 --- /dev/null +++ b/samples/inputs/button-group/states/src/index.css @@ -0,0 +1,2 @@ +/* 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/button-group/states/src/index.tsx b/samples/inputs/button-group/states/src/index.tsx new file mode 100644 index 0000000000..d039104a6d --- /dev/null +++ b/samples/inputs/button-group/states/src/index.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { IgrButtonGroup, IgrIcon, IgrRipple, IgrToggleButton } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; +import './ButtonGroupStates.css'; +import './index.css'; + +const rows: Array<{ label: string; selected: boolean }> = [ + { label: 'Selected / Off', selected: false }, + { label: 'Selected / On', selected: true } +]; + +const states = ['idle', 'hover', 'focused']; + +function StateButton({ selected, state }: { selected: boolean; state: string }): JSX.Element { + return ( + + + Button + + + + ); +} + +export default function ButtonGroupStates(): JSX.Element { + return ( +
+
+ + {states.map((state) => ( + + {state.charAt(0).toUpperCase() + state.slice(1)} + + ))} +
+ {rows.map((row) => ( +
+ {row.label} + {states.map((state) => )} +
+ ))} +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button-group/states/tsconfig.json b/samples/inputs/button-group/states/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/button-group/states/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/button-group/states/vite.config.js b/samples/inputs/button-group/states/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/button-group/states/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/button-group/styling/src/ButtonGroupStyling.css b/samples/inputs/button-group/styling/src/ButtonGroupStyling.css index fc5cd8712a..22c9d20f42 100644 --- a/samples/inputs/button-group/styling/src/ButtonGroupStyling.css +++ b/samples/inputs/button-group/styling/src/ButtonGroupStyling.css @@ -1,27 +1,32 @@ -igc-button-group { - width: 200px; -} - igc-ripple { --color: gray; } -igc-toggle-button::part(toggle) { - color: #fdfdfd; - background: #2f4d6a; +.button-group-styling { + display: flex; + align-items: center; + justify-content: center; + min-height: 7rem; +} + +.button-group-styling igc-button-group { + width: 420px; + border: 2px solid #4da3e8; + border-radius: 4px; + overflow: hidden; } -igc-toggle-button::part(toggle):hover { - color: #fdfdfd; - background: #1f3347; +.button-group-styling igc-toggle-button::part(toggle) { + color: #4a5a66; + background: #cfe8fb; + border-color: #4da3e8; } -igc-toggle-button[disabled]::part(toggle) { - color: gray; - background: lightgray; +.button-group-styling igc-toggle-button::part(toggle):hover { + background: #b3daf8; } -igc-toggle-button[selected]::part(toggle) { - color: #fdfdfd; - background: #1f3347; +.button-group-styling igc-toggle-button[selected]::part(toggle) { + color: #2f4d6a; + background: #6db3ea; } \ No newline at end of file diff --git a/samples/inputs/button-group/styling/src/index.tsx b/samples/inputs/button-group/styling/src/index.tsx index 0bf8d1f292..61f3d984f9 100644 --- a/samples/inputs/button-group/styling/src/index.tsx +++ b/samples/inputs/button-group/styling/src/index.tsx @@ -1,39 +1,31 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import { - IgrButtonGroup, - IgrRipple, - IgrToggleButton, - } from 'igniteui-react'; +import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; import './ButtonGroupStyling.css'; import './index.css'; -export default function ButtonGroupStyling() { +const layouts = ['Left', 'Center', 'Right']; + +export default function ButtonGroupStyling(): JSX.Element { return ( -
- - - Sofia - - - - London - - - - New York - - - - Tokyo - - +
+ + {layouts.map((layout) => ( + + {layout} + + + ))} -
+
); } // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); diff --git a/samples/inputs/button-group/tailwind-styling/.devcontainer/devcontainer.json b/samples/inputs/button-group/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/button-group/tailwind-styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/button-group/tailwind-styling/.eslintrc.js b/samples/inputs/button-group/tailwind-styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/button-group/tailwind-styling/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/inputs/button-group/tailwind-styling/README.md b/samples/inputs/button-group/tailwind-styling/README.md new file mode 100644 index 0000000000..2a5d2b0210 --- /dev/null +++ b/samples/inputs/button-group/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Button Group](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/button-group/tailwind-styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/button-group/tailwind-styling/index.html b/samples/inputs/button-group/tailwind-styling/index.html new file mode 100644 index 0000000000..6c5b289faa --- /dev/null +++ b/samples/inputs/button-group/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + ButtonGroupTailwindStyling + + + +
+ + + diff --git a/samples/inputs/button-group/tailwind-styling/package.json b/samples/inputs/button-group/tailwind-styling/package.json new file mode 100644 index 0000000000..29a89fe1ae --- /dev/null +++ b/samples/inputs/button-group/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-button-group-tailwind-styling", + "description": "This project provides example of Button Group Tailwind Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.1.14", + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "tailwindcss": "^4.1.14", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/button-group/tailwind-styling/sandbox.config.json b/samples/inputs/button-group/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/button-group/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/button-group/tailwind-styling/src/index.css b/samples/inputs/button-group/tailwind-styling/src/index.css new file mode 100644 index 0000000000..3e510d9662 --- /dev/null +++ b/samples/inputs/button-group/tailwind-styling/src/index.css @@ -0,0 +1,32 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); + +igc-ripple { + --color: gray; +} + +.button-group-center { + display: flex; + align-items: center; + justify-content: center; + min-height: 7rem; +} + +.button-group-style igc-toggle-button::part(toggle) { + color: var(--color-violet-700); + background: var(--color-white); + border-color: var(--color-violet-300); +} + +.button-group-style igc-toggle-button::part(toggle):hover { + background: var(--color-fuchsia-100); +} + +.button-group-style igc-toggle-button[selected]::part(toggle) { + color: var(--color-white); + background: var(--color-violet-600); +} diff --git a/samples/inputs/button-group/tailwind-styling/src/index.tsx b/samples/inputs/button-group/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..69116c5b15 --- /dev/null +++ b/samples/inputs/button-group/tailwind-styling/src/index.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; + +const views = ['Day', 'Week', 'Month']; + +export default function ButtonGroupTailwindStyling(): JSX.Element { + return ( +
+ + {views.map((view) => ( + + {view} + + + ))} + +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button-group/tailwind-styling/tsconfig.json b/samples/inputs/button-group/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/button-group/tailwind-styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/button-group/tailwind-styling/vite.config.js b/samples/inputs/button-group/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..663868e022 --- /dev/null +++ b/samples/inputs/button-group/tailwind-styling/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file From 506b3f7100bb372d4bc8daf23687c5200e11efc7 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 12 Aug 2026 16:40:20 +0300 Subject: [PATCH 4/5] feat(button-group): update selection sample, remove buttons-amount sample --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- .../button-group/alignment/src/index.tsx | 1 - .../.devcontainer/devcontainer.json | 4 - .../button-group/buttons-amount/.eslintrc.js | 75 ------------------- .../button-group/buttons-amount/README.md | 56 -------------- .../button-group/buttons-amount/index.html | 11 --- .../button-group/buttons-amount/package.json | 42 ----------- .../buttons-amount/sandbox.config.json | 5 -- .../src/ButtonGroupButtonsAmount.css | 33 -------- .../button-group/buttons-amount/src/index.css | 2 - .../button-group/buttons-amount/src/index.tsx | 29 ------- .../button-group/buttons-amount/tsconfig.json | 44 ----------- .../buttons-amount/vite.config.js | 12 --- .../selection/src/ButtonGroupSelection.css | 26 +++++-- .../button-group/selection/src/index.tsx | 62 ++++++--------- .../inputs/button-group/size/src/index.tsx | 1 - .../tailwind-styling/src/index.css | 5 ++ .../tailwind-styling/src/index.tsx | 2 +- 19 files changed, 49 insertions(+), 365 deletions(-) delete mode 100644 samples/inputs/button-group/buttons-amount/.devcontainer/devcontainer.json delete mode 100644 samples/inputs/button-group/buttons-amount/.eslintrc.js delete mode 100644 samples/inputs/button-group/buttons-amount/README.md delete mode 100644 samples/inputs/button-group/buttons-amount/index.html delete mode 100644 samples/inputs/button-group/buttons-amount/package.json delete mode 100644 samples/inputs/button-group/buttons-amount/sandbox.config.json delete mode 100644 samples/inputs/button-group/buttons-amount/src/ButtonGroupButtonsAmount.css delete mode 100644 samples/inputs/button-group/buttons-amount/src/index.css delete mode 100644 samples/inputs/button-group/buttons-amount/src/index.tsx delete mode 100644 samples/inputs/button-group/buttons-amount/tsconfig.json delete mode 100644 samples/inputs/button-group/buttons-amount/vite.config.js diff --git a/browser/public/meta.json b/browser/public/meta.json index bd6279127a..6f4b0d57e5 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-12 11:31:48","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-12 15:30:01","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 bd6279127a..6f4b0d57e5 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-12 11:31:48","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-12 15:30:01","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/button-group/alignment/src/index.tsx b/samples/inputs/button-group/alignment/src/index.tsx index 6dea1b4ca4..aa28f9252e 100644 --- a/samples/inputs/button-group/alignment/src/index.tsx +++ b/samples/inputs/button-group/alignment/src/index.tsx @@ -20,7 +20,6 @@ export default function ButtonGroupAlignment(): JSX.Element { {city} diff --git a/samples/inputs/button-group/buttons-amount/.devcontainer/devcontainer.json b/samples/inputs/button-group/buttons-amount/.devcontainer/devcontainer.json deleted file mode 100644 index e0b8e9c925..0000000000 --- a/samples/inputs/button-group/buttons-amount/.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/button-group/buttons-amount/.eslintrc.js b/samples/inputs/button-group/buttons-amount/.eslintrc.js deleted file mode 100644 index b45160a9ee..0000000000 --- a/samples/inputs/button-group/buttons-amount/.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/button-group/buttons-amount/README.md b/samples/inputs/button-group/buttons-amount/README.md deleted file mode 100644 index d5a10bbffe..0000000000 --- a/samples/inputs/button-group/buttons-amount/README.md +++ /dev/null @@ -1,56 +0,0 @@ - - - -This folder contains implementation of React application with example of Buttons Amount feature using [Button Group](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/button-group/buttons-amount -``` - -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/button-group/buttons-amount/index.html b/samples/inputs/button-group/buttons-amount/index.html deleted file mode 100644 index 92bbbba23b..0000000000 --- a/samples/inputs/button-group/buttons-amount/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - Button Group Buttons Amount - - - -
- - - \ No newline at end of file diff --git a/samples/inputs/button-group/buttons-amount/package.json b/samples/inputs/button-group/buttons-amount/package.json deleted file mode 100644 index 416832e5c2..0000000000 --- a/samples/inputs/button-group/buttons-amount/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "react-button-group-buttons-amount", - "description": "This project provides example of Button Group Buttons Amount 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/button-group/buttons-amount/sandbox.config.json b/samples/inputs/button-group/buttons-amount/sandbox.config.json deleted file mode 100644 index 00acba0c10..0000000000 --- a/samples/inputs/button-group/buttons-amount/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/button-group/buttons-amount/src/ButtonGroupButtonsAmount.css b/samples/inputs/button-group/buttons-amount/src/ButtonGroupButtonsAmount.css deleted file mode 100644 index 13ff4d8840..0000000000 --- a/samples/inputs/button-group/buttons-amount/src/ButtonGroupButtonsAmount.css +++ /dev/null @@ -1,33 +0,0 @@ -igc-ripple { - --color: gray; -} - -.button-group-buttons-amount { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - padding: 36px; -} - -.button-group-buttons-amount-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - flex: 0 0 auto; -} - -.button-group-buttons-amount-item igc-button-group { - width: max-content; -} - -.button-group-buttons-amount-item igc-toggle-button { - min-width: 88px; -} - -.button-group-buttons-amount-item span { - color: var(--ig-gray-700); - font-size: 12px; - line-height: 16px; -} \ No newline at end of file diff --git a/samples/inputs/button-group/buttons-amount/src/index.css b/samples/inputs/button-group/buttons-amount/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/inputs/button-group/buttons-amount/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/button-group/buttons-amount/src/index.tsx b/samples/inputs/button-group/buttons-amount/src/index.tsx deleted file mode 100644 index 903ee45d40..0000000000 --- a/samples/inputs/button-group/buttons-amount/src/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupButtonsAmount.css'; -import './index.css'; - -const names = ['Doc', 'Happy', 'Sneezy', 'Sleepy', 'Bashful', 'Grumpy', 'Dopey']; - -export default function ButtonGroupButtonsAmount(): JSX.Element { - return ( -
-
- - {names.map((name) => ( - - {name} - - - ))} - -
-
- ); -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/inputs/button-group/buttons-amount/tsconfig.json b/samples/inputs/button-group/buttons-amount/tsconfig.json deleted file mode 100644 index e7db8a94f5..0000000000 --- a/samples/inputs/button-group/buttons-amount/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/button-group/buttons-amount/vite.config.js b/samples/inputs/button-group/buttons-amount/vite.config.js deleted file mode 100644 index 1744dbc719..0000000000 --- a/samples/inputs/button-group/buttons-amount/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/button-group/selection/src/ButtonGroupSelection.css b/samples/inputs/button-group/selection/src/ButtonGroupSelection.css index db9096307b..0eed951435 100644 --- a/samples/inputs/button-group/selection/src/ButtonGroupSelection.css +++ b/samples/inputs/button-group/selection/src/ButtonGroupSelection.css @@ -1,13 +1,27 @@ -.radio-group-container { - width: 400px; - margin-bottom: 1rem; +.selection-samples { + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + gap: 32px; + padding-left: 32px; } -igc-radio-group { - padding: 0.5rem; +.selection-sample { + display: flex; + align-items: center; + gap: 30px; } -igc-button-group { +.selection-sample > span { + width: 120px; + text-align: right; + color: var(--ig-gray-700); + font-size: 12px; + font-weight: 600; +} + +.selection-sample igc-button-group { width: 200px; } diff --git a/samples/inputs/button-group/selection/src/index.tsx b/samples/inputs/button-group/selection/src/index.tsx index e27e89e466..684c40b64c 100644 --- a/samples/inputs/button-group/selection/src/index.tsx +++ b/samples/inputs/button-group/selection/src/index.tsx @@ -1,12 +1,8 @@ -import React, { useEffect, useRef } from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import { - ButtonGroupSelection, IgrButtonGroup, IgrIcon, - IgrRadio, - IgrRadioChangeEventArgs, - IgrRadioGroup, IgrRipple, IgrToggleButton, registerIconFromText, @@ -37,43 +33,27 @@ export default function ButtonGroupSelectionSample() { }); }, []) - const buttonGroupRef = useRef(null); - - function onRadioChange(e: IgrRadioChangeEventArgs) { - const value = e.detail.value as ButtonGroupSelection; - buttonGroupRef.current.selection = value; - } - return ( -
-
- - - - Single - - - Single-Required - - - Multiple - - -
- - - - - - - - - - - - - - +
+ {(['single', 'single-required', 'multiple'] as const).map((selection) => ( +
+ {selection === 'single-required' ? 'Single-Required' : selection.charAt(0).toUpperCase() + selection.slice(1)} + + + + + + + + + + + + + + +
+ ))}
); } diff --git a/samples/inputs/button-group/size/src/index.tsx b/samples/inputs/button-group/size/src/index.tsx index 9bda790d7b..28ce3d496c 100644 --- a/samples/inputs/button-group/size/src/index.tsx +++ b/samples/inputs/button-group/size/src/index.tsx @@ -22,7 +22,6 @@ export default function ButtonGroupSize(): JSX.Element { {city} diff --git a/samples/inputs/button-group/tailwind-styling/src/index.css b/samples/inputs/button-group/tailwind-styling/src/index.css index 3e510d9662..6ff2900474 100644 --- a/samples/inputs/button-group/tailwind-styling/src/index.css +++ b/samples/inputs/button-group/tailwind-styling/src/index.css @@ -16,6 +16,11 @@ igc-ripple { min-height: 7rem; } +.button-group-style { + width: 420px; + max-width: 100%; +} + .button-group-style igc-toggle-button::part(toggle) { color: var(--color-violet-700); background: var(--color-white); diff --git a/samples/inputs/button-group/tailwind-styling/src/index.tsx b/samples/inputs/button-group/tailwind-styling/src/index.tsx index 69116c5b15..468ab3e915 100644 --- a/samples/inputs/button-group/tailwind-styling/src/index.tsx +++ b/samples/inputs/button-group/tailwind-styling/src/index.tsx @@ -9,7 +9,7 @@ const views = ['Day', 'Week', 'Month']; export default function ButtonGroupTailwindStyling(): JSX.Element { return (
- + {views.map((view) => ( Date: Fri, 14 Aug 2026 20:18:23 +0300 Subject: [PATCH 5/5] fix(button-group): swap states and interaction states samples --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- .../interaction-states/index.html | 2 +- .../interaction-states/package.json | 2 +- .../src/ButtonGroupStates.css | 0 .../interaction-states/src/index.tsx | 49 ++++++++++--------- samples/inputs/button-group/states/index.html | 2 +- .../inputs/button-group/states/package.json | 2 +- .../src/ButtonGroupInteractionStates.css | 0 .../inputs/button-group/states/src/index.tsx | 49 +++++++++---------- 10 files changed, 55 insertions(+), 55 deletions(-) rename samples/inputs/button-group/{states => interaction-states}/src/ButtonGroupStates.css (100%) rename samples/inputs/button-group/{interaction-states => states}/src/ButtonGroupInteractionStates.css (100%) diff --git a/browser/public/meta.json b/browser/public/meta.json index a41f32d8bc..17336d4b22 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-12 15:30:01","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-08-14 20:16:59","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 a41f32d8bc..17336d4b22 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-12 15:30:01","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-08-14 20:16:59","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/button-group/interaction-states/index.html b/samples/inputs/button-group/interaction-states/index.html index 0ce785b95d..88d23d139e 100644 --- a/samples/inputs/button-group/interaction-states/index.html +++ b/samples/inputs/button-group/interaction-states/index.html @@ -1,7 +1,7 @@ - Button Group Interaction States + Button Group States diff --git a/samples/inputs/button-group/interaction-states/package.json b/samples/inputs/button-group/interaction-states/package.json index d097528edf..c5fb9bdd3b 100644 --- a/samples/inputs/button-group/interaction-states/package.json +++ b/samples/inputs/button-group/interaction-states/package.json @@ -1,6 +1,6 @@ { "name": "react-button-group-interaction-states", - "description": "This project provides example of Button Group Interaction States using Infragistics React components", + "description": "This project provides example of Button Group States using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/button-group/states/src/ButtonGroupStates.css b/samples/inputs/button-group/interaction-states/src/ButtonGroupStates.css similarity index 100% rename from samples/inputs/button-group/states/src/ButtonGroupStates.css rename to samples/inputs/button-group/interaction-states/src/ButtonGroupStates.css diff --git a/samples/inputs/button-group/interaction-states/src/index.tsx b/samples/inputs/button-group/interaction-states/src/index.tsx index 77e39628a2..d039104a6d 100644 --- a/samples/inputs/button-group/interaction-states/src/index.tsx +++ b/samples/inputs/button-group/interaction-states/src/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; +import { IgrButtonGroup, IgrIcon, IgrRipple, IgrToggleButton } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupInteractionStates.css'; +import './ButtonGroupStates.css'; import './index.css'; const rows: Array<{ label: string; selected: boolean }> = [ @@ -10,31 +10,34 @@ const rows: Array<{ label: string; selected: boolean }> = [ { label: 'Selected / On', selected: true } ]; -export default function ButtonGroupInteractionStates(): JSX.Element { +const states = ['idle', 'hover', 'focused']; + +function StateButton({ selected, state }: { selected: boolean; state: string }): JSX.Element { + return ( + + + Button + + + + ); +} + +export default function ButtonGroupStates(): JSX.Element { return ( -
-
+
+
- Enabled - Disabled + {states.map((state) => ( + + {state.charAt(0).toUpperCase() + state.slice(1)} + + ))}
{rows.map((row) => ( -
+
{row.label} - - - Device - - - - - - Cloud - - + {states.map((state) => )}
))}
@@ -43,4 +46,4 @@ export default function ButtonGroupInteractionStates(): JSX.Element { // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); diff --git a/samples/inputs/button-group/states/index.html b/samples/inputs/button-group/states/index.html index 88d23d139e..0ce785b95d 100644 --- a/samples/inputs/button-group/states/index.html +++ b/samples/inputs/button-group/states/index.html @@ -1,7 +1,7 @@ - Button Group States + Button Group Interaction States diff --git a/samples/inputs/button-group/states/package.json b/samples/inputs/button-group/states/package.json index 7cb0718c2e..003410711d 100644 --- a/samples/inputs/button-group/states/package.json +++ b/samples/inputs/button-group/states/package.json @@ -1,6 +1,6 @@ { "name": "react-button-group-states", - "description": "This project provides example of Button Group States using Infragistics React components", + "description": "This project provides example of Button Group Interaction States using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/button-group/interaction-states/src/ButtonGroupInteractionStates.css b/samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css similarity index 100% rename from samples/inputs/button-group/interaction-states/src/ButtonGroupInteractionStates.css rename to samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css diff --git a/samples/inputs/button-group/states/src/index.tsx b/samples/inputs/button-group/states/src/index.tsx index d039104a6d..77e39628a2 100644 --- a/samples/inputs/button-group/states/src/index.tsx +++ b/samples/inputs/button-group/states/src/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import { IgrButtonGroup, IgrIcon, IgrRipple, IgrToggleButton } from 'igniteui-react'; +import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupStates.css'; +import './ButtonGroupInteractionStates.css'; import './index.css'; const rows: Array<{ label: string; selected: boolean }> = [ @@ -10,34 +10,31 @@ const rows: Array<{ label: string; selected: boolean }> = [ { label: 'Selected / On', selected: true } ]; -const states = ['idle', 'hover', 'focused']; - -function StateButton({ selected, state }: { selected: boolean; state: string }): JSX.Element { - return ( - - - Button - - - - ); -} - -export default function ButtonGroupStates(): JSX.Element { +export default function ButtonGroupInteractionStates(): JSX.Element { return ( -
-
+
+
- {states.map((state) => ( - - {state.charAt(0).toUpperCase() + state.slice(1)} - - ))} + Enabled + Disabled
{rows.map((row) => ( -
+
{row.label} - {states.map((state) => )} + + + Device + + + + + + Cloud + +
))}
@@ -46,4 +43,4 @@ export default function ButtonGroupStates(): JSX.Element { // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render();