diff --git a/browser/public/meta.json b/browser/public/meta.json index f14291184a..ec4e2b46c9 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-04 17:02:55","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-10 11:11:25","note":"this file is auto-generated"} diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index f14291184a..ec4e2b46c9 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-04 17:02:55","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-10 11:11:25","note":"this file is auto-generated"} 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/src/index.css b/samples/inputs/badge/tailwind-styling/src/index.css index 101b4607d2..d98898d2b6 100644 --- a/samples/inputs/badge/tailwind-styling/src/index.css +++ b/samples/inputs/badge/tailwind-styling/src/index.css @@ -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} + + + ))} + ); }