diff --git a/packages/core/scss/components/form/_input.scss b/packages/core/scss/components/form/_input.scss
index 9272872f602..61a59e56745 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);
@@ -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 61c53fd5370..8b05b3ae227 100644
--- a/packages/core/src/components/input-group/input-group.tsx
+++ b/packages/core/src/components/input-group/input-group.tsx
@@ -110,12 +110,17 @@ export class InputGroup {
return;
}
- if (
- (this.inputElement.form?.classList.contains('was-validated') ||
- this.inputElement.form?.noValidate === false) &&
- !this.inputElement.validity.valid
- ) {
- this.inputElement.style.backgroundPositionX = `${this.inputPaddingLeft}px`;
+ 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.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 2ee7e1e125e..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
@@ -99,3 +99,95 @@ 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(`
+
+ `);
+
+ 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(`
+
+ `);
+
+ 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');
+ 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');
+});