diff --git a/.changeset/tasty-cups-argue.md b/.changeset/tasty-cups-argue.md new file mode 100644 index 00000000000..0dee645f480 --- /dev/null +++ b/.changeset/tasty-cups-argue.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": patch +--- + +Fix **ix-textarea** properties textarea-rows and textarea-width making sure their values get applied. diff --git a/packages/core/scss/mixins/_input.scss b/packages/core/scss/mixins/_input.scss index d480fc98a9e..5a57e46f028 100644 --- a/packages/core/scss/mixins/_input.scss +++ b/packages/core/scss/mixins/_input.scss @@ -120,7 +120,6 @@ @mixin element-textarea { & { min-height: 2rem; - height: 3.25rem; padding: calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness)); } diff --git a/packages/core/src/components/input/input.fc.tsx b/packages/core/src/components/input/input.fc.tsx index f5fe83d778f..410cb6ccd76 100644 --- a/packages/core/src/components/input/input.fc.tsx +++ b/packages/core/src/components/input/input.fc.tsx @@ -57,7 +57,6 @@ export function TextareaElement( style={{ resize: props.resizeBehavior, height: props.textareaHeight, - width: props.textareaWidth, }} {...props.ariaAttributes} > diff --git a/packages/core/src/components/input/tests/form-ready.ct.ts b/packages/core/src/components/input/tests/form-ready.ct.ts index ebdfcf58097..fd99e1616e9 100644 --- a/packages/core/src/components/input/tests/form-ready.ct.ts +++ b/packages/core/src/components/input/tests/form-ready.ct.ts @@ -309,6 +309,39 @@ regressionTest( } ); +regressionTest( + 'form-ready - use of textareaWidth and textareaRows properties', + async ({ mount, page }) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const textarea = page.locator('ix-textarea').locator('textarea'); + await expect(textarea).toHaveCSS('--textarea-width', '50%'); + await expect(textarea).toHaveAttribute('rows', '5'); + } +); + +regressionTest( + 'form-ready - height at 3.25rem if no textarearows is used', + async ({ mount, page }) => { + await mount( + `
` + ); + + const formElement = page.locator('form'); + preventFormSubmission(formElement); + const textarea = page.locator('ix-textarea').locator('textarea'); + await expect(textarea).not.toHaveAttribute('rows'); + const computedStyle = await textarea.evaluate((el) => { + return window.getComputedStyle(el).height; + }); + expect(computedStyle).toBe('52px'); + } +); + regressionTest( `form-ready - ix-number-input without allowEmptyValueChange emits 0 on clear`, async ({ mount, page }) => { diff --git a/packages/core/src/components/input/textarea.scss b/packages/core/src/components/input/textarea.scss index b88f1399252..18971e5e97d 100644 --- a/packages/core/src/components/input/textarea.scss +++ b/packages/core/src/components/input/textarea.scss @@ -58,3 +58,22 @@ border-color: var(--theme-input--border-color--invalid--active) !important; } } + +:host { + textarea:not([rows]) { + height: 3.25rem; + } +} +:host([textarea-width]:not(.manually-resized)) { + display: inline-block; + width: var(--textarea-width); +} + +.input-wrapper { + width: 100%; +} + +textarea { + width: 100%; + box-sizing: border-box; +} diff --git a/packages/core/src/components/input/textarea.tsx b/packages/core/src/components/input/textarea.tsx index 0a120966fc5..76f1f843b03 100644 --- a/packages/core/src/components/input/textarea.tsx +++ b/packages/core/src/components/input/textarea.tsx @@ -187,6 +187,7 @@ export class Textarea implements IxInputFieldComponent { this.manualHeight = undefined; this.manualWidth = undefined; this.isProgrammaticResize = true; + this.hostElement.classList.remove('manually-resized'); } @Watch('resizeBehavior') @@ -196,6 +197,7 @@ export class Textarea implements IxInputFieldComponent { componentWillLoad() { this.updateFormInternalValue(this.value); + this.setTextareaWidth(); } disconnectedCallback() { @@ -229,6 +231,7 @@ export class Textarea implements IxInputFieldComponent { this.isManuallyResized = true; this.manualHeight = textarea.style.height; this.manualWidth = textarea.style.width; + this.hostElement.classList.add('manually-resized'); }); this.resizeObserver.observe(textarea); @@ -239,6 +242,19 @@ export class Textarea implements IxInputFieldComponent { this.value = value; } + private setTextareaWidth() { + if (this.textareaWidth) { + this.hostElement.style.setProperty( + '--textarea-width', + this.textareaWidth + ); + this.hostElement.setAttribute('textarea-width', ''); + } else { + this.hostElement.style.removeProperty('--textarea-width'); + this.hostElement.removeAttribute('textarea-width'); + } + } + /** @internal */ @Method() async getAssociatedFormElement(): Promise { diff --git a/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-dark-linux.png b/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-dark-linux.png index b33d9d595ec..a21a39ba320 100644 Binary files a/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-dark-linux.png and b/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-dark-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-light-linux.png b/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-light-linux.png index d3919b16141..13cadc80414 100644 Binary files a/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-light-linux.png and b/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-light-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-dark-linux.png b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-dark-linux.png index 3db122d13e5..692e3410f68 100644 Binary files a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-dark-linux.png and b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-dark-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-light-linux.png b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-light-linux.png index 81fefbfa6ec..fda05872747 100644 Binary files a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-light-linux.png and b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-light-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-dark-linux.png b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-dark-linux.png index 2572f224063..7a8f8aef985 100644 Binary files a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-dark-linux.png and b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-dark-linux.png differ diff --git a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-light-linux.png b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-light-linux.png index 94d43a06600..287f09083c1 100644 Binary files a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-light-linux.png and b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-light-linux.png differ