design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(input): separate label info tooltips from description text across input components

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-12 18:50:54 +00:00
parent 961b811b7a
commit 13ba5670f0
35 changed files with 128 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ts_web/elements/00group-layout/dees-label/dees-label.demo.ts
View File

@@ -85,31 +85,31 @@ export const demoFunc = () => html`
</div>
<div class="demo-section">
<h3>Description (Info Icon)</h3>
<p>When <code>description</code> is set, an info icon appears next to the label. Hover over it to see the tooltip.</p>
<h3>Info Text (Info Icon)</h3>
<p>When <code>infoText</code> is set, an info icon appears next to the label. Hover over it to see the tooltip.</p>
<div class="label-grid">
<div class="label-row">
<span class="annotation">description="..."</span>
<dees-label .label=${'API Key'} .description=${'Your API key can be found in the developer settings dashboard.'}></dees-label>
<span class="annotation">infoText="..."</span>
<dees-label .label=${'API Key'} .infoText=${'Your API key can be found in the developer settings dashboard.'}></dees-label>
</div>
<div class="label-row">
<span class="annotation">short description</span>
<dees-label .label=${'Region'} .description=${'Select your nearest datacenter.'}></dees-label>
<span class="annotation">short infoText</span>
<dees-label .label=${'Region'} .infoText=${'Select your nearest datacenter.'}></dees-label>
</div>
</div>
</div>
<div class="demo-section">
<h3>Required + Description</h3>
<h3>Required + Info Text</h3>
<p>Both indicators can be combined. The asterisk appears first, then the info icon.</p>
<div class="label-grid">
<div class="label-row">
<span class="annotation">required + description</span>
<dees-label .label=${'Password'} .required=${true} .description=${'Must be at least 8 characters with one uppercase letter and one number.'}></dees-label>
<span class="annotation">required + infoText</span>
<dees-label .label=${'Password'} .required=${true} .infoText=${'Must be at least 8 characters with one uppercase letter and one number.'}></dees-label>
</div>
<div class="label-row">
<span class="annotation">required + description</span>
<dees-label .label=${'Email Address'} .required=${true} .description=${'We will send a verification link to this address.'}></dees-label>
<span class="annotation">required + infoText</span>
<dees-label .label=${'Email Address'} .required=${true} .infoText=${'We will send a verification link to this address.'}></dees-label>
</div>
</div>
</div>