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

3
ts_web/elements/00group-input/dees-input-fileupload/component.ts
View File

@@ -73,7 +73,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
<div class="input-wrapper">
<dees-label
.label=${this.label}
.description=${this.description}
.infoText=${this.infoText}
.required=${this.required}
></dees-label>
<dees-tile
@@ -114,6 +114,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
${this.validationMessage
? html`<div class="validation-message" aria-live="polite">${this.validationMessage}</div>`
: html``}
${this.renderDescription()}
</div>
`;
}

17
ts_web/elements/00group-input/dees-input-fileupload/demo.ts
View File

@@ -59,14 +59,15 @@ export const demoFunc = () => html`
<div class="demo-stack">
<dees-input-fileupload
.label=${'Attachments'}
.description=${'Upload supporting documents for your request'}
.infoText=${'Upload supporting documents for your request'}
.description=${'Accepted formats: images, PDF, and ZIP archives up to 10MB'}
.accept=${'image/*,.pdf,.zip'}
.maxSize=${10 * 1024 * 1024}
></dees-input-fileupload>
<dees-input-fileupload
.label=${'Brand assets'}
.description=${'Upload high-resolution imagery (JPG/PNG)'}
.infoText=${'Upload high-resolution imagery (JPG/PNG)'}
.accept=${'image/jpeg,image/png'}
.multiple=${false}
.maxSize=${5 * 1024 * 1024}
@@ -77,14 +78,14 @@ export const demoFunc = () => html`
<div class="demo-stack">
<dees-input-fileupload
.label=${'Audio uploads'}
.description=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
.infoText=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
.accept=${'audio/*'}
.maxSize=${25 * 1024 * 1024}
></dees-input-fileupload>
<dees-input-fileupload
.label=${'Disabled example'}
.description=${'Uploader is disabled while moderation is pending'}
.infoText=${'Uploader is disabled while moderation is pending'}
.disabled=${true}
></dees-input-fileupload>
</div>
@@ -100,7 +101,7 @@ export const demoFunc = () => html`
<div class="demo-stack">
<dees-input-text
.label=${'Project name'}
.description=${'How should we refer to this project internally?'}
.infoText=${'How should we refer to this project internally?'}
.required=${true}
.key=${'projectName'}
></dees-input-text>
@@ -114,7 +115,7 @@ export const demoFunc = () => html`
<dees-input-fileupload
.label=${'Statement of work'}
.description=${'Upload a signed statement of work (PDF, max 15MB)'}
.infoText=${'Upload a signed statement of work (PDF, max 15MB)'}
.required=${true}
.accept=${'application/pdf'}
.maxSize=${15 * 1024 * 1024}
@@ -124,7 +125,7 @@ export const demoFunc = () => html`
<dees-input-fileupload
.label=${'Creative references'}
.description=${'Optional. Upload up to five visual references'}
.infoText=${'Optional. Upload up to five visual references'}
.accept=${'image/*'}
.maxFiles=${5}
.maxSize=${8 * 1024 * 1024}
@@ -133,7 +134,7 @@ export const demoFunc = () => html`
<dees-input-text
.label=${'Notes'}
.description=${'Add optional context for reviewers'}
.infoText=${'Add optional context for reviewers'}
.inputType=${'textarea'}
.key=${'notes'}
></dees-input-text>