fix!: make prefix, suffix and clear button stick to top (#7895)

* make prefix/suffix/clear button sticky * add test * fix material theme * simplify selectors
vaadin · Oct 2, 2024 · 21ab55d · 21ab55d
1 parent fd28a42
commit 21ab55d
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 2 deletions.
diff --git a/...ages/text-area/test/visual/lumo/screenshots/text-area/baseline/clear-button.png b/...ages/text-area/test/visual/lumo/screenshots/text-area/baseline/clear-button.png
diff --git a/...umo/screenshots/text-area/baseline/scrolled-with-prefix-suffix-clear-button.png b/...umo/screenshots/text-area/baseline/scrolled-with-prefix-suffix-clear-button.png
diff --git a/packages/text-area/test/visual/lumo/text-area.test.js b/packages/text-area/test/visual/lumo/text-area.test.js
@@ -66,6 +66,24 @@ describe('text-area', () => {
     await visualDiff(div, 'scrolled');
   });
 
+  it('scrolled with prefix, suffix, clear button', async () => {
+    const prefix = document.createElement('span');
+    prefix.setAttribute('slot', 'prefix');
+    prefix.textContent = '$';
+    element.appendChild(prefix);
+
+    const suffix = document.createElement('span');
+    suffix.setAttribute('slot', 'suffix');
+    suffix.textContent = '$';
+    element.appendChild(suffix);
+
+    element.clearButtonVisible = true;
+    element.style.height = '70px';
+    element.value = 'a\nb\nc\nd\ne';
+    element.focus();
+    await visualDiff(div, 'scrolled-with-prefix-suffix-clear-button');
+  });
+
   it('error message', async () => {
     element.label = 'Label';
     element.errorMessage = 'This field is required';

diff --git a/.../text-area/test/visual/material/screenshots/text-area/baseline/clear-button.png b/.../text-area/test/visual/material/screenshots/text-area/baseline/clear-button.png
diff --git a/...ial/screenshots/text-area/baseline/scrolled-with-prefix-suffix-clear-button.png b/...ial/screenshots/text-area/baseline/scrolled-with-prefix-suffix-clear-button.png
diff --git a/packages/text-area/test/visual/material/text-area.test.js b/packages/text-area/test/visual/material/text-area.test.js
@@ -66,6 +66,24 @@ describe('text-area', () => {
     await visualDiff(div, 'scrolled');
   });
 
+  it('scrolled with prefix, suffix, clear button', async () => {
+    const prefix = document.createElement('span');
+    prefix.setAttribute('slot', 'prefix');
+    prefix.textContent = '$';
+    element.appendChild(prefix);
+
+    const suffix = document.createElement('span');
+    suffix.setAttribute('slot', 'suffix');
+    suffix.textContent = '$';
+    element.appendChild(suffix);
+
+    element.clearButtonVisible = true;
+    element.style.height = '70px';
+    element.value = 'a\nb\nc\nd\ne';
+    element.focus();
+    await visualDiff(div, 'scrolled-with-prefix-suffix-clear-button');
+  });
+
   it('error message', async () => {
     element.label = 'Label';
     element.errorMessage = 'This field is required';

diff --git a/packages/text-area/theme/lumo/vaadin-text-area-styles.js b/packages/text-area/theme/lumo/vaadin-text-area-styles.js
@@ -56,8 +56,18 @@ const textArea = css`
     --_lumo-text-field-overflow-mask-image: none;
   }
 
-  /* Vertically align icon prefix/suffix with the first line of text */
-  [part='input-field'] ::slotted(vaadin-icon) {
+  /* Use sticky positioning to keep prefix/suffix/clear button visible when scrolling textarea container */
+  [part='input-field'] ::slotted([slot$='fix']),
+  [part='clear-button'] {
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+  }
+
+  /* Vertically align icon prefix/suffix/clear button with the first line of text */
+  [part='input-field'] ::slotted(vaadin-icon[slot$='fix']),
+  [part='clear-button'] {
+    top: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);
     margin-top: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);
   }
 `;

diff --git a/packages/text-area/theme/material/vaadin-text-area-styles.js b/packages/text-area/theme/material/vaadin-text-area-styles.js
@@ -22,6 +22,14 @@ const textArea = css`
   [part='input-field']::after {
     bottom: calc(var(--_text-area-vertical-scroll-position) * -1);
   }
+
+  /* Use sticky positioning to keep prefix/suffix/clear button visible when scrolling textarea container */
+  [part='input-field'] ::slotted([slot$='fix']),
+  [part='clear-button'] {
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+  }
 `;
 
 registerStyles('vaadin-text-area', [inputFieldShared, textArea], { moduleId: 'material-text-area' });