this broke nice UI for more clear usage of penguin ui
This commit is contained in:
@@ -285,22 +285,27 @@ This is copy-pasted 5 times.
|
||||
|
||||
---
|
||||
|
||||
## 17. Buttons — ✅ DONE (canonical macros + adopted)
|
||||
## 17. Buttons — ✅ DONE
|
||||
**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).
|
||||
- Canonical button macros in `assets/views/macros/ui.html`:
|
||||
`ui::button_primary`, `ui::button_outline` (neutral secondary), `ui::button_danger`,
|
||||
`ui::button_ghost`. Each takes `label`, `type`, `href` (renders `<a>` vs `<button>`),
|
||||
`attrs` (raw — htmx / `:disabled` / name / value), `extra` (extra classes).
|
||||
Upstream's color-button token typos (`text-onDanger` etc.) are fixed to our real
|
||||
tokens (`text-on-danger`).
|
||||
- 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 &
|
||||
order back, `px-5 py-2` add-to-cart / cart-checkout / order-confirmed continue,
|
||||
`px-6 py-2.5` checkout place-order).
|
||||
- Adopted across every standard filled/outline/submit button: login, product &
|
||||
category forms (save/cancel), 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.
|
||||
- Intentionally left inline (different components, not the standard button):
|
||||
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.
|
||||
|
||||
Reference in New Issue
Block a user