Merge pull request #2787 from infor-design/2706-validation-long-message

2706 - Fix overflowing of validation message

doc/CHANGELOG.md

@@ -9,12 +9,13 @@
 ## 1.4.3 Features
 
 - `[Card]` Adds `draggable` attribute to ids-card which allows card to be used in drag and drop scenarios. ([#2423](https://github.com/infor-design/enterprise-wc/issues/2423))
-- `[Datagrid]` Fix Clear Row / Eraser button so that changes persist throughout pagination. ([#2615]https://github.com/infor-design/enterprise-wc/issues/2615)
-- `[LoadingIndicator]` Added a setting `contained` which confines the loading indicator within it's nearest parent. ([#2256]https://github.com/infor-design/enterprise-wc/issues/2256)
-- `[NotificationBanner]` Added a notification service which can be used to manage notification banners on a page. ([#2160]https://github.com/infor-design/enterprise-wc/issues/2160)
+- `[Datagrid]` Fix Clear Row / Eraser button so that changes persist throughout pagination. ([#2615](https://github.com/infor-design/enterprise-wc/issues/2615))
+- `[LoadingIndicator]` Added a setting `contained` which confines the loading indicator within it's nearest parent. ([#2256](https://github.com/infor-design/enterprise-wc/issues/2256))
+- `[NotificationBanner]` Added a notification service which can be used to manage notification banners on a page. ([#2160](https://github.com/infor-design/enterprise-wc/issues/2160))
 - `[Switch]` Added a label position setting that allows positioning the label on either the right or left side of the slider. ([#2579](https://github.com/infor-design/enterprise-wc/issues/2579))
-- `[Themes]` Added a setting `IdsGlobal.themePath` that you can use to set the location of the theme files. ([#2125]https://github.com/infor-design/enterprise-wc/issues/2125)
-- `[Themes]` Added latest round of semantic tokens. ([#2471]https://github.com/infor-design/enterprise-wc/issues/2471)
+- `[Themes]` Added a setting `IdsGlobal.themePath` that you can use to set the location of the theme files. ([#2125](https://github.com/infor-design/enterprise-wc/issues/2125))
+- `[Themes]` Added latest round of semantic tokens. ([#2471](https://github.com/infor-design/enterprise-wc/issues/2471))
+- `[Validation]` Improved the validation message to prevent it from overflowing the field area. ([#2706](https://github.com/infor-design/enterprise-wc/issues/2706))
 
 ### 1.4.3 Fixes
 
@@ -27,10 +28,10 @@
 - `[Homepage]` Converted home page tests to playwright. ([#1940](https://github.com/infor-design/enterprise-wc/issues/1940))
 - `[Listbuilder]` Fixed buggy builder styles. ([#2701](https://github.com/infor-design/enterprise-wc/issues/2701))
 - `[Listbuilder]` Fixed an issue where clicking the row in the wrong spot would edit the wrong row. ([#2701](https://github.com/infor-design/enterprise-wc/issues/2701))
-- `[Locale]` Fixed translation issue of `small` into Spanish. ([#8962]https://github.com/infor-design/enterprise-wc/issues/8962)
-- `[Locale]` Fixed translation issue of `Available` into Thai and Italian. ([#8786]https://github.com/infor-design/enterprise-wc/issues/8786)
-- `[Listbuilder]` Fixed buggy builder styles. ([#2701]https://github.com/infor-design/enterprise-wc/issues/2701)
-- `[Listbuilder]` Fixed an issue where clicking the row in the wrong spot would edit the wrong row. ([#2701]https://github.com/infor-design/enterprise-wc/issues/2701)
+- `[Locale]` Fixed translation issue of `small` into Spanish. ([#8962](https://github.com/infor-design/enterprise-wc/issues/8962))
+- `[Locale]` Fixed translation issue of `Available` into Thai and Italian. ([#8786](https://github.com/infor-design/enterprise-wc/issues/8786))
+- `[Listbuilder]` Fixed buggy builder styles. ([#2701](https://github.com/infor-design/enterprise-wc/issues/2701))
+- `[Listbuilder]` Fixed an issue where clicking the row in the wrong spot would edit the wrong row. ([#2701](https://github.com/infor-design/enterprise-wc/issues/2701))
 - `[Multiselect]` Added `placeholder` attribute to `ids-multiselect` to allow for a placeholder value. ([#2758](https://github.com/infor-design/enterprise-wc/issues/2758))
 - `[Multiselect]` Converted multiselect tests to playwright. ([#1957](https://github.com/infor-design/enterprise-wc/issues/1957))
 - `[Popup]` Fixed an issue where the popup took up space when initially loaded. ([#2777](https://github.com/infor-design/enterprise-wc/issues/2777))

src/components/ids-input/demos/validation-message.ts

@@ -25,28 +25,28 @@ document.addEventListener('DOMContentLoaded', () => {
   const addSingleMessages = () => {
     // Error
     inputError?.addValidationMessage({
-      message: 'Something is wrong do not continue',
+      message: 'An error occurred while processing your request. The username you entered is already in use. Each account must have a unique username to ensure proper identification and avoid conflicts. If you believe this is an error, please double-check the spelling or consider choosing a different username. Remember, your username is a key part of your identity on this platform, so it\'s important to select one that is both unique and memorable. Please try again with a different username.',
       type: 'error',
       id: 'error'
     });
 
     // Alert
     inputAlert?.addValidationMessage({
-      message: 'Warning the value may be incorrect',
+      message: 'Warning: You are about to delete a record that is linked to other important data within the system. Deleting this record may cause other data to become inaccessible or result in unexpected behavior. We strongly recommend reviewing the associated data and confirming that this action will not have unintended consequences. If you proceed, the deletion will be permanent, and the linked data may no longer function as expected. Please ensure that you have made a backup or have considered all implications before continuing.',
       type: 'alert',
       id: 'alert'
     });
 
     // Success
     inputSuccess?.addValidationMessage({
-      message: 'This value is correct',
+      message: 'Your changes have been successfully saved, but please note that some settings may take up to 24 hours to fully propagate across the system. During this time, you may experience temporary inconsistencies or delays in the affected areas. If you need to make additional changes, you can do so at any time, but please be aware that doing so may extend the propagation period. If everything looks good, there\'s no further action needed on your part. Thank you for your patience as the system updates.',
       type: 'success',
       id: 'success'
     });
 
     // Info
     inputInfo?.addValidationMessage({
-      message: 'Random information about this field',
+      message: 'For your information: The system has detected that you have not logged in for the past 30 days. As part of our security policy, accounts with extended periods of inactivity are required to undergo an additional verification process upon the next login. This process ensures that your account remains secure and that you are the rightful owner. The verification will include confirming your email address and answering security questions. If you encounter any issues during this process, our support team is available to assist you. This additional step is in place to protect your account from unauthorized access',
       type: 'info',
       id: 'info'
     });

src/components/ids-input/ids-input.scss

@@ -359,6 +359,11 @@ $input-size-full: 100%;
   .validation-message {
     margin-block-start: var(--ids-space-2xs);
     margin-bottom: var(--ids-space-none);
+
+    .ids-icon {
+      place-self: self-start;
+      margin-top: 1px;
+    }
   }
 
   // If `no-margins` is used:
@@ -397,36 +402,53 @@ $input-size-full: 100%;
 
   // input sizes: [xs, sm, mm, md, lg, full]
   // Subtracting 2 takes into account that the width includes the `.field-container` border on both sides.
-  &.xs .field-container {
-    width: $border-input-size-xs;
-  }
+  &.xs {
+    .field-container,
+    .validation-message {
+      width: $border-input-size-xs;
+    }
+  } 
 
-  &.sm .field-container {
-    width: $border-input-size-sm;
+  &.sm {
+    .field-container,
+    .validation-message {
+      width: $border-input-size-sm;
+    }
   }
 
-  &.mm .field-container {
-    width: $border-input-size-mm;
+  &.mm {
+    .field-container,
+    .validation-message {
+      width: $border-input-size-mm;
+    }
   }
 
-  &.md .field-container {
-    width: $border-input-size-md;
+  &.md {
+    .field-container,
+    .validation-message {
+      width: $border-input-size-md;
+    }
   }
 
-  &.lg .field-container {
-    width: $border-input-size-lg;
+  &.lg {
+    .field-container,
+    .validation-message {
+      width: $border-input-size-lg;
+    }
   }
 
   &.full {
     display: block;
 
-    .field-container {
+    .field-container,
+    .validation-message {
       width: var(--ids-input-width-full);
     }
   }
 
   @media (max-width: mixins.$breakpoint-xs) {
-    .field-container {
+    .field-container,
+    .validation-message {
       max-width: $border-input-size-mm;
     }
   }

src/themes/mixins/ids-validation-mixin.scss

@@ -6,6 +6,7 @@
   display: flex;
   font-family: var(--ids-font-family-default), var(--ids-font-family-system-sans);
   margin-top: var(--ids-space-2xs);
+  max-width: var(--ids-input-width-full);
 
   &.has-custom-icon {
     color: var(--ids-icon-color-default);

tests/ids-input/ids-input-validation.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test';
+import percySnapshot from '@percy/playwright';
 import { test } from '../base-fixture';
 
 import IdsInput from '../../src/components/ids-input/ids-input';
@@ -616,3 +617,18 @@ test.describe('IdsInput validation tests', () => {
     )).toEqual(0);
   });
 });
+
+test.describe('IdsInput validation message tests', () => {
+  const url = '/ids-input/validation-message.html';
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(url);
+  });
+
+  test.describe('snapshot tests', () => {
+    test('should match the visual snapshot in percy', async ({ page, browserName }) => {
+      if (browserName !== 'chromium') return;
+      await percySnapshot(page, 'ids-input-validation-light');
+    });
+  });
+});