pigui/landing-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep field labels stable on focus, and fix the textarea's ring

Browse Source 
Focusing a field visibly reflowed its label: "MENSAJE *" turned into
"Mensaje *" in a lighter face under the cursor. @pi/ui applies the
theme's label typography under `:not(.mdc-text-field--focused)`, so
text-transform, letter-spacing and weight all fall away the moment a
field takes focus. Restated without that guard. Colour is left alone --
Material tints the label on focus and that part is wanted.

The textarea was also drawn twice, once in the error colour and once in
the gradient, the two outlines offset from each other. Both take their
radius from `--pi-theme-field-radius`, which the `alternative` shell
sets to 999px: right for a 48px input, a stadium on a 112px textarea. A
fixed radius makes the two shapes coincide.

Both only appear in states the previous fix did not check -- it verified
the resting form only. Measured now in error+focus: all four labels
uppercase at weight 700, and the textarea's ring and outline both at
20px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
pigui
2026-08-31 09:08:54 +02:00
parent 25d0fe500b
commit 7557894b49
1 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
landing/src/app/ui/contact-form.scss
View File

@@ -53,3 +53,31 @@
transform: translateY(-3rem) scale(1) !important;
}
}
// Two things the library gets wrong once a field is in a real state.
//
// 1. The label changes shape when you focus it. `@pi/ui` applies the theme's
// label typography under `:not(.mdc-text-field--focused)`, so text-transform,
// letter-spacing and weight all fall away the moment the field takes focus:
// "MENSAJE *" becomes "Mensaje *" in a lighter face, and the label visibly
// reflows under the cursor. Restated here without that guard. Colour is
// deliberately left alone — Material tints the label on focus, and that part
// is wanted.
//
// 2. The focus ring is a stadium on the textarea. Both the notched outline and
// the gradient ring take their radius from `--pi-theme-field-radius`, which
// the `alternative` shell sets to 999px. That is right for a 48px-tall input
// and wrong for a 112px-tall textarea: the two shapes stop coinciding and
// the field is drawn twice, once in the error colour and once in the
// gradient, offset from each other. A fixed radius makes them agree again.
:host ::ng-deep {
.pi-field .mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
text-transform: var(--pi-theme-field-label-transform, none);
letter-spacing: var(--pi-theme-field-label-letter-spacing, normal);
font-weight: var(--pi-theme-field-label-weight, inherit);
}
.pi-field.pi-form-field__textarea {
--pi-theme-field-radius: 1.25rem;
}
}