From 091e316ad80f3793108659e5a9291415009de0e3 Mon Sep 17 00:00:00 2001 From: Shane Rosenthal Date: Mon, 10 Aug 2026 22:18:02 -0400 Subject: [PATCH] Mobile v4 docs: min/max sizing, per-corner radius, autocapitalize, scroll centering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Documents the classes and attributes added by the Masterclass fixes, and corrects one table that the alignment change made wrong. layout.md - CORRECTION: the "Underlying values" table said `0` = start for `align-items` / `align-self`. It is now `unset`, and start is `4` — the renderers have to tell an authored `items-start` apart from an element that never specified an alignment. Anyone passing `align-items="0"` off the old table was getting the platform default, not start. - New "Min / max size" row: `min-w-*`, `max-w-*`, `min-h-*`, `max-h-*`, `max-w-none`, and the container scale on `max-w`. - Rounded rows for per-side and per-corner classes, with a worked example of the bubble-tail pattern and a note that class order does not matter. - `border-radius` attribute now says it is uniform-only and points at the classes for per-corner. - Arbitrary-value prefix list extended with the min/max and per-corner forms. - New "Deliberately unsupported" table covering `max-w-full` / `max-w-screen` (no size mode on the wire) and the logical `rounded-s-*` family (no RTL corner mirroring), both of which people will otherwise try and find silently dropped. text-input.md - New `autocapitalize` prop, and `keyboard` now documents that it carries capitalization and autocorrect rather than only the key layout. - New "Capitalization" section with the derivation table, plus an aside on the one case the platforms still differ (a plain text field: sentences on iOS, none on Android — each platform's own default, left as-is). scroll-view.md - New "Centering short content" example. `fill` on the scroll view's child now stretches it to at least the visible area, which is what gives `justify-center` room; noted as a minimum, not a fixed height, so taller content still scrolls. Co-Authored-By: Claude Opus 5 (1M context) --- .../docs/mobile/4/edge-components/layout.md | 50 +++++++++++++++++-- .../mobile/4/edge-components/scroll-view.md | 34 +++++++++++++ .../mobile/4/edge-components/text-input.md | 42 +++++++++++++++- 3 files changed, 120 insertions(+), 6 deletions(-) diff --git a/resources/views/docs/mobile/4/edge-components/layout.md b/resources/views/docs/mobile/4/edge-components/layout.md index c708347c..99c21f2b 100644 --- a/resources/views/docs/mobile/4/edge-components/layout.md +++ b/resources/views/docs/mobile/4/edge-components/layout.md @@ -154,13 +154,26 @@ Labels map to these integers, which still work if you prefer them (`align-items= | Integer | `align-items` / `align-self` | `justify-content` | |---------|------------------------------|-------------------| -| `0` | start | start | +| `0` | *unset* — see below | start | | `1` | center | center | | `2` | end | end | | `3` | stretch | space-between | -| `4` | — | space-around | +| `4` | start | space-around | | `5` | — | space-evenly | + + ### In PHP When you build elements fluently, pass a label, an enum case, or an integer. The enums live in @@ -202,7 +215,8 @@ Visual styling attributes that apply to any element. @endverbatim - `bg` - Background color as hex string (e.g. `"#FF0000"`, `"#80FF000080"` for alpha) -- `border-radius` - Corner rounding in dp (float) +- `border-radius` - Corner rounding in dp (float). Applies to all four corners — for per-side or per-corner + rounding, use the `rounded-*` classes below - `border-width` - Border width in dp (float). Must be used together with `border-color` - `border-color` - Border color as hex string. Must be used together with `border-width` - `opacity` - Element opacity from 0.0 to 1.0 (float) @@ -299,6 +313,7 @@ The parser recognizes the classes listed below. |----------|---------| | Width | `w-full`, `w-N`, fractional (`w-1/2`, `w-1/3`, `w-2/3`, `w-1/4`, `w-3/4`, `w-1/5`…), arbitrary `w-[N]` | | Height | `h-full`, `h-N`, arbitrary `h-[N]` | +| Min / max size | `min-w-N`, `max-w-N`, `min-h-N`, `max-h-N`, `max-w-none`, the container scale on `max-w` (`max-w-xs` … `max-w-7xl`), arbitrary `max-w-[N]` etc. | | Aspect ratio | `aspect-square`, `aspect-video`, arbitrary `aspect-[N]` | | Object fit (images) | `object-contain`, `object-cover`, `object-fill`, `object-none`, `object-scale-down` | | Padding | `p-N`, `px-N`, `py-N`, `pt-N`, `pr-N`, `pb-N`, `pl-N`, arbitrary `p-[N]` etc. | @@ -314,6 +329,8 @@ The parser recognizes the classes listed below. | Border color | `border-{palette}-{shade}`, `border-white`, `border-black`, `border-transparent`, `border-[#hex]`, `border-theme-{token}` | | Border width | `border` (1dp), `border-2`, `border-4`, `border-8` | | Rounded | `rounded` (4dp), `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`, `rounded-[N]` | +| Rounded (per side) | `rounded-t-*`, `rounded-r-*`, `rounded-b-*`, `rounded-l-*` — each rounds that side's two corners. A bare side (`rounded-b`) uses the same 4dp default as `rounded` | +| Rounded (per corner) | `rounded-tl-*`, `rounded-tr-*`, `rounded-br-*`, `rounded-bl-*`, including arbitrary values (`rounded-br-[4]`) | | Shadow | `shadow`, `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `shadow-inner`, `shadow-none` | | Opacity | `opacity-{0..100}`, arbitrary `opacity-[0.5]` | | Text size | `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`, `text-3xl`, `text-4xl`, `text-5xl`, `text-6xl`, arbitrary `text-[N]` | @@ -346,10 +363,33 @@ bg-purple-500/40 bg-[#FF0000]/60 text-white/80 border-theme-outline/50 ``` -**Arbitrary values** — `prefix-[value]` for the prefixes shown above: `w`, `h`, `p`/`px`/`py`/`pt`/`pr`/`pb`/`pl`, -`m`/`mx`/`my`/`mt`/`mr`/`mb`/`ml`, `gap`, `bg`, `text`, `border`, `rounded`, `opacity`, `leading`, `aspect`, `top`, +**Arbitrary values** — `prefix-[value]` for the prefixes shown above: `w`, `h`, `min-w`/`max-w`/`min-h`/`max-h`, +`p`/`px`/`py`/`pt`/`pr`/`pb`/`pl`, `m`/`mx`/`my`/`mt`/`mr`/`mb`/`ml`, `gap`, `bg`, `text`, `border`, `rounded` +(and its per-side / per-corner forms — `rounded-t`, `rounded-br`, …), `opacity`, `leading`, `aspect`, `top`, `right`, `bottom`, `left`. +Per-corner rounding composes with the uniform class rather than replacing it — set the shape once, then override the +corners you want different. Class order doesn't matter; the more specific class always wins, as it does in Tailwind: + +@verbatim +```blade static +{{-- A chat bubble with its tail corner squared off toward its sender --}} + + Yep — 7pm works + +``` +@endverbatim + +### Deliberately unsupported + +A handful of Tailwind classes are recognised as real Tailwind but left unparsed on purpose, rather than mapped to +something approximate. They are reported in the dropped-class log in debug builds: + +| Class | Why | Use instead | +|-------|-----|-------------| +| `max-w-full`, `max-w-screen`, `min-w-full` | Min and max ride the wire as plain numbers with no accompanying size mode, so "100% of the parent" has nowhere to go | `w-full` | +| `rounded-s-*`, `rounded-e-*`, `rounded-ss-*`, `rounded-se-*`, `rounded-es-*`, `rounded-ee-*` | These are *logical* corners that flip with writing direction, and the renderers do not mirror layout for RTL — accepting them would silently draw left-to-right geometry in a right-to-left layout | the physical `rounded-l-*` / `rounded-tl-*` forms | + +### Centering short content + +A login screen, an empty state, a confirmation — content that should sit in the middle of the page but must still +scroll once the keyboard appears or the content grows. + +Give the scroll view's child `fill`. It then stretches to at least the height of the scroll view's visible area, which +is what gives `justify-center` room to work: + +@verbatim +```blade static + + + + Welcome back + + + Sign in + + + +``` +@endverbatim + + + ## Element ```php diff --git a/resources/views/docs/mobile/4/edge-components/text-input.md b/resources/views/docs/mobile/4/edge-components/text-input.md index 3d1121ad..6f239be7 100644 --- a/resources/views/docs/mobile/4/edge-components/text-input.md +++ b/resources/views/docs/mobile/4/edge-components/text-input.md @@ -59,7 +59,10 @@ All three variants accept the same shared prop set. The bare variant adds a `col ### Behavior - `keyboard` - Keyboard hint string: `text` (default), `number`, `email`, `phone`, `url`, `decimal`, `password`, - `numberPassword`. On iOS `password` uses the standard keyboard; `secure` is the masking mechanism + `numberPassword`. On iOS `password` uses the standard keyboard; `secure` is the masking mechanism. The keyboard + type also decides capitalization and autocorrect — see [Capitalization](#capitalization) +- `autocapitalize` - Override that capitalization: `none`, `sentences`, `words`, or `characters` (HTML's + vocabulary). Leave it unset to let `keyboard` decide (optional, string) - `secure` - Mask input for passwords (optional, boolean, default: `false`) - `multiline` - Allow multiple lines (optional, boolean, default: `false`) - `max-length` - Maximum character count (optional, int) @@ -96,6 +99,43 @@ All three variants accept the same shared prop set. The bare variant adds a `col - `a11y-label` - Accessibility label (optional) - `a11y-hint` - Accessibility hint (optional) +## Capitalization + +Declaring a `keyboard` type carries its typing behaviour with it, not just the key layout. Fields whose content is +case-sensitive or non-alphabetic never capitalize, and never autocorrect: + +| `keyboard` | Capitalization | Autocorrect | +|------------|----------------|-------------| +| `text` (default) | sentences on iOS, none on Android | on | +| `email`, `url` | none | off | +| `number`, `decimal`, `phone`, `password`, `numberPassword` | none | off | + +@verbatim +```blade static +{{-- Email keyboard AND no capitalized first letter — no extra attribute needed --}} + +``` +@endverbatim + +Use `autocapitalize` for the cases a keyboard type can't imply: + +@verbatim +```blade static + + +``` +@endverbatim + +`autocapitalize` always wins over the derived value, and an unrecognised value falls back to the derived behaviour +rather than erroring. + + + ## Events - `@change` - Component method called when the text changes. Receives the new value