Skip to content

fix(samples): update samples styling #1108

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

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

fix(samples): update samples styling #1108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5bbb21f
fix(samples): update button group and switch overview styling
Hristo313 Sep 24, 2026
d64ec3b
fix(badge): update badge samples styling
Hristo313 Sep 26, 2026
3ff65e5
Merge branch 'vnext' into hhristov/fix-samples
Hristo313 Sep 26, 2026
fc1a113
fix(badge): update overview styling
Hristo313 Oct 1, 2026
d57e2cc
fix: samples styling
Hristo313 Oct 6, 2026
8a74da4
Merge branch 'vnext' into hhristov/fix-samples
Hristo313 Oct 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion browser/public/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"version":"23.2.915","date":"2026-09-28 13:50:58","note":"this file is auto-generated"}
{"version":"23.2.915","date":"2026-10-01 17:08:02","note":"this file is auto-generated"}
2 changes: 1 addition & 1 deletion browser/src/navigation/SamplesBrowser.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"version":"23.2.915","date":"2026-09-28 13:50:58","note":"this file is auto-generated"}
{"version":"23.2.915","date":"2026-10-01 17:08:02","note":"this file is auto-generated"}
14 changes: 8 additions & 6 deletions samples/inputs/badge/dot/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@ igc-badge {
--ig-badge-dot-size: 0.5rem;
}

igc-avatar {
--size: 40px;
}

.icon-example igc-badge,
.avatar-example igc-badge,
.nav-icon igc-badge {
Expand Down Expand Up @@ -44,14 +40,20 @@ igc-avatar {
}

.icon-example,
.avatar-example,
.icon-circle {
display: flex;
align-items: center;
width: 36px;
height: 36px;
}

.avatar-example {
display: inline-flex;
align-items: center;
width: fit-content;
height: fit-content;
}

.icon-circle {
justify-content: center;
border-radius: 50%;
Expand Down Expand Up @@ -125,7 +127,7 @@ igc-avatar {
}

.nav-item.active {
color: var(--ig-primary-800);
color: var(--ig-primary-500);
}

.nav-icon {
Expand Down
17 changes: 7 additions & 10 deletions samples/inputs/badge/icon/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
/* shared styles are loaded from: */
/* https://dl.infragistics.com/x/css/samples/shared.v8.css */

igc-avatar {
--size: 40px;
--ig-avatar-background: var(--ig-gray-400);
--ig-avatar-color: var(--ig-gray-800);
}

igc-badge igc-icon {
color: var(--ig-gray-50);
color: #fff;
}

.badge-star igc-icon {
color: var(--ig-gray-900);
color: #000000;
}

.icon-wrapper > igc-badge {
Expand Down Expand Up @@ -50,8 +44,10 @@ igc-badge igc-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-width: 56px;
min-height: 66px;
}

.badge-icon-item span {
Expand All @@ -68,8 +64,9 @@ igc-badge igc-icon {

.avatar-wrapper {
position: relative;
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
width: fit-content;
height: fit-content;
}
22 changes: 6 additions & 16 deletions samples/inputs/badge/outlined/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,6 @@ igc-badge {
--ig-size: var(--ig-size-small);
}

igc-avatar {
--size: 40px;
--ig-avatar-background: var(--ig-gray-400);
--ig-avatar-color: var(--ig-gray-800);
}

.outlined-example igc-avatar igc-icon {
color: var(--ig-gray-50);
}

.outlined-example:nth-child(2) igc-badge {
inset-block-start: auto;
inset-block-end: -6px;
Expand All @@ -27,10 +17,6 @@ igc-avatar {
inset-inline-end: -10px;
}

.icon-circle igc-icon {
font-size: 20px;
}

.badge-outlined {
display: flex;
align-items: center;
Expand Down Expand Up @@ -58,15 +44,19 @@ igc-avatar {
height: 36px;
background: var(--ig-gray-200);
color: var(--ig-gray-800);

igc-icon {
--ig-icon-size: 18px;
}
}

igc-badge::part(base),
igc-badge igc-icon {
color: var(--ig-gray-50);
color: #fff;
}

igc-badge igc-icon {
fill: var(--ig-gray-50);
fill: #fff;
}

.steps {
Expand Down
27 changes: 18 additions & 9 deletions samples/inputs/badge/overview/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
/* shared styles are loaded from: */
/* https://dl.infragistics.com/x/css/samples/shared.v8.css */

igc-avatar {
--size: 40px;
}

igc-icon {
color: var(--ig-gray-700);
font-size: 1.5rem;
Expand All @@ -19,11 +15,11 @@ igc-badge {

igc-badge::part(base),
igc-badge igc-icon {
color: var(--ig-gray-50);
color: #fff;
}

igc-badge igc-icon {
fill: var(--ig-gray-50);
fill: #fff;
}

.avatar-example igc-badge {
Expand All @@ -33,16 +29,22 @@ igc-badge igc-icon {
}

.avatar-example igc-icon {
color: var(--ig-gray-50);
fill: var(--ig-gray-50);
color: #fff;
fill: #fff;
}

.event-example igc-chip {
--ig-size: var(--ig-size-large);
--ig-chip-background: var(--ig-gray-300);
}

.event-example igc-chip::part(base) {
border-radius: 999px;
font-family: "Titillium Web", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
}

.event-example igc-badge {
Expand All @@ -56,7 +58,7 @@ igc-badge igc-icon {
}

.icon-example igc-badge::part(base) {
color: var(--ig-gray-50);
color: #fff;
}

.notification-example igc-badge {
Expand Down Expand Up @@ -91,3 +93,10 @@ igc-badge igc-icon {
width: 2.5rem;
height: 2.5rem;
}

.avatar-example {
min-width: auto;
min-height: auto;
width: fit-content;
height: fit-content;
}
12 changes: 10 additions & 2 deletions samples/inputs/badge/shape/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@

igc-badge::part(base),
igc-badge igc-icon {
color: var(--ig-gray-50);
color: #fff;
}

igc-badge igc-icon {
fill: var(--ig-gray-50);
fill: #fff;
}

.badge-shape {
Expand Down Expand Up @@ -38,6 +38,14 @@ igc-badge igc-icon {
letter-spacing: 0.3px;
}

.badge-large {
--ig-size: var(--ig-size-large);
}

.badge-medium {
--ig-size: var(--ig-size-medium);
}

.badge-small {
--ig-size: var(--ig-size-small);
}
8 changes: 4 additions & 4 deletions samples/inputs/badge/shape/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,20 @@ export default function BadgeShape(): JSX.Element {
<div className="badge-shape">
<div className="badge-shape-row">
<span className="row-label">Rounded</span>
<IgrBadge variant="success" shape="rounded">
<IgrBadge variant="success" shape="rounded" className="badge-large">
<IgrIcon name="check" collection="material" />
</IgrBadge>
<IgrBadge variant="success" shape="rounded">2</IgrBadge>
<IgrBadge variant="success" shape="rounded" className="badge-medium">2</IgrBadge>
<IgrBadge variant="success" shape="rounded" className="badge-small">
<IgrIcon name="check" collection="material" />
</IgrBadge>
</div>
<div className="badge-shape-row">
<span className="row-label">Square</span>
<IgrBadge variant="info" shape="square">
<IgrBadge variant="info" shape="square" className="badge-large">
<IgrIcon name="check" collection="material" />
</IgrBadge>
<IgrBadge variant="info" shape="square">2</IgrBadge>
<IgrBadge variant="info" shape="square" className="badge-medium">2</IgrBadge>
<IgrBadge variant="info" shape="square" className="badge-small">
<IgrIcon name="check" collection="material" />
</IgrBadge>
Expand Down
4 changes: 2 additions & 2 deletions samples/inputs/badge/size/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@

igc-badge::part(base),
igc-badge igc-icon {
color: var(--ig-gray-50);
color: #fff;
}

igc-badge igc-icon {
fill: var(--ig-gray-50);
fill: #fff;
}

.badge-size {
Expand Down
4 changes: 0 additions & 4 deletions samples/inputs/badge/styling/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,6 @@ igc-badge {
transform: translate(-50%, -50%);
}

.styling-item igc-avatar {
--size: 40px;
}

.styling-item.green igc-avatar {
--icon-color: var(--ig-success-900);
--ig-avatar-background: var(--ig-success-200);
Expand Down
6 changes: 0 additions & 6 deletions samples/inputs/badge/tailwind-styling/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,6 @@ igc-badge {
--ig-size: var(--ig-size-small);
}

igc-avatar {
--size: 40px;
--ig-avatar-background: var(--ig-gray-400);
--ig-avatar-color: var(--ig-gray-800);
}

igc-avatar igc-icon {
color: var(--ig-gray-800);
}
Expand Down
8 changes: 2 additions & 6 deletions samples/inputs/badge/type/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
/* shared styles are loaded from: */
/* https://dl.infragistics.com/x/css/samples/shared.v8.css */

igc-avatar {
--size: 40px;
}

igc-badge {
--ig-size: var(--ig-size-small);
position: absolute;
Expand All @@ -14,11 +10,11 @@ igc-badge {

.badge-type igc-badge::part(base),
.badge-type igc-badge igc-icon {
color: var(--ig-gray-50);
color: #fff;
}

.badge-type igc-badge igc-icon {
fill: var(--ig-gray-50);
fill: #fff;
}

.badge-type {
Expand Down
10 changes: 2 additions & 8 deletions samples/inputs/badge/variants/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,11 @@ igc-badge {

.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);
color: #fff;
}

.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-400);
--ig-avatar-color: var(--ig-gray-800);
fill: #fff;
}

.variant-item:first-child igc-avatar igc-icon,
Expand Down
9 changes: 5 additions & 4 deletions samples/inputs/button-group/overview/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,13 @@ igc-button-group {
}

.album-title {
font-size: 0.875rem;
color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.429;
letter-spacing: 0.0178571em;
line-height: 20px;
letter-spacing: 0.3px;
margin-block: 0 0.5rem;
color: var(--ig-primary-500);
}

.album-photos {
Expand Down
8 changes: 5 additions & 3 deletions samples/inputs/switches/overview/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
font: 400 10px / 16px "Titillium Web", sans-serif;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ig-primary-500);
color: var(--ig-secondary-500);
}

& .notifications__row {
Expand Down Expand Up @@ -48,12 +48,14 @@
white-space: normal;

& .option__label {
font-size: 16px;
font: 400 16px / 24px "Titillium Web", sans-serif;
letter-spacing: 0.15px;
color: var(--ig-gray-900);
}

& .option__hint {
font-size: 13px;
font: 400 14px / 20px "Titillium Web", sans-serif;
letter-spacing: 0.25px;
color: var(--ig-gray-700);
}
}
Loading