chore: update phone input styles (#1831)

Co-authored-by: James Nestor <[email protected]>

web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.14.25",
+  "version": "2.14.26",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",

web-components/src/[sandbox]/examples/phone-input.ts

@@ -1,3 +1,4 @@
+import "@/components/form/Form";
 import "@/components/phone-input/PhoneInput";
 import { html } from "lit-element";
 
@@ -87,4 +88,25 @@ export const phoneInputTemplate = html`
       </div>
     </div>
   </div>
+  <div>
+    <h4>(New momentum) Example with Initial Value</h4>
+    <div class="row">
+      <md-form>
+        <md-phone-input
+          newMomentum
+          .countryCallingCode=${"+91, India, IN"}
+          .errorMessage=${"This phone number is invalid"}
+          .value=${"9997770100"}
+          .countryCodeAriaLabel=${"International Dialing Code"}
+          .dialNumberAriaLabel=${"Dial Number"}
+          .numberPlaceholder=${"Enter The Phone Number"}
+          @phoneinput-keydown="${(e: CustomEvent) => console.log("keydown: ", e.detail.value)}"
+          @phoneinput-blur="${(e: CustomEvent) =>
+            console.log("blur: ", e.detail.value, " is valid: ", e.detail.isValid)}"
+          @phoneinput-change="${(e: CustomEvent) =>
+            console.log("change: ", e.detail.value, " is valid: ", e.detail.isValid)}"
+        ></md-phone-input>
+      </md-form>
+    </div>
+  </div>
 `;

web-components/src/components/combobox/ComboBox.ts

@@ -1716,6 +1716,26 @@ export namespace ComboBox {
       `;
     }
 
+    get renderTrailingInputControls(): TemplateResult {
+      const showClearButton = this.shouldChangeButton();
+
+      if (this.newMomentum) {
+        if (showClearButton && this.isDropdownArrow) {
+          return html`${this.clearButtonTemplate()}`;
+        } else if (showClearButton) {
+          return html`${this.clearButtonTemplate()} ${this.renderNewMomentumArrow}`;
+        }
+
+        return this.renderNewMomentumArrow;
+      }
+
+      if (this.compact) {
+        return html`${nothing}`;
+      }
+
+      return html`${showClearButton ? this.clearButtonTemplate() : this.arrowButtonTemplate()}`;
+    }
+
     render() {
       return html`
         <div part="combobox" class="md-combobox md-combobox-list ${classMap(this.comboBoxTemplateClassMap)}">
@@ -1751,14 +1771,7 @@ export namespace ComboBox {
                 @keydown=${this.handleInputKeyDown}
               />
             </div>
-            ${this.compact
-              ? nothing
-              : this.shouldChangeButton()
-                ? this.clearButtonTemplate()
-                : !this.newMomentum
-                  ? this.arrowButtonTemplate()
-                  : nothing}
-            ${this.newMomentum ? this.renderNewMomentumArrow : nothing}
+            ${this.renderTrailingInputControls}
           </div>
 
           ${this.showLoader || this.showCustomError

web-components/src/components/phone-input/PhoneInput.ts

@@ -7,6 +7,7 @@ import { findFlagUrlByIso2Code } from "country-flags-svg";
 import { AsYouType, CountryCode, isValidNumberForRegion } from "libphonenumber-js";
 import { LitElement, html, internalProperty, property, query } from "lit-element";
 import { nothing } from "lit-html";
+import { classMap } from "lit-html/directives/class-map";
 import { repeat } from "lit-html/directives/repeat.js";
 import { Input } from "../input/Input"; // Keep type import as a relative path
 import styles from "./scss/module.scss";
@@ -50,6 +51,7 @@ export namespace PhoneInput {
     @property({ type: String }) clearAriaLabel = "Clear Input";
     @property({ type: String }) clearCountryCodeAriaLabel = "Clear Country Code";
     @property({ type: String }) id = "";
+    @property({ type: Boolean }) newMomentum = false;
 
     @internalProperty() private countryCode: CountryCode = "US";
     @internalProperty() private codeList = [];
@@ -188,6 +190,10 @@ export namespace PhoneInput {
       this.formattedValue = new AsYouType(this.countryCode).input(input);
     }
 
+    get flagClassMap() {
+      return { "new-momentum": this.newMomentum };
+    }
+
     getFormatedCountryCallingCode() {
       return { id: this.countryCallingCode, value: this.countryCallingCode.split(",")[0]?.trim() };
     }
@@ -217,7 +223,11 @@ export namespace PhoneInput {
       return html`
         ${this.showFlags ? this.getModStyle() : nothing}
         <div class="md-phone-input__container">
-          ${this.showFlags ? html` <span class="flag-box">${this.getCountryFlag(this.countryCode)}</span> ` : nothing}
+          ${this.showFlags
+            ? html`
+                <span class="flag-box ${classMap(this.flagClassMap)}">${this.getCountryFlag(this.countryCode)}</span>
+              `
+            : nothing}
           <md-combobox
             part="combobox"
             ?disabled=${this.disabled}
@@ -228,6 +238,8 @@ export namespace PhoneInput {
             @change-selected="${(e: CustomEvent) => this.handleCountryChange(e)}"
             clear-icon-height="${this.clearIconHeight}"
             with-custom-content
+            ?newMomentum=${this.newMomentum}
+            is-dropdown-arrow
             .clearAriaLabel="${this.clearCountryCodeAriaLabel}"
           >
             ${repeat(
@@ -248,6 +260,7 @@ export namespace PhoneInput {
             shape="${this.pill ? "pill" : "none"}"
             .ariaControls=${this.id}
             clear
+            ?newMomentum=${this.newMomentum}
             clearAriaLabel="${this.clearAriaLabel}"
             type="tel"
             value="${this.formattedValue}"

web-components/src/components/phone-input/scss/phoneInput.scss

@@ -6,15 +6,23 @@
   span.flag-box {
     align-items: center;
     border: 1px solid var(--input-default-border-color, #ccc);
-    border-bottom-left-radius: 0.25rem;
-    border-right: none;
+    border-bottom-left-radius: 0.25rem;    
     border-top-left-radius: 0.25rem;
+    border-right: none;
     display: flex;
     height: rem-calc(34);
     justify-content: center;
     position: relative;
     width: rem-calc(36);
 
+    &.new-momentum {
+      border: 1px solid var(--input-default-new-border-color, #ccc);      
+      height: rem-calc(32);
+      border-top-left-radius: rem-calc(8);
+      border-bottom-left-radius: rem-calc(8);
+      border-right: none;
+    }
+
     .flag-svg-wrapper {
       justify-content: center;
     }