Skip to content

feat(switch): update samples content #1102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Hristo313 wants to merge 8 commits into
base: vnext
Choose a base branch
from
Open

feat(switch): update samples content #1102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b5a5157
feat(switch): update samples content
Hristo313 Sep 2, 2026
f121872
fix(switch): update css content
Hristo313 Sep 2, 2026
396188b
fix(switch): update samples styling
Hristo313 Sep 2, 2026
679bbc4
fix(switch): update styling sample
Hristo313 Sep 2, 2026
14d9d1e
fix(switch): fix switch hover
Hristo313 Sep 3, 2026
c4eb6fb
fix(switch): update theme to bootstrap
Hristo313 Sep 10, 2026
604b799
fix(switch): update styling sample
Hristo313 Sep 11, 2026
d3f50b9
Merge branch 'vnext' into hhristov/update-switch-samples
Hristo313 Sep 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion browser/public/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"version":"23.2.915","date":"2026-09-04 17:02:55","note":"this file is auto-generated"}
{"version":"23.2.915","date":"2026-09-10 00:01:40","note":"this file is auto-generated"}
2 changes: 1 addition & 1 deletion browser/src/navigation/SamplesBrowser.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"version":"23.2.915","date":"2026-09-04 17:02:55","note":"this file is auto-generated"}
{"version":"23.2.915","date":"2026-09-10 00:01:40","note":"this file is auto-generated"}
2 changes: 0 additions & 2 deletions samples/inputs/switches/checking/src/index.css
View file
Open in desktop

This file was deleted.

18 changes: 0 additions & 18 deletions samples/inputs/switches/checking/src/index.tsx
View file
Open in desktop

This file was deleted.

29 changes: 28 additions & 1 deletion samples/inputs/switches/disabled/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,29 @@
/* shared styles are loaded from: */
/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
/* https://dl.infragistics.com/x/css/samples/shared.v8.css */

.container.sample {
display: flex;
place-content: center;
place-items: center;
}

.states {
--variant-gap: 60px;
--label-gap: 30px;

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);
}
}
15 changes: 14 additions & 1 deletion samples/inputs/switches/disabled/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,20 @@ export default function SwitchDisabled() {

return (
<div className="container sample">
<IgrSwitch disabled={true} />
<div className="states">
<div className="states__variant">
<span className="states__label">Disabled Checked</span>
<IgrSwitch labelPosition="before" disabled={true} checked={true}>
<span>Power</span>
</IgrSwitch>
</div>
<div className="states__variant">
<span className="states__label">Disabled Unchecked</span>
<IgrSwitch labelPosition="before" disabled={true}>
<span>Power</span>
</IgrSwitch>
</div>
</div>
</div>
);
}
Expand Down
0 .../checking/.devcontainer/devcontainer.json → ...s/enabled/.devcontainer/devcontainer.json
View file
Open in desktop
File renamed without changes.
0 ...les/inputs/switches/checking/.eslintrc.js → samples/inputs/switches/enabled/.eslintrc.js
View file
Open in desktop
File renamed without changes.
56 changes: 56 additions & 0 deletions samples/inputs/switches/enabled/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->

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.


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
</a>
<a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
</a>
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/switches/enabled" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
</a>
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/switches/enabled?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
</a>
</body>
</html>

## 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).
2 changes: 1 addition & 1 deletion samples/inputs/switches/checking/index.html → samples/inputs/switches/enabled/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>SwitchChecking</title>
<title>SwitchEnabled</title>
<link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
</head>
<body>
Expand Down
4 changes: 2 additions & 2 deletions ...les/inputs/switches/checking/package.json → samples/inputs/switches/enabled/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
0 ...uts/switches/checking/sandbox.config.json → ...puts/switches/enabled/sandbox.config.json
View file
Open in desktop
File renamed without changes.
33 changes: 33 additions & 0 deletions samples/inputs/switches/enabled/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/* shared styles are loaded from: */
/* https://dl.infragistics.com/x/css/samples/shared.v8.css */

.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;
}
}
45 changes: 45 additions & 0 deletions samples/inputs/switches/enabled/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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/bootstrap.css';

export default function SwitchEnabled() {

return (
<div className="container sample">
<div className="states">
<span className="states__corner"></span>
<span className="states__column">Hover</span>
<span className="states__column">Focused</span>
<span className="states__column">Focused &amp; Hover</span>

<span className="states__row">Enabled / On</span>
<IgrSwitch labelPosition="before" checked={true}>
<span>Power</span>
</IgrSwitch>
<IgrSwitch labelPosition="before" checked={true}>
<span>Power</span>
</IgrSwitch>
<IgrSwitch labelPosition="before" checked={true}>
<span>Power</span>
</IgrSwitch>

<span className="states__row">Enabled / Off</span>
<IgrSwitch labelPosition="before">
<span>Power</span>
</IgrSwitch>
<IgrSwitch labelPosition="before">
<span>Power</span>
</IgrSwitch>
<IgrSwitch labelPosition="before">
<span>Power</span>
</IgrSwitch>
</div>
</div>
);
}

// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SwitchEnabled/>);
0 ...es/inputs/switches/checking/tsconfig.json → ...les/inputs/switches/enabled/tsconfig.json
View file
Open in desktop
File renamed without changes.
0 ...s/inputs/switches/checking/vite.config.js → ...es/inputs/switches/enabled/vite.config.js
View file
Open in desktop
File renamed without changes.
5 changes: 0 additions & 5 deletions samples/inputs/switches/label/src/SwitchLabelStyles.css
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions samples/inputs/switches/label/src/index.css
View file
Open in desktop

This file was deleted.

22 changes: 0 additions & 22 deletions samples/inputs/switches/label/src/index.tsx
View file
Open in desktop

This file was deleted.

0 ...hes/label/.devcontainer/devcontainer.json → ...es/layout/.devcontainer/devcontainer.json
View file
Open in desktop
File renamed without changes.
0 samples/inputs/switches/label/.eslintrc.js → samples/inputs/switches/layout/.eslintrc.js
View file
Open in desktop
File renamed without changes.
8 changes: 4 additions & 4 deletions samples/inputs/switches/label/README.md → samples/inputs/switches/layout/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->

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.


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
Expand All @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Label f
<a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
</a>
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/switches/label" rel="noopener noreferrer">
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/switches/layout" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
</a>
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/switches/label?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/switches/layout?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
</a>
</body>
Expand All @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion samples/inputs/switches/label/index.html → samples/inputs/switches/layout/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>SwitchLabel</title>
<title>SwitchLayout</title>
<link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
</head>
<body>
Expand Down
4 changes: 2 additions & 2 deletions samples/inputs/switches/label/package.json → samples/inputs/switches/layout/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
0 ...inputs/switches/label/sandbox.config.json → ...nputs/switches/layout/sandbox.config.json
View file
Open in desktop
File renamed without changes.
29 changes: 29 additions & 0 deletions samples/inputs/switches/layout/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/* shared styles are loaded from: */
/* https://dl.infragistics.com/x/css/samples/shared.v8.css */

.container.sample {
display: flex;
place-content: center;
place-items: center;
}

.variants {
--variant-gap: 60px;
--label-gap: 30px;

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);
}
}
31 changes: 31 additions & 0 deletions samples/inputs/switches/layout/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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/bootstrap.css';

export default function SwitchLayout() {

return (
<div className="container sample">
<div className="variants">
<div className="variants__item">
<span className="variants__label">Label Before</span>
<IgrSwitch labelPosition="before" checked={true}>
<span>Power</span>
</IgrSwitch>
</div>
<div className="variants__item">
<span className="variants__label">Label After</span>
<IgrSwitch labelPosition="after" checked={true}>
<span>Power</span>
</IgrSwitch>
</div>
</div>
</div>
);
}

// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SwitchLayout/>);
0 samples/inputs/switches/label/tsconfig.json → samples/inputs/switches/layout/tsconfig.json
View file
Open in desktop
File renamed without changes.
0 samples/inputs/switches/label/vite.config.js → ...les/inputs/switches/layout/vite.config.js
View file
Open in desktop
File renamed without changes.
Loading