Skip to content

Add magnifying glass icon to remote-select inputs#1525

Merged
maebeale merged 3 commits into
mainfrom
maebeale/search-icon-distinction
May 25, 2026
Merged

Add magnifying glass icon to remote-select inputs#1525
maebeale merged 3 commits into
mainfrom
maebeale/search-icon-distinction

Conversation

@maebeale
Copy link
Copy Markdown
Collaborator

@maebeale maebeale commented May 25, 2026

What is the goal of this PR and why is this important?

How did you approach the change?

  • Added a magnifying glass icon on the left of every remote-select field, injected by the existing Stimulus controller so all uses get it consistently
  • Left placement (rather than right) creates a stronger structural distinction from the chevron-on-the-right selects nearby, and matches the convention from most search inputs (Google, GitHub, macOS)
  • Wraps the Tom Select element in a .remote-select-container div the controller creates, so the icon positions against a container with predictable dimensions (positioning against .ts-wrapper directly was rendering clipped)
  • Added left padding to the Tom Select control so typed text doesn't overlap the icon

UI Testing Checklist

  • Visit a new StoryIdea form and confirm the workshop field shows a magnifying glass on the left
  • Confirm the workshop field looks visually distinct from the Windows audience and Organization selects on either side
  • Type into the workshop field and confirm typed text does not overlap the icon and the icon renders fully inside the rounded border
  • Spot-check other remote-select fields (Story, WorkshopLog, WorkshopVariation, WorkshopVariationIdea, person/org affiliation fields, event registrations) — confirm the icon appears and search still works

Anything else to add?

Differentiates type-to-search fields from regular dropdowns, which have
a chevron caret on the right. The icon is added globally in the
remote-select Stimulus controller so all uses get the same visual cue.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@maebeale maebeale force-pushed the maebeale/search-icon-distinction branch from c3e2822 to 894b2b7 Compare May 25, 2026 17:09
maebeale and others added 2 commits May 25, 2026 13:19
The icon was anchored at left:0 of the .ts-wrapper, which placed it on
top of the rounded border and clipped its left edge. Moving it inward
to 0.25rem and bumping the input's left padding to 1.5rem so it sits
inside the visible content area with clearance from the typed text.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The previous attempt positioned the icon absolutely against .ts-wrapper,
but the wrapper's bounds did not match the visible bordered box in
practice (icon rendered clipped at the left border).

Wrap the Tom Select element in a .remote-select-container div that is
created and styled by this controller. The icon now positions against
a container whose dimensions we fully control.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@maebeale maebeale force-pushed the maebeale/search-icon-distinction branch from 5d63d92 to 234b231 Compare May 25, 2026 17:19
@maebeale maebeale requested a review from jmilljr24 May 25, 2026 17:22
@maebeale maebeale marked this pull request as ready for review May 25, 2026 17:22
@maebeale
Copy link
Copy Markdown
Collaborator Author

@jmilljr24 hope this was a good compromise! we're not doing the dropdown thing, but, doing a magnifying glass could help a lot w clarity. added a separate pr to update the prompt text for all of these.

Copy link
Copy Markdown
Collaborator

@jmilljr24 jmilljr24 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my opinion its great. Hopefully this is enough to nudge them in the right direction.

@maebeale maebeale merged commit 192f38c into main May 25, 2026
3 checks passed
@maebeale maebeale deleted the maebeale/search-icon-distinction branch May 25, 2026 19:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants