Skip to content

fix: adjust number field button icon size to match other components #9026

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.

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

Conversation

vursen
Copy link
Contributor

@vursen vursen commented Apr 30, 2025

Description

Fixes #9006

Type of change

  • Bugfix

@vursen vursen changed the title fix: align number field button icon size with other components fix: adjust number field button icon size to match other components Apr 30, 2025
@vursen vursen requested review from web-padawan and jouni April 30, 2025 12:44
Copy link
Member

@web-padawan web-padawan left a comment

Choose a reason for hiding this comment

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

For the record, this changes touch target area from current 32px to 24px which would be kind of against the idea defined in vaadin/vaadin-text-field#359.

Note, the original fix in vaadin/vaadin-text-field#363 is somewhat outdated since icons were later updated in #2595.

The [part$='button'] selector should be changed anyway if we keep it, apparently it was a regression introduced in V22 when adding a new version of number-field in #2279 😕

@@ -21,15 +21,15 @@ const numberField = css`
padding: 0;
}

[part$='button'] {
cursor: pointer;
Copy link
Member

Choose a reason for hiding this comment

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

I guess we can keep cursor: pointer for now even though it's going to be removed in base styles.

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.

Clear button has the wrong size in a NumberField
2 participants