hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-12 13:18:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixing issues with field

Browse Source
This commit is contained in:
Ronan Berder
2025-11-04 20:41:23 +08:00
parent f82b1d79d4
commit b8d8b1741c
3 changed files with 131 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/components/field.njk
+61 -30
View File
@@ -27,6 +27,11 @@ toc:
{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}
<div class="alert-destructive">
{% lucide "triangle-alert"%}
<h2>This component is still under development, API may change.</h2>
</div>
{% set code_demo %}
<form class="w-full max-w-md space-y-6">
<fieldset class="fieldset">
@@ -41,7 +46,7 @@ toc:
<div role="group" class="field">
<label for="card-number">Card Number</label>
<input id="card-number" type="text" placeholder="1234 5678 9012 3456" aria-describedby="card-number-desc" required>
<p id="card-number-desc" class="description">Enter your 16-digit card number</p>
<p id="card-number-desc">Enter your 16-digit card number</p>
</div>
<div class="grid grid-cols-3 gap-4">
@@ -115,18 +120,44 @@ toc:
<h2 id="usage"><a href="#usage">Usage</a></h2>
<section class="prose">
<p>Field provides semantic HTML patterns for accessible forms:</p>
<p>Field uses semantic HTML with minimal classes. Two main patterns can be used independently or composed together:</p>
<ul>
<li><code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> for grouping related fields</li>
<li><code>&lt;p&gt;</code> after <code>&lt;legend&gt;</code> is automatically styled as description text</li>
<li><code>role="group"</code> with <code>.field</code> class for individual field containers</li>
<li><code>.description</code> class for field-level helper text (requires <code>aria-describedby</code>)</li>
<li><code>.error</code> class with <code>role="alert"</code> for error messages</li>
<li><code>&lt;div role="group" class="field"&gt;</code> for individual field containers (label, input, helper text, errors)</li>
<li><code>&lt;fieldset class="fieldset"&gt;</code> for grouping multiple related fields together</li>
</ul>
<p>Elements inside these containers are styled automatically based on their purpose. Use <code>aria-describedby</code> to connect helper text and errors to inputs for accessibility.</p>
<p><strong>Fields</strong> have the following HTML structure:</p>
<dl>
<dt><code class="highlight language-html">&lt;div role="group" class="field"&gt;</code></dt>
<dd>Field container.
<dl>
<dt><code class="highlight language-html">&lt;label&gt;</code></dt>
<dd>Label for the input.</dd>
<dt><code class="highlight language-html">&lt;input&gt;</code>, <code>&lt;select&gt;</code> or <code>&lt;textarea&gt;</code></dt>
<dd>Form input.</dd>
<dt><code class="highlight language-html">&lt;p&gt;</code> <span class="badge-secondary">Optional</span></dt>
<dd>Helper text. Use <code>aria-describedby</code> on the input to reference this element's <code>id</code>.</dd>
<dt><code class="highlight language-html">&lt;p role="alert"&gt;</code> <span class="badge-secondary">Optional</span></dt>
<dd>Error message. Use <code>aria-describedby</code> on the input and <code>aria-invalid="true"</code> to reference this element's <code>id</code>.</dd>
</dl>
</dd>
</dl>
<p><strong>Fieldsets</strong> have the following HTML structure:</p>
<dl>
<dt><code class="highlight language-html">&lt;fieldset class="fieldset"&gt;</code></dt>
<dd>Container for grouping related fields.
<dl>
<dt><code class="highlight language-html">&lt;legend&gt;</code></dt>
<dd>Heading for the fieldset.</dd>
<dt><code class="highlight language-html">&lt;p&gt;</code> <span class="badge-secondary">Optional</span></dt>
<dd>Description text. When placed directly after <code>&lt;legend&gt;</code>, automatically styled as muted text.</dd>
<dt><code class="highlight language-html">&lt;div role="group" class="field"&gt;</code> <span class="badge-secondary">Optional</span></dt>
<dd>Individual field containers (see structure above). You can include multiple <code>.field</code> elements, or place form controls directly in the fieldset.</dd>
</dl>
</dd>
</dl>
</section>
{{ code_block(code) }}
<h2 id="examples"><a href="#examples">Examples</a></h2>
<h3 id="example-input"><a href="#example-input">Input</a></h3>
@@ -136,12 +167,12 @@ toc:
<div role="group" class="field">
<label for="username">Username</label>
<input id="username" type="text" placeholder="evilrabbit" aria-describedby="username-desc">
<p id="username-desc" class="description">Choose a unique username for your account.</p>
<p id="username-desc">Choose a unique username for your account.</p>
</div>
<div role="group" class="field">
<label for="password">Password</label>
<p id="password-desc" class="description">Must be at least 8 characters long.</p>
<p id="password-desc">Must be at least 8 characters long.</p>
<input id="password" type="password" placeholder="••••••••" aria-describedby="password-desc">
</div>
</div>
@@ -155,7 +186,7 @@ toc:
<div role="group" class="field">
<label for="bio">Feedback</label>
<textarea id="bio" rows="4" placeholder="Your feedback helps us improve..." aria-describedby="bio-desc"></textarea>
<p id="bio-desc" class="description">Share your thoughts about our service.</p>
<p id="bio-desc">Share your thoughts about our service.</p>
</div>
{% endset %}
@@ -177,7 +208,7 @@ toc:
<option value="finance">Finance</option>
<option value="operations">Operations</option>
</select>
<p id="country-desc" class="description">Select your department or area of work.</p>
<p id="country-desc">Select your department or area of work.</p>
</div>
{% endset %}
@@ -188,7 +219,7 @@ toc:
{% set code %}
<div role="group" class="field">
<label for="price-range">Price</label>
<p id="price-range-desc" class="description">Set your budget: $<span id="price-range-value">150</span></p>
<p id="price-range-desc">Set your budget: $<span id="price-range-value">150</span></p>
<input id="price-range" type="range" min="0" max="500" value="150">
</div>
<script>
@@ -233,13 +264,13 @@ toc:
<div role="group" class="field">
<label for="full-name">Full name</label>
<input id="full-name" type="text" placeholder="Evil Rabbit" aria-describedby="name-desc">
<p id="name-desc" class="description">Your first and last name</p>
<p id="name-desc">Your first and last name</p>
</div>
<div role="group" class="field">
<label for="display-name">Username</label>
<input id="display-name" type="text" placeholder="@evilrabbit" aria-invalid="true" aria-describedby="username-error">
<p id="username-error" class="error" role="alert">Choose another username</p>
<p id="username-error" role="alert">Username is already taken</p>
</div>
<div class="flex items-center gap-3">
@@ -293,10 +324,10 @@ toc:
<div class="field">
<div class="flex w-full gap-3 flex-row items-center">
<input id="sync-desktop-documents" type="checkbox" checked class="input self-start">
<div class="flex flex-1 flex-col gap-1.5 leading-snug">
<section>
<label for="sync-desktop-documents">Sync Desktop & Documents folders</label>
<p class="description">Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.</p>
</div>
<p>Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.</p>
</section>
</div>
</div>
</fieldset>
@@ -344,10 +375,10 @@ toc:
{% set code_switch %}
<div role="group" class="field flex-row">
<div class="flex flex-1 flex-col gap-1.5 leading-snug">
<section>
<label for="multi-factor-authentication">Multi-factor authentication</label>
<p class="description">Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.</p>
</div>
<p>Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.</p>
</section>
<input id="multi-factor-authentication" type="checkbox" role="switch">
</div>
{% endset %}
@@ -362,20 +393,20 @@ toc:
<p>Select the compute environment for your cluster.</p>
<div role="group" class="field">
<label class="flex gap-3 border border-transparent rounded-md p-4 has-[:checked]:border-primary has-[:checked]:bg-primary/5 dark:has-[:checked]:bg-primary/10">
<div class="flex flex-1 flex-col gap-1.5 leading-snug">
<label class="flex gap-3 border rounded-md p-4 has-[:checked]:border-primary has-[:checked]:bg-primary/5 dark:has-[:checked]:bg-primary/10">
<section>
<h3>Kubernetes</h3>
<p class="description text-">Run GPU workloads on a K8s configured cluster.</p>
</div>
<p>Run GPU workloads on a K8s configured cluster.</p>
</section>
<input id="choice-card" type="radio" name="choice-card" class="self-start" checked>
</label>
</div>
<div role="group" class="field">
<label class="flex gap-3 border border-transparent rounded-md p-4 has-[:checked]:border-primary has-[:checked]:bg-primary/5 dark:has-[:checked]:bg-primary/10">
<div class="flex flex-1 flex-col gap-1.5 leading-snug">
<label class="flex gap-3 border rounded-md p-4 has-[:checked]:border-primary has-[:checked]:bg-primary/5 dark:has-[:checked]:bg-primary/10">
<section>
<h3>Virtual Machine</h3>
<p class="description text-">Access a VM configured cluster to run GPU workloads.</p>
</div>
<p>Access a VM configured cluster to run GPU workloads.</p>
</section>
<input id="choice-card" type="radio" name="choice-card" class="self-start">
</label>
</div>