Skip to content

Phase 9: Button component + migrate homepage, package pages & code block#147

Merged
Kocal merged 6 commits into
symfony:mainfrom
Kocal:phase-9-homepage-main
Jun 12, 2026
Merged

Phase 9: Button component + migrate homepage, package pages & code block#147
Kocal merged 6 commits into
symfony:mainfrom
Kocal:phase-9-homepage-main

Conversation

@Kocal

@Kocal Kocal commented Jun 12, 2026

Copy link
Copy Markdown
Member
Q A
Issues Related to #34
License MIT

yolo

Kocal added 3 commits June 12, 2026 01:40
Replace the stale shadcn copy at templates/components/Button.html.twig with a
real site Button built with html_cva. It renders an <a> when `href` is set,
otherwise a <button> (type="button" default, overridable via attributes), and
exposes the neutral `outline` variant (ex Bootstrap `.btn-outline-primary`) in
sizes sm/md. More variants are wired up as later Phase 9 chunks need them.

The previous Button.html.twig was a dead shadcn-flavored copy: its only
reference (templates/toolkit/_code_block_right.html.twig) is shown as source and
rendered kit-scoped in the toolkit preview, where <twig:Button> resolves to the
vendored shadcn kit, never to templates/components/.

homepage.html.twig:
- Two doc-link buttons (`btn btn-md btn-outline-primary`) -> `<twig:Button>`
- Markdown demo textarea: drop `form-control` for Tailwind utilities mirroring
  the preview box (`w-full bg-body border rounded-sm p-4`)
- Arrow icon `style="transform: rotate(-45deg)"` -> `-rotate-45`

main/demos.html.twig and main/packages.html.twig were already fully Tailwind.
Verified in light/dark mode; Toolkit page + component preview still render.
Button component: add `dark` variant (ex Bootstrap `.btn-dark`, solid #212529).

- turbo: 3 `alert alert-secondary` info boxes -> `rounded-md border bg-surface
  p-4`; `btn btn-dark` submit -> `<twig:Button variant="dark">`
- translator: 6 `form-control` + 1 `form-select` -> `w-full bg-body border
  rounded-md px-3 py-1.5`; `.small` labels -> `text-sm`
- native: `fw-bold` -> `font-bold`; `text-body-secondary` -> `text-muted`
- live_component: `btn btn-md btn-outline-primary` doc link -> `<twig:Button>`

Note: turbo's form_row `form-floating` is left for the form-theme migration.
Verified in light/dark mode across all four pages.
The GitHub/copy icon buttons in CodeBlockButtons and CodeBlockInline drop their
Bootstrap `.btn .btn-link .btn-sm` classes. Their styling now lives in
_Terminal.css scoped to `.code-buttons`, the common wrapper of both components.

- Style `.code-buttons :is(a, button)` directly (color n-200 -> n-100 on hover,
  4px 8px padding, transparent bg) instead of relying on the Bootstrap button
  base + the `.Terminal_actions .btn-link/.btn-copy` overrides.
- Keep `.btn-copy` as a CSS hook with `position: relative` (offset parent for
  the `.copied button::after` copy-feedback ring), so it no longer depends on
  vendor/_bootstrap.scss.
- `data-bs-toggle="tooltip"` left untouched (Bootstrap JS removal is Phase 10).

Verified the buttons render identically (color, padding, position) in code
block headers, light and dark.
@Kocal Kocal self-assigned this Jun 12, 2026
@Kocal Kocal changed the title Phase 9 Phase 9: Button component + migrate homepage, package pages & code block Jun 12, 2026
Kocal added 3 commits June 12, 2026 23:08
The translator labels carried `opacity-50`, which was a no-op under Bootstrap
(the `opacity` utility is removed from the Bootstrap utilities map in app.scss).
Tailwind *does* generate it, so the migration accidentally activated 50% opacity
-> ~3:1 contrast, failing WCAG AA.

Replace `opacity-50` with `text-muted`: a readable muted label color that keeps
the visual hierarchy and passes AA in light and dark.
base.html.twig and _header.html.twig were already migrated in Phase 7,
so the footer is all that remained for the global layout.

- Drop the leftover `--bs-gutter-x: 0` inline style (Bootstrap row var,
  redundant with the Tailwind `grid gap-x-6`)
- Convert inline font-size / text-transform / font-weight / gap styles to
  Tailwind utilities (text-[11px], text-xs, text-2xl, uppercase, font-bold,
  gap-2)
- Remove the now-empty wrapper <span> around the Upsun link

Layout and rendering verified identical in light and dark mode.
@Kocal Kocal merged commit 6ffbe88 into symfony:main Jun 12, 2026
2 of 3 checks passed
@Kocal Kocal deleted the phase-9-homepage-main branch June 12, 2026 21:09
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