feat(phoneNumber): add prop customValidityMessage

ovh · Nov 28, 2024 · 7644779 · 7644779
1 parent 54adf95
commit 7644779
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/...ages/ods/src/components/phone-number/src/components/ods-phone-number/ods-phone-number.tsx b/...ages/ods/src/components/phone-number/src/components/ods-phone-number/ods-phone-number.tsx
@@ -46,6 +46,7 @@ export class OdsPhoneNumber {
   @Prop({ reflect: true }) public ariaLabel: HTMLElement['ariaLabel'] = null;
   @Prop({ reflect: true }) public ariaLabelledby?: string;
   @Prop({ reflect: true }) public countries?: OdsPhoneNumberCountryIsoCode[] | OdsPhoneNumberCountryPreset | string;
+  @Prop({ reflect: true }) public customValidityMessage: string = 'Phone number is incorrect';
   @Prop({ reflect: true }) public defaultValue?: string;
   @Prop({ mutable: true, reflect: true }) public hasError: boolean = false;
   @Prop({ reflect: true }) public isClearable: boolean = false;
@@ -180,8 +181,7 @@ export class OdsPhoneNumber {
     this.value = event.detail.value as string ?? null;
 
     if (!isValidPhoneNumber(this.value, this.isoCode, this.phoneUtils)) {
-      // TODO add Prop to customize message
-      await this.inputElement?.setCustomValidity('Phone number format KO');
+      await this.inputElement?.setCustomValidity(this.customValidityMessage);
     } else {
       await this.inputElement?.setCustomValidity('');
     }

diff --git a/packages/ods/src/components/phone-number/tests/rendering/ods-phone-number.spec.ts b/packages/ods/src/components/phone-number/tests/rendering/ods-phone-number.spec.ts
@@ -65,6 +65,22 @@ describe('ods-phone-number rendering', () => {
     });
   });
 
+  describe('customValidityMessage', () => {
+    it('should be reflected', async() => {
+      const dummyValue = 'dummy value';
+
+      await setup(`<ods-phone-number custom-validity-message="${dummyValue}"></ods-phone-number>`);
+
+      expect(root?.getAttribute('custom-validity-message')).toBe(dummyValue);
+    });
+
+    it('should render with expected default value', async() => {
+      await setup('<ods-phone-number></ods-phone-number>');
+
+      expect(root?.getAttribute('custom-validity-message')).toBe('Phone number is incorrect');
+    });
+  });
+
   describe('defaultValue', () => {
     it('should be reflected', async() => {
       const dummyValue = 'dummy value';