diff --git a/browser/public/meta.json b/browser/public/meta.json index 878e6465e4..2d2303d72f 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"} +{"version":"23.2.915","date":"2026-08-17 10:28:17","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 878e6465e4..2d2303d72f 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"} +{"version":"23.2.915","date":"2026-08-17 10:28:17","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/button/contained/src/index.tsx b/samples/inputs/button/contained/src/index.tsx index 3d20d80e57..608ce693de 100644 --- a/samples/inputs/button/contained/src/index.tsx +++ b/samples/inputs/button/contained/src/index.tsx @@ -1,22 +1,25 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; -export default class ButtonContained extends React.Component { +const notificationsIcon = ''; - constructor(props: any) { - super(props); - } +export default function ButtonContained() { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- Contained -
- ); - } + return ( +
+ + + Contained + + +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/button/download/src/index.tsx b/samples/inputs/button/download/src/index.tsx index 96a6fd3b73..e0915ba1dc 100644 --- a/samples/inputs/button/download/src/index.tsx +++ b/samples/inputs/button/download/src/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/material.css'; export default class ButtonDownload extends React.Component { diff --git a/samples/inputs/button/fab/src/index.tsx b/samples/inputs/button/fab/src/index.tsx index 921df14c2c..db197b20ba 100644 --- a/samples/inputs/button/fab/src/index.tsx +++ b/samples/inputs/button/fab/src/index.tsx @@ -1,25 +1,25 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; -export default class ButtonFab extends React.Component { +const addIcon = ''; - constructor(props: any) { - super(props); - } +export default function ButtonFab() { + useEffect(() => { + registerIconFromText('add', addIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- - + - Add - -
- ); - } + return ( +
+ + + Floating Action + + +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/button/flat/src/index.css b/samples/inputs/button/flat/src/index.css index 9263b38c47..019bfa2d76 100644 --- a/samples/inputs/button/flat/src/index.css +++ b/samples/inputs/button/flat/src/index.css @@ -1,12 +1,7 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.container { - background: var(--ig-surface-600); -} - igc-button { width: 40%; margin: auto; - background: var(--ig-surface-50); } \ No newline at end of file diff --git a/samples/inputs/button/flat/src/index.tsx b/samples/inputs/button/flat/src/index.tsx index d808fbef41..7ed6215af1 100644 --- a/samples/inputs/button/flat/src/index.tsx +++ b/samples/inputs/button/flat/src/index.tsx @@ -1,22 +1,25 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; -export default class ButtonFlat extends React.Component { +const notificationsIcon = ''; - constructor(props: any) { - super(props); - } +export default function ButtonFlat() { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- Flat -
- ); - } + return ( +
+ + + Flat + + +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/button/icon/.devcontainer/devcontainer.json b/samples/inputs/button/icon/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/button/icon/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/button/icon/.eslintrc.js b/samples/inputs/button/icon/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/button/icon/.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/icon/README.md b/samples/inputs/button/icon/README.md new file mode 100644 index 0000000000..d122add780 --- /dev/null +++ b/samples/inputs/button/icon/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Icon feature using [Button](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/icon +``` + +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/icon/index.html b/samples/inputs/button/icon/index.html new file mode 100644 index 0000000000..ebbb8618bd --- /dev/null +++ b/samples/inputs/button/icon/index.html @@ -0,0 +1,11 @@ + + + + ButtonIcon + + + +
+ + + diff --git a/samples/inputs/button/icon/package.json b/samples/inputs/button/icon/package.json new file mode 100644 index 0000000000..e1c2bed8cc --- /dev/null +++ b/samples/inputs/button/icon/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-button-icon", + "description": "This project provides example of Button Icon 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/icon/sandbox.config.json b/samples/inputs/button/icon/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/button/icon/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/button/icon/src/index.css b/samples/inputs/button/icon/src/index.css new file mode 100644 index 0000000000..2ba53361b9 --- /dev/null +++ b/samples/inputs/button/icon/src/index.css @@ -0,0 +1,24 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.button-container { + display: flex; + justify-content: center; + align-items: flex-start; + gap: 2rem; + padding: 1rem; +} + +.button-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} + +.button-label { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--ig-gray-700); +} diff --git a/samples/inputs/button/icon/src/index.tsx b/samples/inputs/button/icon/src/index.tsx new file mode 100644 index 0000000000..352a840803 --- /dev/null +++ b/samples/inputs/button/icon/src/index.tsx @@ -0,0 +1,42 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrIcon, IgrIconButton, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; + +const addIcon = ''; + +export default function ButtonIcon() { + useEffect(() => { + registerIconFromText('add', addIcon, 'material'); + }, []); + + return ( +
+
+
+ Contained + +
+
+ Outlined + +
+
+ Flat + +
+
+ Floating Action + + + +
+
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button/icon/tsconfig.json b/samples/inputs/button/icon/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/button/icon/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/icon/vite.config.js b/samples/inputs/button/icon/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/samples/inputs/button/icon/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 + }, +}); diff --git a/samples/inputs/button/interaction-states/.devcontainer/devcontainer.json b/samples/inputs/button/interaction-states/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/button/interaction-states/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/button/interaction-states/.eslintrc.js b/samples/inputs/button/interaction-states/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/button/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/interaction-states/README.md b/samples/inputs/button/interaction-states/README.md new file mode 100644 index 0000000000..d8b44dba6b --- /dev/null +++ b/samples/inputs/button/interaction-states/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Interaction States feature using [Button](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/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/interaction-states/index.html b/samples/inputs/button/interaction-states/index.html new file mode 100644 index 0000000000..6ba03a0262 --- /dev/null +++ b/samples/inputs/button/interaction-states/index.html @@ -0,0 +1,11 @@ + + + + ButtonInteractionStates + + + +
+ + + diff --git a/samples/inputs/button/interaction-states/package.json b/samples/inputs/button/interaction-states/package.json new file mode 100644 index 0000000000..ae5ee19153 --- /dev/null +++ b/samples/inputs/button/interaction-states/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-button-interaction-states", + "description": "This project provides example of Button 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/interaction-states/sandbox.config.json b/samples/inputs/button/interaction-states/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/button/interaction-states/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/button/interaction-states/src/index.css b/samples/inputs/button/interaction-states/src/index.css new file mode 100644 index 0000000000..70005b3c96 --- /dev/null +++ b/samples/inputs/button/interaction-states/src/index.css @@ -0,0 +1,40 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.button-container { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + padding: 1rem; +} + +.button-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} + +.button-label { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--ig-gray-700); +} + +igc-button.state-hover::part(base) { + background: var(--hover-background); + color: var(--hover-foreground); +} + +igc-button.state-focused::part(base), +igc-button.state-focused-hover::part(base) { + background: var(--focus-background); + color: var(--focus-foreground); +} + +igc-button.state-focused-hover::part(base) { + background: var(--focus-hover-background); + color: var(--focus-hover-foreground); +} diff --git a/samples/inputs/button/interaction-states/src/index.tsx b/samples/inputs/button/interaction-states/src/index.tsx new file mode 100644 index 0000000000..1952d4ae8e --- /dev/null +++ b/samples/inputs/button/interaction-states/src/index.tsx @@ -0,0 +1,41 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; + +const notificationsIcon = ''; + +const states = [ + { label: 'Idle', value: 'idle' }, + { label: 'Hover', value: 'state-hover' }, + { label: 'Focused', value: 'state-focused' }, + { label: 'Focused & Hover', value: 'state-focused-hover' }, +]; + +export default function ButtonInteractionStates() { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); + + return ( +
+
+ {states.map((state) => ( +
+ {state.label} + + + Contained + + +
+ ))} +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button/interaction-states/tsconfig.json b/samples/inputs/button/interaction-states/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/button/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/interaction-states/vite.config.js b/samples/inputs/button/interaction-states/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/samples/inputs/button/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 + }, +}); diff --git a/samples/inputs/button/layout/.devcontainer/devcontainer.json b/samples/inputs/button/layout/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/button/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/layout/.eslintrc.js b/samples/inputs/button/layout/.eslintrc.js new file mode 100644 index 0000000000..72ac261251 --- /dev/null +++ b/samples/inputs/button/layout/.eslintrc.js @@ -0,0 +1,10 @@ +module.exports = { + parser: "@typescript-eslint/parser", + parserOptions: { ecmaVersion: 2020, sourceType: "module", ecmaFeatures: { jsx: true } }, + extends: ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"], + rules: { + "no-undef": "off", "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off" + } +}; diff --git a/samples/inputs/button/layout/README.md b/samples/inputs/button/layout/README.md new file mode 100644 index 0000000000..c4aafc49ab --- /dev/null +++ b/samples/inputs/button/layout/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Layout feature using [Button](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/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/layout/index.html b/samples/inputs/button/layout/index.html new file mode 100644 index 0000000000..10985db98a --- /dev/null +++ b/samples/inputs/button/layout/index.html @@ -0,0 +1,11 @@ + + + + ButtonLayout + + + +
+ + + diff --git a/samples/inputs/button/layout/package.json b/samples/inputs/button/layout/package.json new file mode 100644 index 0000000000..0ea36e0a51 --- /dev/null +++ b/samples/inputs/button/layout/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-button-layout", + "description": "This project provides example of Button 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/layout/sandbox.config.json b/samples/inputs/button/layout/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/button/layout/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/button/layout/src/index.css b/samples/inputs/button/layout/src/index.css new file mode 100644 index 0000000000..7865784fe8 --- /dev/null +++ b/samples/inputs/button/layout/src/index.css @@ -0,0 +1,53 @@ +/* shared styles are loaded from: + https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.button-container { + display: flex; + align-items: center; + justify-content: center; + gap: 1.5rem; + min-height: 95%; +} + +.button-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} + +.button-group { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + flex: 1 1 0; + min-width: 0; +} + +.button-row { + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; +} + +.button-sublabel { + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--ig-gray-600); +} + +.button-label { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--ig-gray-700); +} + +igc-button::part(base) { + font-family: 'Titillium Web', sans-serif; + text-transform: uppercase; + letter-spacing: 1px; +} diff --git a/samples/inputs/button/layout/src/index.tsx b/samples/inputs/button/layout/src/index.tsx new file mode 100644 index 0000000000..9bada8c8d7 --- /dev/null +++ b/samples/inputs/button/layout/src/index.tsx @@ -0,0 +1,46 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; + +const addIcon = ''; + +const variants: any[] = ['contained', 'outlined', 'flat', 'fab']; + +export default function ButtonLayout() { + useEffect(() => { + registerIconFromText('add', addIcon, 'material'); + }, []); + + return ( +
+
+ {variants.map((variant) => ( +
+ {variant} +
+
+ Left + + + Add + +
+
+ Right + + Add + + +
+
+
+ ))} +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button/layout/tsconfig.json b/samples/inputs/button/layout/tsconfig.json new file mode 100644 index 0000000000..6c343726b3 --- /dev/null +++ b/samples/inputs/button/layout/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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/layout/vite.config.js b/samples/inputs/button/layout/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/samples/inputs/button/layout/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 + }, +}); diff --git a/samples/inputs/button/outlined/src/index.tsx b/samples/inputs/button/outlined/src/index.tsx index 2bf99a463b..123d36349e 100644 --- a/samples/inputs/button/outlined/src/index.tsx +++ b/samples/inputs/button/outlined/src/index.tsx @@ -1,22 +1,25 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; -export default class ButtonOutlined extends React.Component { +const notificationsIcon = ''; - constructor(props: any) { - super(props); - } +export default function ButtonOutlined() { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- Outlined -
- ); - } + return ( +
+ + + Outlined + + +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/button/overview/src/ButtonOverviewStyle.css b/samples/inputs/button/overview/src/ButtonOverviewStyle.css index 8fbc85d09d..84fb7d8897 100644 --- a/samples/inputs/button/overview/src/ButtonOverviewStyle.css +++ b/samples/inputs/button/overview/src/ButtonOverviewStyle.css @@ -1,6 +1,31 @@ -.button-container { - display: flex; - justify-content: space-evenly; - align-items: center; - height: 100%; -} \ No newline at end of file +.form { + display: flex; + justify-content: center; + gap: 1.25rem; + padding: 1.5rem; +} + +.form igc-avatar { + --ig-size: var(--ig-size-large); +} + +.fields { + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 260px; + width: 100%; +} + +.fields igc-input::part(container), +.fields igc-input::part(input) { + background-color: #ffffff; + border-bottom: none; +} + +.actions { + display: flex; + justify-content: flex-end; + gap: 1rem; + margin-top: 0.5rem; +} diff --git a/samples/inputs/button/overview/src/index.css b/samples/inputs/button/overview/src/index.css new file mode 100644 index 0000000000..7eb1c7c38e --- /dev/null +++ b/samples/inputs/button/overview/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ diff --git a/samples/inputs/button/overview/src/index.tsx b/samples/inputs/button/overview/src/index.tsx index 56d86a8ab6..f30a109b94 100644 --- a/samples/inputs/button/overview/src/index.tsx +++ b/samples/inputs/button/overview/src/index.tsx @@ -1,26 +1,29 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import { IgrAvatar, IgrButton, IgrInput } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; import './ButtonOverviewStyle.css'; -import { IgrButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './index.css'; -export default class ButtonOverview extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
-
- Flat - Contained - Outlined +export default function ButtonOverview() { + return ( +
+
+ +
+ + +
+ Cancel + Save +
- ); - } +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/button/size/src/ButtonSizingStyle.css b/samples/inputs/button/size/src/ButtonSizingStyle.css index d2f4c0b947..a45f213083 100644 --- a/samples/inputs/button/size/src/ButtonSizingStyle.css +++ b/samples/inputs/button/size/src/ButtonSizingStyle.css @@ -1,12 +1,21 @@ -.button-container { - display: flex; - justify-content: space-evenly; +.container { + justify-content: center; align-items: center; - margin-top: 20px; } -.container { - justify-content: center; +.size-grid { + display: flex; + flex-direction: column; + gap: 1.25rem; + padding: 1rem; +} + +.size-row { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + align-items: center; + justify-items: center; + gap: 1.5rem; } .size-small { diff --git a/samples/inputs/button/size/src/index.tsx b/samples/inputs/button/size/src/index.tsx index a454e6259c..b655a8d090 100644 --- a/samples/inputs/button/size/src/index.tsx +++ b/samples/inputs/button/size/src/index.tsx @@ -1,47 +1,60 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './ButtonSizingStyle.css'; -import { IgrButton, IgrRadio, IgrRadioGroup } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import { IgrButton, IgrIcon, IgrIconButton, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; -export default class ButtonSize extends React.Component { +const notificationsIcon = ''; +const addIcon = ''; - constructor(props: any) { - super(props); - this.onRadioChange = this.onRadioChange.bind(this); - this.state = { size: "medium"}; - } +const sizes = ['large', 'medium', 'small']; +const variants: any[] = ['contained', 'outlined', 'flat']; - public render(): JSX.Element { - return ( -
- - - Small - - - Medium - - - Large - - +export default function ButtonSize() { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + registerIconFromText('add', addIcon, 'material'); + }, []); -
- Flat - Contained - Outlined - Like -
-
- ); - } + return ( +
+
+ {sizes.map((size) => ( +
+ {variants.map((variant) => ( + + + {variant} + + + ))} + + + Floating Action + + +
+ ))} - public onRadioChange(e: any) { - if (e.detail.checked == true) { - this.setState({ size: e.detail.value }); - } - } + {sizes.map((size) => ( +
+ {variants.map((variant) => ( + + ))} + + + +
+ ))} +
+
+ ); } diff --git a/samples/inputs/button/states/.devcontainer/devcontainer.json b/samples/inputs/button/states/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/button/states/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/button/states/.eslintrc.js b/samples/inputs/button/states/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/button/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/states/README.md b/samples/inputs/button/states/README.md new file mode 100644 index 0000000000..026ad425da --- /dev/null +++ b/samples/inputs/button/states/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of States feature using [Button](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/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/states/index.html b/samples/inputs/button/states/index.html new file mode 100644 index 0000000000..3e8e1d0379 --- /dev/null +++ b/samples/inputs/button/states/index.html @@ -0,0 +1,11 @@ + + + + ButtonStates + + + +
+ + + diff --git a/samples/inputs/button/states/package.json b/samples/inputs/button/states/package.json new file mode 100644 index 0000000000..63d1867b4a --- /dev/null +++ b/samples/inputs/button/states/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-button-states", + "description": "This project provides example of Button 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/states/sandbox.config.json b/samples/inputs/button/states/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/button/states/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/button/states/src/index.css b/samples/inputs/button/states/src/index.css new file mode 100644 index 0000000000..fcf8002f65 --- /dev/null +++ b/samples/inputs/button/states/src/index.css @@ -0,0 +1,17 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.button-container { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + padding: 1.5rem; +} + +.button-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; +} diff --git a/samples/inputs/button/states/src/index.tsx b/samples/inputs/button/states/src/index.tsx new file mode 100644 index 0000000000..b37a3e618c --- /dev/null +++ b/samples/inputs/button/states/src/index.tsx @@ -0,0 +1,60 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrIcon, IgrIconButton, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; + +const notificationsIcon = ''; +const addIcon = ''; + +export default function ButtonStates() { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + registerIconFromText('add', addIcon, 'material'); + }, []); + + return ( +
+
+
+ + + Contained + + + +
+
+ + + Outlined + + + +
+
+ + + Flat + + + +
+
+ + + Floating Action + + + + + +
+
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button/states/tsconfig.json b/samples/inputs/button/states/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/button/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/states/vite.config.js b/samples/inputs/button/states/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/samples/inputs/button/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 + }, +}); diff --git a/samples/inputs/button/styling/src/ButtonStyle.css b/samples/inputs/button/styling/src/ButtonStyle.css index 8e9b561851..2a008a21bc 100644 --- a/samples/inputs/button/styling/src/ButtonStyle.css +++ b/samples/inputs/button/styling/src/ButtonStyle.css @@ -1,4 +1,66 @@ -igc-button::part(base) { - background-color: var(--ig-warn-700); - color: var(--ig-warn-700-contrast); +igc-button.confirm-button::part(base) { + background-color: #1275c4; + color: #ffffff; +} + +igc-button.send-button::part(base) { + border-color: #8a2be2; + color: #8a2be2; +} + +igc-button.send-button igc-icon { + color: #8a2be2; +} + +igc-button.cancel-button::part(base) { + color: #1275c4; +} + +igc-button.add-button::part(base) { + background-color: #4caf50; + color: #000000; + border-radius: 999px; +} + +igc-button.add-button igc-icon, +igc-button.fab-icon-button igc-icon { + color: #000000; +} + +igc-icon-button.edit-icon-button::part(base) { + background-color: #e8f5e9; + color: #2e7d32; + border-radius: 50%; +} + +igc-icon-button.edit-icon-button::part(icon) { + color: #2e7d32; +} + +igc-icon-button.print-icon-button::part(base) { + border-color: #9e9e9e; + color: #616161; + border-radius: 50%; +} + +igc-icon-button.print-icon-button::part(icon) { + color: #616161; +} + +igc-icon-button.close-icon-button::part(base) { + color: #e53935; + background-color: transparent; + border-radius: 50%; +} + +igc-icon-button.close-icon-button::part(icon) { + color: #e53935; +} + +igc-button.fab-icon-button::part(base) { + background-color: #039be5; + color: #000000; + border-radius: 50%; + aspect-ratio: 1; + padding: 0; } diff --git a/samples/inputs/button/styling/src/index.css b/samples/inputs/button/styling/src/index.css index 019bfa2d76..ee23f7a452 100644 --- a/samples/inputs/button/styling/src/index.css +++ b/samples/inputs/button/styling/src/index.css @@ -1,7 +1,22 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-button { - width: 40%; - margin: auto; -} \ No newline at end of file +.container { + justify-content: center; + align-items: center; +} + +.button-grid { + display: flex; + flex-direction: column; + gap: 1.5rem; + padding: 1rem; +} + +.button-row { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + align-items: center; + justify-items: center; + gap: 1.5rem; +} diff --git a/samples/inputs/button/styling/src/index.tsx b/samples/inputs/button/styling/src/index.tsx index 3840167aa0..2d911f180d 100644 --- a/samples/inputs/button/styling/src/index.tsx +++ b/samples/inputs/button/styling/src/index.tsx @@ -1,23 +1,50 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import './ButtonStyle.css'; -import { IgrButton } from 'igniteui-react'; +import { IgrButton, IgrIcon, IgrIconButton, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class ButtonStyling extends React.Component { +const icons = [ + { name: 'send', text: '' }, + { name: 'add', text: '' }, + { name: 'edit', text: '' }, + { name: 'print', text: '' }, + { name: 'close', text: '' } +]; - constructor(props: any) { - super(props); - } +export default function ButtonStyling() { + useEffect(() => { + icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material')); + }, []); - public render(): JSX.Element { - return ( -
- Contained + return ( +
+
+
+ Confirm + + + Send + + Cancel + + Add + + +
+ +
+ + + + + + +
- ); - } +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/button/tailwind-styling/.devcontainer/devcontainer.json b/samples/inputs/button/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/button/tailwind-styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/button/tailwind-styling/.eslintrc.js b/samples/inputs/button/tailwind-styling/.eslintrc.js new file mode 100644 index 0000000000..75a0e4251b --- /dev/null +++ b/samples/inputs/button/tailwind-styling/.eslintrc.js @@ -0,0 +1,31 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", + parserOptions: { + ecmaVersion: 2020, + sourceType: "module", + ecmaFeatures: { + jsx: true + } + }, + settings: { + react: { + version: "999.999.999" + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended" + ], + rules: { + "no-undef": "off", + "no-unused-vars": "off", + "prefer-const": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } +}; diff --git a/samples/inputs/button/tailwind-styling/README.md b/samples/inputs/button/tailwind-styling/README.md new file mode 100644 index 0000000000..3279dcc8f2 --- /dev/null +++ b/samples/inputs/button/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Button](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/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/tailwind-styling/index.html b/samples/inputs/button/tailwind-styling/index.html new file mode 100644 index 0000000000..5b35d0cdfb --- /dev/null +++ b/samples/inputs/button/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + ButtonTailwindStyling + + + +
+ + + diff --git a/samples/inputs/button/tailwind-styling/package.json b/samples/inputs/button/tailwind-styling/package.json new file mode 100644 index 0000000000..4db0e74b0e --- /dev/null +++ b/samples/inputs/button/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-button-tailwind-styling", + "description": "This project provides example of Button 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/tailwind-styling/sandbox.config.json b/samples/inputs/button/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/button/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/button/tailwind-styling/src/index.css b/samples/inputs/button/tailwind-styling/src/index.css new file mode 100644 index 0000000000..b11c12d4ac --- /dev/null +++ b/samples/inputs/button/tailwind-styling/src/index.css @@ -0,0 +1,89 @@ +/* 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); + +/* web component internals cannot be styled with Tailwind utilities, + because they live in the shadow DOM, so exposed CSS parts are used */ + +.button-grid { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + gap: 1.5rem; + padding: 1rem; +} + +.button-row { + display: grid; + grid-template-columns: repeat(4, 7rem); + align-items: center; + justify-items: center; + gap: 1.5rem; +} + +.confirm-button::part(base) { + background-color: var(--color-indigo-700); + color: var(--color-white); +} + +.send-button::part(base) { + border-color: var(--color-pink-600); + color: var(--color-pink-600); +} + +.send-button igc-icon { + color: var(--color-pink-600); +} + +.cancel-button::part(base) { + color: var(--color-amber-700); +} + +.add-button::part(base) { + background-color: var(--color-teal-500); + color: var(--color-black); + border-radius: 9999px; +} + +.edit-icon-button::part(base) { + background-color: var(--color-amber-50); + border-radius: var(--radius-full); +} + +.edit-icon-button::part(icon) { + color: var(--color-amber-700); +} + +.print-icon-button::part(base) { + border-color: var(--color-cyan-500); + border-radius: var(--radius-full); +} + +.print-icon-button::part(icon) { + color: var(--color-cyan-700); +} + +.close-icon-button::part(base) { + background-color: transparent; + border-radius: var(--radius-full); +} + +.close-icon-button::part(icon) { + color: var(--color-fuchsia-600); +} + +.fab-icon-button::part(base) { + background-color: var(--color-orange-500); + color: var(--color-black); + width: 3rem; + height: 3rem; + min-width: 3rem; + min-height: 3rem; + padding: 0; + border-radius: 50%; +} diff --git a/samples/inputs/button/tailwind-styling/src/index.tsx b/samples/inputs/button/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..d5d17fab9f --- /dev/null +++ b/samples/inputs/button/tailwind-styling/src/index.tsx @@ -0,0 +1,49 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrIcon, IgrIconButton, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const icons = [ + { name: 'send', text: '' }, + { name: 'add', text: '' }, + { name: 'edit', text: '' }, + { name: 'print', text: '' }, + { name: 'close', text: '' } +]; + +export default function ButtonTailwindStyling(): JSX.Element { + useEffect(() => { + icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material')); + }, []); + + return ( +
+
+ Confirm + + + Send + + Cancel + + Add + + +
+ +
+ + + + + + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button/tailwind-styling/tsconfig.json b/samples/inputs/button/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/button/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/tailwind-styling/vite.config.js b/samples/inputs/button/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..c1fff0c83c --- /dev/null +++ b/samples/inputs/button/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 + }, +});