move to penguinui continues
This commit is contained in:
@@ -289,26 +289,40 @@ This is copy-pasted 5 times.
|
||||
**Penguin UI: `buttons/default-button.html`, `outline-button.html`, `ghost-button.html`, `button-with-icon.html`**
|
||||
|
||||
- Exact upstream mirrors at `assets/views/penguinui/buttons/*.html` (reference only).
|
||||
- One macro `ui::button(label, variant="primary", type, href, attrs, extra, pad="px-4 py-2")`
|
||||
in `assets/views/macros/ui.html`. The per-variant class strings are the
|
||||
**verbatim** Penguin variants (solid `primary|secondary|danger|success|warning|info`,
|
||||
`outline-*`, `ghost-*`) — only `inline-flex items-center justify-center` is added
|
||||
so `<a>`/`w-full` render, and upstream's `text-onDanger`/`text-onSuccess`… token
|
||||
typos are fixed to our real `text-on-*` tokens. `href` → `<a>` else `<button>`;
|
||||
`attrs` is raw (htmx / `:disabled` / name / value).
|
||||
- **Sizes are NOT normalized**: `pad` defaults to Penguin's `px-4 py-2` but each
|
||||
call site that was a different size keeps it (`px-3 py-2` form-header cancels &
|
||||
- Macros in `assets/views/macros/ui.html`:
|
||||
`ui::button(label, variant="primary", type, href, attrs, extra, icon, size="px-4 py-2 text-sm")`
|
||||
and `ui::icon_button(icon, variant="ghost-secondary", aria_label, attrs, …)`.
|
||||
The per-variant class strings are the **verbatim** Penguin variants (solid
|
||||
`primary|secondary|danger|success|warning|info`, `outline-*`, `ghost-*`) — only
|
||||
`inline-flex items-center justify-center gap-2` is added so `<a>`/`w-full`/`icon`
|
||||
render, and upstream's `text-onDanger`/`text-onSuccess`… token typos are fixed to
|
||||
our real `text-on-*` tokens. `href` → `<a>` else `<button>`; `attrs` is raw
|
||||
(htmx / `:disabled` / name / value); `icon` is a raw `<svg>` rendered before the
|
||||
label (Penguin button-with-icon).
|
||||
- **Sizes are NOT normalized**: `size` defaults to Penguin's `px-4 py-2 text-sm`
|
||||
but each call site that differed keeps it (`px-3 py-2` form-header cancels &
|
||||
order back, `px-5 py-2` add-to-cart / cart-checkout / order-confirmed continue,
|
||||
`px-6 py-2.5` checkout place-order).
|
||||
`px-6 py-2.5` checkout place-order, `px-3 py-1.5 text-xs` table actions).
|
||||
- Adopted across every standard filled/outline/submit button: login, product &
|
||||
category forms (save / cancel = `outline-secondary`), products/categories "new" +
|
||||
empty-state CTAs, orders detail (back/ship/status), shipping save, cart
|
||||
(continue/checkout/empty), checkout place-order (`:disabled` via `attrs`),
|
||||
product detail add-to-cart, order-confirmed continue.
|
||||
- Left inline (these are other Penguin variants/components, not this button):
|
||||
icon-only ghost buttons (#51 gear/hamburger/chevron), compact table row-action
|
||||
buttons (`edit`/`view`/`delete`, `px-3 py-1.5 text-xs`), the `text-danger`
|
||||
"Remove" text link (#52), the file-input button (#13), and nav menu links.
|
||||
- Icon-only buttons now use `ui::icon_button(icon, variant="ghost-secondary",
|
||||
aria_label, attrs, …)` — Penguin ghost treatment, square. Converted: settings
|
||||
gear, both hamburgers (site + admin), admin sidebar toggle, mobile category
|
||||
toggle. The cart link (live `x-init` badge) and the category-accordion chevron
|
||||
keep the same Penguin ghost classes **inline** only because their markup mixes
|
||||
single+double quotes that can't be passed through a Tera macro arg — visually
|
||||
identical to `icon_button`.
|
||||
- Table row-actions (`edit`/`view`/`delete`/`View`/`label`) → `ui::button`
|
||||
`outline-secondary` / `outline-danger` at `size="px-3 py-1.5 text-xs"`; cart
|
||||
"Remove" → `ghost-danger`; card add-to-cart → `ui::button` with the cart `icon`.
|
||||
- Still genuinely not this component (tracked elsewhere): toast dismiss/Reply
|
||||
buttons (part of the vendored toast mirror, already Penguin), settings dropdown
|
||||
menu items (Penguin dropdown items), gallery thumbnail buttons (carousel),
|
||||
sidebar logout/exit (Penguin sidebar link treatment), and navbar nav-menu
|
||||
links/logout (belong to §1 Navbar). The file-input button is §13.
|
||||
|
||||
> Gotcha for future macro use: Tera renders `{% include %}` in the **includer's**
|
||||
> macro scope, so a template that includes a partial which calls `ui::` must also
|
||||
|
||||
Reference in New Issue
Block a user