From 84d1125f1fec3a2a53c9cc52e5a3085648c59072 Mon Sep 17 00:00:00 2001 From: James Nestor <87858909+NotNestor@users.noreply.github.com> Date: Wed, 20 Nov 2024 18:08:11 +0000 Subject: [PATCH] chore: update phone input styles (#1831) Co-authored-by: James Nestor --- web-components/package.json | 2 +- .../src/[sandbox]/examples/phone-input.ts | 22 ++++++++++++++ .../src/components/combobox/ComboBox.ts | 29 ++++++++++++++----- .../src/components/phone-input/PhoneInput.ts | 15 +++++++++- .../phone-input/scss/phoneInput.scss | 12 ++++++-- 5 files changed, 68 insertions(+), 12 deletions(-) diff --git a/web-components/package.json b/web-components/package.json index a5d7ae70a1..192cafc3c1 100644 --- a/web-components/package.json +++ b/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", diff --git a/web-components/src/[sandbox]/examples/phone-input.ts b/web-components/src/[sandbox]/examples/phone-input.ts index 0bbbf014ad..514ce179b1 100644 --- a/web-components/src/[sandbox]/examples/phone-input.ts +++ b/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` +
+

(New momentum) Example with Initial Value

+
+ + + +
+
`; diff --git a/web-components/src/components/combobox/ComboBox.ts b/web-components/src/components/combobox/ComboBox.ts index 51bc7c53e5..d5dba74a1a 100644 --- a/web-components/src/components/combobox/ComboBox.ts +++ b/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`
@@ -1751,14 +1771,7 @@ export namespace ComboBox { @keydown=${this.handleInputKeyDown} />
- ${this.compact - ? nothing - : this.shouldChangeButton() - ? this.clearButtonTemplate() - : !this.newMomentum - ? this.arrowButtonTemplate() - : nothing} - ${this.newMomentum ? this.renderNewMomentumArrow : nothing} + ${this.renderTrailingInputControls} ${this.showLoader || this.showCustomError diff --git a/web-components/src/components/phone-input/PhoneInput.ts b/web-components/src/components/phone-input/PhoneInput.ts index b70a157f15..045a884896 100644 --- a/web-components/src/components/phone-input/PhoneInput.ts +++ b/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}
- ${this.showFlags ? html` ${this.getCountryFlag(this.countryCode)} ` : nothing} + ${this.showFlags + ? html` + ${this.getCountryFlag(this.countryCode)} + ` + : nothing} ${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}" diff --git a/web-components/src/components/phone-input/scss/phoneInput.scss b/web-components/src/components/phone-input/scss/phoneInput.scss index 8d94df6721..0d03fe492e 100644 --- a/web-components/src/components/phone-input/scss/phoneInput.scss +++ b/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; }