From 3d29e9290b5aff5c358d8ff7b71d9a5bd580822c Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 26 Aug 2026 19:02:18 +0300 Subject: [PATCH 1/6] fix(button-group): update samples styling --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- .../alignment/src/ButtonGroupAlignment.css | 39 ------ .../button-group/alignment/src/index.css | 34 ++++- .../button-group/alignment/src/index.tsx | 5 +- .../button-group/custom-toggle/src/index.css | 16 +-- .../button-group/custom-toggle/src/index.tsx | 14 +-- .../src/ButtonGroupStates.css | 76 ------------ .../interaction-states/src/index.css | 116 +++++++++++++++++- .../interaction-states/src/index.tsx | 36 ++++-- .../layout/src/ButtonGroupLayout.css | 19 --- .../inputs/button-group/layout/src/index.css | 20 ++- .../inputs/button-group/layout/src/index.tsx | 3 +- .../overview/src/ButtonGroupOverview.css | 40 ------ .../button-group/overview/src/index.css | 38 +++++- .../button-group/overview/src/index.tsx | 5 +- .../selection/src/ButtonGroupSelection.css | 34 ----- .../button-group/selection/src/index.css | 47 ++++++- .../button-group/selection/src/index.tsx | 9 +- .../button-group/size/src/ButtonGroupSize.css | 33 ----- .../inputs/button-group/size/src/index.css | 55 ++++++++- .../inputs/button-group/size/src/index.tsx | 15 +-- .../src/ButtonGroupInteractionStates.css | 37 ------ .../inputs/button-group/states/src/index.css | 90 +++++++++++++- .../inputs/button-group/states/src/index.tsx | 47 +++---- .../styling/src/ButtonGroupStyling.css | 32 ----- .../inputs/button-group/styling/src/index.css | 26 +++- .../inputs/button-group/styling/src/index.tsx | 27 ++-- .../tailwind-styling/src/index.css | 40 ++---- .../tailwind-styling/src/index.tsx | 26 ++-- 30 files changed, 525 insertions(+), 458 deletions(-) delete mode 100644 samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css delete mode 100644 samples/inputs/button-group/interaction-states/src/ButtonGroupStates.css delete mode 100644 samples/inputs/button-group/layout/src/ButtonGroupLayout.css delete mode 100644 samples/inputs/button-group/overview/src/ButtonGroupOverview.css delete mode 100644 samples/inputs/button-group/selection/src/ButtonGroupSelection.css delete mode 100644 samples/inputs/button-group/size/src/ButtonGroupSize.css delete mode 100644 samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css delete mode 100644 samples/inputs/button-group/styling/src/ButtonGroupStyling.css diff --git a/browser/public/meta.json b/browser/public/meta.json index b57b1e34c3..d288800bde 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-08-26 18:48:51","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..d288800bde 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-08-26 18:48:51","note":"this file is auto-generated"} \ No newline at end of file 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..43aedd435d 100644 --- a/samples/inputs/button-group/alignment/src/index.css +++ b/samples/inputs/button-group/alignment/src/index.css @@ -1,2 +1,32 @@ -/* 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 { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.429; + letter-spacing: 0.0178571em; + color: var(--ig-gray-700); + 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..6471cf624c 100644 --- a/samples/inputs/button-group/alignment/src/index.tsx +++ b/samples/inputs/button-group/alignment/src/index.tsx @@ -2,7 +2,6 @@ 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 './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..283cba752b 100644 --- a/samples/inputs/button-group/custom-toggle/src/index.tsx +++ b/samples/inputs/button-group/custom-toggle/src/index.tsx @@ -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..c930794395 100644 --- a/samples/inputs/button-group/interaction-states/src/index.css +++ b/samples/inputs/button-group/interaction-states/src/index.css @@ -1,2 +1,114 @@ -/* 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 { + margin: 0; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.429; + letter-spacing: 0.0178571em; + color: var(--ig-gray-700); +} + +.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; + } +} + +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); +} \ 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..f809b7f822 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 { + IgrButtonGroup, + IgrIcon, + IgrRipple, + IgrToggleButton, + registerIconFromText +} from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupStates.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..760206b7fa 100644 --- a/samples/inputs/button-group/layout/src/index.css +++ b/samples/inputs/button-group/layout/src/index.css @@ -1,5 +1,21 @@ -/* 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; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 3.75rem; +} + +igc-button-group { + max-width: 400px; + min-width: 280px; +} igc-button-group { display: inline-block; diff --git a/samples/inputs/button-group/layout/src/index.tsx b/samples/inputs/button-group/layout/src/index.tsx index 3bc28e0a57..8c5fafd0ac 100644 --- a/samples/inputs/button-group/layout/src/index.tsx +++ b/samples/inputs/button-group/layout/src/index.tsx @@ -2,7 +2,6 @@ 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 './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..9226483344 100644 --- a/samples/inputs/button-group/overview/src/index.tsx +++ b/samples/inputs/button-group/overview/src/index.tsx @@ -6,7 +6,6 @@ import { IgrToggleButton, } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupOverview.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..f7407bfb13 100644 --- a/samples/inputs/button-group/selection/src/index.css +++ b/samples/inputs/button-group/selection/src/index.css @@ -1,2 +1,45 @@ -/* 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 { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.429; + letter-spacing: 0.0178571em; + color: var(--ig-gray-700); + 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..db3955c692 100644 --- a/samples/inputs/button-group/selection/src/index.tsx +++ b/samples/inputs/button-group/selection/src/index.tsx @@ -8,7 +8,6 @@ import { registerIconFromText, } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupSelection.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..2cd807a89a 100644 --- a/samples/inputs/button-group/size/src/index.css +++ b/samples/inputs/button-group/size/src/index.css @@ -1,2 +1,53 @@ -/* 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 { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.429; + letter-spacing: 0.0178571em; + color: var(--ig-gray-700); + 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..0fc3b83870 100644 --- a/samples/inputs/button-group/size/src/index.tsx +++ b/samples/inputs/button-group/size/src/index.tsx @@ -2,7 +2,6 @@ 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 './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..956c493eab 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 { + margin: 0; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.429; + letter-spacing: 0.0178571em; + color: var(--ig-gray-700); +} + +.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..9e9dedd08a 100644 --- a/samples/inputs/button-group/states/src/index.tsx +++ b/samples/inputs/button-group/states/src/index.tsx @@ -2,7 +2,6 @@ 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 './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..5949382503 100644 --- a/samples/inputs/button-group/styling/src/index.tsx +++ b/samples/inputs/button-group/styling/src/index.tsx @@ -2,27 +2,24 @@ 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 './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..0a5a3a4d60 100644 --- a/samples/inputs/button-group/tailwind-styling/src/index.tsx +++ b/samples/inputs/button-group/tailwind-styling/src/index.tsx @@ -8,20 +8,18 @@ const views = ['Day', 'Week', 'Month']; export default function ButtonGroupTailwindStyling(): JSX.Element { return ( -
- - {views.map((view) => ( - - {view} - - - ))} - -
+ + {views.map((view) => ( + + {view} + + + ))} + ); } From be7fbd913d888dd4ff82e28c60a5e05a6591ef81 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 26 Aug 2026 19:07:25 +0300 Subject: [PATCH 2/6] fix(button-group): add comment to interaction states styles --- samples/inputs/button-group/interaction-states/src/index.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/samples/inputs/button-group/interaction-states/src/index.css b/samples/inputs/button-group/interaction-states/src/index.css index c930794395..4a8fecfc2d 100644 --- a/samples/inputs/button-group/interaction-states/src/index.css +++ b/samples/inputs/button-group/interaction-states/src/index.css @@ -79,6 +79,8 @@ igc-icon { } } +/* 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; } @@ -111,4 +113,5 @@ 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 +} +/* WARNING END \ No newline at end of file From 482e922ae80f20f5556c369cf0e0a844b1f72355 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 26 Aug 2026 19:30:28 +0300 Subject: [PATCH 3/6] fix(build): fix comment line --- samples/inputs/button-group/interaction-states/src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/inputs/button-group/interaction-states/src/index.css b/samples/inputs/button-group/interaction-states/src/index.css index 4a8fecfc2d..db5f9a231e 100644 --- a/samples/inputs/button-group/interaction-states/src/index.css +++ b/samples/inputs/button-group/interaction-states/src/index.css @@ -114,4 +114,4 @@ igc-toggle-button.state-focused[selected]::part(toggle) { border-color: var(--item-selected-active-border-color); color: var(--item-focused-hover-text-color); } -/* WARNING END \ No newline at end of file +/* WARNING END */ \ No newline at end of file From d802c786485e8ecc8cf82c1b5c908b4face57260 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 27 Aug 2026 13:27:18 +0300 Subject: [PATCH 4/6] fix(button-group): update labels styling --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/button-group/alignment/src/index.css | 10 ++++++---- .../button-group/interaction-states/src/index.css | 10 +++++----- samples/inputs/button-group/selection/src/index.css | 9 +++++---- samples/inputs/button-group/size/src/index.css | 9 +++++---- samples/inputs/button-group/states/src/index.css | 10 +++++----- 7 files changed, 28 insertions(+), 24 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index d288800bde..87a47cc421 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-26 18:48:51","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-27 13:25:15","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 d288800bde..87a47cc421 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-26 18:48:51","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-27 13:25:15","note":"this file is auto-generated"} \ 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 43aedd435d..dff506227b 100644 --- a/samples/inputs/button-group/alignment/src/index.css +++ b/samples/inputs/button-group/alignment/src/index.css @@ -23,10 +23,12 @@ igc-button-group { } .sample-layout span { - font-size: 0.875rem; + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; font-weight: 400; - line-height: 1.429; - letter-spacing: 0.0178571em; - color: var(--ig-gray-700); + 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/interaction-states/src/index.css b/samples/inputs/button-group/interaction-states/src/index.css index db5f9a231e..cb82e710d6 100644 --- a/samples/inputs/button-group/interaction-states/src/index.css +++ b/samples/inputs/button-group/interaction-states/src/index.css @@ -25,12 +25,12 @@ .row-label, .column-label, .cell-label { - margin: 0; - font-size: 0.875rem; + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; font-weight: 400; - line-height: 1.429; - letter-spacing: 0.0178571em; - color: var(--ig-gray-700); + line-height: 20px; + letter-spacing: 0.3px; } .column-label, diff --git a/samples/inputs/button-group/selection/src/index.css b/samples/inputs/button-group/selection/src/index.css index f7407bfb13..cf076ebe73 100644 --- a/samples/inputs/button-group/selection/src/index.css +++ b/samples/inputs/button-group/selection/src/index.css @@ -17,11 +17,12 @@ } .sample-label { - font-size: 0.875rem; + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; font-weight: 400; - line-height: 1.429; - letter-spacing: 0.0178571em; - color: var(--ig-gray-700); + line-height: 20px; + letter-spacing: 0.3px; text-align: end; } diff --git a/samples/inputs/button-group/size/src/index.css b/samples/inputs/button-group/size/src/index.css index 2cd807a89a..1f5ebf5847 100644 --- a/samples/inputs/button-group/size/src/index.css +++ b/samples/inputs/button-group/size/src/index.css @@ -17,11 +17,12 @@ } .sample-label { - font-size: 0.875rem; + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; font-weight: 400; - line-height: 1.429; - letter-spacing: 0.0178571em; - color: var(--ig-gray-700); + line-height: 20px; + letter-spacing: 0.3px; text-align: end; } diff --git a/samples/inputs/button-group/states/src/index.css b/samples/inputs/button-group/states/src/index.css index 956c493eab..d09af3d35b 100644 --- a/samples/inputs/button-group/states/src/index.css +++ b/samples/inputs/button-group/states/src/index.css @@ -27,12 +27,12 @@ .row-label, .column-label, .cell-label { - margin: 0; - font-size: 0.875rem; + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; font-weight: 400; - line-height: 1.429; - letter-spacing: 0.0178571em; - color: var(--ig-gray-700); + line-height: 20px; + letter-spacing: 0.3px; } .column-label, From a12adab3c489c7cc374a1436dc8c84da21b32886 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 27 Aug 2026 21:51:17 +0300 Subject: [PATCH 5/6] fix(button-group): update layout style --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- .../inputs/button-group/layout/src/index.css | 23 ++++++++++--------- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index 87a47cc421..0154d43fef 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-27 13:25:15","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-27 18:29:29","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 87a47cc421..0154d43fef 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-27 13:25:15","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-27 18:29:29","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/button-group/layout/src/index.css b/samples/inputs/button-group/layout/src/index.css index 760206b7fa..b4583727ba 100644 --- a/samples/inputs/button-group/layout/src/index.css +++ b/samples/inputs/button-group/layout/src/index.css @@ -1,27 +1,28 @@ .sbSwitch { - display: grid; - place-items: center; - height: 100vh; + display: grid; + place-items: center; + height: 100vh; } .sample-layout { display: flex; + flex-direction: row; align-items: center; justify-content: center; - flex-wrap: wrap; - gap: 3.75rem; + gap: 80px; + min-height: 5.5rem; } igc-button-group { + display: inline-block; max-width: 400px; - min-width: 280px; } -igc-button-group { - 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; } From a798843472cc5e3a7405f5dca75ba69f52644bba Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Mon, 31 Aug 2026 08:58:47 +0300 Subject: [PATCH 6/6] fix(samples): update styling --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/badge/dot/src/index.css | 18 ++------- samples/inputs/badge/dot/src/index.tsx | 2 +- samples/inputs/badge/icon/src/index.css | 23 ++--------- samples/inputs/badge/icon/src/index.tsx | 2 +- samples/inputs/badge/outlined/src/index.css | 23 ++--------- samples/inputs/badge/outlined/src/index.tsx | 6 +-- samples/inputs/badge/overview/src/index.css | 6 --- samples/inputs/badge/overview/src/index.tsx | 2 +- samples/inputs/badge/shape/src/index.css | 19 +--------- samples/inputs/badge/shape/src/index.tsx | 8 ++-- samples/inputs/badge/size/src/index.css | 19 +--------- samples/inputs/badge/size/src/index.tsx | 8 ++-- samples/inputs/badge/styling/src/index.css | 6 +-- samples/inputs/badge/styling/src/index.tsx | 2 +- .../badge/tailwind-styling/src/index.css | 6 +-- .../badge/tailwind-styling/src/index.tsx | 2 +- samples/inputs/badge/type/src/index.css | 2 +- samples/inputs/badge/type/src/index.tsx | 2 +- samples/inputs/badge/variants/src/index.css | 38 ++----------------- samples/inputs/badge/variants/src/index.tsx | 8 ++-- .../button-group/alignment/src/index.css | 2 +- .../interaction-states/src/index.css | 2 +- .../button-group/selection/src/index.css | 2 +- .../inputs/button-group/size/src/index.css | 2 +- .../inputs/button-group/states/src/index.css | 2 +- 27 files changed, 52 insertions(+), 164 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index 0154d43fef..04c1a12899 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-27 18:29:29","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-29 22:56:13","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 0154d43fef..04c1a12899 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-27 18:29:29","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-29 22:56:13","note":"this file is auto-generated"} \ No newline at end of file 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/dot/src/index.tsx b/samples/inputs/badge/dot/src/index.tsx index 551a61e7b7..1987b6fc98 100644 --- a/samples/inputs/badge/dot/src/index.tsx +++ b/samples/inputs/badge/dot/src/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import './index.css'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/material.css'; const notificationsIcon = ''; 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/icon/src/index.tsx b/samples/inputs/badge/icon/src/index.tsx index bd4f68d39b..30353665ad 100644 --- a/samples/inputs/badge/icon/src/index.tsx +++ b/samples/inputs/badge/icon/src/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/material.css'; const checkIcon = ''; diff --git a/samples/inputs/badge/outlined/src/index.css b/samples/inputs/badge/outlined/src/index.css index 708e928a08..8c4abf8b3b 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 { @@ -65,23 +65,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); @@ -134,7 +117,7 @@ igc-badge igc-icon { } .step-label { - 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/outlined/src/index.tsx b/samples/inputs/badge/outlined/src/index.tsx index a110275e9b..f91dc5b296 100644 --- a/samples/inputs/badge/outlined/src/index.tsx +++ b/samples/inputs/badge/outlined/src/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrBadge, IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/material.css'; const favoriteBorderIcon = ''; @@ -27,7 +27,7 @@ export default function BadgeOutlined(): JSX.Element {
- 23 + 23
@@ -47,7 +47,7 @@ export default function BadgeOutlined(): JSX.Element { {step.index} {step.current && ( - + )}
{step.label} diff --git a/samples/inputs/badge/overview/src/index.css b/samples/inputs/badge/overview/src/index.css index 6a1e390d1f..02d42c4142 100644 --- a/samples/inputs/badge/overview/src/index.css +++ b/samples/inputs/badge/overview/src/index.css @@ -33,7 +33,6 @@ igc-badge { } .event-example igc-chip::part(base) { - background-color: #E0E0E0; border-radius: 999px; } @@ -42,11 +41,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/overview/src/index.tsx b/samples/inputs/badge/overview/src/index.tsx index 46b6333d63..976c1396ca 100644 --- a/samples/inputs/badge/overview/src/index.tsx +++ b/samples/inputs/badge/overview/src/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrAvatar, IgrBadge, IgrChip, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/material.css'; const checkIcon = ''; diff --git a/samples/inputs/badge/shape/src/index.css b/samples/inputs/badge/shape/src/index.css index 4d24943e5a..9d5bcd82c9 100644 --- a/samples/inputs/badge/shape/src/index.css +++ b/samples/inputs/badge/shape/src/index.css @@ -20,7 +20,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 +32,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..0fb348a77b 100644 --- a/samples/inputs/badge/shape/src/index.tsx +++ b/samples/inputs/badge/shape/src/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/material.css'; const checkIcon = ''; @@ -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..e826bceb76 100644 --- a/samples/inputs/badge/size/src/index.css +++ b/samples/inputs/badge/size/src/index.css @@ -21,7 +21,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 +30,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..ddfb5f56d5 100644 --- a/samples/inputs/badge/size/src/index.tsx +++ b/samples/inputs/badge/size/src/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/material.css'; const checkIcon = ''; @@ -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/styling/src/index.tsx b/samples/inputs/badge/styling/src/index.tsx index ca4ee2ae91..daa7e74620 100644 --- a/samples/inputs/badge/styling/src/index.tsx +++ b/samples/inputs/badge/styling/src/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/material.css'; const personIcon = ''; 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/tailwind-styling/src/index.tsx b/samples/inputs/badge/tailwind-styling/src/index.tsx index a34c17722e..06adaf37b9 100644 --- a/samples/inputs/badge/tailwind-styling/src/index.tsx +++ b/samples/inputs/badge/tailwind-styling/src/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/material.css'; const personIcon = ''; 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/type/src/index.tsx b/samples/inputs/badge/type/src/index.tsx index e5b881c715..38237b680f 100644 --- a/samples/inputs/badge/type/src/index.tsx +++ b/samples/inputs/badge/type/src/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/material.css'; const checkIcon = ''; diff --git a/samples/inputs/badge/variants/src/index.css b/samples/inputs/badge/variants/src/index.css index 96358179e2..c6c7bb27f2 100644 --- a/samples/inputs/badge/variants/src/index.css +++ b/samples/inputs/badge/variants/src/index.css @@ -10,13 +10,13 @@ igc-badge { 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 +36,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 +49,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..7dec45fbc0 100644 --- a/samples/inputs/badge/variants/src/index.tsx +++ b/samples/inputs/badge/variants/src/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/material.css'; const checkIcon = ''; @@ -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/index.css b/samples/inputs/button-group/alignment/src/index.css index dff506227b..7e486aa9f5 100644 --- a/samples/inputs/button-group/alignment/src/index.css +++ b/samples/inputs/button-group/alignment/src/index.css @@ -23,7 +23,7 @@ igc-button-group { } .sample-layout 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/button-group/interaction-states/src/index.css b/samples/inputs/button-group/interaction-states/src/index.css index cb82e710d6..aaadcf3f91 100644 --- a/samples/inputs/button-group/interaction-states/src/index.css +++ b/samples/inputs/button-group/interaction-states/src/index.css @@ -25,7 +25,7 @@ .row-label, .column-label, .cell-label { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; diff --git a/samples/inputs/button-group/selection/src/index.css b/samples/inputs/button-group/selection/src/index.css index cf076ebe73..55d7c524ad 100644 --- a/samples/inputs/button-group/selection/src/index.css +++ b/samples/inputs/button-group/selection/src/index.css @@ -17,7 +17,7 @@ } .sample-label { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; diff --git a/samples/inputs/button-group/size/src/index.css b/samples/inputs/button-group/size/src/index.css index 1f5ebf5847..1933c706c6 100644 --- a/samples/inputs/button-group/size/src/index.css +++ b/samples/inputs/button-group/size/src/index.css @@ -17,7 +17,7 @@ } .sample-label { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; diff --git a/samples/inputs/button-group/states/src/index.css b/samples/inputs/button-group/states/src/index.css index d09af3d35b..fde4086238 100644 --- a/samples/inputs/button-group/states/src/index.css +++ b/samples/inputs/button-group/states/src/index.css @@ -27,7 +27,7 @@ .row-label, .column-label, .cell-label { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400;