Skip to content
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

Jump to bottom

<vaadin-input-container>: vaadin-input-field-value-font-weight is kaput #7957

Open
anezthes opened this issue Oct 9, 2024 · 2 comments · May be fixed by #8141
Open

<vaadin-input-container>: vaadin-input-field-value-font-weight is kaput #7957

anezthes opened this issue Oct 9, 2024 · 2 comments · May be fixed by #8141
Assignees
@web-padawan
Labels
bug Something isn't working Impact: Low Severity: Major theme

Comments

@anezthes
Copy link
Contributor

anezthes commented Oct 9, 2024 •
edited
Loading

Description

vaadin-input-field-value-font-weight doesn't work; changing its value has no effect on the input element's font weight.

Expected outcome

Changing the value of vaadin-input-field-value-font-weight should alter the font weight of the input element. However, no visible change occurs, and the font weight remains unaffected.

Minimal reproducible example

html {
  vaadin-input-field-value-font-weight: 700;
}

Steps to reproduce

  1. Go to https://vaadin.com/docs/latest/components/text-field
  2. Open up the inspection tools
  3. Paste vaadin-input-field-value-font-weight: 700; into the element style of vaadin-text-field

Environment

Vaadin version(s): 24.5
OS: macOS Sequoia

Browsers

All of them
@web-padawan web-padawan added bug Something isn't working theme labels Oct 9, 2024
@web-padawan
Copy link
Member

The style is overridden here and this style on vaadin-input-container takes precedence over the one defined on the host element (in this case vaadin-text-field). IMO we should move the custom property to be used here instead:

web-components/packages/input-container/theme/lumo/vaadin-input-container-styles.js

Line 13 in 5c8f872

font-weight: 500;

@TatuLund
Copy link
Contributor

I noticed the same today.

One can add styles like this in project to patch it

vaadin-text-area > textarea {
   font-weight: var(--vaadin-input-field-value-font-weight);
}

vaadin-text-field > input {
   font-weight: --vaadin-input-field-value-font-weight;
}

@web-padawan web-padawan self-assigned this Nov 13, 2024
@web-padawan web-padawan linked a pull request Nov 13, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@web-padawan web-padawan

Labels
bug Something isn't working Impact: Low Severity: Major theme
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix!: set input value font weight property on input container vaadin/web-components
4 participants
@anezthes @web-padawan @TatuLund @yuriy-fix