@the-portland-company/shell 0.88.0 → 0.90.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.90.0
+
+`PageHeader` matches the Spec (Reference/UI-Platform "Page header" and "Page header and width").
+
+- **Surface and color.** The filled `--app-tab-header-bg` bar, white title, `text-slate-100` and bottom border are gone: the header sits on the page background and the title is Graphite (`--color-text`, fallback `#2F3136`). The title is now an `h1`.
+- **Breadcrumbs.** The `breadcrumbs` prop is deprecated: accepted, renders nothing, `console.warn` once in dev.
+- **Eyebrow.** Reads the mode color through `--color-accent-fg`, which follows the Mode's stamped primary (`--mode-accent`, the same token the tab strip uses for `modes.<mode>.primary`) and is pinned AA-safe for Petition. Never the white `modes.<mode>.accent`.
+- **Spacing.** 22px above the header; 24px desktop gutter, 16px below `md`. `md:ml-60` sidebar offset unchanged.
+- **Width.** `maxW` is deprecated and ignored (warns once in dev); the header spans its container.
+- **Email guard.** A string `title` / `subtitle` containing an email address warns once in dev.
+- Unchanged: 30px bold title, 11px uppercase eyebrow, 15px G4 subtitle, actions right, tabBar beneath.
+- Tests: `__tests__/pageHeaderEyebrow.test.tsx`.
+
+## 0.89.0
+
+Card follows the theme, and the form set gains Checkbox and FileInput. Follow-up to the 0.88.0 migrations.
+
+- **Card tokens.** Surface, border and text come from new `--app-card-bg`, `--app-card-border`, `--app-card-fg` and `--app-card-fg-muted` (chrome.css). Light: `#FFFFFF`, `#D7DADF`, `#2F3136`, `#5C6B80`. Dark (under `.dark`): `#161616`, `#333333`, `#E8E8E8`, `#A3A3A3`. Both pairs clear 4.5:1. This fixes the white cards on surveys dark mode and the petitions contrast failure on dark pages. The Brand `.dark {}` can still override the tokens.
+- **Card props.** `subtitle`, `aside`, `actions`, `footer`, `bodyClassName`, `padding` (`none | sm | md | lg`, default `md`). A plain `<Card title>` renders as before (p-6, h3 title). Any of `subtitle`, `aside`, `actions`, `footer`, `bodyClassName` switches to a bordered header / body / footer layout, which is what dashboard `RdParts` and settings `ui/kit` Card need.
+- **New `Checkbox`.** `label`, `description`, `indeterminate`, `invalid`, forwards its ref, 44px-tall clickable row, accent fill, `data-shell-field`. Exported from the root and `/native`.
+- **New `FileInput`.** The `type="file"` control with the Input label/helper/error chrome, 44px tall, secondary-button styling on the native button. `Input` still rejects `file` and `checkbox`; its docs point to these.
+- **ESLint guard.** `no-raw-control-styling` now flags `<input type="checkbox">` and `<input type="file">` with `className` or `style` unless the file imports `Checkbox` / `FileInput` (importing `Input` no longer excuses them). `no-local-primitives` also covers `Checkbox` and `FileInput`.
+- Tests: `__tests__/cardCheckboxFileInput.test.tsx` (including light and dark contrast of the card tokens), `__tests__/eslintGuard.test.ts`.
+
 ## 0.88.0
 
 Shared form primitives, so apps stop hand-rolling them.

package/README.md

@@ -139,7 +139,8 @@ All `<ShellChrome>` props are optional — only supply what your app has. The ch
 | `<BrandLogo>` | `<img>` wrapper for the branded mode logo. |
 | `<BrandIcon name="...">` | Renders `/brand/icons/<name>.svg` from your `public/`. |
 | `<CommitCopyButton>` | Footer commit/version display with copy-to-clipboard. |
-| `<Card>`, `<PageHeader>` | Page-level layout primitives. |
+| `<Card>` | Page-level layout primitive. |
+| `<PageHeader>` | The page header (Reference/UI-Platform → "Page header"): no filled surface, 22px below the top bar, 24px gutter (16px below `md`), spans its container. Eyebrow in the mode color, 30px bold Graphite `h1` title, 15px G4 subtitle, `actions` right, `tabBar` beneath. `breadcrumbs` and `maxW` are **deprecated** (accepted, ignored, warn once in dev); width comes from `FormColumn` (960px) or the fluid frame. Warns in dev if `title` / `subtitle` is a string holding an email address. |
 | `<FormColumn>` | The one constrained layout inside the frame's fluid `<main>`: a left-aligned column, `max-width: 960px`, for form and settings pages. Also exported from `./native`. |
 | `<NavTabStrip>` (from `./native`) | The canonical page tab strip: underlined text tabs with a 2px underline in the mode color. Render it in the page body, below the page header. |
 | `<PageContainer>`, `<BreadcrumbBar>`, `<HeaderTabBar>` | **Deprecated for apps** (each warns in dev). The frame owns a fluid `<main>` (24px gutter, 16px below `md`, no max-width); there are no breadcrumbs; the tab strip is `NavTabStrip`. |
@@ -173,7 +174,7 @@ All `<ShellChrome>` props are optional — only supply what your app has. The ch
 
 ## Form primitives
 
-Shared `Button`, `Input`, `Select` and `Textarea`, styled from the shell's tokens (`--app-btn-*`, `--app-field-*`, `--color-*`). 5px radius, 12px horizontal padding.
+Shared `Button`, `Input`, `Select`, `Textarea`, `Checkbox`, `FileInput` and `Card`, styled from the shell's tokens (`--app-btn-*`, `--app-field-*`, `--color-*`). 5px radius, 12px horizontal padding.
 
 | Export | Props |
 |---|---|
@@ -181,6 +182,11 @@ Shared `Button`, `Input`, `Select` and `Textarea`, styled from the shell's token
 | `<Input>` | All native input props plus `label`, `helperText`, `error`, `invalid`, `wrapperClassName`. 44px tall. Forwards its ref to the `<input>`. |
 | `<Select>` | Same as `Input`, with `<option>` children. 44px tall. Forwards its ref to the `<select>`. |
 | `<Textarea>` | Same as `Input`, 88px minimum height. Forwards its ref to the `<textarea>`. |
+| `<Checkbox>` | All native checkbox props plus `label`, `description`, `indeterminate`, `invalid`, `wrapperClassName`. The whole row is a 44px touch target; accent fill; `data-shell-field`. Forwards its ref to the `<input>`. |
+| `<FileInput>` | The `type="file"` control: `label`, `helperText`, `error`, `invalid`, `accept`, `multiple`, `wrapperClassName`. 44px tall. Forwards its ref. `Input` does not accept `type="file"` or `"checkbox"`. |
+| `<Card>` | `title`, `subtitle`, `aside`, `actions`, `footer`, `bodyClassName`, `padding` (`none \| sm \| md \| lg`, default `md`), `minH`, plus any div props. Plain `<Card title>` is a padded box with an h3; any of `subtitle`, `aside`, `actions`, `footer`, `bodyClassName` gives a bordered header / body / footer. |
+
+**Card and dark mode.** Card and Checkbox read `--app-card-bg`, `--app-card-border`, `--app-card-fg` and `--app-card-fg-muted` from `chrome.css`: light on `:root`, dark under `.dark`. Do not paint a card white in app CSS; override these tokens if an app needs a different surface.
 
 An `error` message marks the control invalid (`aria-invalid`, red border) and replaces the helper text; the label, helper and error are wired with `htmlFor` and `aria-describedby`.
 
@@ -209,8 +215,8 @@ Run `shell-version-check` in CI too (it is a package `bin`, so `npx shell-versio
 
 | Rule (`politogy-shell/…`) | Fails on |
 |---|---|
-| `no-local-primitives` | Declaring or exporting a local `Button`, `Card`, `Input`, `Select`, `Textarea`, `PageHeader` or `FormColumn` (re-exports from the shell are fine). |
-| `no-raw-control-styling` | JSX `<button>`, `<input>`, `<select>`, `<textarea>` with `className` or `style`. Allowed in a file that imports the shell primitive of the same kind (wrapping). |
+| `no-local-primitives` | Declaring or exporting a local `Button`, `Card`, `Input`, `Select`, `Textarea`, `Checkbox`, `FileInput`, `PageHeader` or `FormColumn` (re-exports from the shell are fine). |
+| `no-raw-control-styling` | JSX `<button>`, `<input>`, `<select>`, `<textarea>` with `className` or `style`. Allowed in a file that imports the shell primitive of the same kind (wrapping). `<input type="checkbox">` needs `Checkbox` and `<input type="file">` needs `FileInput`; importing `Input` does not excuse them. |
 | `no-global-control-classes` | `className` strings matching `\b(btn\|input)(-[a-z]+)?\b`, including inside `clsx(...)`, ternaries and template literals. |
 
 Escape hatch: put `// shell-primitive-exempt: <reason>` on the line above (or the same line as) the offending code. A reason is required. Prefer adding the missing variant to the shell instead.