From b5a51572e2b9246009a1e7c3375b45909bfa3090 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 2 Sep 2026 10:58:47 +0300 Subject: [PATCH 1/7] feat(switch): update samples content --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- .../inputs/switches/checking/src/index.css | 2 - .../inputs/switches/checking/src/index.tsx | 18 ---- .../inputs/switches/disabled/src/index.css | 28 +++++- .../inputs/switches/disabled/src/index.tsx | 17 +++- .../.devcontainer/devcontainer.json | 0 .../{checking => enabled}/.eslintrc.js | 0 samples/inputs/switches/enabled/README.md | 56 ++++++++++++ .../switches/{checking => enabled}/index.html | 2 +- .../{checking => enabled}/package.json | 4 +- .../{checking => enabled}/sandbox.config.json | 0 samples/inputs/switches/enabled/src/index.css | 30 +++++++ samples/inputs/switches/enabled/src/index.tsx | 45 ++++++++++ .../{checking => enabled}/tsconfig.json | 0 .../{checking => enabled}/vite.config.js | 0 .../switches/label/src/SwitchLabelStyles.css | 5 -- samples/inputs/switches/label/src/index.css | 2 - samples/inputs/switches/label/src/index.tsx | 22 ----- .../.devcontainer/devcontainer.json | 0 .../switches/{label => layout}/.eslintrc.js | 0 .../switches/{label => layout}/README.md | 8 +- .../switches/{label => layout}/index.html | 2 +- .../switches/{label => layout}/package.json | 4 +- .../{label => layout}/sandbox.config.json | 0 samples/inputs/switches/layout/src/index.css | 26 ++++++ samples/inputs/switches/layout/src/index.tsx | 31 +++++++ .../switches/{label => layout}/tsconfig.json | 0 .../switches/{label => layout}/vite.config.js | 0 .../inputs/switches/overview/src/index.css | 63 +++++++++++++- .../inputs/switches/overview/src/index.tsx | 30 ++++++- .../selected/.devcontainer/devcontainer.json | 4 + samples/inputs/switches/selected/.eslintrc.js | 75 ++++++++++++++++ .../switches/{checking => selected}/README.md | 8 +- samples/inputs/switches/selected/index.html | 11 +++ samples/inputs/switches/selected/package.json | 42 +++++++++ .../switches/selected/sandbox.config.json | 5 ++ .../inputs/switches/selected/src/index.css | 23 +++++ .../inputs/switches/selected/src/index.tsx | 34 ++++++++ .../inputs/switches/selected/tsconfig.json | 44 ++++++++++ .../inputs/switches/selected/vite.config.js | 12 +++ samples/inputs/switches/styling/src/index.css | 85 ++++++++++++++++--- samples/inputs/switches/styling/src/index.tsx | 22 ++++- .../.devcontainer/devcontainer.json | 4 + .../switches/tailwind-styling/.eslintrc.js | 75 ++++++++++++++++ .../switches/tailwind-styling/README.md | 56 ++++++++++++ .../switches/tailwind-styling/index.html | 11 +++ .../switches/tailwind-styling/package.json | 44 ++++++++++ .../tailwind-styling/sandbox.config.json | 5 ++ .../switches/tailwind-styling/src/index.css | 10 +++ .../switches/tailwind-styling/src/index.tsx | 43 ++++++++++ .../switches/tailwind-styling/tsconfig.json | 44 ++++++++++ .../switches/tailwind-styling/vite.config.js | 13 +++ 53 files changed, 984 insertions(+), 85 deletions(-) delete mode 100644 samples/inputs/switches/checking/src/index.css delete mode 100644 samples/inputs/switches/checking/src/index.tsx rename samples/inputs/switches/{checking => enabled}/.devcontainer/devcontainer.json (100%) rename samples/inputs/switches/{checking => enabled}/.eslintrc.js (100%) create mode 100644 samples/inputs/switches/enabled/README.md rename samples/inputs/switches/{checking => enabled}/index.html (88%) rename samples/inputs/switches/{checking => enabled}/package.json (87%) rename samples/inputs/switches/{checking => enabled}/sandbox.config.json (100%) create mode 100644 samples/inputs/switches/enabled/src/index.css create mode 100644 samples/inputs/switches/enabled/src/index.tsx rename samples/inputs/switches/{checking => enabled}/tsconfig.json (100%) rename samples/inputs/switches/{checking => enabled}/vite.config.js (100%) delete mode 100644 samples/inputs/switches/label/src/SwitchLabelStyles.css delete mode 100644 samples/inputs/switches/label/src/index.css delete mode 100644 samples/inputs/switches/label/src/index.tsx rename samples/inputs/switches/{label => layout}/.devcontainer/devcontainer.json (100%) rename samples/inputs/switches/{label => layout}/.eslintrc.js (100%) rename samples/inputs/switches/{label => layout}/README.md (86%) rename samples/inputs/switches/{label => layout}/index.html (88%) rename samples/inputs/switches/{label => layout}/package.json (87%) rename samples/inputs/switches/{label => layout}/sandbox.config.json (100%) create mode 100644 samples/inputs/switches/layout/src/index.css create mode 100644 samples/inputs/switches/layout/src/index.tsx rename samples/inputs/switches/{label => layout}/tsconfig.json (100%) rename samples/inputs/switches/{label => layout}/vite.config.js (100%) create mode 100644 samples/inputs/switches/selected/.devcontainer/devcontainer.json create mode 100644 samples/inputs/switches/selected/.eslintrc.js rename samples/inputs/switches/{checking => selected}/README.md (91%) create mode 100644 samples/inputs/switches/selected/index.html create mode 100644 samples/inputs/switches/selected/package.json create mode 100644 samples/inputs/switches/selected/sandbox.config.json create mode 100644 samples/inputs/switches/selected/src/index.css create mode 100644 samples/inputs/switches/selected/src/index.tsx create mode 100644 samples/inputs/switches/selected/tsconfig.json create mode 100644 samples/inputs/switches/selected/vite.config.js create mode 100644 samples/inputs/switches/tailwind-styling/.devcontainer/devcontainer.json create mode 100644 samples/inputs/switches/tailwind-styling/.eslintrc.js create mode 100644 samples/inputs/switches/tailwind-styling/README.md create mode 100644 samples/inputs/switches/tailwind-styling/index.html create mode 100644 samples/inputs/switches/tailwind-styling/package.json create mode 100644 samples/inputs/switches/tailwind-styling/sandbox.config.json create mode 100644 samples/inputs/switches/tailwind-styling/src/index.css create mode 100644 samples/inputs/switches/tailwind-styling/src/index.tsx create mode 100644 samples/inputs/switches/tailwind-styling/tsconfig.json create mode 100644 samples/inputs/switches/tailwind-styling/vite.config.js diff --git a/browser/public/meta.json b/browser/public/meta.json index b57b1e34c3..601e0e825e 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-20 10:35:10","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-02 10:55:40","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 b57b1e34c3..601e0e825e 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-20 10:35:10","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-02 10:55:40","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/switches/checking/src/index.css b/samples/inputs/switches/checking/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/inputs/switches/checking/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/switches/checking/src/index.tsx b/samples/inputs/switches/checking/src/index.tsx deleted file mode 100644 index 2c7125cc24..0000000000 --- a/samples/inputs/switches/checking/src/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrSwitch } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default function SwitchOutlined() { - - return ( -
- Label -
- ); -} - -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/inputs/switches/disabled/src/index.css b/samples/inputs/switches/disabled/src/index.css index 1f53b8aa05..5323658ee6 100644 --- a/samples/inputs/switches/disabled/src/index.css +++ b/samples/inputs/switches/disabled/src/index.css @@ -1,2 +1,26 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.states { + --variant-gap: 50px; + --label-gap: 20px; + + display: flex; + align-items: center; + gap: var(--variant-gap); + + & .states__variant { + display: flex; + align-items: center; + gap: var(--label-gap); + } + + & .states__label { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } +} \ No newline at end of file diff --git a/samples/inputs/switches/disabled/src/index.tsx b/samples/inputs/switches/disabled/src/index.tsx index 5ab9aa932f..965fccce97 100644 --- a/samples/inputs/switches/disabled/src/index.tsx +++ b/samples/inputs/switches/disabled/src/index.tsx @@ -2,13 +2,26 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrSwitch } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/material.css'; export default function SwitchDisabled() { return (
- +
+
+ Disabled Checked + + Power + +
+
+ Disabled Unchecked + + Power + +
+
); } diff --git a/samples/inputs/switches/checking/.devcontainer/devcontainer.json b/samples/inputs/switches/enabled/.devcontainer/devcontainer.json similarity index 100% rename from samples/inputs/switches/checking/.devcontainer/devcontainer.json rename to samples/inputs/switches/enabled/.devcontainer/devcontainer.json diff --git a/samples/inputs/switches/checking/.eslintrc.js b/samples/inputs/switches/enabled/.eslintrc.js similarity index 100% rename from samples/inputs/switches/checking/.eslintrc.js rename to samples/inputs/switches/enabled/.eslintrc.js diff --git a/samples/inputs/switches/enabled/README.md b/samples/inputs/switches/enabled/README.md new file mode 100644 index 0000000000..d2e32ff8a2 --- /dev/null +++ b/samples/inputs/switches/enabled/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Enabled feature using [Switches](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/switches/enabled +``` + +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/switches/checking/index.html b/samples/inputs/switches/enabled/index.html similarity index 88% rename from samples/inputs/switches/checking/index.html rename to samples/inputs/switches/enabled/index.html index 304d0bb440..d5f3c7421f 100644 --- a/samples/inputs/switches/checking/index.html +++ b/samples/inputs/switches/enabled/index.html @@ -1,7 +1,7 @@ - SwitchChecking + SwitchEnabled diff --git a/samples/inputs/switches/checking/package.json b/samples/inputs/switches/enabled/package.json similarity index 87% rename from samples/inputs/switches/checking/package.json rename to samples/inputs/switches/enabled/package.json index 035625c19a..0ee6989e41 100644 --- a/samples/inputs/switches/checking/package.json +++ b/samples/inputs/switches/enabled/package.json @@ -1,6 +1,6 @@ { - "name": "react-switch-checking", - "description": "This project provides example of Switch Checking using Infragistics React components", + "name": "react-switch-enabled", + "description": "This project provides example of Switch Enabled using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/switches/checking/sandbox.config.json b/samples/inputs/switches/enabled/sandbox.config.json similarity index 100% rename from samples/inputs/switches/checking/sandbox.config.json rename to samples/inputs/switches/enabled/sandbox.config.json diff --git a/samples/inputs/switches/enabled/src/index.css b/samples/inputs/switches/enabled/src/index.css new file mode 100644 index 0000000000..167ebca1e2 --- /dev/null +++ b/samples/inputs/switches/enabled/src/index.css @@ -0,0 +1,30 @@ +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.states { + display: grid; + grid-template-columns: repeat(4, auto); + align-items: center; + gap: 32px; + + & :is(.states__column, .states__row) { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } + + & .states__column { + text-align: center; + } + + & .states__row { + text-align: end; + } + + & igc-switch { + justify-self: center; + } +} diff --git a/samples/inputs/switches/enabled/src/index.tsx b/samples/inputs/switches/enabled/src/index.tsx new file mode 100644 index 0000000000..b8b92b1163 --- /dev/null +++ b/samples/inputs/switches/enabled/src/index.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrSwitch } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; + +export default function SwitchEnabled() { + + return ( +
+
+ + Hover + Focused + Focused & Hover + + Enabled / On + + Power + + + Power + + + Power + + + Enabled / Off + + Power + + + Power + + + Power + +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/switches/checking/tsconfig.json b/samples/inputs/switches/enabled/tsconfig.json similarity index 100% rename from samples/inputs/switches/checking/tsconfig.json rename to samples/inputs/switches/enabled/tsconfig.json diff --git a/samples/inputs/switches/checking/vite.config.js b/samples/inputs/switches/enabled/vite.config.js similarity index 100% rename from samples/inputs/switches/checking/vite.config.js rename to samples/inputs/switches/enabled/vite.config.js diff --git a/samples/inputs/switches/label/src/SwitchLabelStyles.css b/samples/inputs/switches/label/src/SwitchLabelStyles.css deleted file mode 100644 index 21bf881ab2..0000000000 --- a/samples/inputs/switches/label/src/SwitchLabelStyles.css +++ /dev/null @@ -1,5 +0,0 @@ -.wrapper { - display: flex; - align-items: center; - gap: 0.5rem; -} \ No newline at end of file diff --git a/samples/inputs/switches/label/src/index.css b/samples/inputs/switches/label/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/inputs/switches/label/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/switches/label/src/index.tsx b/samples/inputs/switches/label/src/index.tsx deleted file mode 100644 index 39ae73b8c9..0000000000 --- a/samples/inputs/switches/label/src/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import './SwitchLabelStyles.css'; -import { IgrSwitch } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default function SwitchLabel() { - - return ( -
- Label -
- Label -
-
- ); -} - -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/inputs/switches/label/.devcontainer/devcontainer.json b/samples/inputs/switches/layout/.devcontainer/devcontainer.json similarity index 100% rename from samples/inputs/switches/label/.devcontainer/devcontainer.json rename to samples/inputs/switches/layout/.devcontainer/devcontainer.json diff --git a/samples/inputs/switches/label/.eslintrc.js b/samples/inputs/switches/layout/.eslintrc.js similarity index 100% rename from samples/inputs/switches/label/.eslintrc.js rename to samples/inputs/switches/layout/.eslintrc.js diff --git a/samples/inputs/switches/label/README.md b/samples/inputs/switches/layout/README.md similarity index 86% rename from samples/inputs/switches/label/README.md rename to samples/inputs/switches/layout/README.md index 7dbefe7c58..f8eedc8414 100644 --- a/samples/inputs/switches/label/README.md +++ b/samples/inputs/switches/layout/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Label feature using [Switches](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 Layout feature using [Switches](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Label f View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git git checkout master cd ./igniteui-react-examples -cd ./samples/inputs/switches/label +cd ./samples/inputs/switches/layout ``` open above folder in VS Code or type: diff --git a/samples/inputs/switches/label/index.html b/samples/inputs/switches/layout/index.html similarity index 88% rename from samples/inputs/switches/label/index.html rename to samples/inputs/switches/layout/index.html index a5c362fa44..4ae350158f 100644 --- a/samples/inputs/switches/label/index.html +++ b/samples/inputs/switches/layout/index.html @@ -1,7 +1,7 @@ - SwitchLabel + SwitchLayout diff --git a/samples/inputs/switches/label/package.json b/samples/inputs/switches/layout/package.json similarity index 87% rename from samples/inputs/switches/label/package.json rename to samples/inputs/switches/layout/package.json index ca7e54766a..41ccf6d2c2 100644 --- a/samples/inputs/switches/label/package.json +++ b/samples/inputs/switches/layout/package.json @@ -1,6 +1,6 @@ { - "name": "react-switch-label", - "description": "This project provides example of Switch Label using Infragistics React components", + "name": "react-switch-layout", + "description": "This project provides example of Switch Layout using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/switches/label/sandbox.config.json b/samples/inputs/switches/layout/sandbox.config.json similarity index 100% rename from samples/inputs/switches/label/sandbox.config.json rename to samples/inputs/switches/layout/sandbox.config.json diff --git a/samples/inputs/switches/layout/src/index.css b/samples/inputs/switches/layout/src/index.css new file mode 100644 index 0000000000..fc4b13cabc --- /dev/null +++ b/samples/inputs/switches/layout/src/index.css @@ -0,0 +1,26 @@ +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.variants { + --variant-gap: 50px; + --label-gap: 20px; + + display: flex; + align-items: center; + gap: var(--variant-gap); + + & .variants__item { + display: flex; + align-items: center; + gap: var(--label-gap); + } + + & .variants__label { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } +} diff --git a/samples/inputs/switches/layout/src/index.tsx b/samples/inputs/switches/layout/src/index.tsx new file mode 100644 index 0000000000..ae8c7ab627 --- /dev/null +++ b/samples/inputs/switches/layout/src/index.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrSwitch } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; + +export default function SwitchLayout() { + + return ( +
+
+
+ Label Before + + Power + +
+
+ Label After + + Power + +
+
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/switches/label/tsconfig.json b/samples/inputs/switches/layout/tsconfig.json similarity index 100% rename from samples/inputs/switches/label/tsconfig.json rename to samples/inputs/switches/layout/tsconfig.json diff --git a/samples/inputs/switches/label/vite.config.js b/samples/inputs/switches/layout/vite.config.js similarity index 100% rename from samples/inputs/switches/label/vite.config.js rename to samples/inputs/switches/layout/vite.config.js diff --git a/samples/inputs/switches/overview/src/index.css b/samples/inputs/switches/overview/src/index.css index 1f53b8aa05..f4dc4f90a5 100644 --- a/samples/inputs/switches/overview/src/index.css +++ b/samples/inputs/switches/overview/src/index.css @@ -1,2 +1,63 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.notifications { + inline-size: 100%; + max-inline-size: 384px; + background: var(--ig-surface-500); + border-radius: 4px; + overflow: hidden; + + & .notifications__title { + margin: 0; + padding: 16px; + font: 400 10px / 16px "Titillium Web", sans-serif; + letter-spacing: 1.5px; + text-transform: uppercase; + color: var(--ig-secondary-500); + } + + & .notifications__row { + padding-block: 12px; + padding-inline: 16px; + + &:first-of-type { + background: var(--ig-gray-100); + } + + & igc-switch { + display: block; + inline-size: 100%; + + &::part(base) { + inline-size: 100%; + justify-content: space-between; + gap: 16px; + } + } + } +} + +.option { + display: flex; + flex-direction: column; + gap: 2px; + text-align: start; + white-space: normal; + + & .option__label { + font-size: 16px; + color: var(--ig-gray-900); + } + + & .option__hint { + font-size: 13px; + color: var(--ig-gray-700); + } +} \ No newline at end of file diff --git a/samples/inputs/switches/overview/src/index.tsx b/samples/inputs/switches/overview/src/index.tsx index ea33b4c482..97a77d8709 100644 --- a/samples/inputs/switches/overview/src/index.tsx +++ b/samples/inputs/switches/overview/src/index.tsx @@ -2,13 +2,39 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrSwitch } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/material.css'; export default function SwitchOverview() { return (
- +
+
Notifications
+
+ + + Push notifications + Deliver alerts to this device + + +
+
+ + + Weekly digest + Summary email every Monday + + +
+
+ + + SMS alerts + Unavailable on your plan + + +
+
); } diff --git a/samples/inputs/switches/selected/.devcontainer/devcontainer.json b/samples/inputs/switches/selected/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/switches/selected/.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/switches/selected/.eslintrc.js b/samples/inputs/switches/selected/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/switches/selected/.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/switches/checking/README.md b/samples/inputs/switches/selected/README.md similarity index 91% rename from samples/inputs/switches/checking/README.md rename to samples/inputs/switches/selected/README.md index b8edb447c9..5895b10d6c 100644 --- a/samples/inputs/switches/checking/README.md +++ b/samples/inputs/switches/selected/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Checking feature using [Switches](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 Selected feature using [Switches](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Checkin View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git git checkout master cd ./igniteui-react-examples -cd ./samples/inputs/switches/checking +cd ./samples/inputs/switches/selected ``` open above folder in VS Code or type: diff --git a/samples/inputs/switches/selected/index.html b/samples/inputs/switches/selected/index.html new file mode 100644 index 0000000000..8450fca17b --- /dev/null +++ b/samples/inputs/switches/selected/index.html @@ -0,0 +1,11 @@ + + + + SwitchSelected + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/switches/selected/package.json b/samples/inputs/switches/selected/package.json new file mode 100644 index 0000000000..e697c1bedf --- /dev/null +++ b/samples/inputs/switches/selected/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-switch-selected", + "description": "This project provides example of Switch Selected 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/switches/selected/sandbox.config.json b/samples/inputs/switches/selected/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/switches/selected/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/switches/selected/src/index.css b/samples/inputs/switches/selected/src/index.css new file mode 100644 index 0000000000..1be1dcaeb9 --- /dev/null +++ b/samples/inputs/switches/selected/src/index.css @@ -0,0 +1,23 @@ +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.states { + display: grid; + grid-template-columns: repeat(3, auto); + align-items: center; + gap: 32px; + + & .states__row { + text-align: end; + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } + + & .states__disabled { + margin-inline-start: 16px; + } +} diff --git a/samples/inputs/switches/selected/src/index.tsx b/samples/inputs/switches/selected/src/index.tsx new file mode 100644 index 0000000000..705083b3a2 --- /dev/null +++ b/samples/inputs/switches/selected/src/index.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrSwitch } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; + +export default function SwitchSelected() { + + return ( +
+
+ On + + Power + + + Power + + + Off + + Power + + + Power + +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/switches/selected/tsconfig.json b/samples/inputs/switches/selected/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/switches/selected/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/switches/selected/vite.config.js b/samples/inputs/switches/selected/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/switches/selected/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/switches/styling/src/index.css b/samples/inputs/switches/styling/src/index.css index fc42274b5e..c0acc933a5 100644 --- a/samples/inputs/switches/styling/src/index.css +++ b/samples/inputs/switches/styling/src/index.css @@ -1,10 +1,75 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - - igc-switch { - --thumb-on-color: white; - --thumb-off-color: var(--ig-success-500); - --track-on-color: var(--ig-success-500); /* Background color when checked */ - --track-off-color: white; /* Background color when unchecked */ - --track-on-hover-color: var(--ig-success-500); /* Background hover color when checked */ - } +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.security { + inline-size: 100%; + max-inline-size: 372px; + background: var(--ig-surface-500); + border-radius: 4px; + box-shadow: 0 1px 3px rgb(0 0 0 / 12%); + overflow: hidden; + + & .security__header { + padding: 16px; + border-block-end: 1px solid var(--ig-gray-300); + + & igc-switch { + display: block; + inline-size: 100%; + --track-on-color: var(--ig-primary-200); + --track-on-hover-color: var(--ig-primary-200); + --thumb-on-color: var(--ig-primary-400); + --thumb-on-hover-color: var(--ig-primary-400); + + &::part(base) { + inline-size: 100%; + justify-content: space-between; + gap: 16px; + } + } + } + + & .security__body { + padding: 16px; + + & igc-radio-group { + gap: 8px; + } + + & igc-radio { + font: 600 12px / 16px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.15px; + color: var(--ig-primary-900); + + &::part(control) { + --fill-color: var(--ig-primary-500); + --fill-color-border: var(--ig-primary-500); + --fill-color-hover: var(--ig-primary-500); + --fill-hover-border-color: var(--ig-primary-500); + } + } + } +} + +.option { + display: flex; + flex-direction: column; + gap: 2px; + text-align: start; + white-space: normal; + + & .option__label { + font: 600 16px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.15px; + color: var(--ig-gray-700); + } + + & .option__hint { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } +} diff --git a/samples/inputs/switches/styling/src/index.tsx b/samples/inputs/switches/styling/src/index.tsx index db4492f79e..73a2da75af 100644 --- a/samples/inputs/switches/styling/src/index.tsx +++ b/samples/inputs/switches/styling/src/index.tsx @@ -1,14 +1,30 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrSwitch } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import { IgrSwitch, IgrRadio, IgrRadioGroup } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; export default function SwitchStyling() { return (
- Label +
+
+ + + Two-factor authentication + Extra sign-in verification + + +
+
+ + Authenticator app + Security key + Backup codes + +
+
); } diff --git a/samples/inputs/switches/tailwind-styling/.devcontainer/devcontainer.json b/samples/inputs/switches/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/switches/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/switches/tailwind-styling/.eslintrc.js b/samples/inputs/switches/tailwind-styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/switches/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/switches/tailwind-styling/README.md b/samples/inputs/switches/tailwind-styling/README.md new file mode 100644 index 0000000000..f46ca8e656 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Switches](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/switches/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/switches/tailwind-styling/index.html b/samples/inputs/switches/tailwind-styling/index.html new file mode 100644 index 0000000000..c0a13703ee --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + SwitchTailwindStyling + + + +
+ + + diff --git a/samples/inputs/switches/tailwind-styling/package.json b/samples/inputs/switches/tailwind-styling/package.json new file mode 100644 index 0000000000..f5c00e039d --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-switch-tailwind-styling", + "description": "This project provides example of Switch 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/switches/tailwind-styling/sandbox.config.json b/samples/inputs/switches/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/switches/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/switches/tailwind-styling/src/index.css b/samples/inputs/switches/tailwind-styling/src/index.css new file mode 100644 index 0000000000..5bb5821f6d --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/src/index.css @@ -0,0 +1,10 @@ +@layer theme, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} diff --git a/samples/inputs/switches/tailwind-styling/src/index.tsx b/samples/inputs/switches/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..24decf643c --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/src/index.tsx @@ -0,0 +1,43 @@ +import React, { useEffect, useState } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrSwitch, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; + +const darkModeIcon = + ''; + +export default function SwitchTailwindStyling(): JSX.Element { + const [isDarkMode, setIsDarkMode] = useState(true); + + useEffect(() => { + registerIconFromText('dark_mode', darkModeIcon, 'material'); + }, []); + + return ( +
+
+
+ Dashboard + setIsDarkMode((current) => !current)} className="[--track-on-color:var(--color-blue-500)] [--track-off-color:var(--color-slate-600)] [--thumb-on-color:var(--color-white)] [--thumb-off-color:var(--color-slate-300)] [--track-on-hover-color:var(--color-blue-600)]"> + + + Dark mode + + +
+
+
Revenue overview
+

+ $84,290 this month, up 12% from July.
+ Your top-performing channel is Direct, driving 41% of total revenue. +

+
+
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/switches/tailwind-styling/tsconfig.json b/samples/inputs/switches/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/switches/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/switches/tailwind-styling/vite.config.js b/samples/inputs/switches/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..663868e022 --- /dev/null +++ b/samples/inputs/switches/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 f1218726c1909e216a74c9e746e318aca6ac5342 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 2 Sep 2026 11:14:25 +0300 Subject: [PATCH 2/7] fix(switch): update css content --- samples/inputs/switches/disabled/src/index.css | 3 +++ samples/inputs/switches/enabled/src/index.css | 3 +++ samples/inputs/switches/layout/src/index.css | 3 +++ samples/inputs/switches/selected/src/index.css | 3 +++ samples/inputs/switches/styling/src/index.css | 3 +++ samples/inputs/switches/tailwind-styling/src/index.css | 3 +++ 6 files changed, 18 insertions(+) diff --git a/samples/inputs/switches/disabled/src/index.css b/samples/inputs/switches/disabled/src/index.css index 5323658ee6..bc7de5815e 100644 --- a/samples/inputs/switches/disabled/src/index.css +++ b/samples/inputs/switches/disabled/src/index.css @@ -1,3 +1,6 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + .container.sample { display: flex; place-content: center; diff --git a/samples/inputs/switches/enabled/src/index.css b/samples/inputs/switches/enabled/src/index.css index 167ebca1e2..379ecd447f 100644 --- a/samples/inputs/switches/enabled/src/index.css +++ b/samples/inputs/switches/enabled/src/index.css @@ -1,3 +1,6 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + .container.sample { display: flex; place-content: center; diff --git a/samples/inputs/switches/layout/src/index.css b/samples/inputs/switches/layout/src/index.css index fc4b13cabc..e74b420e2f 100644 --- a/samples/inputs/switches/layout/src/index.css +++ b/samples/inputs/switches/layout/src/index.css @@ -1,3 +1,6 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + .container.sample { display: flex; place-content: center; diff --git a/samples/inputs/switches/selected/src/index.css b/samples/inputs/switches/selected/src/index.css index 1be1dcaeb9..32f67af851 100644 --- a/samples/inputs/switches/selected/src/index.css +++ b/samples/inputs/switches/selected/src/index.css @@ -1,3 +1,6 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + .container.sample { display: flex; place-content: center; diff --git a/samples/inputs/switches/styling/src/index.css b/samples/inputs/switches/styling/src/index.css index c0acc933a5..5c25b476c2 100644 --- a/samples/inputs/switches/styling/src/index.css +++ b/samples/inputs/switches/styling/src/index.css @@ -1,3 +1,6 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + .container.sample { display: flex; place-content: center; diff --git a/samples/inputs/switches/tailwind-styling/src/index.css b/samples/inputs/switches/tailwind-styling/src/index.css index 5bb5821f6d..a2d8ae7117 100644 --- a/samples/inputs/switches/tailwind-styling/src/index.css +++ b/samples/inputs/switches/tailwind-styling/src/index.css @@ -1,3 +1,6 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + @layer theme, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); From 396188bec12f51e2f8520958fff9fa8ee095ef14 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 2 Sep 2026 15:12:04 +0300 Subject: [PATCH 3/7] fix(switch): update samples styling --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- .../inputs/switches/disabled/src/index.css | 4 +- samples/inputs/switches/layout/src/index.css | 4 +- .../inputs/switches/overview/src/index.css | 4 - samples/inputs/switches/styling/src/index.css | 78 ++++++++++++------- samples/inputs/switches/styling/src/index.tsx | 38 ++++----- .../switches/tailwind-styling/src/index.css | 2 + .../switches/tailwind-styling/src/index.tsx | 14 ++-- 9 files changed, 83 insertions(+), 65 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index 601e0e825e..110edad2a7 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-02 10:55:40","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-02 15:09:41","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 601e0e825e..110edad2a7 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-02 10:55:40","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-02 15:09:41","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/switches/disabled/src/index.css b/samples/inputs/switches/disabled/src/index.css index bc7de5815e..b808c875fa 100644 --- a/samples/inputs/switches/disabled/src/index.css +++ b/samples/inputs/switches/disabled/src/index.css @@ -8,8 +8,8 @@ } .states { - --variant-gap: 50px; - --label-gap: 20px; + --variant-gap: 60px; + --label-gap: 30px; display: flex; align-items: center; diff --git a/samples/inputs/switches/layout/src/index.css b/samples/inputs/switches/layout/src/index.css index e74b420e2f..3b71591b7c 100644 --- a/samples/inputs/switches/layout/src/index.css +++ b/samples/inputs/switches/layout/src/index.css @@ -8,8 +8,8 @@ } .variants { - --variant-gap: 50px; - --label-gap: 20px; + --variant-gap: 60px; + --label-gap: 30px; display: flex; align-items: center; diff --git a/samples/inputs/switches/overview/src/index.css b/samples/inputs/switches/overview/src/index.css index f4dc4f90a5..852c9291fb 100644 --- a/samples/inputs/switches/overview/src/index.css +++ b/samples/inputs/switches/overview/src/index.css @@ -27,10 +27,6 @@ padding-block: 12px; padding-inline: 16px; - &:first-of-type { - background: var(--ig-gray-100); - } - & igc-switch { display: block; inline-size: 100%; diff --git a/samples/inputs/switches/styling/src/index.css b/samples/inputs/switches/styling/src/index.css index 5c25b476c2..8b1c9057b5 100644 --- a/samples/inputs/switches/styling/src/index.css +++ b/samples/inputs/switches/styling/src/index.css @@ -8,51 +8,69 @@ } .security { + display: block; inline-size: 100%; - max-inline-size: 372px; + max-inline-size: 348px; background: var(--ig-surface-500); - border-radius: 4px; + border: 1px solid var(--ig-gray-300); + border-radius: 16px; box-shadow: 0 1px 3px rgb(0 0 0 / 12%); overflow: hidden; - & .security__header { + &::part(header) { padding: 16px; + gap: 16px; + } + + &[open]::part(header) { border-block-end: 1px solid var(--ig-gray-300); + } - & igc-switch { - display: block; - inline-size: 100%; - --track-on-color: var(--ig-primary-200); - --track-on-hover-color: var(--ig-primary-200); - --thumb-on-color: var(--ig-primary-400); - --thumb-on-hover-color: var(--ig-primary-400); + &::part(indicator) { + transform: none; + } - &::part(base) { - inline-size: 100%; - justify-content: space-between; - gap: 16px; - } - } + &::part(content) { + padding-left: 5px; } - & .security__body { - padding: 16px; + & igc-switch { + display: block; + inline-size: 44px; + block-size: 24px; + --track-on-color: var(--ig-primary-200); + --track-on-hover-color: var(--ig-primary-200); + --thumb-on-color: var(--ig-primary-400); + --thumb-on-hover-color: var(--ig-primary-400); - & igc-radio-group { - gap: 8px; + &::part(base) { + inline-size: 44px; + block-size: 24px; + overflow: visible; } - & igc-radio { - font: 600 12px / 16px "Aktiv Grotesk", sans-serif; - letter-spacing: 0.15px; - color: var(--ig-primary-900); + &::part(control) { + overflow: visible; + } + } + + & igc-radio-group { + display: flex; + flex-direction: column; + gap: 8px; + margin-inline-start: -14px; + } + + & igc-radio { + font: 600 12px / 16px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.15px; + color: var(--ig-primary-900); - &::part(control) { - --fill-color: var(--ig-primary-500); - --fill-color-border: var(--ig-primary-500); - --fill-color-hover: var(--ig-primary-500); - --fill-hover-border-color: var(--ig-primary-500); - } + &::part(control) { + --fill-color: var(--ig-primary-500); + --fill-color-border: var(--ig-primary-500); + --fill-color-hover: var(--ig-primary-500); + --fill-hover-border-color: var(--ig-primary-500); } } } diff --git a/samples/inputs/switches/styling/src/index.tsx b/samples/inputs/switches/styling/src/index.tsx index 73a2da75af..bd8ae8f165 100644 --- a/samples/inputs/switches/styling/src/index.tsx +++ b/samples/inputs/switches/styling/src/index.tsx @@ -1,30 +1,32 @@ -import React from 'react'; +import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrSwitch, IgrRadio, IgrRadioGroup } from 'igniteui-react'; +import { IgrSwitch, IgrRadio, IgrRadioGroup, IgrExpansionPanel } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; export default function SwitchStyling() { + const [open, setOpen] = useState(true); return (
-
-
- - - Two-factor authentication - Extra sign-in verification - - + {/* a click on the switch bubbles up to the panel header, so only the open state has to be mirrored back */} + setOpen(true)} + onClosed={() => setOpen(false)}> +
+ Two-factor authentication + Extra sign-in verification
-
- - Authenticator app - Security key - Backup codes - -
-
+ + + Authenticator app + Security key + Backup codes + +
); } diff --git a/samples/inputs/switches/tailwind-styling/src/index.css b/samples/inputs/switches/tailwind-styling/src/index.css index a2d8ae7117..48aba56acb 100644 --- a/samples/inputs/switches/tailwind-styling/src/index.css +++ b/samples/inputs/switches/tailwind-styling/src/index.css @@ -6,6 +6,8 @@ @import "tailwindcss/utilities.css" layer(utilities); @source "./index.tsx"; +@custom-variant dark (&:where(.dark, .dark *)); + .container.sample { display: flex; place-content: center; diff --git a/samples/inputs/switches/tailwind-styling/src/index.tsx b/samples/inputs/switches/tailwind-styling/src/index.tsx index 24decf643c..826fa6effb 100644 --- a/samples/inputs/switches/tailwind-styling/src/index.tsx +++ b/samples/inputs/switches/tailwind-styling/src/index.tsx @@ -16,19 +16,19 @@ export default function SwitchTailwindStyling(): JSX.Element { return (
-
-
- Dashboard +
+
+ Dashboard setIsDarkMode((current) => !current)} className="[--track-on-color:var(--color-blue-500)] [--track-off-color:var(--color-slate-600)] [--thumb-on-color:var(--color-white)] [--thumb-off-color:var(--color-slate-300)] [--track-on-hover-color:var(--color-blue-600)]"> - + Dark mode
-
-
Revenue overview
-

+

+
Revenue overview
+

$84,290 this month, up 12% from July.
Your top-performing channel is Direct, driving 41% of total revenue.

From 679bbc441e076acadf45721e235ebe8ba38d01ef Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 2 Sep 2026 17:27:19 +0300 Subject: [PATCH 4/7] fix(switch): update styling sample --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/switches/styling/src/index.css | 5 +++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index 110edad2a7..c77cb91223 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-02 15:09:41","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-02 17:25: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 110edad2a7..c77cb91223 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-02 15:09:41","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-02 17:25:48","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/switches/styling/src/index.css b/samples/inputs/switches/styling/src/index.css index 8b1c9057b5..a7f8bff9b5 100644 --- a/samples/inputs/switches/styling/src/index.css +++ b/samples/inputs/switches/styling/src/index.css @@ -36,15 +36,16 @@ & igc-switch { display: block; - inline-size: 44px; + inline-size: 43px; block-size: 24px; + transform: translateX(2px); --track-on-color: var(--ig-primary-200); --track-on-hover-color: var(--ig-primary-200); --thumb-on-color: var(--ig-primary-400); --thumb-on-hover-color: var(--ig-primary-400); &::part(base) { - inline-size: 44px; + inline-size: 43px; block-size: 24px; overflow: visible; } From 14d9d1e3e341e11ed44524105c2bbfaa351eafcc Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 3 Sep 2026 11:47:17 +0300 Subject: [PATCH 5/7] fix(switch): fix switch hover --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/switches/styling/src/index.css | 12 +++++++----- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index c77cb91223..5d600aa8f4 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-02 17:25:48","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-03 11:44: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 c77cb91223..5d600aa8f4 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-02 17:25:48","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-03 11:44:01","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/switches/styling/src/index.css b/samples/inputs/switches/styling/src/index.css index a7f8bff9b5..e9d8e74aa3 100644 --- a/samples/inputs/switches/styling/src/index.css +++ b/samples/inputs/switches/styling/src/index.css @@ -19,6 +19,7 @@ &::part(header) { padding: 16px; + padding-inline-end: 6px; gap: 16px; } @@ -36,17 +37,18 @@ & igc-switch { display: block; - inline-size: 43px; - block-size: 24px; - transform: translateX(2px); + inline-size: 60px; + block-size: 40px; --track-on-color: var(--ig-primary-200); --track-on-hover-color: var(--ig-primary-200); --thumb-on-color: var(--ig-primary-400); --thumb-on-hover-color: var(--ig-primary-400); &::part(base) { - inline-size: 43px; - block-size: 24px; + inline-size: 60px; + block-size: 40px; + justify-content: center; + align-items: center; overflow: visible; } From c4eb6fbc18edd0110347fd28332f5d589e76b94b Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 10 Sep 2026 17:38:11 +0300 Subject: [PATCH 6/7] fix(switch): update theme to bootstrap --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/switches/disabled/src/index.tsx | 2 +- samples/inputs/switches/enabled/src/index.tsx | 2 +- samples/inputs/switches/layout/src/index.tsx | 2 +- samples/inputs/switches/overview/src/index.tsx | 2 +- samples/inputs/switches/selected/src/index.tsx | 2 +- samples/inputs/switches/styling/src/index.tsx | 2 +- samples/inputs/switches/tailwind-styling/src/index.tsx | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index 5d600aa8f4..a538535ee1 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-03 11:44:01","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-10 17:12:52","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 5d600aa8f4..a538535ee1 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-03 11:44:01","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-10 17:12:52","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/switches/disabled/src/index.tsx b/samples/inputs/switches/disabled/src/index.tsx index 965fccce97..b4df9c15de 100644 --- a/samples/inputs/switches/disabled/src/index.tsx +++ b/samples/inputs/switches/disabled/src/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrSwitch } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function SwitchDisabled() { diff --git a/samples/inputs/switches/enabled/src/index.tsx b/samples/inputs/switches/enabled/src/index.tsx index b8b92b1163..24bf4a3151 100644 --- a/samples/inputs/switches/enabled/src/index.tsx +++ b/samples/inputs/switches/enabled/src/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrSwitch } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function SwitchEnabled() { diff --git a/samples/inputs/switches/layout/src/index.tsx b/samples/inputs/switches/layout/src/index.tsx index ae8c7ab627..6625efd335 100644 --- a/samples/inputs/switches/layout/src/index.tsx +++ b/samples/inputs/switches/layout/src/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrSwitch } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function SwitchLayout() { diff --git a/samples/inputs/switches/overview/src/index.tsx b/samples/inputs/switches/overview/src/index.tsx index 97a77d8709..4e73359bc9 100644 --- a/samples/inputs/switches/overview/src/index.tsx +++ b/samples/inputs/switches/overview/src/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrSwitch } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function SwitchOverview() { diff --git a/samples/inputs/switches/selected/src/index.tsx b/samples/inputs/switches/selected/src/index.tsx index 705083b3a2..89a8b56136 100644 --- a/samples/inputs/switches/selected/src/index.tsx +++ b/samples/inputs/switches/selected/src/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrSwitch } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function SwitchSelected() { diff --git a/samples/inputs/switches/styling/src/index.tsx b/samples/inputs/switches/styling/src/index.tsx index bd8ae8f165..0674c6726e 100644 --- a/samples/inputs/switches/styling/src/index.tsx +++ b/samples/inputs/switches/styling/src/index.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrSwitch, IgrRadio, IgrRadioGroup, IgrExpansionPanel } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function SwitchStyling() { const [open, setOpen] = useState(true); diff --git a/samples/inputs/switches/tailwind-styling/src/index.tsx b/samples/inputs/switches/tailwind-styling/src/index.tsx index 826fa6effb..e82673e757 100644 --- a/samples/inputs/switches/tailwind-styling/src/index.tsx +++ b/samples/inputs/switches/tailwind-styling/src/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrSwitch, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; const darkModeIcon = ''; From 604b7998a25ba9b728c971ae5e601a42406a0c00 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Fri, 11 Sep 2026 12:32:59 +0300 Subject: [PATCH 7/7] fix(switch): update styling sample --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/switches/overview/src/index.css | 2 +- samples/inputs/switches/styling/src/index.css | 13 +++++++------ 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index a538535ee1..a481a7f9a1 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-10 17:12:52","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-10 00:01:40","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 a538535ee1..a481a7f9a1 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-10 17:12:52","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-10 00:01:40","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/switches/overview/src/index.css b/samples/inputs/switches/overview/src/index.css index 852c9291fb..38aea371df 100644 --- a/samples/inputs/switches/overview/src/index.css +++ b/samples/inputs/switches/overview/src/index.css @@ -20,7 +20,7 @@ font: 400 10px / 16px "Titillium Web", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; - color: var(--ig-secondary-500); + color: var(--ig-primary-500); } & .notifications__row { diff --git a/samples/inputs/switches/styling/src/index.css b/samples/inputs/switches/styling/src/index.css index e9d8e74aa3..66e5527723 100644 --- a/samples/inputs/switches/styling/src/index.css +++ b/samples/inputs/switches/styling/src/index.css @@ -39,10 +39,6 @@ display: block; inline-size: 60px; block-size: 40px; - --track-on-color: var(--ig-primary-200); - --track-on-hover-color: var(--ig-primary-200); - --thumb-on-color: var(--ig-primary-400); - --thumb-on-hover-color: var(--ig-primary-400); &::part(base) { inline-size: 60px; @@ -60,8 +56,8 @@ & igc-radio-group { display: flex; flex-direction: column; - gap: 8px; - margin-inline-start: -14px; + gap: 24px; + margin-inline-start: 0; } & igc-radio { @@ -69,7 +65,12 @@ letter-spacing: 0.15px; color: var(--ig-primary-900); + &::part(label) { + padding-inline-start: 4px; + } + &::part(control) { + transform: translateX(-4px); --fill-color: var(--ig-primary-500); --fill-color-border: var(--ig-primary-500); --fill-color-hover: var(--ig-primary-500);