PR comment updates

justeattakeaway · Jul 11, 2024 · be8b4e2 · be8b4e2
1 parent 634bba4
commit be8b4e2
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 123 deletions.
diff --git a/packages/components/pie-textarea/package.json b/packages/components/pie-textarea/package.json
@@ -37,10 +37,12 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.16.0",
+    "@types/lodash.throttle": "4.1.9",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.24.0"
+    "@justeattakeaway/pie-webc-core": "0.24.0",
+    "lodash.throttle": "4.1.1"
   },
   "volta": {
     "extends": "../../../package.json"

diff --git a/packages/components/pie-textarea/src/index.ts b/packages/components/pie-textarea/src/index.ts
@@ -2,6 +2,7 @@ import {
     LitElement, html, unsafeCSS, PropertyValues,
 } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import throttle from 'lodash.throttle';
 
 import { validPropertyValues, RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 
@@ -35,11 +36,15 @@ export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
     @query('textarea')
     private _textarea!: HTMLTextAreaElement;
 
-    private handleResize () {
+    private _throttledResize = throttle(() => {
         if (this.resize === 'auto') {
             this._textarea.style.height = 'auto';
             this._textarea.style.height = `${this._textarea.scrollHeight + 2}px`; // +2 for border thicknesses
         }
+    }, 100);
+
+    private handleResize () {
+        this._throttledResize();
     }
 
     updated (changedProperties: PropertyValues<this>) {

diff --git a/packages/components/pie-textarea/src/textarea.scss b/packages/components/pie-textarea/src/textarea.scss
@@ -6,7 +6,7 @@
 // Minimum height in manual resize mode is one line of text.
 // Maximum height in auto resize mode is six lines of text.
 .c-textareaWrapper {
-  --textarea-line-height: calc(var(--dt-font-body-l-line-height) * 1px);
+  --textarea-line-height: #{p.line-height(--dt-font-body-l-line-height)};
   --textarea-border-thickness: 1px;
   --textarea-resize: none;
   --textarea-padding-inline: var(--dt-spacing-d);
@@ -21,7 +21,7 @@
   line-height: 0; // Remove once there is text outside the textarea
 
   textarea {
-    font-size: calc(var(--dt-font-body-l-size) * 1px);
+    @include p.font-size(--dt-font-body-l-size);
     line-height: var(--textarea-line-height);
     font-family: var(--dt-font-body-l-family);
     resize: var(--textarea-resize);