Skip to content

fix(core/chip, pill): removed default left margin from chip pill #2309

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
GayatriK2002 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

fix(core/chip, pill): removed default left margin from chip pill #2309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0a4a510
removed left margin from scss files of chip pill
GayatriK2002 Dec 11, 2025
c795c31
updating VRTs with margin left using style tag
GayatriK2002 Dec 11, 2025
c02fe54
updating pill VRT code
GayatriK2002 Dec 11, 2025
e42feff
Create dull-readers-relate.md
nuke-ellington Dec 11, 2025
2d50431
updating chip pill vrt
GayatriK2002 Dec 18, 2025
997c78f
updated blind snapshot
GayatriK2002 Dec 18, 2025
e126e92
Merge branch 'main' into fix-3178/remove-left-margin-from-chip-pill
GayatriK2002 Jan 7, 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
5 changes: 5 additions & 0 deletions .changeset/dull-readers-relate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@siemens/ix": major
---

Removed the left margin for **ix-chip** and **ix-pill**. This margin was also present if there was no leading sibling that is also a chip/pill causing it to waste screen real estate and distort layout alignments.
1 change: 0 additions & 1 deletion packages/core/src/components/chip/chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
position: relative;
height: 2rem;
max-height: 2rem;
margin-left: vars.$tiny-space;

@include component.ix-component;
}
Expand Down
1 change: 0 additions & 1 deletion packages/core/src/components/pill/pill.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
position: relative;
height: 1.25rem;
max-height: 1.25rem;
margin-left: 0.25rem;

@include component.ix-component;
}
Expand Down
Binary file modified ...ests/blind/blind.e2e.ts/blind-custom-header-1-chromium---classic-dark-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...sts/blind/blind.e2e.ts/blind-custom-header-1-chromium---classic-light-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 31 additions & 10 deletions testing/visual-testing/tests/chip/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil Component Starter</title>
<style>
ix-chip {
margin-left: 0.25rem;
}
</style>
<script type="module">
import { addIcons } from '@siemens/ix-icons';
import { iconPrint } from '@siemens/ix-icons/icons';
Expand All @@ -36,8 +41,12 @@
Primary
</ix-chip>

<ix-chip variant="critical" closable outline> Critical </ix-chip>
<ix-chip variant="alarm" icon="print"> Alarm with icon </ix-chip>
<ix-chip variant="critical" closable outline>
Critical
</ix-chip>
<ix-chip variant="alarm" icon="print">
Alarm with icon
</ix-chip>
<ix-chip
variant="alarm"
icon="print"
Expand Down Expand Up @@ -79,15 +88,27 @@
max-width: 300px;
"
>
<ix-chip icon="print" variant="primary" outline closable
>Primary</ix-chip
<ix-chip icon="print" variant="primary" outline closable>
Primary
</ix-chip>
<ix-chip icon="print" variant="alarm" outline closable>
Alarm
</ix-chip>
<ix-chip icon="print" variant="critical" outline>
Critical
</ix-chip>
<ix-chip icon="print" variant="warning" outline>
Warning
</ix-chip>
<ix-chip icon="print" variant="info" outline>
Info
</ix-chip>
<ix-chip icon="print" variant="success" outline>
Success
</ix-chip>
<ix-chip icon="print" variant="neutral" outline class="chip-left-margin"
>Neutral</ix-chip
>
<ix-chip icon="print" variant="alarm" outline closable>Alarm</ix-chip>
<ix-chip icon="print" variant="critical" outline>Critical</ix-chip>
<ix-chip icon="print" variant="warning" outline>Warning</ix-chip>
<ix-chip icon="print" variant="info" outline>Info</ix-chip>
<ix-chip icon="print" variant="success" outline>Success</ix-chip>
<ix-chip icon="print" variant="neutral" outline>Neutral</ix-chip>
<ix-chip
icon="print"
variant="custom"
Expand Down
5 changes: 5 additions & 0 deletions testing/visual-testing/tests/chip/custom/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil Component Starter</title>
<style>
ix-chip {
margin-left: 0.25rem;
}
</style>
<script type="module">
import { addIcons } from '@siemens/ix-icons';
import { iconPrint } from '@siemens/ix-icons/icons';
Expand Down
3 changes: 3 additions & 0 deletions testing/visual-testing/tests/content-header/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@
.margin-top {
margin-top: 0.375rem;
}
ix-pill {
margin-left: 0.25rem;
}
</style>
<script type="module">
import { addIcons } from '@siemens/ix-icons';
Expand Down
3 changes: 3 additions & 0 deletions testing/visual-testing/tests/content-header/secondary/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@
.margin-top {
margin-top: 0.375rem;
}
ix-pill {
margin-left: 0.25rem;
}
</style>
<script type="module">
import { addIcons } from '@siemens/ix-icons';
Expand Down
137 changes: 65 additions & 72 deletions testing/visual-testing/tests/pill/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil Component Starter</title>
<style>
ix-pill {
margin-left: 0.25rem;
}
</style>
<script type="module">
import { addIcons } from '@siemens/ix-icons';
import { iconPrint } from '@siemens/ix-icons/icons';
Expand All @@ -23,118 +28,96 @@
</script>
</head>
<body>
<div
style="
display: flex;
justify-content: center;
position: relative;
margin-top: 2rem;
"
>
<ix-pill outline> Primary </ix-pill>
<ix-pill icon="print">Primary with icon</ix-pill>
<ix-pill icon="print" style="width: 10rem" onClose="{console.log}">
Primary
</ix-pill>

<ix-pill variant="critical" icon="print" outline> Critical </ix-pill>
<ix-pill variant="alarm" icon="print"> Alarm with icon </ix-pill>
<ix-pill
variant="alarm"
<div style="text-align: center; margin-top: 2rem">
<ix-pill outline> Primary </ix-pill
><ix-pill icon="print">Primary with icon</ix-pill
><ix-pill
icon="print"
style="width: 10rem"
onClose="{console.log}"
>Primary</ix-pill
><ix-pill
variant="critical"
icon="print"
outline
>
Alarm
</ix-pill>
<ix-pill
Critical </ix-pill
><ix-pill variant="alarm" icon="print">
Alarm with icon </ix-pill
><ix-pill
variant="alarm"
icon="print"
style="width: 10rem"
onClose="{console.log}"
>Alarm</ix-pill
><ix-pill
variant="warning"
icon="print"
style="width: 10rem"
onClose="{console.log}"
>
Warning
</ix-pill>
<ix-pill
>Warning</ix-pill
><ix-pill
background="purple"
pill-color="green"
variant="custom"
icon="print"
style="width: 10rem"
onClose="{console.log}"
>
Custom
</ix-pill>

<ix-pill
>Custom</ix-pill
><ix-pill
background="purple"
pill-color="green"
variant="custom"
icon="print"
style="width: 10rem"
onClose="{console.log}"
outline
>Custom</ix-pill
>
Custom
</ix-pill>
</div>

<div
style="
display: flex;
justify-content: center;
position: relative;
margin-top: 2rem;
"
>
<ix-pill align-left outline> Primary </ix-pill>
<ix-pill align-left icon="print">Primary with icon</ix-pill>
<ix-pill
<div style="text-align: center; margin-top: 2rem">
<ix-pill align-left outline> Primary </ix-pill
><ix-pill align-left icon="print"
>Primary with icon</ix-pill
><ix-pill
align-left
icon="print"
style="width: 10rem"
onClose="{console.log}"
>
Primary
</ix-pill>

<ix-pill align-left variant="critical" icon="print" outline>
Critical
</ix-pill>
<ix-pill align-left variant="alarm" icon="print">
Alarm with icon
</ix-pill>
<ix-pill
>Primary</ix-pill
><ix-pill
align-left
variant="critical"
icon="print"
outline
>Critical</ix-pill
><ix-pill align-left variant="alarm" icon="print"
>Alarm with icon</ix-pill
><ix-pill
align-left
variant="alarm"
icon="print"
style="width: 10rem"
onClose="{console.log}"
>
Alarm
</ix-pill>
<ix-pill
>Alarm</ix-pill
><ix-pill
align-left
variant="warning"
icon="print"
style="width: 10rem"
onClose="{console.log}"
>
Alarm
</ix-pill>
<ix-pill
>Alarm</ix-pill
><ix-pill
align-left
background="purple"
pill-color="green"
variant="custom"
icon="print"
style="width: 10rem"
onClose="{console.log}"
>
Custom
</ix-pill>

<ix-pill
>Custom</ix-pill
><ix-pill
align-left
background="purple"
pill-color="green"
Expand All @@ -143,9 +126,8 @@
style="width: 10rem"
onClose="{console.log}"
outline
>Custom</ix-pill
>
Custom
</ix-pill>
</div>
<div
style="
Expand All @@ -167,9 +149,20 @@
margin-top: 2rem;
"
>
<ix-pill align-left icon="print" style="width: 10rem"></ix-pill>
<ix-pill outline align-left icon="print" style="width: 10rem"></ix-pill>
<ix-pill align-left style="width: 10rem">Primary</ix-pill>
<ix-pill
align-left
icon="print"
style="width: 10rem"
></ix-pill>
<ix-pill
outline
align-left
icon="print"
style="width: 10rem"
></ix-pill>
<ix-pill align-left style="width: 10rem"
>Primary</ix-pill
>
</div>
<div style="text-align: center; margin-top: 2rem">
<ix-pill>Label</ix-pill>
Expand Down
Loading