mats.bosson/PettyUI
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix showcase Form rendering

Browse Source 
Form.Control uses render-prop children(ariaProps). Also moved navLinks
creation inside App() to avoid SolidJS createRoot warning.
This commit is contained in:
Mats Bosson 2026-03-30 03:47:43 +07:00
parent 8f4eb77bdc
commit 48d047e5d5
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/showcase/src/app.tsx
View File

@ -44,8 +44,6 @@ function Section(props: { id: string; title: string; children: JSX.Element }) {
return content;
}
const navLinks = categories.map((cat) => <NavLink cat={cat} />);
/** Kitchen sink showcase page with all PettyUI components. */
export function App() {
const page = (
@ -56,7 +54,7 @@ export function App() {
PettyUI <span class="font-normal text-gray-400">Kitchen Sink</span>
</h1>
<nav class="flex gap-3 text-sm">
{navLinks}
{categories.map((cat) => <NavLink cat={cat} />)}
</nav>
</div>
</header>

12
packages/showcase/src/sections/inputs-advanced.tsx
View File

@ -11,13 +11,21 @@ function FormDemo() {
>
<Form.Field name="name" class="flex flex-col gap-1">
<Form.Label class="text-sm font-medium text-gray-700">Name</Form.Label>
<Form.Control type="text" placeholder="Your name" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
<Form.Control>
{(ariaProps) => (
<input {...ariaProps} type="text" placeholder="Your name" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
)}
</Form.Control>
<Form.Description class="text-xs text-gray-400">Required field</Form.Description>
<Form.ErrorMessage class="text-xs text-red-500" />
</Form.Field>
<Form.Field name="email" class="flex flex-col gap-1">
<Form.Label class="text-sm font-medium text-gray-700">Email</Form.Label>
<Form.Control type="email" placeholder="you@example.com" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
<Form.Control>
{(ariaProps) => (
<input {...ariaProps} type="email" placeholder="you@example.com" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
)}
</Form.Control>
<Form.ErrorMessage class="text-xs text-red-500" />
</Form.Field>
<Form.Submit class="px-4 py-2 text-sm font-medium rounded bg-indigo-600 text-white hover:bg-indigo-700 self-start">Submit</Form.Submit>