internal(text-control): add missing prefix/suffix to summary item layout

Foxy · Sep 3, 2024 · 337a941 · 337a941
1 parent 4299789
commit 337a941
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/src/elements/internal/InternalTextControl/InternalTextControl.test.ts b/src/elements/internal/InternalTextControl/InternalTextControl.test.ts
@@ -349,4 +349,22 @@ describe('InternalTextControl', () => {
 
     submitMethod.restore();
   });
+
+  it('renders prefix text in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-text-control layout="summary-item" prefix="Test Prefix">
+      </test-internal-text-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('Test Prefix');
+  });
+
+  it('renders suffix text in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-text-control layout="summary-item" suffix="Test Suffix">
+      </test-internal-text-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('Test Suffix');
+  });
 });
diff --git a/src/elements/internal/InternalTextControl/InternalTextControl.ts b/src/elements/internal/InternalTextControl/InternalTextControl.ts
@@ -102,6 +102,8 @@ export class InternalTextControl extends InternalEditableControl {
         </div>
 
         <div class="flex-1 flex items-center gap-xs" style="min-width: 30%">
+          ${this.prefix ? html`<div>${this.prefix}</div>` : ''}
+
           <input
             placeholder=${this.placeholder}
             class=${classMap({
@@ -124,6 +126,8 @@ export class InternalTextControl extends InternalEditableControl {
             }}
           />
 
+          ${this.suffix ? html`<div class="font-medium text-secondary">${this.suffix}</div>` : ''}
+
           <button
             aria-label=${this.t('clear')}
             class=${classMap({