move to penguinui continues3
This commit is contained in:
@@ -168,72 +168,49 @@ and then use it (instead of hand-rolling):
|
||||
|
||||
---
|
||||
|
||||
## 9. Checkbox
|
||||
**Penguin UI: `checkbox/` (3 variants)**
|
||||
## 9. Checkbox — ✅ DONE
|
||||
**Penguin UI: `checkbox/default-checkbox.html`**
|
||||
|
||||
| # | Location | What it is | Size |
|
||||
|---|----------|------------|------|
|
||||
| 15 | `assets/views/admin/catalog/product_form.html:85-89` | "Published" checkbox | ~5 lines |
|
||||
| 16 | `assets/views/admin/catalog/category_form.html:67-71` | "Published" checkbox | ~5 lines |
|
||||
| 17 | `assets/views/admin/shipping/index.html:25-29` | "Enabled" checkbox | ~5 lines |
|
||||
- Exact upstream mirror at `assets/views/penguinui/checkbox/default-checkbox.html` (reference only)
|
||||
- `ui::checkbox(name, label, id, value="on", checked, attrs)` macro in `macros/ui.html`
|
||||
(full Penguin control: custom box + check-icon + label, `has-checked:`/`peer` variants).
|
||||
- Adopted: product/category "Published" + shipping "Enabled".
|
||||
|
||||
---
|
||||
## 10. Text Input — ✅ DONE
|
||||
**Penguin UI: `text-input/default-text-input.html`**
|
||||
|
||||
## 10. Text Input
|
||||
**Penguin UI: `text-input/` (8 variants)**
|
||||
- Exact upstream mirror at `assets/views/penguinui/text-input/default-text-input.html` (reference only)
|
||||
- `ui::input(name, type, id, value, placeholder, required, autocomplete, attrs, extra, width="w-full")`
|
||||
macro — **verbatim** Penguin classes (`bg-surface-alt`, `focus-visible:outline-*`).
|
||||
Adopted at every text/email/number/password input: login (2), checkout (email,
|
||||
name, phone, address, city, zip), product form (6), category form (3), product
|
||||
detail quantity, shipping price (`width="w-28"`).
|
||||
- The cart-body quantity input keeps its complex `@change` handler **inline** with
|
||||
the same Penguin classes (mixed single/double quotes can't pass through a macro arg).
|
||||
- Note: padding is Penguin's `px-2 py-2` (was `px-3`) and bg is `bg-surface-alt` (was
|
||||
`bg-surface`) — the real Penguin look.
|
||||
|
||||
| # | Location | What it is | Size |
|
||||
|---|----------|------------|------|
|
||||
| 18 | `assets/views/shop/checkout.html:37-44` | Email + name text inputs | ~8 lines |
|
||||
| 19 | `assets/views/shop/checkout.html:84-99` | Address, city, ZIP text inputs | ~16 lines |
|
||||
| 20 | `assets/views/admin/login.html:34-51` | Email + password inputs (with focus ring styles) | ~18 lines |
|
||||
| 21 | `assets/views/admin/catalog/product_form.html:19-68` | Name, price, currency, stock, SKU, slug inputs + textarea | ~50 lines |
|
||||
| 22 | `assets/views/admin/catalog/category_form.html:19-55` | Name, slug, position inputs + textarea | ~37 lines |
|
||||
| 23 | `assets/views/shop/show.html:46-48` | Quantity number input | ~3 lines |
|
||||
| 24 | `assets/views/shop/_cart_body.html:30-38` | Quantity number input with `@change` confirmation dialog | ~9 lines |
|
||||
| 25 | `assets/views/admin/shipping/index.html:20-24` | Price text input | ~5 lines |
|
||||
## 11. Textarea — ✅ DONE
|
||||
**Penguin UI: `text-area/default-textarea.html`**
|
||||
|
||||
**Pattern: Every input is hand-styled with:**
|
||||
```
|
||||
w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface
|
||||
focus:outline-2 focus:outline-primary
|
||||
dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark
|
||||
```
|
||||
This exact class string appears 15+ times across the codebase.
|
||||
- Exact upstream mirror at `assets/views/penguinui/text-area/default-textarea.html` (reference only)
|
||||
- `ui::textarea(name, id, value, rows, placeholder, required, attrs, extra)` macro.
|
||||
- Adopted: checkout note, product & category description.
|
||||
|
||||
---
|
||||
## 12. Select/Dropdown (Native) — ✅ DONE
|
||||
**Penguin UI: `select/default-select.html`**
|
||||
|
||||
## 11. Textarea
|
||||
**Penguin UI: `textarea/`**
|
||||
- Exact upstream mirror at `assets/views/penguinui/select/default-select.html` (reference only)
|
||||
- Adopted inline (3 sites: product category, category parent, order status) — Penguin
|
||||
`appearance-none` select on `bg-surface-alt` wrapped in `relative` with the chevron
|
||||
SVG. Inline rather than a macro because the `<option>` set is caller-specific.
|
||||
|
||||
| # | Location | What it is | Size |
|
||||
|---|----------|------------|------|
|
||||
| 26 | `assets/views/shop/checkout.html:183-186` | Order note textarea | ~4 lines |
|
||||
| 27 | `assets/views/admin/catalog/product_form.html:71-73` | Product description textarea | ~3 lines |
|
||||
| 28 | `assets/views/admin/catalog/category_form.html:53-55` | Category description textarea | ~3 lines |
|
||||
## 13. File Input — ✅ DONE
|
||||
**Penguin UI: `file-input/default-file-input.html`**
|
||||
|
||||
---
|
||||
|
||||
## 12. Select/Dropdown (Native)
|
||||
**Penguin UI: `select/` (7 variants)**
|
||||
|
||||
| # | Location | What it is | Size |
|
||||
|---|----------|------------|------|
|
||||
| 29 | `assets/views/admin/catalog/product_form.html:53-60` | Category select | ~8 lines |
|
||||
| 30 | `assets/views/admin/catalog/category_form.html:40-49` | Parent category select (tree indented with `— `) | ~10 lines |
|
||||
| 31 | `assets/views/admin/orders/show.html:108-112` | Order status select | ~5 lines |
|
||||
|
||||
---
|
||||
|
||||
## 13. File Input
|
||||
**Penguin UI: `file-input/`**
|
||||
|
||||
| # | Location | What it is | Size |
|
||||
|---|----------|------------|------|
|
||||
| 32 | `assets/views/admin/catalog/product_form.html:78-82` | Product image upload | ~5 lines |
|
||||
| 33 | `assets/views/admin/catalog/category_form.html:58-64` | Category image upload | ~7 lines |
|
||||
|
||||
**Both use the same Tailwind `file:mr-3 file:...` prefix pattern for styling.**
|
||||
- Exact upstream mirror at `assets/views/penguinui/file-input/default-file-input.html` (reference only)
|
||||
- `ui::file_input(name, id, accept, attrs, extra)` macro (verbatim Penguin `file:` styling).
|
||||
- Adopted: product & category image upload.
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user