Skip to content

fix(chips): update chip paddings to contain text padding #2190

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

Merged
simeonoff merged 8 commits into from
Apr 20, 2026
Merged

fix(chips): update chip paddings to contain text padding #2190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bfc4444
fix(chips): update chip paddings to contain text padding
didimmova Apr 16, 2026
c6742bd
fix(chip): add padding to text content
didimmova Apr 16, 2026
34440dd
fix(chip): add padding to text content
didimmova Apr 16, 2026
262ea46
Merge branch 'master' into didimmova/update-chip-paddings
kdinev Apr 17, 2026
f93d33d
Merge branch 'master' into didimmova/update-chip-paddings
didimmova Apr 17, 2026
926848f
Merge branch 'master' into didimmova/update-chip-paddings
rkaraivanov Apr 20, 2026
646c55a
Merge branch 'master' into didimmova/update-chip-paddings
simeonoff Apr 20, 2026
ebf14f6
docs(chip): add content csspart documentation and improve formatting
simeonoff Apr 20, 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: 4 additions & 1 deletion src/components/chip/chip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export interface IgcChipComponentEventMap {
* @fires igcSelect - Emits event when the chip component is selected/deselected and any related animations and transitions also end.
*
* @csspart base - The base wrapper of the chip.
* @csspart content - The wrapper element around the default slot of the chip.
* @csspart prefix - The prefix container of the chip.
* @csspart suffix - The suffix container of the chip.
*/
Expand Down Expand Up @@ -222,7 +223,9 @@ export default class IgcChipComponent extends EventEmitterMixin<
@click=${this._handleSelect}
>
${this._renderPrefix()}
<slot></slot>
Copy link
Copy Markdown
Member

@kdinev kdinev Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should there be a nested <slot> here?

Copy link
Copy Markdown
Contributor Author

@didimmova didimmova Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the slot is not nested, it's just plain text in the DOM and I cannot target the text to place the padding on it.

<span part="content">
<slot></slot>
</span>
${this._renderSuffix()}
</button>
`;
Expand Down
2 changes: 1 addition & 1 deletion src/components/chip/themes/chip.base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
box-shadow: none;
cursor: pointer;
padding: 0 pad-inline(rem(2px), rem(6px), rem(12px));
gap: sizable(rem(3px), rem(6px), rem(8px));

&[disabled] {
pointer-events: none;
Expand Down Expand Up @@ -109,6 +108,7 @@
display: flex;
align-items: center;
justify-content: center;
gap: sizable(rem(3px), rem(6px), rem(8px));
}

::slotted(*) {
Expand Down
4 changes: 4 additions & 0 deletions src/components/chip/themes/shared/chip.common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ $theme: $material;
outline: none;
height: var-get($theme, 'size');

[part='content'] {
padding-inline: pad-inline(rem(3px), rem(6px), rem(8px));
}

&:focus {
background: var-get($theme, 'focus-background');
color: var-get($theme, 'focus-text-color');
Expand Down
2 changes: 1 addition & 1 deletion src/components/chip/themes/shared/chip.indigo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ $theme: $indigo;
@if $variant != 'warning' {
color: contrast-color($variant-color, 900);
}

@if $variant == 'warning' or $variant == 'info' {
background: color($variant-color, 500);
}
Expand Down
Loading