style: replace relic components with tailwind classes#1936
Merged
Conversation
Flex only ever mapped enum props to a fixed set of Tailwind classes, so every usage is replaced with a plain div and the equivalent classes (defaulting to items-start/flex-row/flex-nowrap/justify-start to preserve prior behavior).
Input was just Focusable pre-bound to InputBase (a thin Tailwind-styled <input>) with withUnderline defaulting to true. Each call site now uses Focusable with Component="input" and its own inline Tailwind classes, matching the pattern DatePicker's customInput already used.
…lwind Text only mapped a size enum to Tailwind classes and threaded a handful of dynamic values (color, cursor, lineHeight, zIndex) into inline style; every call site now uses a plain span (or button, where the element was actually clickable) with the equivalent Tailwind classes and inline style. The gradient/underline hover effects stay as the existing c-text-gradient/c-text-underline Tailwind @Utility classes. Converting DatePicker's clickable "Today" text surfaced a real, previously-hidden a11y gap: Biome's static-element-interaction lint only checks literal JSX tags, so a clickable <Text onClick> never tripped it. It's now a real <button>.
Removing the Input component left the same base Tailwind string (h-8.5 border-0 px-2 outline-none placeholder/hover classes) copy-pasted across DatePicker, EventForm, and SomedayEventForm. Extract the shared substring as a constant next to Focusable, the common collaborator all three already import, and merge each caller's own classes on top.
Removing Flex surfaced the same hidden-lint pattern as the DatePicker Today button: Biome's a11y rules only match literal JSX tag names, so the onMouseDown drag-to-create handler on this row was never checked while it lived on <Flex>. It's a pointer-only affordance like the resize handles nearby, so ignore it the same way those are ignored rather than bolting on fake keyboard semantics.
An earlier `biome check --write --unsafe` pass in this branch silently
applied the noRedundantRoles fix and deleted role="form" from both
EventForm and SomedayEventForm. Biome assumes <form> always gets an
implicit "form" role, but per HTML-AAM that only happens when the form
has an accessible name — this one doesn't, so Chromium exposed no
"form" role at all once the explicit attribute was gone. All of the
e2e specs that open an event form query via getByRole("form"), so
every allday/someday create/update/delete spec started failing.
Restore the attribute on both forms with a biome-ignore so a future
unsafe autofix pass can't silently reintroduce the regression.
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 join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
No description provided.