Skip to content

ENG-9845: Update selects style in book a demo to match inputs style#6667

Merged
carlosabadia merged 1 commit into
mainfrom
carlos/update-book-demo-select-style
Jun 18, 2026
Merged

ENG-9845: Update selects style in book a demo to match inputs style#6667
carlosabadia merged 1 commit into
mainfrom
carlos/update-book-demo-select-style

Conversation

@carlosabadia

Copy link
Copy Markdown
Contributor

No description provided.

@carlosabadia carlosabadia requested review from a team and Alek99 as code owners June 18, 2026 11:32
@carlosabadia carlosabadia added the skip-changelog For doc/internal changes label Jun 18, 2026
@linear-code

linear-code Bot commented Jun 18, 2026

Copy link
Copy Markdown

ENG-9845

@greptile-apps

greptile-apps Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR restylings the four select_field components in the "Book a Demo" form so they share the same visual appearance as the input fields, replacing the previous button.class_names.for_button("outline", "md") approach with input.class_names.DIV, INPUT_SIZE_VARIANTS["md"], and input.class_names.INPUT. The bun.lock change adds an integrity hash for a GitHub-sourced dependency.

  • select_field now composes the same Tailwind class strings as regular input fields, giving selects a consistent border, shadow, and size — but the DIV class names use focus-within: focus-ring selectors that don't apply to a self-focused <select> element, eliminating the visible focus indicator.
  • Container divs gain w-full min-w-0 to prevent overflow in the two-column grid layout.

Confidence Score: 3/5

The select fields will have no visible focus indicator after this change, which breaks keyboard-accessibility for the entire demo form.

The ClassNames.DIV focus ring styles (focus-within:shadow-*, focus-within:border-primary-a6) are borrowed from the input wrapper div, where they work because a child input receives focus. Applied directly to a select element, :focus-within never matches — the select focuses itself, not a child. At the same time, ClassNames.INPUT adds outline-none to suppress the browser default ring, and appearance-none strips native styling. Together these leave all four select fields with zero focus indicator, a meaningful regression for keyboard users on a marketing-critical form.

packages/reflex-components-internal/src/reflex_components_internal/blocks/demo_form.py — the select_field styling needs a focus: fallback or a custom wrapper pattern.

Important Files Changed

Filename Overview
packages/reflex-components-internal/src/reflex_components_internal/blocks/demo_form.py select_field restyled to reuse input class names, but focus-within: selectors from ClassNames.DIV don't fire on a self-focused , removing the visible focus ring entirely
docs/app/reflex.lock/bun.lock Lockfile-only change: adds integrity sha512 hash to the @masenf/hello-react GitHub dependency entry; no functional impact

Reviews (1): Last reviewed commit: "ENG-9845: Update selects style in book a..." | Re-trigger Greptile

@codspeed-hq

codspeed-hq Bot commented Jun 18, 2026

Copy link
Copy Markdown

Merging this PR will not alter performance

✅ 26 untouched benchmarks
⏩ 8 skipped benchmarks1


Comparing carlos/update-book-demo-select-style (9261469) with main (785db92)

Open in CodSpeed

Footnotes

  1. 8 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports.

@carlosabadia carlosabadia merged commit 019bf0c into main Jun 18, 2026
107 checks passed
@carlosabadia carlosabadia deleted the carlos/update-book-demo-select-style branch June 18, 2026 19:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

skip-changelog For doc/internal changes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants