Skip to content

perf(material/form-field): set notch outline variable only on relevant element #30955

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

Merged
merged 1 commit into from
Apr 25, 2025

Conversation

crisbeto
Copy link
Member

We were setting the --mat-form-field-notch-max-width on the entire form field which can cause style recalculations. These changes move to the relevant element only.

@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Apr 25, 2025
@crisbeto crisbeto requested a review from a team as a code owner April 25, 2025 07:56
@crisbeto crisbeto requested review from andrewseguin and wagnermaciel and removed request for a team April 25, 2025 07:56
@angular-robot angular-robot bot added area: performance Issues related to performance area: material/form-field labels Apr 25, 2025
…t element

We were setting the `--mat-form-field-notch-max-width` on the entire form field which can cause style recalculations. These changes move to the relevant element only.
var(--mat-form-field-notch-max-width, 100%),
calc(100% - max(12px, #{$shape-var}) * 2)
);
max-width: min(var(--mat-form-field-notch-max-width, 100%), #{$min-value});
Copy link
Contributor

Choose a reason for hiding this comment

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

--mat-form-field-notch-max-width looks like a token, but I assume its just internal-only. Seems like we should have a different shape of variables that are private. Like --_mat_private- or something

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah not really a token, just an implementation detail.

@crisbeto crisbeto removed the request for review from wagnermaciel April 25, 2025 11:52
@crisbeto crisbeto added action: merge The PR is ready for merge by the caretaker target: major This PR is targeted for the next major release and removed target: patch This PR is targeted for the next patch release labels Apr 25, 2025
@crisbeto crisbeto merged commit 6c9678e into angular:main Apr 25, 2025
26 of 29 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: merge The PR is ready for merge by the caretaker area: material/form-field area: performance Issues related to performance target: major This PR is targeted for the next major release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants