Phase 9: Button component + migrate homepage, package pages & code block#147
Merged
Conversation
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.
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
yolo