From e8978b445aaeafa468bbc05dc178eb4796b5db96 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Thu, 9 Jan 2025 17:39:51 -0600 Subject: [PATCH 1/4] refactor(text-area): remove duplicate CSS & set width to --- .../src/components/text-area/text-area.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss index d0beeb0fdb9..85562d41d37 100644 --- a/packages/calcite-components/src/components/text-area/text-area.scss +++ b/packages/calcite-components/src/components/text-area/text-area.scss @@ -17,7 +17,7 @@ */ :host { - @apply inline-block relative w-full h-full; + @apply block relative h-full; --calcite-internal-text-area-border-color: var(--calcite-text-area-border-color, var(--calcite-color-border-input)); --calcite-internal-text-area-footer-border-color: var( @@ -30,8 +30,6 @@ .footer { font-size: var(--calcite-text-area-font-size, var(--calcite-font-size--1)); background-color: var(--calcite-text-area-background-color, var(--calcite-color-foreground-1)); - padding-block: var(--calcite-spacing-sm); - padding-inline: var(--calcite-spacing-md); } .text-area { From d6baf6cf691dcd038efecd2f3a36c262a756fb56 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Fri, 10 Jan 2025 10:58:54 -0600 Subject: [PATCH 2/4] fix tests --- .../src/components/text-area/text-area.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/text-area/text-area.e2e.ts b/packages/calcite-components/src/components/text-area/text-area.e2e.ts index 56aa1d3aa63..5d8b532c680 100644 --- a/packages/calcite-components/src/components/text-area/text-area.e2e.ts +++ b/packages/calcite-components/src/components/text-area/text-area.e2e.ts @@ -18,7 +18,7 @@ import { CSS } from "./resources"; describe("calcite-text-area", () => { describe("renders", () => { - renders("calcite-text-area", { display: "inline-block" }); + renders("calcite-text-area", { display: "block" }); }); describe("defaults", () => { From f538e13ad9d29a5d37dd8909e97935d3211108e6 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Fri, 10 Jan 2025 16:19:15 -0600 Subject: [PATCH 3/4] remove default min-width value --- .../src/components/text-area/text-area.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss index 85562d41d37..284f7e7e17e 100644 --- a/packages/calcite-components/src/components/text-area/text-area.scss +++ b/packages/calcite-components/src/components/text-area/text-area.scss @@ -17,7 +17,7 @@ */ :host { - @apply block relative h-full; + @apply block relative; --calcite-internal-text-area-border-color: var(--calcite-text-area-border-color, var(--calcite-color-border-input)); --calcite-internal-text-area-footer-border-color: var( @@ -45,7 +45,7 @@ max-block-size: var(--calcite-text-area-max-height); min-block-size: var(--calcite-text-area-min-height); max-inline-size: var(--calcite-text-area-max-width); - min-inline-size: var(--calcite-text-area-min-width, theme("spacing.48")); + min-inline-size: var(--calcite-text-area-min-width); &::placeholder { @apply font-normal; From 8af290cf2ffaa7851ee7862d4117375ea3608c53 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Fri, 17 Jan 2025 15:54:25 -0600 Subject: [PATCH 4/4] remove setting height of native textarea --- .../src/components/text-area/resources.ts | 2 - .../src/components/text-area/text-area.scss | 22 ++----- .../src/components/text-area/text-area.tsx | 60 ++++--------------- 3 files changed, 17 insertions(+), 67 deletions(-) diff --git a/packages/calcite-components/src/components/text-area/resources.ts b/packages/calcite-components/src/components/text-area/resources.ts index 965d6d7bb39..ce9c9e3b8aa 100644 --- a/packages/calcite-components/src/components/text-area/resources.ts +++ b/packages/calcite-components/src/components/text-area/resources.ts @@ -25,5 +25,3 @@ export const SLOTS = { footerStart: "footer-start", footerEnd: "footer-end", }; - -export const RESIZE_TIMEOUT = 100; diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss index 284f7e7e17e..a83397408db 100644 --- a/packages/calcite-components/src/components/text-area/text-area.scss +++ b/packages/calcite-components/src/components/text-area/text-area.scss @@ -24,6 +24,7 @@ --calcite-text-area-footer-border-color, var(--calcite-internal-text-area-border-color) ); + --calcite-internal-text-area-footer-block-size: 2.25rem; } .text-area, @@ -34,6 +35,7 @@ .text-area { @apply relative font-sans block box-border w-full m-0; + block-size: calc(100% - var(--calcite-internal-text-area-footer-block-size,)); --calcite-internal-text-area-border-block-end-color: var(--calcite-internal-text-area-border-color); @@ -83,7 +85,7 @@ @apply flex box-border items-center; border: var(--calcite-border-width-sm) solid var(--calcite-internal-text-area-footer-border-color); border-block-start: var(--calcite-border-width-none); - min-block-size: 2.25rem; + block-size: var(--calcite-internal-text-area-footer-block-size); } .character-limit { @@ -139,6 +141,7 @@ } :host([scale="s"]) { + --calcite-internal-text-area-footer-block-size: 1.75rem; .text-area, .footer, .character-limit { @@ -146,27 +149,20 @@ font-size: var(--calcite-text-area-font-size, var(--calcite-font-size--2)); } - .footer { - min-block-size: 1.75rem; - } - .text-area { @apply py-1 px-2; } } :host([scale="m"]) { - .text-area { - @apply py-2 px-3; - } - + .text-area, .footer { @apply py-2 px-3; - min-block-size: 2.25rem; } } :host([scale="l"]) { + --calcite-internal-text-area-footer-block-size: 3rem; .text-area, .footer { font-size: var(--calcite-text-area-font-size, var(--calcite-font-size-0)); @@ -174,12 +170,6 @@ padding-inline: var(--calcite-spacing-lg); } - .footer { - min-block-size: 2.75rem; - } - - .text-area, - .footer, .character-limit { font-size: var(--calcite-text-area-font-size, var(--calcite-font-size-0)); padding-inline-start: var(--calcite-spacing-lg); diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx index 2bb6404cbbb..c8e55defdcf 100644 --- a/packages/calcite-components/src/components/text-area/text-area.tsx +++ b/packages/calcite-components/src/components/text-area/text-area.tsx @@ -1,5 +1,3 @@ -// @ts-strict-ignore -import { throttle } from "lodash-es"; import { createRef } from "lit-html/directives/ref.js"; import { LitElement, @@ -44,7 +42,7 @@ import { useT9n } from "../../controllers/useT9n"; import type { Label } from "../label/label"; import { CharacterLengthObj } from "./interfaces"; import T9nStrings from "./assets/t9n/messages.en.json"; -import { CSS, IDS, SLOTS, RESIZE_TIMEOUT } from "./resources"; +import { CSS, IDS, SLOTS } from "./resources"; import { styles } from "./text-area.scss"; declare global { @@ -94,31 +92,15 @@ export class TextArea private resizeObserver = createObserver("resize", async () => { await componentLoaded(this); - const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth } = - this.getHeightAndWidthOfElements(); - if (footerWidth > 0 && footerWidth !== textAreaWidth) { - this.footerEl.value.style.width = `${textAreaWidth}px`; - } - if (elWidth !== textAreaWidth || elHeight !== textAreaHeight + (footerHeight || 0)) { - this.setHeightAndWidthToAuto(); - } - }); + const isFooterHidden = this.footerEl.value.classList.contains(CSS.hide); - // height and width are set to auto here to avoid overlapping on to neighboring elements in the layout when user starts resizing. - - // throttle is used to avoid flashing of textarea when user resizes. - private setHeightAndWidthToAuto = throttle( - (): void => { - if (this.resize === "vertical" || this.resize === "both") { - this.el.style.height = "auto"; - } - if (this.resize === "horizontal" || this.resize === "both") { - this.el.style.width = "auto"; + if (!isFooterHidden) { + const { textAreaWidth, footerWidth } = this.getWidthOfTextareaAndFooter(); + if (footerWidth > 0 && footerWidth !== textAreaWidth) { + this.footerEl.value.style.width = `${textAreaWidth}px`; } - }, - RESIZE_TIMEOUT, - { leading: false }, - ); + } + }); private textAreaEl: HTMLTextAreaElement; @@ -316,7 +298,6 @@ export class TextArea override updated(): void { updateHostInteraction(this); - this.setTextAreaHeight(); } loaded(): void { @@ -397,34 +378,15 @@ export class TextArea this.resizeObserver?.observe(el); } - private setTextAreaHeight(): void { - const { textAreaHeight, elHeight, footerHeight } = this.getHeightAndWidthOfElements(); - if (footerHeight > 0 && textAreaHeight + footerHeight != elHeight) { - this.textAreaEl.style.height = `${elHeight - footerHeight}px`; - } - } - - private getHeightAndWidthOfElements(): { - textAreaHeight: number; + private getWidthOfTextareaAndFooter(): { textAreaWidth: number; - elHeight: number; - elWidth: number; - footerHeight: number; footerWidth: number; } { - const { height: textAreaHeight, width: textAreaWidth } = - this.textAreaEl.getBoundingClientRect(); - const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect(); - const { height: footerHeight, width: footerWidth } = this.footerEl.value - ? this.footerEl.value.getBoundingClientRect() - : { height: 0, width: 0 }; + const textAreaWidth = this.textAreaEl.getBoundingClientRect().width; + const footerWidth = this.footerEl.value.getBoundingClientRect().width; return { - textAreaHeight, textAreaWidth, - elHeight, - elWidth, - footerHeight, footerWidth, }; }