[cds-search]: input in cds-search is styled with box-sizing: border box, making it appear as 1px smaller than other components

[AlessandroPomponio]

Description

We are using a cds-search component next to a cds-dropdown, both in the lg size. The search bar, however, visually appears as 1px smaller than the dropdown.

After some scavenging, this appears to happen because the input part of the cds-search has box-sizing: border-box, while other components (e.g., the dropdown) do not have this setting.

Using the following css:

cds-search::part(input) {
  box-sizing: unset;
}

Fixes it.

Component(s) impacted

cds-search

Browser

Microsoft Edge

Carbon for IBM.com version

2.10.0

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

ST4SD Registry UI

Package

@carbon/web-components

CodeSandbox example

https://web-components.carbondesignsystem.com/?path=/story/components-search--default

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues