Skip to content

feat(SearchInput): icoon positionering, CSS en Storybook#3

Merged
jeffreylauwers merged 2 commits intomainfrom
feature/search-input
Feb 18, 2026
Merged

feat(SearchInput): icoon positionering, CSS en Storybook#3
jeffreylauwers merged 2 commits intomainfrom
feature/search-input

Conversation

@jeffreylauwers
Copy link
Copy Markdown
Owner

@jeffreylauwers jeffreylauwers commented Feb 18, 2026

Summary

  • Herschrijf CSS: wrapper positioneert zoekicoon absoluut aan `inline-start`
  • Icoon kleur = `--dsn-text-input-color` (zelfde als ingevoerde tekst, niet-interactief)
  • Input krijgt `padding-inline-start-with-icon` zodat tekst nooit over icoon loopt
  • Breedte via wrapper width variants (niet via input)
  • Voeg `Widths` story toe + `DocsPage` import + `docs.mdx` + `docs.md`

Test plan

  • Tests groen (27 tests)
  • Build slaagt
  • Storybook bekeken — icoon zichtbaar, tekst loopt niet over icoon

🤖 Generated with Claude Code

Jeffrey Lauwers and others added 2 commits February 18, 2026 08:49
- Herschrijf CSS: wrapper positioneert icoon absolut aan inline-start
- Icoon gebruikt dsn-text-input-color (zelfde als ingevoerde tekst)
- Input krijgt padding-inline-start-with-icon zodat tekst nooit over icoon loopt
- Breedte via wrapper width variants, niet via input
- Voeg Widths story toe, voeg DocsPage toe aan stories
- Update docs.md met correcte tokens en anatomy

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
De browser-native × knop van type="search" wordt verborgen via CSS.
Een clear-knop wordt later geïmplementeerd als een apart patroon.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@jeffreylauwers jeffreylauwers merged commit 0267d27 into main Feb 18, 2026
1 check passed
@jeffreylauwers jeffreylauwers deleted the feature/search-input branch March 27, 2026 06:57
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.

1 participant