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>

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

@@ -32,7 +32,7 @@ export class DeesLabel extends DeesElement {
type: String,
reflect: true,
})
accessor description!: string;
accessor infoText!: string;
@property({
type: Boolean,
@@ -98,12 +98,12 @@ export class DeesLabel extends DeesElement {
<div class="label">
${this.label}
${this.required ? html`<span class="required">*</span>` : ''}
${this.description
${this.infoText
? html`
<div class="description-icon">
<dees-icon .icon=${'lucide:info'}></dees-icon>
</div>
<dees-speechbubble .text=${this.description}></dees-speechbubble>
<dees-speechbubble .text=${this.infoText}></dees-speechbubble>
`
: html``}
</div>