Skip to content

fix(summary-chip): make single-digit chips circular#2387

Open
chintankavathia wants to merge 1 commit into
mainfrom
fix/summary-chip-single-digit-shape
Open

fix(summary-chip): make single-digit chips circular#2387
chintankavathia wants to merge 1 commit into
mainfrom
fix/summary-chip-single-digit-shape

Conversation

@chintankavathia

@chintankavathia chintankavathia commented Jul 21, 2026

Copy link
Copy Markdown
Member

currently there is deviation between badge and summary chip when having single digit value.


Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

Code Coverage

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code Review

This pull request updates the styling of the .chip class in si-summary-chip.component.scss by centering its content and defining a minimum inline size. The reviewer suggested also setting a fixed block-size to match the min-inline-size to ensure the chip remains perfectly circular regardless of its content's font size or line height.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment thread projects/element-ng/summary-chip/si-summary-chip.component.scss Outdated
@chintankavathia
chintankavathia force-pushed the fix/summary-chip-single-digit-shape branch from 6e09967 to 74fbad2 Compare July 21, 2026 12:59
@chintankavathia
chintankavathia marked this pull request as ready for review July 22, 2026 04:06
@chintankavathia
chintankavathia requested review from a team as code owners July 22, 2026 04:06
@gemini-code-assist

Copy link
Copy Markdown
Contributor

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

min-inline-size: calc(1lh + 2 * map.get(variables.$spacers, 4));
border: 1px solid variables.$element-ui-3;
border-radius: map.get(variables.$spacers, 6);
border-radius: 1rem;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Not really a different, but should guard against eventual changes in the line-height.

Suggested change
border-radius: 1rem;
border-radius: 1lh;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants