diff --git a/browser/index.html b/browser/index.html index b201e4022b..682d763d8d 100644 --- a/browser/index.html +++ b/browser/index.html @@ -30,7 +30,7 @@ - +
diff --git a/browser/public/meta.json b/browser/public/meta.json index b57b1e34c3..37b29dffdd 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-18 18:23:12","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..37b29dffdd 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-18 18:23:12","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/sample-theme.ts b/browser/src/sample-theme.ts index 1c202a346a..3b2ba115b0 100644 --- a/browser/src/sample-theme.ts +++ b/browser/src/sample-theme.ts @@ -12,6 +12,8 @@ * Dormant unless a trusted docs host asks for a theme. */ +import { configureTheme } from 'igniteui-react'; + type ThemeName = 'material' | 'fluent' | 'bootstrap' | 'indigo'; type ThemeMode = 'light' | 'dark' | 'system'; type ResolvedMode = 'light' | 'dark'; @@ -139,6 +141,10 @@ function applyTheme(theme: ThemeName, mode: ThemeMode): void { root.setAttribute('data-igd-theme', theme); root.setAttribute('data-igd-mode', resolved); root.style.colorScheme = resolved; + + // Tell the Shadow DOM / Lit components to re-adopt their + // per-theme stylesheet now that the global CSS is in place. + configureTheme(theme, resolved); }) .catch((err) => { console.warn('[sample-theme] Could not load theme "' + theme + '":', err); diff --git a/samples/inputs/badge/dot/src/index.css b/samples/inputs/badge/dot/src/index.css index 086ae8114d..4419879348 100644 --- a/samples/inputs/badge/dot/src/index.css +++ b/samples/inputs/badge/dot/src/index.css @@ -55,8 +55,8 @@ igc-avatar { .icon-circle { justify-content: center; border-radius: 50%; - background: var(--ig-gray-200); - color: var(--ig-gray-800); + background: var(--ig-gray-300); + color: var(--ig-gray-900); } .notifications-card, @@ -86,16 +86,6 @@ igc-avatar { width: 12px; } -.row-indicator igc-badge, -.nav-icon igc-badge { - --ig-badge-background-color: #0057A9; -} - -.row-indicator igc-badge::part(base), -.nav-icon igc-badge::part(base) { - background-color: #0057A9; -} - .row-title { flex: 1; } @@ -106,7 +96,7 @@ igc-avatar { } .row-time.unread { - color: #0057A9; + color: var(--ig-gray-900); font-weight: 600; } @@ -135,7 +125,7 @@ igc-avatar { } .nav-item.active { - color: #0075D2; + color: var(--ig-primary-800); } .nav-icon { diff --git a/samples/inputs/badge/icon/src/index.css b/samples/inputs/badge/icon/src/index.css index 274be2aa0e..892ad58c6e 100644 --- a/samples/inputs/badge/icon/src/index.css +++ b/samples/inputs/badge/icon/src/index.css @@ -3,16 +3,8 @@ igc-avatar { --size: 40px; - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); -} - -igc-badge[variant="info"] { - --ig-badge-background-color: #0057A9; -} - -igc-badge[variant="info"]::part(base) { - background-color: #0057A9; + --ig-avatar-background: var(--ig-gray-400); + --ig-avatar-color: var(--ig-gray-800); } igc-badge igc-icon { @@ -46,14 +38,6 @@ igc-badge igc-icon { height: 40px; } -.badge-settings { - --ig-badge-background-color: #0070BA; -} - -.badge-settings::part(base) { - background-color: #0070BA; -} - .badge-icon { display: flex; align-items: center; @@ -71,13 +55,14 @@ igc-badge igc-icon { } .badge-icon-item span { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; font-style: normal; line-height: 20px; letter-spacing: 0.3px; + white-space: nowrap; transform: translateY(4px); } diff --git a/samples/inputs/badge/outlined/src/index.css b/samples/inputs/badge/outlined/src/index.css index 708e928a08..262863328b 100644 --- a/samples/inputs/badge/outlined/src/index.css +++ b/samples/inputs/badge/outlined/src/index.css @@ -7,8 +7,8 @@ igc-badge { igc-avatar { --size: 40px; - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); + --ig-avatar-background: var(--ig-gray-400); + --ig-avatar-color: var(--ig-gray-800); } .outlined-example igc-avatar igc-icon { @@ -21,12 +21,6 @@ igc-avatar { inset-inline-end: -6px; } -.step-marker igc-badge { - position: absolute; - inset-block-start: -1px; - inset-inline-end: -2px; -} - .outlined-example igc-badge { position: absolute; inset-block-start: -6px; @@ -42,7 +36,8 @@ igc-avatar { align-items: center; justify-content: center; gap: 60px; - min-height: 7rem; + min-height: 100vh; + box-sizing: border-box; } .outlined-example { @@ -65,23 +60,6 @@ igc-avatar { color: var(--ig-gray-800); } -.badge-info-blue { - --ig-badge-background-color: #0057A9; -} - -.badge-info-blue::part(base) { - background-color: #0057A9; -} - -.payment-dot-blue { - --ig-badge-background-color: #0057A9; - --ig-badge-dot-size: 0.5rem; -} - -.payment-dot-blue::part(base) { - background-color: #0057A9; -} - igc-badge::part(base), igc-badge igc-icon { color: var(--ig-gray-50); @@ -92,53 +70,41 @@ igc-badge igc-icon { } .steps { - display: flex; - align-items: flex-start; - gap: 8px; -} - -.step { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; -} - -.step-marker { + width: 316px; +} + +.steps, +.steps igc-step { + --indicator-size: 24px; + --ig-stepper-step-separator-style: dashed; + --ig-stepper-step-separator-color: var(--ig-gray-400); + --border-radius-indicator: 50%; + --indicator-background: var(--ig-gray-200); + --indicator-color: var(--ig-gray-800); + --indicator-outline: var(--ig-gray-200); + --separator-size: 1px; + --separator-type: solid; + --step-separator-style: dashed; + --complete-indicator-background: var(--ig-gray-900); + --complete-indicator-color: var(--ig-gray-50); + --complete-step-separator-style: solid; + --complete-step-separator-color: var(--ig-gray-900); +} + +.stepper-wrapper { position: relative; - display: flex; -} - -.step-circle { - width: 26px; - height: 26px; - background: var(--ig-gray-900); - color: var(--ig-gray-50); - font-size: 12px; + align-self: center; + top: 18px; } -.step-circle.pending { - background: var(--ig-gray-200); - color: var(--ig-gray-800); -} - -.step-connector { - width: 56px; - margin-block-start: 13px; - border-block-start: 1px solid var(--ig-gray-900); -} - -.step-connector.pending { - border-block-start-style: dashed; - border-block-start-color: var(--ig-gray-400); +.flagged-badge { + position: absolute; + inset-block-start: 8px; + inset-inline-start: calc(50% - 1px); + transform: scale(1.2); + transform-origin: center; } -.step-label { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +.steps::part(content) { + display: none; } diff --git a/samples/inputs/badge/outlined/src/index.tsx b/samples/inputs/badge/outlined/src/index.tsx index a110275e9b..88ec9cc018 100644 --- a/samples/inputs/badge/outlined/src/index.tsx +++ b/samples/inputs/badge/outlined/src/index.tsx @@ -1,7 +1,7 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useRef } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge, IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; +import { IgrBadge, IgrAvatar, IgrIcon, IgrStepper, IgrStep, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; const favoriteBorderIcon = @@ -9,16 +9,13 @@ const favoriteBorderIcon = const closeIcon = ''; -const steps = [ - { index: 1, label: 'Orders', current: false, pending: false }, - { index: 2, label: 'Payment', current: true, pending: false }, - { index: 3, label: 'Shipping', current: false, pending: true } -]; - export default function BadgeOutlined(): JSX.Element { + const stepperRef = useRef(null); + useEffect(() => { registerIconFromText('favorite_border', favoriteBorderIcon, 'material'); registerIconFromText('close', closeIcon, 'material'); + stepperRef.current?.navigateTo(1); }, []); return ( @@ -27,7 +24,7 @@ export default function BadgeOutlined(): JSX.Element {
- 23 + 23
@@ -35,25 +32,19 @@ export default function BadgeOutlined(): JSX.Element {
-
- {steps.map((step, i) => ( - - {i > 0 && ( - - )} -
-
- - {step.index} - - {step.current && ( - - )} -
- {step.label} -
- - ))} +
+ + + Orders + + + Payment + + + Shipping + + +
); diff --git a/samples/inputs/badge/overview/src/index.css b/samples/inputs/badge/overview/src/index.css index 6a1e390d1f..d304ba139c 100644 --- a/samples/inputs/badge/overview/src/index.css +++ b/samples/inputs/badge/overview/src/index.css @@ -17,6 +17,15 @@ igc-badge { inset-inline-end: -0.15rem; } +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} + .avatar-example igc-badge { inset-block-start: auto; inset-block-end: -0.15rem; @@ -33,7 +42,6 @@ igc-badge { } .event-example igc-chip::part(base) { - background-color: #E0E0E0; border-radius: 999px; } @@ -42,11 +50,6 @@ igc-badge { inset-inline-end: -0.8rem; } -.event-example igc-badge::part(base) { - background-color: #0057A9; - color: var(--ig-gray-50); -} - .icon-example igc-badge { inset-block-start: 0; inset-inline-end: 0; diff --git a/samples/inputs/badge/shape/src/index.css b/samples/inputs/badge/shape/src/index.css index 4d24943e5a..f6e6b4da52 100644 --- a/samples/inputs/badge/shape/src/index.css +++ b/samples/inputs/badge/shape/src/index.css @@ -1,6 +1,15 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} + .badge-shape { display: flex; flex-direction: column; @@ -20,7 +29,7 @@ .row-label { justify-self: end; - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; @@ -32,20 +41,3 @@ .badge-small { --ig-size: var(--ig-size-small); } - -.badge-info-blue { - --ig-badge-background-color: #0057A9; -} - -.badge-info-blue::part(base) { - background-color: #0057A9; -} - -igc-badge::part(base), -igc-badge igc-icon { - color: var(--ig-gray-50); -} - -igc-badge igc-icon { - fill: var(--ig-gray-50); -} diff --git a/samples/inputs/badge/shape/src/index.tsx b/samples/inputs/badge/shape/src/index.tsx index fe423f3edf..91cdd7f710 100644 --- a/samples/inputs/badge/shape/src/index.tsx +++ b/samples/inputs/badge/shape/src/index.tsx @@ -26,11 +26,11 @@ export default function BadgeShape(): JSX.Element {
Square - + - 2 - + 2 +
diff --git a/samples/inputs/badge/size/src/index.css b/samples/inputs/badge/size/src/index.css index 2806b0cd4e..6e6cc5197c 100644 --- a/samples/inputs/badge/size/src/index.css +++ b/samples/inputs/badge/size/src/index.css @@ -1,6 +1,15 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} + .badge-size { display: flex; flex-direction: column; @@ -21,7 +30,7 @@ .row-label { justify-self: end; - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; @@ -30,23 +39,6 @@ letter-spacing: 0.3px; } -.badge-info-blue { - --ig-badge-background-color: #0057A9; -} - -.badge-info-blue::part(base) { - background-color: #0057A9; -} - -igc-badge::part(base), -igc-badge igc-icon { - color: var(--ig-gray-50); -} - -igc-badge igc-icon { - fill: var(--ig-gray-50); -} - .badge-large { --ig-size: var(--ig-size-large); } .badge-medium { --ig-size: var(--ig-size-medium); } .badge-small { --ig-size: var(--ig-size-small); } diff --git a/samples/inputs/badge/size/src/index.tsx b/samples/inputs/badge/size/src/index.tsx index 0a997231d4..c006c0311d 100644 --- a/samples/inputs/badge/size/src/index.tsx +++ b/samples/inputs/badge/size/src/index.tsx @@ -17,7 +17,7 @@ export default function BadgeSize(): JSX.Element {
Small - 2 + 2 @@ -25,7 +25,7 @@ export default function BadgeSize(): JSX.Element {
Medium - 2 + 2 @@ -33,7 +33,7 @@ export default function BadgeSize(): JSX.Element {
Large - 2 + 2 diff --git a/samples/inputs/badge/styling/src/index.css b/samples/inputs/badge/styling/src/index.css index d6d6fca0d4..dd46d8149c 100644 --- a/samples/inputs/badge/styling/src/index.css +++ b/samples/inputs/badge/styling/src/index.css @@ -53,9 +53,9 @@ igc-badge { } .styling-item.green igc-avatar { - --icon-color: #248436; - --ig-avatar-background: #A9CEB0; - --ig-avatar-color: #248436; + --icon-color: var(--ig-success-900); + --ig-avatar-background: var(--ig-success-200); + --ig-avatar-color: var(--ig-success-900); } .styling-item.pink igc-avatar { diff --git a/samples/inputs/badge/tailwind-styling/package.json b/samples/inputs/badge/tailwind-styling/package.json index a4300fd58d..e1d7f6b876 100644 --- a/samples/inputs/badge/tailwind-styling/package.json +++ b/samples/inputs/badge/tailwind-styling/package.json @@ -21,14 +21,14 @@ "tslib": "^2.4.0" }, "devDependencies": { - "@tailwindcss/vite": "^4.1.14", + "@tailwindcss/vite": "^4.3.3", "@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", + "tailwindcss": "^4.3.3", "typescript": "^4.8.4", "vite": "^7.1.9", "vitest": "^3.2.4", diff --git a/samples/inputs/badge/tailwind-styling/src/index.css b/samples/inputs/badge/tailwind-styling/src/index.css index 101b4607d2..04602a2cac 100644 --- a/samples/inputs/badge/tailwind-styling/src/index.css +++ b/samples/inputs/badge/tailwind-styling/src/index.css @@ -1,9 +1,9 @@ -/* 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); +@source "./index.tsx"; + +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ igc-badge { --ig-size: var(--ig-size-small); @@ -11,12 +11,12 @@ igc-badge { igc-avatar { --size: 40px; - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); + --ig-avatar-background: var(--ig-gray-400); + --ig-avatar-color: var(--ig-gray-800); } igc-avatar igc-icon { - color: var(--ig-gray-50); + color: var(--ig-gray-800); } .badge-close { diff --git a/samples/inputs/badge/type/src/index.css b/samples/inputs/badge/type/src/index.css index fa38411058..d6398f8cdf 100644 --- a/samples/inputs/badge/type/src/index.css +++ b/samples/inputs/badge/type/src/index.css @@ -51,7 +51,7 @@ igc-badge { } .badge-type-item span { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; diff --git a/samples/inputs/badge/variants/src/index.css b/samples/inputs/badge/variants/src/index.css index 96358179e2..81710d4ed0 100644 --- a/samples/inputs/badge/variants/src/index.css +++ b/samples/inputs/badge/variants/src/index.css @@ -8,15 +8,24 @@ igc-badge { inset-inline-end: -4px; } +.variant-item:not(:nth-child(4)) igc-badge::part(base), +.variant-item:not(:nth-child(4)) igc-badge igc-icon { + color: var(--ig-gray-50); +} + +.variant-item:not(:nth-child(4)) igc-badge igc-icon { + fill: var(--ig-gray-50); +} + igc-avatar { --ig-size: var(--ig-size-small); - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); + --ig-avatar-background: var(--ig-gray-400); + --ig-avatar-color: var(--ig-gray-800); } .variant-item:first-child igc-avatar igc-icon, .variant-item:nth-child(4) igc-avatar igc-icon { - color: var(--ig-gray-50); + color: var(--ig-gray-800); } .badge-variants { @@ -36,7 +45,7 @@ igc-avatar { } .variant-item span { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; @@ -49,33 +58,3 @@ igc-avatar { position: relative; display: flex; } - -.badge-info-blue { - --ig-badge-background-color: #0057A9; -} - -.badge-info-blue::part(base) { - background-color: #0057A9; -} - -.badge-primary-blue { - --ig-badge-background-color: #0070BA; -} - -.badge-primary-blue::part(base) { - background-color: #0070BA; -} - -.badge-warning-black::part(base) { - background-color: #FAA419; - color: #000; -} - -igc-badge::part(base), -igc-badge igc-icon { - color: var(--ig-gray-50); -} - -igc-badge igc-icon { - fill: var(--ig-gray-50); -} diff --git a/samples/inputs/badge/variants/src/index.tsx b/samples/inputs/badge/variants/src/index.tsx index 47cfdd62e8..f5f468ea09 100644 --- a/samples/inputs/badge/variants/src/index.tsx +++ b/samples/inputs/badge/variants/src/index.tsx @@ -28,14 +28,14 @@ export default function BadgeVariants(): JSX.Element { - 2 + 2
Primary
- +
@@ -58,7 +58,7 @@ export default function BadgeVariants(): JSX.Element { - 2 + 2
Warn
diff --git a/samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css b/samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css deleted file mode 100644 index 3ba295daf3..0000000000 --- a/samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css +++ /dev/null @@ -1,39 +0,0 @@ -igc-ripple { - --color: gray; -} - -.button-group-alignment { - display: flex; - align-items: flex-start; - justify-content: center; - gap: 60px; - padding: 24px; -} - -.button-group-alignment-item { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - gap: 16px; -} - -.button-group-alignment-item igc-button-group { - width: 240px; -} - -.button-group-alignment-item:first-child igc-button-group { - width: 320px; -} - -.button-group-alignment-item span { - width: 100%; - text-align: center; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; -} \ No newline at end of file diff --git a/samples/inputs/button-group/alignment/src/index.css b/samples/inputs/button-group/alignment/src/index.css index 1f53b8aa05..7e486aa9f5 100644 --- a/samples/inputs/button-group/alignment/src/index.css +++ b/samples/inputs/button-group/alignment/src/index.css @@ -1,2 +1,34 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +.sbSwitch { + display: grid; + place-items: center; + height: 100vh; +} + +.sample-layout { + display: flex; + gap: 2rem; + align-items: start; + justify-content: center; + flex-wrap: wrap; +} + +.sample-inner-layout { + display: grid; + gap: 0.5rem; + align-items: start; +} + +igc-button-group { + width: 17.5rem; +} + +.sample-layout span { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; + margin: 0.5rem; + text-align: center; +} \ No newline at end of file diff --git a/samples/inputs/button-group/alignment/src/index.tsx b/samples/inputs/button-group/alignment/src/index.tsx index aa28f9252e..8ae72d5626 100644 --- a/samples/inputs/button-group/alignment/src/index.tsx +++ b/samples/inputs/button-group/alignment/src/index.tsx @@ -1,8 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupAlignment.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const cities = ['Sofia', 'London', 'New York']; @@ -11,9 +10,9 @@ const alignments: Array<'horizontal' | 'vertical'> = ['horizontal', 'vertical']; export default function ButtonGroupAlignment(): JSX.Element { return ( -
+
{alignments.map((alignment) => ( -
+
{alignment.charAt(0).toUpperCase() + alignment.slice(1)} {cities.map((city) => ( diff --git a/samples/inputs/button-group/custom-toggle/src/index.css b/samples/inputs/button-group/custom-toggle/src/index.css index 06a54b66a2..dd43f14e32 100644 --- a/samples/inputs/button-group/custom-toggle/src/index.css +++ b/samples/inputs/button-group/custom-toggle/src/index.css @@ -1,13 +1,9 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -igc-button-group { - display: inline-block; - width: 300px; +.sbSwitch { + display: grid; + place-items: center; + height: 100vh; } -.container.sample { - display: flex; - justify-content: center; - align-items: center; +igc-button-group { + max-width: 18.75rem; } diff --git a/samples/inputs/button-group/custom-toggle/src/index.tsx b/samples/inputs/button-group/custom-toggle/src/index.tsx index fe93f01e7f..f4ea4d7c1f 100644 --- a/samples/inputs/button-group/custom-toggle/src/index.tsx +++ b/samples/inputs/button-group/custom-toggle/src/index.tsx @@ -6,7 +6,7 @@ import { IgrToggleButton, registerIconFromText, } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const icons = [ @@ -20,14 +20,12 @@ icons.forEach(([name, text]) => registerIconFromText(name, text, 'material')); export default function ButtonGroupCustomToggle() { return ( -
- - - - - - -
+ + + + + + ); } diff --git a/samples/inputs/button-group/interaction-states/src/ButtonGroupStates.css b/samples/inputs/button-group/interaction-states/src/ButtonGroupStates.css deleted file mode 100644 index 0595d21413..0000000000 --- a/samples/inputs/button-group/interaction-states/src/ButtonGroupStates.css +++ /dev/null @@ -1,76 +0,0 @@ -igc-ripple { - --color: gray; -} - -.button-group-states { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 20px; - padding: 20px; -} - -.button-group-states-row { - display: grid; - grid-template-columns: 120px 164px 164px 164px; - align-items: center; - gap: 16px; -} - -.button-group-states .row-label, -.button-group-states .column-label { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; -} - -.button-group-states .column-label { - text-align: center; -} - -.button-group-states igc-button-group { - width: 164px; -} - -.button-group-states igc-toggle-button { - width: 100%; -} - -.button-group-states igc-icon { - font-size: 16px; -} - -.button-group-states igc-toggle-button[selected]::part(toggle) { - background: var(--item-active-background); - border-color: var(--item-active-border-color); - color: var(--item-hover-text-color); -} - -.button-group-states igc-toggle-button.state-hover:not([selected])::part(toggle) { - background: var(--item-hover-background); - border-color: var(--item-hover-border-color); - color: var(--item-hover-text-color); -} - -.button-group-states igc-toggle-button.state-focused:not([selected])::part(toggle) { - background: var(--item-focused-hover-background); - border-color: var(--item-focused-hover-border-color); - color: var(--item-focused-hover-text-color); -} - -.button-group-states igc-toggle-button.state-hover[selected]::part(toggle) { - background: var(--item-selected-active-background); - border-color: var(--item-selected-active-border-color); - color: var(--item-selected-hover-text-color); -} - -.button-group-states igc-toggle-button.state-focused[selected]::part(toggle) { - background: var(--item-selected-active-background); - border-color: var(--item-selected-active-border-color); - color: var(--item-focused-hover-text-color); -} \ No newline at end of file diff --git a/samples/inputs/button-group/interaction-states/src/index.css b/samples/inputs/button-group/interaction-states/src/index.css index 1f53b8aa05..aaadcf3f91 100644 --- a/samples/inputs/button-group/interaction-states/src/index.css +++ b/samples/inputs/button-group/interaction-states/src/index.css @@ -1,2 +1,117 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +.sbSwitch { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; +} + +.states-matrix { + display: grid; + grid-template-columns: auto repeat(3, minmax(7.75rem, 1fr)); + gap: 1rem; + inline-size: 100%; + max-inline-size: 42.5rem; + margin-inline: auto; +} + +.states-row { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + align-items: center; +} + +.row-label, +.column-label, +.cell-label { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; +} + +.column-label, +.cell-label { + text-align: center; +} + +.cell-label { + display: none; +} + +.state-cell { + display: grid; + gap: 0.25rem; +} + +igc-icon { + --ig-icon-size: 1rem; +} + +@container (width < 34rem) { + .states-matrix { + grid-template-columns: minmax(0, 1fr); + } + + .states-row { + grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); + } + + header.states-row { + display: none; + } + + .row-label { + grid-column: 1 / -1; + } + + .cell-label { + display: block; + text-align: start; + margin-block-start: 1rem; + } + + .state-cell { + margin-inline-end: 0.5rem; + } +} + +/* WARNING START: Demo overrides only. Do not copy to production. */ +/* Forced state classes are used here solely to present all component states visually. */ +igc-button-group { + pointer-events: none; +} + +igc-toggle-button[selected]::part(toggle) { + background: var(--item-active-background); + border-color: var(--item-active-border-color); + color: var(--item-hover-text-color); +} + +igc-toggle-button.state-hover:not([selected])::part(toggle) { + background: var(--item-hover-background); + border-color: var(--item-hover-border-color); + color: var(--item-hover-text-color); +} + +igc-toggle-button.state-focused:not([selected])::part(toggle) { + background: var(--item-focused-hover-background); + border-color: var(--item-focused-hover-border-color); + color: var(--item-focused-hover-text-color); +} + +igc-toggle-button.state-hover[selected]::part(toggle) { + background: var(--item-selected-active-background); + border-color: var(--item-selected-active-border-color); + color: var(--item-selected-hover-text-color); +} + +igc-toggle-button.state-focused[selected]::part(toggle) { + background: var(--item-selected-active-background); + border-color: var(--item-selected-active-border-color); + color: var(--item-focused-hover-text-color); +} +/* WARNING END */ \ No newline at end of file diff --git a/samples/inputs/button-group/interaction-states/src/index.tsx b/samples/inputs/button-group/interaction-states/src/index.tsx index d039104a6d..3668481d2e 100644 --- a/samples/inputs/button-group/interaction-states/src/index.tsx +++ b/samples/inputs/button-group/interaction-states/src/index.tsx @@ -1,8 +1,13 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import { IgrButtonGroup, IgrIcon, IgrRipple, IgrToggleButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupStates.css'; +import { + IgrButtonGroup, + IgrIcon, + IgrRipple, + IgrToggleButton, + registerIconFromText +} from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const rows: Array<{ label: string; selected: boolean }> = [ @@ -12,6 +17,12 @@ const rows: Array<{ label: string; selected: boolean }> = [ const states = ['idle', 'hover', 'focused']; +registerIconFromText( + 'notifications', + '', + 'material' +); + function StateButton({ selected, state }: { selected: boolean; state: string }): JSX.Element { return ( @@ -25,22 +36,29 @@ function StateButton({ selected, state }: { selected: boolean; state: string }): export default function ButtonGroupStates(): JSX.Element { return ( -
-
+
+
{states.map((state) => ( {state.charAt(0).toUpperCase() + state.slice(1)} ))} -
+ {rows.map((row) => ( -
+
{row.label} - {states.map((state) => )} -
+ {states.map((state) => ( +
+ {state.charAt(0).toUpperCase() + state.slice(1)} + + + +
+ ))} + ))} -
+ ); } diff --git a/samples/inputs/button-group/layout/src/ButtonGroupLayout.css b/samples/inputs/button-group/layout/src/ButtonGroupLayout.css deleted file mode 100644 index 936a3bc2f3..0000000000 --- a/samples/inputs/button-group/layout/src/ButtonGroupLayout.css +++ /dev/null @@ -1,19 +0,0 @@ -igc-ripple { - --color: gray; -} - -.button-group-layout { - display: flex; - align-items: center; - justify-content: center; - gap: 80px; - min-height: 7rem; -} - -.button-group-layout igc-toggle-button { - min-width: 100px; -} - -.button-group-layout igc-icon { - --size: 20px; -} diff --git a/samples/inputs/button-group/layout/src/index.css b/samples/inputs/button-group/layout/src/index.css index e41c7c710b..b4583727ba 100644 --- a/samples/inputs/button-group/layout/src/index.css +++ b/samples/inputs/button-group/layout/src/index.css @@ -1,11 +1,28 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.sbSwitch { + display: grid; + place-items: center; + height: 100vh; +} + +.sample-layout { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 80px; + min-height: 5.5rem; +} igc-button-group { - display: inline-block; - max-width: 400px; + display: inline-block; + max-width: 400px; +} + +.sample-layout igc-toggle-button { + min-width: 100px; } -igc-ripple { - --color: grey; +.sample-layout igc-icon { + --ig-size: 20px; + --igc-icon-size: 20px; } diff --git a/samples/inputs/button-group/layout/src/index.tsx b/samples/inputs/button-group/layout/src/index.tsx index 3bc28e0a57..eb25755d92 100644 --- a/samples/inputs/button-group/layout/src/index.tsx +++ b/samples/inputs/button-group/layout/src/index.tsx @@ -1,8 +1,7 @@ import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import { IgrButtonGroup, IgrIcon, IgrRipple, IgrToggleButton, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupLayout.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const alignLeftIcon = @@ -26,7 +25,7 @@ export default function ButtonGroupLayout(): JSX.Element { }, []); return ( -
+
{layouts.map((layout) => ( diff --git a/samples/inputs/button-group/overview/src/ButtonGroupOverview.css b/samples/inputs/button-group/overview/src/ButtonGroupOverview.css deleted file mode 100644 index 88a89a0721..0000000000 --- a/samples/inputs/button-group/overview/src/ButtonGroupOverview.css +++ /dev/null @@ -1,40 +0,0 @@ - .container.sample { - display: flex; - flex-direction: column; - align-items: center; - padding: 1rem; -} - -igc-button-group { - display: block; - width: 280px; - max-width: 100%; -} - -igc-ripple { - --color: gray; -} - -.album { - margin-top: 8px; - width: 280px; - max-width: 100%; -} - -.album-title { - display: inline-block; - margin-bottom: 8px; - color: #1f89d4; -} - -.album-photos { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 4px; -} - -.album-photos img { - width: 100%; - object-fit: cover; - display: block; -} \ No newline at end of file diff --git a/samples/inputs/button-group/overview/src/index.css b/samples/inputs/button-group/overview/src/index.css index 1f53b8aa05..2190c366e5 100644 --- a/samples/inputs/button-group/overview/src/index.css +++ b/samples/inputs/button-group/overview/src/index.css @@ -1,2 +1,36 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +.sbSwitch { + display: grid; + place-items: center; + height: 100vh; +} + +.sample-layout { + display: grid; + width: 17.5rem; + gap: 0.5rem; +} + +igc-button-group { + max-width: 17.5rem; +} + +.album-title { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.429; + letter-spacing: 0.0178571em; + margin-block: 0 0.5rem; + color: var(--ig-primary-500); +} + +.album-photos { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.25rem; +} + +.album-photos img { + width: 100%; + object-fit: cover; + display: block; +} \ No newline at end of file diff --git a/samples/inputs/button-group/overview/src/index.tsx b/samples/inputs/button-group/overview/src/index.tsx index 923e753db6..78f6fef144 100644 --- a/samples/inputs/button-group/overview/src/index.tsx +++ b/samples/inputs/button-group/overview/src/index.tsx @@ -5,8 +5,7 @@ import { IgrRipple, IgrToggleButton, } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupOverview.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; @@ -36,7 +35,7 @@ export default function ButtonGroupOverview() { const album = albums[source]; return ( -
+
) => { @@ -56,7 +55,7 @@ export default function ButtonGroupOverview() {
- {album.title} +

{album.title}

{album.photos.map((photo) => ( {album.title} diff --git a/samples/inputs/button-group/selection/src/ButtonGroupSelection.css b/samples/inputs/button-group/selection/src/ButtonGroupSelection.css deleted file mode 100644 index 6d0a1eb8a7..0000000000 --- a/samples/inputs/button-group/selection/src/ButtonGroupSelection.css +++ /dev/null @@ -1,34 +0,0 @@ -.selection-samples { - display: flex; - justify-content: center; - flex-direction: column; - align-items: flex-start; - gap: 32px; - padding-left: 32px; -} - -.selection-sample { - display: flex; - align-items: center; - gap: 30px; -} - -.selection-sample > span { - width: 120px; - text-align: right; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; -} - -.selection-sample igc-button-group { - width: 200px; -} - -igc-ripple { - --color: gray; -} \ No newline at end of file diff --git a/samples/inputs/button-group/selection/src/index.css b/samples/inputs/button-group/selection/src/index.css index 1f53b8aa05..55d7c524ad 100644 --- a/samples/inputs/button-group/selection/src/index.css +++ b/samples/inputs/button-group/selection/src/index.css @@ -1,2 +1,46 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +.sbSwitch { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; +} + +.selection-samples { + display: grid; + grid-template-columns: auto minmax(11.25rem, 1fr); + align-items: center; + gap: 1.5rem 2rem; + inline-size: 100%; + max-inline-size: 23.75rem; + margin-inline: auto; +} + +.sample-label { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; + text-align: end; +} + +igc-button-group { + inline-size: 100%; +} + +@container (width < 22rem) { + .selection-samples { + grid-template-columns: minmax(0, 1fr); + gap: 0.25rem; + } + + .sample-label { + text-align: start; + } + + .sample-label:not(:first-of-type) { + margin-block-start: 1rem; + } +} \ No newline at end of file diff --git a/samples/inputs/button-group/selection/src/index.tsx b/samples/inputs/button-group/selection/src/index.tsx index 684c40b64c..e22a27d2d0 100644 --- a/samples/inputs/button-group/selection/src/index.tsx +++ b/samples/inputs/button-group/selection/src/index.tsx @@ -7,8 +7,7 @@ import { IgrToggleButton, registerIconFromText, } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupSelection.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const icons = [ @@ -34,10 +33,10 @@ export default function ButtonGroupSelectionSample() { }, []) return ( -
+
{(['single', 'single-required', 'multiple'] as const).map((selection) => ( -
- {selection === 'single-required' ? 'Single-Required' : selection.charAt(0).toUpperCase() + selection.slice(1)} + + {selection === 'single-required' ? 'Single-Required' : selection.charAt(0).toUpperCase() + selection.slice(1)} @@ -52,7 +51,7 @@ export default function ButtonGroupSelectionSample() { -
+ ))}
); diff --git a/samples/inputs/button-group/size/src/ButtonGroupSize.css b/samples/inputs/button-group/size/src/ButtonGroupSize.css deleted file mode 100644 index 5a83e77d14..0000000000 --- a/samples/inputs/button-group/size/src/ButtonGroupSize.css +++ /dev/null @@ -1,33 +0,0 @@ -igc-ripple { - --color: gray; -} - -.button-group-size { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - gap: 32px; - padding: 13px; - padding-left: 3rem; -} - -.button-group-size-item { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - gap: 32px; -} - -.button-group-size-item span { - width: 52px; - text-align: right; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; -} diff --git a/samples/inputs/button-group/size/src/index.css b/samples/inputs/button-group/size/src/index.css index 1f53b8aa05..1933c706c6 100644 --- a/samples/inputs/button-group/size/src/index.css +++ b/samples/inputs/button-group/size/src/index.css @@ -1,2 +1,54 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +.sbSwitch { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + place-items: center; + height: 100vh; +} + +.button-group-size { + display: grid; + grid-template-columns: auto minmax(15rem, 1fr); + align-items: center; + gap: 1.5rem 2rem; + inline-size: 100%; + max-inline-size: 30rem; + margin-inline: auto; +} + +.sample-label { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; + text-align: end; +} + +igc-button-group:nth-of-type(1n) { + --ig-size: var(--ig-size-small); +} + +igc-button-group:nth-of-type(2n) { + --ig-size: var(--ig-size-medium); +} + +igc-button-group:nth-of-type(3n) { + --ig-size: var(--ig-size-large); +} + +@container (width < 22rem) { + .button-group-size { + grid-template-columns: minmax(0, 1fr); + gap: 0.25rem; + } + + .sample-label { + text-align: start; + } + + .sample-label:not(:first-of-type) { + margin-block-start: 1rem; + } +} \ No newline at end of file diff --git a/samples/inputs/button-group/size/src/index.tsx b/samples/inputs/button-group/size/src/index.tsx index 28ce3d496c..84a89a658a 100644 --- a/samples/inputs/button-group/size/src/index.tsx +++ b/samples/inputs/button-group/size/src/index.tsx @@ -1,8 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupSize.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const cities = ['Sofia', 'London', 'New York']; @@ -11,13 +10,11 @@ const sizes = ['small', 'medium', 'large']; export default function ButtonGroupSize(): JSX.Element { return ( -
+
{sizes.map((size) => ( -
- {size.charAt(0).toUpperCase() + size.slice(1)} - + + {size.charAt(0).toUpperCase() + size.slice(1)} + {cities.map((city) => ( ))} -
+ ))} -
+ ); } diff --git a/samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css b/samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css deleted file mode 100644 index b64aef2ce9..0000000000 --- a/samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css +++ /dev/null @@ -1,37 +0,0 @@ -igc-ripple { - --color: gray; -} - -.button-group-interaction-states { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 20px; - padding: 20px; -} - -.button-group-interaction-states-row { - display: grid; - grid-template-columns: 120px 160px 160px; - align-items: center; - gap: 16px; -} - -.button-group-interaction-states .row-label, -.button-group-interaction-states .column-label { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; - text-align: center; -} - -.button-group-interaction-states-row igc-button-group:not([disabled]) igc-toggle-button[selected]::part(toggle) { - background: var(--item-active-background); - border-color: var(--item-active-border-color); - color: var(--item-selected-text-color); -} \ No newline at end of file diff --git a/samples/inputs/button-group/states/src/index.css b/samples/inputs/button-group/states/src/index.css index 1f53b8aa05..fde4086238 100644 --- a/samples/inputs/button-group/states/src/index.css +++ b/samples/inputs/button-group/states/src/index.css @@ -1,2 +1,88 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +.sbSwitch { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; +} + +.states-matrix { + --state-columns: 2; + + display: grid; + grid-template-columns: auto repeat(var(--state-columns), minmax(7.5rem, 1fr)); + gap: 1rem; + inline-size: 100%; + max-inline-size: 32.5rem; + margin-inline: auto; +} + +.states-row { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + align-items: center; +} + +.row-label, +.column-label, +.cell-label { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; +} + +.column-label, +.cell-label { + text-align: center; +} + +.cell-label { + display: none; +} + +.state-cell { + display: grid; + gap: 0.25rem; +} + +@container (width < 24rem) { + .states-matrix { + grid-template-columns: minmax(0, 1fr); + } + + .states-row { + grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); + column-gap: 0.5rem; + } + + header.states-row { + display: none; + } + + .row-label { + grid-column: 1 / -1; + } + + .cell-label { + display: block; + text-align: start; + margin-block-start: 1rem; + } +} + +/* WARNING START: Demo overrides only. Do not copy to production. */ +/* Forced state classes are used here solely to present all component states visually. */ +igc-button-group { + pointer-events: none; +} + +igc-toggle-button:not([disabled])[selected]::part(toggle) { + background: var(--item-active-background); + border-color: var(--item-active-border-color); + color: var(--item-selected-text-color); +} +/* WARNING END */ \ No newline at end of file diff --git a/samples/inputs/button-group/states/src/index.tsx b/samples/inputs/button-group/states/src/index.tsx index 77e39628a2..b1e5df5d64 100644 --- a/samples/inputs/button-group/states/src/index.tsx +++ b/samples/inputs/button-group/states/src/index.tsx @@ -1,8 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupInteractionStates.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const rows: Array<{ label: string; selected: boolean }> = [ @@ -12,32 +11,38 @@ const rows: Array<{ label: string; selected: boolean }> = [ export default function ButtonGroupInteractionStates(): JSX.Element { return ( -
-
+
+
Enabled Disabled -
+ {rows.map((row) => ( -
+
{row.label} - - - Device - - - - - - Cloud - - -
+
+ Enabled + + + Device + + + +
+
+ Disabled + + + Cloud + + +
+ ))} -
+ ); } diff --git a/samples/inputs/button-group/styling/src/ButtonGroupStyling.css b/samples/inputs/button-group/styling/src/ButtonGroupStyling.css deleted file mode 100644 index 22c9d20f42..0000000000 --- a/samples/inputs/button-group/styling/src/ButtonGroupStyling.css +++ /dev/null @@ -1,32 +0,0 @@ -igc-ripple { - --color: gray; -} - -.button-group-styling { - display: flex; - align-items: center; - justify-content: center; - min-height: 7rem; -} - -.button-group-styling igc-button-group { - width: 420px; - border: 2px solid #4da3e8; - border-radius: 4px; - overflow: hidden; -} - -.button-group-styling igc-toggle-button::part(toggle) { - color: #4a5a66; - background: #cfe8fb; - border-color: #4da3e8; -} - -.button-group-styling igc-toggle-button::part(toggle):hover { - background: #b3daf8; -} - -.button-group-styling igc-toggle-button[selected]::part(toggle) { - color: #2f4d6a; - background: #6db3ea; -} \ No newline at end of file diff --git a/samples/inputs/button-group/styling/src/index.css b/samples/inputs/button-group/styling/src/index.css index 1f53b8aa05..e676fef095 100644 --- a/samples/inputs/button-group/styling/src/index.css +++ b/samples/inputs/button-group/styling/src/index.css @@ -1,2 +1,24 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +igc-button-group { + display: inline-block; + width: 100%; + max-width: 25rem; +} + +.sbSwitch { + display: grid; + place-items: center; + height: 100vh; + + --ig-button-group-border-radius: 4px; + --ig-button-group-item-text-color: #4a5a66; + --ig-button-group-item-background: #cfe8fb; + --ig-button-group-item-border-color: #4da3e8; + --ig-button-group-item-hover-text-color: #4a5a66; + --ig-button-group-item-hover-background: #b3daf8; + --ig-button-group-item-hover-border-color: #4da3e8; + --ig-button-group-item-selected-text-color: #2f4d6a; + --ig-button-group-item-selected-background: #6db3ea; + --ig-button-group-item-selected-border-color: #4da3e8; + --ig-button-group-item-selected-hover-text-color: #2f4d6a; + --ig-button-group-item-selected-hover-background: #6db3ea; +} diff --git a/samples/inputs/button-group/styling/src/index.tsx b/samples/inputs/button-group/styling/src/index.tsx index 61f3d984f9..720820b4d1 100644 --- a/samples/inputs/button-group/styling/src/index.tsx +++ b/samples/inputs/button-group/styling/src/index.tsx @@ -1,28 +1,25 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupStyling.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const layouts = ['Left', 'Center', 'Right']; export default function ButtonGroupStyling(): JSX.Element { return ( -
- - {layouts.map((layout) => ( - - {layout} - - - ))} - -
+ + {layouts.map((layout) => ( + + {layout} + + + ))} + ); } diff --git a/samples/inputs/button-group/tailwind-styling/src/index.css b/samples/inputs/button-group/tailwind-styling/src/index.css index 6ff2900474..cfaa860e96 100644 --- a/samples/inputs/button-group/tailwind-styling/src/index.css +++ b/samples/inputs/button-group/tailwind-styling/src/index.css @@ -1,37 +1,15 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -@layer theme, base, components, utilities; +@layer theme, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); -igc-ripple { - --color: gray; -} - -.button-group-center { - display: flex; - align-items: center; - justify-content: center; - min-height: 7rem; -} - -.button-group-style { - width: 420px; - max-width: 100%; -} - -.button-group-style igc-toggle-button::part(toggle) { - color: var(--color-violet-700); - background: var(--color-white); - border-color: var(--color-violet-300); -} - -.button-group-style igc-toggle-button::part(toggle):hover { - background: var(--color-fuchsia-100); +.sbSwitch { + display: grid; + place-items: center; + height: 100vh; } -.button-group-style igc-toggle-button[selected]::part(toggle) { - color: var(--color-white); - background: var(--color-violet-600); +igc-button-group { + display: inline-block; + width: 100%; + max-width: 25rem; } diff --git a/samples/inputs/button-group/tailwind-styling/src/index.tsx b/samples/inputs/button-group/tailwind-styling/src/index.tsx index 3f4363a7c7..72227c4df0 100644 --- a/samples/inputs/button-group/tailwind-styling/src/index.tsx +++ b/samples/inputs/button-group/tailwind-styling/src/index.tsx @@ -2,26 +2,24 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; const views = ['Day', 'Week', 'Month']; export default function ButtonGroupTailwindStyling(): JSX.Element { return ( -
- - {views.map((view) => ( - - {view} - - - ))} - -
+ + {views.map((view) => ( + + {view} + + + ))} + ); } diff --git a/samples/inputs/button/contained/src/index.tsx b/samples/inputs/button/contained/src/index.tsx index 3d20d80e57..39c7fb29f9 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 { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.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/fab/src/index.tsx b/samples/inputs/button/fab/src/index.tsx index 921df14c2c..69fc08516c 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 { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.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..77d790cd13 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 { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.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/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/switches/checking/.eslintrc.js b/samples/inputs/button/interaction-states/.eslintrc.js similarity index 100% rename from samples/inputs/switches/checking/.eslintrc.js rename to samples/inputs/button/interaction-states/.eslintrc.js 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..1a88704aac --- /dev/null +++ b/samples/inputs/button/interaction-states/src/index.css @@ -0,0 +1,43 @@ +/* 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 { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + font-style: normal; + line-height: 20px; + letter-spacing: 0.3px; +} + +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..f1635686ef --- /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/bootstrap.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/switches/checking/tsconfig.json b/samples/inputs/button/interaction-states/tsconfig.json similarity index 100% rename from samples/inputs/switches/checking/tsconfig.json rename to samples/inputs/button/interaction-states/tsconfig.json 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..bf227b0183 --- /dev/null +++ b/samples/inputs/button/layout/src/index.css @@ -0,0 +1,26 @@ +/* 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: 1rem; + width: 100%; + box-sizing: border-box; + padding: 2rem; +} + +.button-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} + +igc-button::part(base) { + font-family: 'Titillium Web', sans-serif; + font-size: 0.85rem; + 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..db0fdc612f --- /dev/null +++ b/samples/inputs/button/layout/src/index.tsx @@ -0,0 +1,52 @@ +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/bootstrap.css'; + +const addIcon = ''; + +export default function ButtonLayout() { + useEffect(() => { + registerIconFromText('add', addIcon, 'material'); + }, []); + + return ( +
+
+
+ + + Add + +
+
+ Buy Now +
+
+ + Add + + +
+
+ + + Floating Action + +
+
+ + + +
+
+ Floating Action +
+
+
+ ); +} + +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..cea939b336 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 { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.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 deleted file mode 100644 index 8fbc85d09d..0000000000 --- a/samples/inputs/button/overview/src/ButtonOverviewStyle.css +++ /dev/null @@ -1,6 +0,0 @@ -.button-container { - display: flex; - justify-content: space-evenly; - align-items: center; - height: 100%; -} \ No newline at end of file diff --git a/samples/inputs/button/overview/src/index.css b/samples/inputs/button/overview/src/index.css new file mode 100644 index 0000000000..fe9aacd195 --- /dev/null +++ b/samples/inputs/button/overview/src/index.css @@ -0,0 +1,32 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.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) { + background-color: var(--ig-gray-50); +} + +.actions { + display: flex; + justify-content: flex-end; + gap: 1rem; + margin-top: 0.5rem; +} diff --git a/samples/inputs/button/overview/src/index.tsx b/samples/inputs/button/overview/src/index.tsx index 56d86a8ab6..b39ea3f5e2 100644 --- a/samples/inputs/button/overview/src/index.tsx +++ b/samples/inputs/button/overview/src/index.tsx @@ -1,26 +1,28 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './ButtonOverviewStyle.css'; -import { IgrButton } from 'igniteui-react'; +import { IgrAvatar, IgrButton, IgrInput } 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 deleted file mode 100644 index d2f4c0b947..0000000000 --- a/samples/inputs/button/size/src/ButtonSizingStyle.css +++ /dev/null @@ -1,22 +0,0 @@ -.button-container { - display: flex; - justify-content: space-evenly; - align-items: center; - margin-top: 20px; -} - -.container { - justify-content: center; -} - -.size-small { - --ig-size: var(--ig-size-small); -} - -.size-medium { - --ig-size: var(--ig-size-medium); -} - -.size-large { - --ig-size: var(--ig-size-large); -} \ No newline at end of file diff --git a/samples/inputs/button/size/src/index.css b/samples/inputs/button/size/src/index.css new file mode 100644 index 0000000000..253b1675af --- /dev/null +++ b/samples/inputs/button/size/src/index.css @@ -0,0 +1,68 @@ +.container { + justify-content: center; + align-items: center; +} + +.size-grid { + display: flex; + flex-direction: column; + gap: 1.25rem; + padding: 1rem; + width: 100%; + box-sizing: border-box; + overflow: hidden; +} + +.size-row { + display: grid; + grid-template-columns: 70px repeat(4, minmax(0, 1fr)); + align-items: center; + justify-items: center; + column-gap: 1rem; + row-gap: 0.5rem; + width: 100%; +} + +.size-header { + display: grid; + grid-template-columns: 70px repeat(4, minmax(0, 1fr)); + align-items: center; + justify-items: center; + column-gap: 1rem; + width: 100%; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + line-height: 20px; + letter-spacing: 0.3px; +} + +.size-row igc-button { + width: auto; + transform: scale(0.9); +} + +.size-label { + justify-self: start; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + font-style: normal; + line-height: 20px; + letter-spacing: 0.3px; + display: inline-flex; + align-items: center; +} + +.size-small { + --ig-size: var(--ig-size-small); +} + +.size-medium { + --ig-size: var(--ig-size-medium); +} + +.size-large { + --ig-size: var(--ig-size-large); +} \ No newline at end of file diff --git a/samples/inputs/button/size/src/index.tsx b/samples/inputs/button/size/src/index.tsx index a454e6259c..ccd65e856d 100644 --- a/samples/inputs/button/size/src/index.tsx +++ b/samples/inputs/button/size/src/index.tsx @@ -1,47 +1,52 @@ -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 './index.css'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.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 ( +
+
+
+ + Contained + Outlined + Flat + Fab
-
- ); - } + {sizes.map((size) => ( +
+ {size[0].toUpperCase() + size.slice(1)} + {variants.map((variant) => ( + + + {variant[0].toUpperCase() + variant.slice(1)} + + + ))} + + + Floating Action + + +
+ ))} - public onRadioChange(e: any) { - if (e.detail.checked == true) { - this.setState({ size: e.detail.value }); - } - } +
+
+ ); } 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/switches/label/.eslintrc.js b/samples/inputs/button/states/.eslintrc.js similarity index 100% rename from samples/inputs/switches/label/.eslintrc.js rename to samples/inputs/button/states/.eslintrc.js 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/switches/label/package.json b/samples/inputs/button/states/package.json similarity index 87% rename from samples/inputs/switches/label/package.json rename to samples/inputs/button/states/package.json index ca7e54766a..63d1867b4a 100644 --- a/samples/inputs/switches/label/package.json +++ b/samples/inputs/button/states/package.json @@ -1,6 +1,6 @@ { - "name": "react-switch-label", - "description": "This project provides example of Switch Label using Infragistics React components", + "name": "react-button-states", + "description": "This project provides example of Button States using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", 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..5f852586a1 --- /dev/null +++ b/samples/inputs/button/states/src/index.tsx @@ -0,0 +1,54 @@ +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/bootstrap.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/switches/label/tsconfig.json b/samples/inputs/button/states/tsconfig.json similarity index 100% rename from samples/inputs/switches/label/tsconfig.json rename to samples/inputs/button/states/tsconfig.json 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 deleted file mode 100644 index 8e9b561851..0000000000 --- a/samples/inputs/button/styling/src/ButtonStyle.css +++ /dev/null @@ -1,4 +0,0 @@ -igc-button::part(base) { - background-color: var(--ig-warn-700); - color: var(--ig-warn-700-contrast); -} diff --git a/samples/inputs/button/styling/src/index.css b/samples/inputs/button/styling/src/index.css index 019bfa2d76..ed276b2c0d 100644 --- a/samples/inputs/button/styling/src/index.css +++ b/samples/inputs/button/styling/src/index.css @@ -1,7 +1,75 @@ /* 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: 3rem; +} + +igc-button.confirm-button::part(base) { + background-color: #1275c4; + color: #ffffff; +} + +igc-button.confirm-button:hover::part(base) { + background-color: #0b4f8a; + color: #ffffff; +} + +igc-button.send-button::part(base) { + border-color: #8a2be2; + color: #8a2be2; +} + +igc-button.send-button:hover::part(base) { + background-color: #8a2be2; + border-color: #6a1bb1; + color: #ffffff; +} + +igc-button.send-button igc-icon { + color: #8a2be2; +} + +igc-button.send-button:hover igc-icon { + color: #ffffff; +} + +igc-button.cancel-button::part(base) { + color: #1275c4; +} + +igc-button.cancel-button:hover::part(base) { + background-color: #dbeeff; + color: #063b68; +} + +igc-button.add-button::part(base) { + background-color: #4caf50; + color: #000000; + border-radius: 999px; +} + +igc-button.add-button:hover::part(base) { + background-color: #257a2b; + color: #ffffff; +} + +igc-button.add-button igc-icon { + color: #000000; +} diff --git a/samples/inputs/button/styling/src/index.tsx b/samples/inputs/button/styling/src/index.tsx index 3840167aa0..7cda1a5452 100644 --- a/samples/inputs/button/styling/src/index.tsx +++ b/samples/inputs/button/styling/src/index.tsx @@ -1,23 +1,37 @@ -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, 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: '' }, +]; - 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..af88ee1c32 --- /dev/null +++ b/samples/inputs/button/tailwind-styling/src/index.css @@ -0,0 +1,77 @@ +/* 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); +} + +.confirm-button:hover::part(base) { + background-color: var(--color-indigo-900); + color: var(--color-white); +} + +.send-button::part(base) { + border-color: var(--color-pink-600); + color: var(--color-pink-600); +} + +.send-button:hover::part(base) { + background-color: var(--color-pink-600); + border-color: var(--color-pink-700); + color: var(--color-white); +} + +.send-button igc-icon { + color: var(--color-pink-600); +} + +.send-button:hover igc-icon { + color: var(--color-white); +} + +.cancel-button::part(base) { + color: var(--color-amber-700); +} + +.cancel-button:hover::part(base) { + background-color: var(--color-amber-100); + color: var(--color-amber-900); +} + +.add-button::part(base) { + background-color: var(--color-teal-500); + color: var(--color-black); + border-radius: 9999px; +} + +.add-button:hover::part(base) { + background-color: var(--color-teal-800); + color: var(--color-white); +} + 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..55ccbde39d --- /dev/null +++ b/samples/inputs/button/tailwind-styling/src/index.tsx @@ -0,0 +1,37 @@ +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/bootstrap.css'; + +const icons = [ + { name: 'send', text: '' }, + { name: 'add', 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 + }, +}); 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..b808c875fa 100644 --- a/samples/inputs/switches/disabled/src/index.css +++ b/samples/inputs/switches/disabled/src/index.css @@ -1,2 +1,29 @@ /* 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; +} + +.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); + } +} \ 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..b4df9c15de 100644 --- a/samples/inputs/switches/disabled/src/index.tsx +++ b/samples/inputs/switches/disabled/src/index.tsx @@ -8,7 +8,20 @@ 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/enabled/.eslintrc.js b/samples/inputs/switches/enabled/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/switches/enabled/.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/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..379ecd447f --- /dev/null +++ b/samples/inputs/switches/enabled/src/index.css @@ -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; + } +} diff --git a/samples/inputs/switches/enabled/src/index.tsx b/samples/inputs/switches/enabled/src/index.tsx new file mode 100644 index 0000000000..24bf4a3151 --- /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/bootstrap.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/enabled/tsconfig.json b/samples/inputs/switches/enabled/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/switches/enabled/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/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/layout/.eslintrc.js b/samples/inputs/switches/layout/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/switches/layout/.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/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/layout/package.json b/samples/inputs/switches/layout/package.json new file mode 100644 index 0000000000..41ccf6d2c2 --- /dev/null +++ b/samples/inputs/switches/layout/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-switch-layout", + "description": "This project provides example of Switch 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/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..3b71591b7c --- /dev/null +++ b/samples/inputs/switches/layout/src/index.css @@ -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); + } +} diff --git a/samples/inputs/switches/layout/src/index.tsx b/samples/inputs/switches/layout/src/index.tsx new file mode 100644 index 0000000000..6625efd335 --- /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/bootstrap.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/layout/tsconfig.json b/samples/inputs/switches/layout/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/switches/layout/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/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..38aea371df 100644 --- a/samples/inputs/switches/overview/src/index.css +++ b/samples/inputs/switches/overview/src/index.css @@ -1,2 +1,59 @@ /* 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-primary-500); + } + + & .notifications__row { + padding-block: 12px; + padding-inline: 16px; + + & 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..4e73359bc9 100644 --- a/samples/inputs/switches/overview/src/index.tsx +++ b/samples/inputs/switches/overview/src/index.tsx @@ -8,7 +8,33 @@ 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..32f67af851 --- /dev/null +++ b/samples/inputs/switches/selected/src/index.css @@ -0,0 +1,26 @@ +/* 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(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..89a8b56136 --- /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/bootstrap.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..66e5527723 100644 --- a/samples/inputs/switches/styling/src/index.css +++ b/samples/inputs/switches/styling/src/index.css @@ -1,10 +1,100 @@ /* 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 { + display: block; + inline-size: 100%; + max-inline-size: 348px; + background: var(--ig-surface-500); + border: 1px solid var(--ig-gray-300); + border-radius: 16px; + box-shadow: 0 1px 3px rgb(0 0 0 / 12%); + overflow: hidden; + + &::part(header) { + padding: 16px; + padding-inline-end: 6px; + gap: 16px; + } + + &[open]::part(header) { + border-block-end: 1px solid var(--ig-gray-300); + } + + &::part(indicator) { + transform: none; + } + + &::part(content) { + padding-left: 5px; + } + + & igc-switch { + display: block; + inline-size: 60px; + block-size: 40px; + + &::part(base) { + inline-size: 60px; + block-size: 40px; + justify-content: center; + align-items: center; + overflow: visible; + } + + &::part(control) { + overflow: visible; + } + } + + & igc-radio-group { + display: flex; + flex-direction: column; + gap: 24px; + margin-inline-start: 0; + } + + & igc-radio { + font: 600 12px / 16px "Aktiv Grotesk", sans-serif; + 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); + --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..0674c6726e 100644 --- a/samples/inputs/switches/styling/src/index.tsx +++ b/samples/inputs/switches/styling/src/index.tsx @@ -1,14 +1,32 @@ -import React from 'react'; +import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrSwitch } from 'igniteui-react'; +import { IgrSwitch, IgrRadio, IgrRadioGroup, IgrExpansionPanel } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function SwitchStyling() { + const [open, setOpen] = useState(true); return (
- Label + {/* 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 + +
); } 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..48aba56acb --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/src/index.css @@ -0,0 +1,15 @@ +/* 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); +@source "./index.tsx"; + +@custom-variant dark (&:where(.dark, .dark *)); + +.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..e82673e757 --- /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/bootstrap.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 diff --git a/samples/layouts/accordion/customization/src/AccordionCustomization.css b/samples/layouts/accordion/customization/src/AccordionCustomization.css deleted file mode 100644 index 89acd44513..0000000000 --- a/samples/layouts/accordion/customization/src/AccordionCustomization.css +++ /dev/null @@ -1,35 +0,0 @@ -igc-accordion { - width: 100%; -} - -.sample-wrapper { - overflow-y: auto; - max-height: 530px; - margin: 8px; -} - -igc-range-slider { - margin: 24px; -} - -.categories-container { - display: flex; - flex-flow: column nowrap; -} - -igc-checkbox, -igc-radio { - margin: 4px 0; -} - -igc-expansion-panel { - border: 1px solid rgba(174, 174, 174, 0.25); -} - -igc-rating { - flex-direction: row; -} - -.size-small { - --ig-size: var(--ig-size-small); -} diff --git a/samples/layouts/accordion/customization/src/index.css b/samples/layouts/accordion/customization/src/index.css index e69de29bb2..af3552c32b 100644 --- a/samples/layouts/accordion/customization/src/index.css +++ b/samples/layouts/accordion/customization/src/index.css @@ -0,0 +1,66 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(760px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} + +.panel-description { + margin: 0 0 16px; + color: var(--ig-gray-700); +} + +.categories-container { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px 24px; + max-width: 520px; +} + +.category-option, +.rating-option { + margin: 4px 0; +} + +.range-summary { + display: flex; + justify-content: space-between; + max-width: 560px; + margin-bottom: 4px; + font-weight: 600; +} + +.cost-slider { + max-width: 560px; + margin: 8px 0 0; +} + +.rating-options { + display: grid; + gap: 8px; + max-width: 360px; +} + +.rating-control { + flex-direction: row; +} + +.time-input { + max-width: 260px; +} + +.size-small { + --ig-size: var(--ig-size-small); +} diff --git a/samples/layouts/accordion/customization/src/index.tsx b/samples/layouts/accordion/customization/src/index.tsx index 8e138630bb..23b94cd758 100644 --- a/samples/layouts/accordion/customization/src/index.tsx +++ b/samples/layouts/accordion/customization/src/index.tsx @@ -1,7 +1,6 @@ import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; -import "./AccordionCustomization.css"; import { IgrAccordion, IgrCheckbox, @@ -22,6 +21,8 @@ import "igniteui-webcomponents/themes/light/bootstrap.css"; type Category = { checked: boolean; type: string }; +const ratingOptions = [2, 3, 4, 5]; + const clearIcon = ""; const clockIcon = @@ -37,6 +38,7 @@ export default class AccordionCustomization extends React.Component { ]; private dateTimeInput: IgrDateTimeInput; + private transportationPanel: IgrExpansionPanel; constructor(props: any) { super(props); @@ -44,7 +46,7 @@ export default class AccordionCustomization extends React.Component { categories: this.categories, cost: { lower: 200, upper: 800 }, rating: "", - time: "Time", + time: "Any time", }; this.categoriesChange = this.categoriesChange.bind(this); @@ -53,30 +55,42 @@ export default class AccordionCustomization extends React.Component { this.timeChange = this.timeChange.bind(this); this.clearTime = this.clearTime.bind(this); this.dateTimeInputRef = this.dateTimeInputRef.bind(this); + this.transportationPanelRef = this.transportationPanelRef.bind(this); registerIconFromText("clear", clearIcon, "material"); registerIconFromText("clock", clockIcon, "material"); } + public componentDidMount() { + if (this.transportationPanel) { + this.transportationPanel.open = true; + } + } + public render(): JSX.Element { + const selectedCategories = this.state.categories + .filter((c: Category) => c.checked) + .map((c: Category) => c.type) + .join(", "); + return ( -
-
+
+
- + - Categories - {this.state.categories.some((c: Category) => c.checked) && ": "} - {this.state.categories - .filter((c: Category) => c.checked) - .map((c: Category) => c.type) - .join(", ")} + Transportation{selectedCategories && `: ${selectedCategories}`} + Choose how you want to travel +

+ Select one or more transportation options for your trip. +

{this.state.categories.map((c: Category) => { return ( this.categoriesChange(e, c.type) @@ -91,11 +105,19 @@ export default class AccordionCustomization extends React.Component { - Cost: ${this.state.cost.lower} to $ - {this.state.cost.upper} + Budget: ${this.state.cost.lower} - ${this.state.cost.upper} + Set the price range +

+ Adjust the minimum and maximum cost for available options. +

+
+ ${this.state.cost.lower} + ${this.state.cost.upper} +
{ - Rating{this.state.rating && ": "} + Minimum Rating{this.state.rating && ": "} {this.state.rating} + Filter by review score - - {[1, 2, 3, 4].map((rating) => { +

+ Choose the lowest rating you want to include in the results. +

+ + {ratingOptions.map((rating) => { return ( { rating > 1 ? "s" : "" } or more`} max={5} - value={rating + 0.5} - className="size-small" + value={rating} + className="rating-control size-small" readOnly={true} > @@ -136,11 +163,16 @@ export default class AccordionCustomization extends React.Component { - {this.state.time} + Arrival Time + {this.state.time !== "Any time" && `: ${this.state.time}`} + Set the latest arrival time +

+ Pick the latest acceptable arrival time for your trip. +

{ const s = e.target as IgrDateTimeInput; const result = s.value !== null - ? `Arrive before ${e.detail.toLocaleTimeString([], { + ? e.detail.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", - })}` - : "Time"; + }) + : "Any time"; this.setState({ time: result, }); @@ -207,7 +239,7 @@ export default class AccordionCustomization extends React.Component { public clearTime() { this.dateTimeInput.clear(); this.setState({ - time: "Time", + time: "Any time", }); } @@ -217,8 +249,14 @@ export default class AccordionCustomization extends React.Component { } this.dateTimeInput = input; } + + public transportationPanelRef(panel: IgrExpansionPanel) { + if (!panel) { + return; + } + this.transportationPanel = panel; + } } -// rendering above component to the React DOM const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); diff --git a/samples/layouts/accordion/nested-scenario/src/AccordionNestedScenario.css b/samples/layouts/accordion/nested-scenario/src/AccordionNestedScenario.css deleted file mode 100644 index 2eb281b0e4..0000000000 --- a/samples/layouts/accordion/nested-scenario/src/AccordionNestedScenario.css +++ /dev/null @@ -1,17 +0,0 @@ -igc-accordion { - width: 100%; -} - -.sample-wrapper { - overflow-y: auto; - max-height: 470px; - margin: 8px; -} - -igc-switch { - padding: 16px; -} - -igc-expansion-panel { - border: 1px solid rgba(174, 174, 174, 0.25); -} diff --git a/samples/layouts/accordion/nested-scenario/src/index.css b/samples/layouts/accordion/nested-scenario/src/index.css index e69de29bb2..091f1b043c 100644 --- a/samples/layouts/accordion/nested-scenario/src/index.css +++ b/samples/layouts/accordion/nested-scenario/src/index.css @@ -0,0 +1,24 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(760px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 12px; +} + +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} diff --git a/samples/layouts/accordion/nested-scenario/src/index.tsx b/samples/layouts/accordion/nested-scenario/src/index.tsx index 8d7a68fbac..809eb67c19 100644 --- a/samples/layouts/accordion/nested-scenario/src/index.tsx +++ b/samples/layouts/accordion/nested-scenario/src/index.tsx @@ -1,75 +1,97 @@ -import React, { useState } from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import './AccordionNestedScenario.css'; +import React, { useRef } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; import { - IgrAccordion, IgrExpansionPanel, IgrSwitch, - IgrCheckboxChangeEventArgs -} from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; + IgrAccordion, + IgrCheckboxChangeEventArgs, + IgrExpansionPanel, + IgrSwitch, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; export default function AccordionNestedScenario() { + const outerAccordionRef = useRef(null); + const innerAccordionRef = useRef(null); - const [singleExpand, setSingleExpand] = useState(false); - - const switchChange = (e: IgrCheckboxChangeEventArgs) => { - setSingleExpand(e.detail.checked); + const switchChange = (e: IgrCheckboxChangeEventArgs) => { + const { checked } = e.detail; + + if (outerAccordionRef.current) { + outerAccordionRef.current.singleExpand = checked; + } + + if (innerAccordionRef.current) { + innerAccordionRef.current.singleExpand = checked; } + }; - return ( -
- Single Expand -
- - - Common questions about renewal. - - - - What happens if I don't renew my subscription? - Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. - - - If I don't renew my subscription will I still have access to previous versions of Infragistics products? - Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or - previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing - to renew it. - - - Will I be automatically charged for my renewal/ Can I be automatically charged for renewal? - Any new subscriptions purchased online, via our eCommerce system, will renew automatically. Subscription renewal can be canceled, - at any time, before the next automatic renewal date. Subscriptions purchased directly from Infragistics or Infragistics' partners are - subject to the renewal terms that were agreed upon as part of that purchase. - - - - - - What has changed about subscription and pricing model? - We have moved to a subscription-based pricing model for all our developer tools. This makes it easier - for you to manage your license subscriptions and allows us to provide a better level of service for you. We - updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI - (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, - including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components, as well as Infragistics Professional, - Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, - so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best - price. - - - Who will the updated changes impact? - The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and - Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, - Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this - blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. - So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will - be honored and renewed based upon the current agreement. - - -
+ return ( +
+
+
+ + Single Expand +
- ); + + + + Workspace Settings + + Nested account, access, and billing options + + + + + Profile + Name, photo, and contact details +

+ Update the public information shown to other workspace + members. +

+ + + + Security + Password and sign-in preferences +

+ Review active sessions, change your password, and configure + sign-in requirements. +

+ + + + Notifications + Email and product updates +

+ Choose the messages you receive for comments, assignments, and + releases. +

+ + + + + + Team Access + Members, roles, and permissions +

+ Invite teammates, assign roles, and review workspace permissions. +

+ + + + Billing + Plan, invoices, and payment method +

+ Manage subscription details, billing contacts, and invoice + delivery. +

+ + +
+
+ ); } -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); diff --git a/samples/layouts/accordion/overview/src/AccordionOverview.css b/samples/layouts/accordion/overview/src/AccordionOverview.css deleted file mode 100644 index 816b7feede..0000000000 --- a/samples/layouts/accordion/overview/src/AccordionOverview.css +++ /dev/null @@ -1,17 +0,0 @@ -igc-accordion { - width: 100%; -} - -.sample-wrapper { - overflow-y: auto; - max-height: 380px; - margin: 8px; -} - -igc-switch { - padding: 16px; -} - -igc-expansion-panel { - border: 1px solid rgba(174, 174, 174, 0.25); -} diff --git a/samples/layouts/accordion/overview/src/index.css b/samples/layouts/accordion/overview/src/index.css index e69de29bb2..f6a5352f94 100644 --- a/samples/layouts/accordion/overview/src/index.css +++ b/samples/layouts/accordion/overview/src/index.css @@ -0,0 +1,24 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 12px; +} + +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} diff --git a/samples/layouts/accordion/overview/src/index.tsx b/samples/layouts/accordion/overview/src/index.tsx index cd982a3bd7..a0dfa46bfd 100644 --- a/samples/layouts/accordion/overview/src/index.tsx +++ b/samples/layouts/accordion/overview/src/index.tsx @@ -1,68 +1,53 @@ -import React, { useState } from 'react'; +import React, { useRef } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import './AccordionOverview.css'; import { - IgrAccordion, IgrExpansionPanel, IgrSwitch, - IgrCheckboxChangeEventArgs } from 'igniteui-react'; + IgrAccordion, + IgrCheckboxChangeEventArgs, + IgrExpansionPanel, + IgrSwitch +} from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function AccordionOverview() { - - const [singleExpand, setSingleExpand] = useState(false); + const accordionRef = useRef(null); const switchChange = (e: IgrCheckboxChangeEventArgs) => { - setSingleExpand(e.detail.checked); - } - + if (accordionRef.current) { + accordionRef.current.singleExpand = e.detail.checked; + } + }; + return ( -
- Single Expand -
- - - What has changed about subscription and pricing model? - We have moved to a subscription-based pricing model for all our developer tools. This makes it easier - for you to manage your license subscriptions and allows us to provide a better level of service for you. We - updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI - (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, - including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components, as well as Infragistics Professional, - Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, - so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best - price. - - - Who will the updated changes impact? - The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and - Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, - Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this - blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. - So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will - be honored and renewed based upon the current agreement. - - - What is the difference between your old model and your current subscription model for Ignite UI? - For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages will be replaced with - packages that include a “Trial Version” watermark. Licensed packages for Ignite UI will be available from our cloud hosted ProGet - server. For more information, please refer to this article: Moving from Trial to Licensed Ignite UI NPM Packages +
+
+
+ + Single Expand + +
+ + + + Account + Profile and security settings +

Update your profile details, password, and sign-in preferences.

 - What happens if I don't renew my subscription? - Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. + Notifications + Email and product updates +

Choose which notifications you receive and how often they are delivered.

 - If I don't renew my subscription will I still have access to previous versions of Infragistics products? - Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or - previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing - to renew it. + Billing + Payment and invoice settings +

Manage payment methods, billing contacts, and invoice delivery options.
- ); } -// rendering above component to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); diff --git a/samples/layouts/accordion/programmatic-expansion/README.md b/samples/layouts/accordion/programmatic-expansion/README.md new file mode 100644 index 0000000000..5ee8cc0584 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Programmatic Expansion feature using [Accordion](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/layouts/accordion/programmatic-expansion +``` + +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/layouts/accordion/programmatic-expansion/index.html b/samples/layouts/accordion/programmatic-expansion/index.html new file mode 100644 index 0000000000..050be7adb0 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/index.html @@ -0,0 +1,11 @@ + + + + Accordion Programmatic Expansion + + + +
+ + + diff --git a/samples/layouts/accordion/programmatic-expansion/package.json b/samples/layouts/accordion/programmatic-expansion/package.json new file mode 100644 index 0000000000..de10646370 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-accordion-programmatic-expansion", + "description": "This project provides example of Accordion Programmatic Expansion 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/layouts/accordion/programmatic-expansion/sandbox.config.json b/samples/layouts/accordion/programmatic-expansion/sandbox.config.json new file mode 100644 index 0000000000..f8b5562bd6 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/layouts/accordion/programmatic-expansion/src/index.css b/samples/layouts/accordion/programmatic-expansion/src/index.css new file mode 100644 index 0000000000..0d434aede3 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/src/index.css @@ -0,0 +1,29 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-toolbar { + display: flex; + justify-content: flex-end; + gap: 8px; + margin-bottom: 12px; +} + +.action-button { + min-width: 96px; +} + +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} diff --git a/samples/layouts/accordion/programmatic-expansion/src/index.tsx b/samples/layouts/accordion/programmatic-expansion/src/index.tsx new file mode 100644 index 0000000000..a33174d2d2 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/src/index.tsx @@ -0,0 +1,64 @@ +import React, { useRef } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrAccordion, IgrButton, IgrExpansionPanel } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function AccordionProgrammaticExpansion() { + const accordionRef = useRef(null); + + return ( +
+
+
+ accordionRef.current?.showAll()} + > + Show All + + accordionRef.current?.hideAll()} + > + Hide All + +
+ + + + Billing + Invoices and payment settings +

+ Review invoices, update payment methods, and manage billing + contacts. +

+ + + + Security + Password and access controls +

+ Configure password rules, multi-factor authentication, and + recovery options. +

+ + + + Notifications + Product updates and account alerts +

+ Choose which product updates and account alerts are sent to your + team. +

+ + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/accordion/programmatic-expansion/tsconfig.json b/samples/layouts/accordion/programmatic-expansion/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/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-jsx", + "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/layouts/accordion/programmatic-expansion/vite.config.js b/samples/layouts/accordion/programmatic-expansion/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/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/layouts/accordion/styling/.devcontainer/devcontainer.json b/samples/layouts/accordion/styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..5779654722 --- /dev/null +++ b/samples/layouts/accordion/styling/.devcontainer/devcontainer.json @@ -0,0 +1 @@ +{"image":"mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye"} diff --git a/samples/layouts/accordion/styling/README.md b/samples/layouts/accordion/styling/README.md new file mode 100644 index 0000000000..abd2d2cb78 --- /dev/null +++ b/samples/layouts/accordion/styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Styling feature using [Accordion](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/layouts/accordion/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/layouts/accordion/styling/index.html b/samples/layouts/accordion/styling/index.html new file mode 100644 index 0000000000..a658e62846 --- /dev/null +++ b/samples/layouts/accordion/styling/index.html @@ -0,0 +1,11 @@ + + + + Accordion Styling + + + +
+ + + diff --git a/samples/layouts/accordion/styling/package.json b/samples/layouts/accordion/styling/package.json new file mode 100644 index 0000000000..ebf67487ca --- /dev/null +++ b/samples/layouts/accordion/styling/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-accordion-styling", + "description": "This project provides example of Accordion 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": { + "@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/layouts/accordion/styling/sandbox.config.json b/samples/layouts/accordion/styling/sandbox.config.json new file mode 100644 index 0000000000..f8b5562bd6 --- /dev/null +++ b/samples/layouts/accordion/styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/layouts/accordion/styling/src/index.css b/samples/layouts/accordion/styling/src/index.css new file mode 100644 index 0000000000..543269784c --- /dev/null +++ b/samples/layouts/accordion/styling/src/index.css @@ -0,0 +1,50 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} + +.accordion-sample igc-expansion-panel { + background-color: var(--ig-gray-50); + color: var(--ig-gray-900); + border-radius: 4px; +} + +.accordion-sample igc-expansion-panel::part(header) { + background-color: var(--ig-gray-100); +} + +.accordion-sample igc-expansion-panel[open]::part(header) { + background-color: var(--ig-primary-50); +} + +.accordion-sample igc-expansion-panel::part(indicator) { + color: var(--ig-primary-500); +} + +.accordion-sample igc-expansion-panel::part(title) { + color: var(--ig-gray-900); + font-weight: 600; +} + +.accordion-sample igc-expansion-panel[open]::part(title), +.accordion-sample igc-expansion-panel[open]::part(subtitle) { + color: var(--ig-primary-700); +} + +.accordion-sample igc-expansion-panel::part(content) { + color: var(--ig-gray-700); +} diff --git a/samples/layouts/accordion/styling/src/index.tsx b/samples/layouts/accordion/styling/src/index.tsx new file mode 100644 index 0000000000..420d3786ce --- /dev/null +++ b/samples/layouts/accordion/styling/src/index.tsx @@ -0,0 +1,45 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrAccordion, IgrExpansionPanel } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function AccordionStyling() { + return ( +
+
+ + + Getting Started + Setup and onboarding +

+ Find installation steps, project setup guidance, and resources for + building your first application. +

+ + + + Billing + Invoices and payment methods +

+ Review invoices, update payment methods, and manage billing + contacts for your account. +

+ + + + Security + Access and authentication +

+ Configure password rules, multi-factor authentication, and + recovery options for your team. +

+ + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/accordion/styling/tsconfig.json b/samples/layouts/accordion/styling/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/accordion/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-jsx", + "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/layouts/accordion/styling/vite.config.js b/samples/layouts/accordion/styling/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/samples/layouts/accordion/styling/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/layouts/accordion/tailwind-styling/.devcontainer/devcontainer.json b/samples/layouts/accordion/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..5779654722 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/.devcontainer/devcontainer.json @@ -0,0 +1 @@ +{"image":"mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye"} diff --git a/samples/layouts/accordion/tailwind-styling/README.md b/samples/layouts/accordion/tailwind-styling/README.md new file mode 100644 index 0000000000..e5af6a5a19 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Accordion](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/layouts/accordion/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/layouts/accordion/tailwind-styling/index.html b/samples/layouts/accordion/tailwind-styling/index.html new file mode 100644 index 0000000000..d21cb0e1c3 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + Accordion Tailwind Styling + + + +
+ + + diff --git a/samples/layouts/accordion/tailwind-styling/package.json b/samples/layouts/accordion/tailwind-styling/package.json new file mode 100644 index 0000000000..24d204ed97 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-accordion-tailwind-styling", + "description": "This project provides example of Accordion 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.3.3", + "@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.3.3", + "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/layouts/accordion/tailwind-styling/sandbox.config.json b/samples/layouts/accordion/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..f8b5562bd6 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/layouts/accordion/tailwind-styling/src/index.css b/samples/layouts/accordion/tailwind-styling/src/index.css new file mode 100644 index 0000000000..d5519b6763 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/src/index.css @@ -0,0 +1,9 @@ +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; + +.accordion-tailwind-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} diff --git a/samples/layouts/accordion/tailwind-styling/src/index.tsx b/samples/layouts/accordion/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..4067390c92 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/src/index.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrAccordion, IgrExpansionPanel } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +const panelClassName = [ + "rounded", + "bg-[var(--ig-gray-50)]", + "text-[var(--ig-gray-900)]", + "[&::part(header)]:bg-[var(--ig-gray-100)]", + "[&[open]::part(header)]:bg-[var(--ig-primary-50)]", + "[&::part(indicator)]:text-[var(--ig-primary-500)]", + "[&::part(title)]:font-semibold", + "[&::part(title)]:text-[var(--ig-gray-900)]", + "[&[open]::part(title)]:text-[var(--ig-primary-700)]", + "[&[open]::part(subtitle)]:text-[var(--ig-primary-700)]", + "[&::part(content)]:text-[var(--ig-gray-700)]", +].join(" "); + +export default function AccordionTailwindStyling() { + return ( +
+
+ + + Getting Started + Setup and onboarding +

+ Find installation steps, project setup guidance, and resources for + building your first application. +

+ + + + Billing + Invoices and payment methods +

+ Review invoices, update payment methods, and manage billing + contacts for your account. +

+ + + + Security + Access and authentication +

+ Configure password rules, multi-factor authentication, and + recovery options for your team. +

+ + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/accordion/tailwind-styling/tsconfig.json b/samples/layouts/accordion/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/accordion/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-jsx", + "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/layouts/accordion/tailwind-styling/vite.config.js b/samples/layouts/accordion/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..c1fff0c83c --- /dev/null +++ b/samples/layouts/accordion/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 + }, +}); diff --git a/samples/layouts/avatar/overview/src/index.css b/samples/layouts/avatar/overview/src/index.css index 9407c4b19a..8c31e65714 100644 --- a/samples/layouts/avatar/overview/src/index.css +++ b/samples/layouts/avatar/overview/src/index.css @@ -30,11 +30,14 @@ } .avatar-stack igc-avatar + igc-avatar { - margin-inline-start: -1.5rem; + /* Proportional to the avatar's own rendered size (--size, set internally + by the theme) rather than a fixed length, since themes disagree widely + on how big a "large" avatar actually is. */ + margin-inline-start: calc(var(--size) * -0.27); } .avatar-stack igc-avatar::part(base) { - box-shadow: 0 0 0 0.375rem var(--ig-surface-500); + box-shadow: 0 0 0 calc(var(--size) * 0.07) var(--ig-surface-500); } .avatar-stack igc-avatar:last-child {