Skip to content

fix(PageHeader): searchbox button padding, navbar hoogte en Storybook controls#146

Merged
jeffreylauwers merged 2 commits intomainfrom
feature/page-header-large-viewport
Apr 6, 2026
Merged

fix(PageHeader): searchbox button padding, navbar hoogte en Storybook controls#146
jeffreylauwers merged 2 commits intomainfrom
feature/page-header-large-viewport

Conversation

@jeffreylauwers
Copy link
Copy Markdown
Owner

Summary

  • Searchbox button padding (large viewport)SearchInput wrapper in de masthead krijgt flex: 1 + max-inline-size: none zodat de Zoeken-knop zijn natuurlijke breedte en padding behoudt (zelfde patroon als het mobile zoekpaneel)
  • Navbar MenuLink hoogte en paddingmin-block-size: 4rem en padding-inline: var(--dsn-space-inline-xl) op .dsn-page-header__navbar via token-overschrijving; de calc()-compensatie voor de current-indicator werkt automatisch mee
  • Storybook controls opgeschoond — circulaire DocsPage-import verwijderd (loste crash op), argTypes geherstructureerd in drie categorieën: Gedrag / Slots / Events
  • Token gecorrigeerd--dsn-page-header-padding-inline van {dsn.space.row.md} naar {dsn.space.inline.xl} (consistent met masthead en navbar)
  • Docs gecorrigeerd--dsn-page-header-search-panel-background-color was {dsn.color.neutral.bg-subtle}, is {dsn.color.accent-1.bg-default}

Test plan

  • Large viewport: Zoeken-knop in masthead heeft correcte padding naast het zoekveld
  • Large viewport: NavBar items zijn 4rem hoog met ruimere padding-inline
  • Large viewport: current-indicator op NavBar items werkt correct
  • Storybook Docs pagina PageHeader laadt zonder crash
  • Controls panel toont overzichtelijke categorieën (Gedrag / Slots / Events)
  • Alle 1282 tests groen (pnpm test)

🤖 Generated with Claude Code

Jeffrey Lauwers and others added 2 commits April 6, 2026 20:33
… controls

- Zoekknop in masthead (large viewport) heeft nu correcte padding: SearchInput
  wrapper krijgt flex:1 + max-inline-size:none zodat de button zijn natuurlijke
  breedte en padding behoudt (zelfde patroon als dsn-page-header__search-inner)
- NavBar MenuLink-items op large viewport: min-block-size 4rem en
  padding-inline var(--dsn-space-inline-xl) via token-overschrijving op
  .dsn-page-header__navbar — calc()-compensatie voor current-indicator werkt mee
- Storybook: circulaire DocsPage import verwijderd (crash opgelost), argTypes
  opgeschoond in drie categorieën: Gedrag / Slots / Events
- Token fix: --dsn-page-header-padding-inline gecorrigeerd naar
  {dsn.space.inline.xl} (consistent met masthead en navbar)
- Docs: --dsn-page-header-search-panel-background-color gecorrigeerd naar
  {dsn.color.accent-1.bg-default}

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
….21.1)

- docs/03-components.md: PageHeader toegevoegd aan Navigation Components
  (props, features, CSS-klassen, design tokens, HTML/CSS + React usage)
  Componenttelling: 48 → 49, tests: 1248 → 1282, suites: 62 → 63
- README.md: PageHeader in navigatietabel, testcount bijgewerkt
- docs/changelog.md: entries voor v5.21.0 (large viewport layout, PR #142)
  en v5.21.1 (zoekknop padding, navbar hoogte, token fix, PR #146)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@jeffreylauwers jeffreylauwers merged commit 411c21f into main Apr 6, 2026
3 checks passed
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