feat: highlight missed required Template Builder fields - #28929
Closed
aqandrew wants to merge 1 commit into
Closed
Conversation
Empty required template-builder fields flip to the destructive outline once the user scrolls past them or reaches the bottom of the page, and clear as soon as they get a value. Implemented without new custom hooks: FormField gains an opt-in markInvalidWhenScrolledPastEmpty prop backed by an inline IntersectionObserver, plus a HasReachedBottomContext provider component consumed via useContext. Enabled for all module/base text params via ConfigurationField, and for the Customizations ID and Organization fields (OrganizationAutocomplete gains aria-invalid support). Isolated slice of #27077 (item 7). DEVEX-832.
Contributor
Author
|
closing in favor of #28940 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Highlights missed required fields in the template builder. An empty required field flips to the destructive red outline (
aria-invalid+border-border-destructive) once the user either scrolls past it or reaches the bottom of the page, and the cue clears the moment the field has a value.Resolves DEVEX-832. This is an isolated slice of #27077 (its item 7), rebased onto current
main.Implementation note: no new custom hooks
#27077 introduced two custom hooks (
useHasBeenScrolledPast,useHasReachedBottom). Per the request, this PR delivers the same behavior without adding any new custom React hooks:FormFieldusing built-in hooks (useRef+useState+useEffectwith a stickyIntersectionObserver).HasReachedBottomContext/HasReachedBottomProvider), consumed viauseContext(HasReachedBottomContext)— nouseXwrapper hook.Changes
FormField: new opt-inmarkInvalidWhenScrolledPastEmptyprop. When set, an emptyrequiredfield becomesaria-invalidoncescrolledPast || hasReachedBottom. Default behavior (error-drivenaria-invalid) is unchanged.HasReachedBottomContext.tsx(new): context + provider component tracking whether the window has been scrolled to the bottom at least once (sticky). Not a hook.ConfigurationField: enables the prop on the module/base text fields, so every module and base-template required text param gets the cue for free.TemplateBuilderPageView: wraps step content inHasReachedBottomProvider, keyed bycurrentStep.idso the signal resets on each step.OrganizationAutocomplete: addsaria-invalidsupport (destructive border on the trigger).TemplateCustomizationsStep: enables the cue on theIDfield and flags the requiredOrganizationautocomplete once the page bottom is reached with nothing selected.Testing
pnpm check(biome) cleanpnpm lint:types(tsc) cleanpnpm vitest run --project=storybook src/components/FormField— 9 pass, incl. newRequiredMissHighlightedAtBottom/RequiredMissClearedWhenFilledinteraction storiespnpm vitest run --project=storybook src/pages/TemplateBuilder src/components/OrganizationAutocomplete— passpnpm vitest run --project=unit src/pages/TemplateBuilder— 61 passBehavior / scope notes
Organizationautocomplete uses only the page-bottom signal (not a per-field observer). It is a single control near the top of the Customizations step, so the bottom-of-page catch is sufficient and avoids duplicating observer logic outsideFormField.IntersectionObserver/scroll behavior is not exercisable in a plain unit test; the new Storybook stories assert the reached-bottom path (short story content triggers the provider on mount).mainby fix(site/src/pages/TemplateBuilder): show all step content without inner scroll #27437/feat(site): tighten base infra step grid and card typography #27797; item 4 is a separate PR (DEVEX-830). This PR is item 7.Coder Agents generated, on behalf of @aqandrew.