From 1f8d03a3b4e0f9d1c2a32422f2e1bbd4e8f4ded3 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Wed, 11 Oct 2023 13:54:41 +0200 Subject: [PATCH 1/4] fix(core/input-group): add padding left for error image --- .../components/input-group/input-group.tsx | 3 +- .../input-group/tests/input-group.ct.ts | 61 +++++++++++++++++++ 2 files changed, 63 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/input-group/input-group.tsx b/packages/core/src/components/input-group/input-group.tsx index 61c53fd5370..a799392e25f 100644 --- a/packages/core/src/components/input-group/input-group.tsx +++ b/packages/core/src/components/input-group/input-group.tsx @@ -115,7 +115,8 @@ export class InputGroup { this.inputElement.form?.noValidate === false) && !this.inputElement.validity.valid ) { - this.inputElement.style.backgroundPositionX = `${this.inputPaddingLeft}px`; + const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 8; + this.inputElement.style.backgroundPositionX = `${left}px`; this.inputPaddingLeft += 32; } }); diff --git a/packages/core/src/components/input-group/tests/input-group.ct.ts b/packages/core/src/components/input-group/tests/input-group.ct.ts index 2ee7e1e125e..93dd4cfeace 100644 --- a/packages/core/src/components/input-group/tests/input-group.ct.ts +++ b/packages/core/src/components/input-group/tests/input-group.ct.ts @@ -99,3 +99,64 @@ test('update padding end', async ({ mount, page }) => { await expect(input).toHaveCSS('padding-left', '55px'); await expect(input).toHaveCSS('padding-right', '65px'); }); + +test('validation padding', async ({ mount, page }) => { + await mount(` +
+ + + + + Submit +
+ `); + + const form = page.locator('form'); + await form.evaluate((form) => + form.addEventListener('submit', (e) => { + e.preventDefault(); + form.classList.add('was-validated'); + }) + ); + + const group = page.locator('ix-input-group'); + await expect(group).toHaveClass(/hydrated/); + + const input = group.locator('input'); + const button = page.locator('ix-button'); + + await button.click(); + + await expect(input).toHaveCSS('background-position-x', '8px'); +}); + +test('validation padding with input-start slot', async ({ mount, page }) => { + await mount(` +
+ + + + + + Submit +
+ `); + + const form = page.locator('form'); + await form.evaluate((form) => + form.addEventListener('submit', (e) => { + e.preventDefault(); + form.classList.add('was-validated'); + }) + ); + + const group = page.locator('ix-input-group'); + await expect(group).toHaveClass(/hydrated/); + + const input = group.locator('input'); + const button = page.locator('ix-button'); + + await button.click(); + + await expect(input).toHaveCSS('background-position-x', '27px'); +}); From 0cecadf396a0ea6a98bbb1efc2fd3abeb43d932b Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Wed, 11 Oct 2023 14:28:03 +0200 Subject: [PATCH 2/4] fix: add ellipsis --- packages/core/scss/components/form/_input.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/scss/components/form/_input.scss b/packages/core/scss/components/form/_input.scss index 9272872f602..934b0e2eb46 100644 --- a/packages/core/scss/components/form/_input.scss +++ b/packages/core/scss/components/form/_input.scss @@ -18,7 +18,7 @@ padding: 0.25rem 0.5rem; background-color: var(--theme-input--background); color: var(--theme-input--color); - + text-overflow: ellipsis; border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color); border-radius: var(--theme-input--border-radius); From e9b7f8d2d9332de4b484c70f3ee21659fafb70f0 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Thu, 12 Oct 2023 13:43:12 +0200 Subject: [PATCH 3/4] fix: padding stuff --- .../core/scss/components/form/_input.scss | 7 +++++ .../core/scss/legacy/components/_forms.scss | 13 -------- .../src/components/button/test/button.ct.ts | 2 +- .../components/input-group/input-group.tsx | 16 ++++++---- .../input-group/tests/input-group.ct.ts | 31 +++++++++++++++++++ 5 files changed, 49 insertions(+), 20 deletions(-) diff --git a/packages/core/scss/components/form/_input.scss b/packages/core/scss/components/form/_input.scss index 934b0e2eb46..61a59e56745 100644 --- a/packages/core/scss/components/form/_input.scss +++ b/packages/core/scss/components/form/_input.scss @@ -166,6 +166,13 @@ } } } + + form:not(.was-validated) { + .invalid-feedback, + .valid-feedback { + display: none !important; + } + } } @include form; diff --git a/packages/core/scss/legacy/components/_forms.scss b/packages/core/scss/legacy/components/_forms.scss index 6eef2a855ff..096976ae0b3 100755 --- a/packages/core/scss/legacy/components/_forms.scss +++ b/packages/core/scss/legacy/components/_forms.scss @@ -141,19 +141,6 @@ textarea { } } -.was-validated { - .form-control:invalid, - .is-invalid { - background-color: var(--theme-input-error--background); - background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; - background-position: left calc(0.375em + 0.1875rem) center !important; - padding-right: 0.75rem; - padding-left: calc(1.5em + 0.75rem); - background-size: 18px; - background-repeat: no-repeat; - } -} - input { &.disabled, &:disabled { diff --git a/packages/core/src/components/button/test/button.ct.ts b/packages/core/src/components/button/test/button.ct.ts index 795f150e759..7d91f4d20cc 100644 --- a/packages/core/src/components/button/test/button.ct.ts +++ b/packages/core/src/components/button/test/button.ct.ts @@ -45,5 +45,5 @@ test('should not fire event when disabled', async ({ mount, page }) => { const button = page.locator('ix-button'); await expect(button).toHaveClass(/hydrated/); - expect(button).toHaveCSS('pointer-events', 'none'); + await expect(button).toHaveCSS('pointer-events', 'none'); }); diff --git a/packages/core/src/components/input-group/input-group.tsx b/packages/core/src/components/input-group/input-group.tsx index a799392e25f..59f5c04f53e 100644 --- a/packages/core/src/components/input-group/input-group.tsx +++ b/packages/core/src/components/input-group/input-group.tsx @@ -110,13 +110,17 @@ export class InputGroup { return; } - if ( - (this.inputElement.form?.classList.contains('was-validated') || - this.inputElement.form?.noValidate === false) && - !this.inputElement.validity.valid - ) { + const isInputInValid = + !this.inputElement.validity.valid || + this.inputElement.classList.contains('is-invalid'); + + const formWasValidated = + this.inputElement.form?.classList.contains('was-validated') || + this.inputElement.form?.noValidate === false; + + if (formWasValidated && isInputInValid) { const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 8; - this.inputElement.style.backgroundPositionX = `${left}px`; + this.inputElement.style.backgroundPosition = `left ${left}px center`; this.inputPaddingLeft += 32; } }); diff --git a/packages/core/src/components/input-group/tests/input-group.ct.ts b/packages/core/src/components/input-group/tests/input-group.ct.ts index 93dd4cfeace..708af0cc915 100644 --- a/packages/core/src/components/input-group/tests/input-group.ct.ts +++ b/packages/core/src/components/input-group/tests/input-group.ct.ts @@ -159,4 +159,35 @@ test('validation padding with input-start slot', async ({ mount, page }) => { await button.click(); await expect(input).toHaveCSS('background-position-x', '27px'); + await expect(input).toHaveCSS('padding-left', '59px'); +}); + +test('validation with class padding with input-start slot', async ({ + mount, + page, +}) => { + await mount(` +
+ + + + +
+ `); + + const form = page.locator('form'); + await form.evaluate((form) => + form.addEventListener('submit', (e) => { + e.preventDefault(); + form.classList.add('was-validated'); + }) + ); + + const group = page.locator('ix-input-group'); + await expect(group).toHaveClass(/hydrated/); + + const input = group.locator('input'); + + await expect(input).toHaveCSS('background-position-x', '27px'); + await expect(input).toHaveCSS('padding-left', '59px'); }); From 02e62af165af5f75dfdcb047e1a4d3ba0a71fe3c Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Tue, 17 Oct 2023 10:43:17 +0200 Subject: [PATCH 4/4] chore: in valid --- packages/core/src/components/input-group/input-group.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/input-group/input-group.tsx b/packages/core/src/components/input-group/input-group.tsx index 59f5c04f53e..8b05b3ae227 100644 --- a/packages/core/src/components/input-group/input-group.tsx +++ b/packages/core/src/components/input-group/input-group.tsx @@ -110,7 +110,7 @@ export class InputGroup { return; } - const isInputInValid = + const isInputInvalid = !this.inputElement.validity.valid || this.inputElement.classList.contains('is-invalid'); @@ -118,7 +118,7 @@ export class InputGroup { this.inputElement.form?.classList.contains('was-validated') || this.inputElement.form?.noValidate === false; - if (formWasValidated && isInputInValid) { + if (formWasValidated && isInputInvalid) { const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 8; this.inputElement.style.backgroundPosition = `left ${left}px center`; this.inputPaddingLeft += 32;