jacobh2/F-r-ldraledigplannerare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pull form fields and alert banners into shared components

Browse Source 
FormField owns the .field markup and wires id/aria-invalid/aria-describedby
onto its control; Alert owns role=alert banners. Auth, Join and the partner
invite panel drop their one-off error classes for the shared alert style.
VacationDaysInput and ParentProfileInput move onto the .field primitives.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Jacob Hagstedt
2026-09-22 22:02:09 +02:00
parent 1a02bdcdbf
commit e9d7cee66b
21 changed files with 348 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/components.css
+20 -17
View File
@@ -768,18 +768,20 @@ legend {
/* Input Components
*
* `ChildBirthdayInput` now builds its fields from `.field`/`.field__label`/
* `.field__control` (primitives.css) directly rather than its own
* `.child-birthday-input__*` set — that set is gone from here accordingly. */
.vacation-days-input,
.planning-goal-selector,
.parent-profile-input {
* `ChildBirthdayInput`, `VacationDaysInput` and `ParentProfileInput` all
* build their fields from `.field`/`.field__label`/`.field__control`/
* `.field__helper` (primitives.css) directly now, rather than their own
* bespoke `*-input__label`/`__field`/`__range`/`__help` sets — those are
* gone from here accordingly. What's left below are pure width modifiers
* (combined with `.field`/`.field__control` in the JSX), the one thing the
* shared primitives don't express. `.planning-goal-selector*` has no
* corresponding component left in `src/components` — left as-is, out of
* scope for this pass. */
.planning-goal-selector {
margin-bottom: var(--sp-5);
}
.vacation-days-input__label,
.planning-goal-selector__label,
.parent-profile-input__label {
.planning-goal-selector__label {
display: block;
margin-bottom: var(--sp-2);
font-weight: 500;
@@ -787,16 +789,17 @@ legend {
font-size: var(--fs-base);
}
.vacation-days-input__field,
.planning-goal-selector__select,
.parent-profile-input__field {
.planning-goal-selector__select {
width: 100%;
max-width: 400px;
}
.vacation-days-input__range,
.parent-profile-input__help {
font-size: var(--fs-sm);
color: var(--c-text-muted);
margin-top: var(--sp-2);
.vacation-days-input,
.parent-profile-input {
margin-bottom: var(--sp-5);
}
.vacation-days-input__field,
.parent-profile-input__field {
max-width: 400px;
}