Skip to content

Commit

Permalink
[PLAY-1548] Upgrade intl-tel-input to Latest and Make Fixes (#3791)
Browse files Browse the repository at this point in the history
**What does this PR do?**

- Bump intl-tel-input from 18.0.15 to 24.6.0

From the package update:
- the drop down arrow and the area code switch places so area code is to
the left of the number input
- flag sizes are smaller - from "20 x 15" to "16 x 12"
- the "active" checkmark in the dropdown was removed
- more countries
- placeholders remove the leading 0's ("070 123 4567" becomes "70 123
4567")
- when using preferredCountries, there is no "separator" between the
preferred and the rest

Custom fixes made:
- Update the
`playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss`
copy. See
[PLAY-1506](https://runway.powerhrg.com/backlog_items/PLAY-1506) for
more details- we added it so we could theme properly.
- Use intlTelInput from package instead of window. Use
'intl-tel-input/build/js/intlTelInputWithUtils.js'
- Update class names (e.g., flag -> country)
- Turn off "country search" default
- Turn off "format as you type" default as there are issues with
validation
- Turn off "globe" blank default. Set initial country fallback to match
current behavior- otherwise a blank "globe" shows and you don't have a
country area code selected
- Make CSS edits for this globe, even though it's not seen.
- Change dropdown to not be the full width of the input
- Use utils so a placeholder is added
- Make various CSS fixes for dropdown, selected country, and  input
- Change "preferredCountries" to new "countryOrder" prop
- Fix type errors
- The "country" button area hover matches the rest of the input.
Previously, it was ever so slightly darker (you have to zoom in to
notice). There is still a cursor button, though.
- Set padding by using CSS variables to fix Phone Number Inputs in
Dialogs

**Screenshots:**
![Screenshot 2024-10-21 at 9 27
41 AM](https://github.com/user-attachments/assets/43efbff7-19e4-45c2-8e39-cc81876ef211)
![Screenshot 2024-10-21 at 9 21
00 AM](https://github.com/user-attachments/assets/73e08c9d-72e8-4e7a-bc8b-e583d582ad9e)


**How to test?** Steps to confirm the desired behavior:
1. Go to the Phone Number Input Kit
2. Test all doc examples for both Rails and React
3. Test on Nitro.


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
  • Loading branch information
kangaree authored Oct 22, 2024
1 parent abf83a5 commit 32add9d
Show file tree
Hide file tree
Showing 7 changed files with 960 additions and 962 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,54 @@ $transform-rotate-deg: 135deg;
$dropdown-min-width: 340px;
$flag-min-resolution: 192dpi;

:root {
--iti-arrow-padding: #{$space_xs};
--iti-spacer-horizontal: #{$space_sm};
--iti-path-flags-1x: url("https://unpkg.com/[email protected]/build/img/flags.png");
--iti-path-flags-2x: url("https://unpkg.com/[email protected]/build/img/[email protected]");
--iti-path-globe-1x: url("https://unpkg.com/[email protected]/build/img/globe.png");
--iti-path-globe-2x: url("https://unpkg.com/[email protected]/build/img/[email protected]");
}

.pb_phone_number_input {
.iti {
width: 100%;
}

.iti__flag {
margin-right: 6px;
}

.iti__a11y-text {
display: none;
}

.iti__selected-dial-code {
font-family: $font_family_base;
font-size: $font_base;
line-height: 1.5;
letter-spacing: $lspace_normal;
font-weight: $regular;
font-style: normal;
text-rendering: optimizeLegibility;
-moz-font-feature-settings: "liga" on;
color: $charcoal;
}

// iti-spacer-horizontal's default is 8px, or $space_xs
.iti__country-list .iti__flag, .iti__country-name {
margin-right: $space_xs;
}
[dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
margin-right: 0;
margin-left: $space_xs;
}

.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
background-color: transparent;
}

input::placeholder {
color: $focus_input_light;
}
Expand All @@ -15,22 +62,37 @@ $flag-min-resolution: 192dpi;
border-color: $primary !important;
}

.iti__selected-flag:focus-visible {
.iti__selected-country:focus-visible {
outline-style: none;
}
}

.iti__country {
padding: 5px 10px 5px 16px;
padding: 5px $space_xs 5px $space_sm;
transition: $transition_default;
}

.iti__divider {
border-bottom: 1px solid $border_light !important;
}

.iti__selected-flag {
padding: 0 $space_xxs 0 $space_sm;
.iti__selected-country-primary {
display: flex;
justify-content: center;
align-items: center;
.iti__flag {
margin-right: 0;
}
}

.iti__selected-country {
position: absolute;
top: 0;
display: flex;
height: 100%;
justify-content: center;
align-items: center;
border-width: 0;
border-radius: $space_xxs;

&[aria-expanded="true"] {
Expand All @@ -51,24 +113,24 @@ $flag-min-resolution: 192dpi;
}
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
background-color: $focus_input_light;
}

.iti__flag-container:hover + .text_input {
.iti__country-container:hover + .text_input {
background-color: $focus_input_light;
}

.iti__flag {
background-image: url("https://unpkg.com/[email protected]/dist/assets/flags.png");
background-image: url("https://unpkg.com/[email protected]/build/img/flags.png");
border-radius: 1px;
}

.iti--separate-dial-code {
width: 100%;
.iti__flag.iti__globe {
background-image: url("https://unpkg.com/[email protected]/build/img/globe.png");
background-position: center;
height: 16px;
width: 16px;
background-size: 16px 16px;
}

.iti--separate-dial-code .iti__selected-flag {
.iti--show-flags .iti__selected-country {
background-color: rgba($white, $opacity_1);
}

Expand Down Expand Up @@ -136,10 +198,12 @@ $flag-min-resolution: 192dpi;
.iti__dropdown-content {
border-radius: $space_xs;
border: 1px solid $border_light !important;
position: absolute;
top: 100%;
}

&.dark {
.iti--allow-dropdown .iti__flag-container {
.iti--allow-dropdown .iti__country-container {
background-color: rgba($white, 0);

&:hover {
Expand All @@ -149,13 +213,13 @@ $flag-min-resolution: 192dpi;
background-color: rgba($white, 0.15);
}

.iti__selected-flag {
.iti__selected-country {
background-color: rgba($white, 0);
}
}
}

.iti__selected-flag {
.iti__selected-country {
background-color: rgba($white, 0);
color: $white;
}
Expand Down Expand Up @@ -196,11 +260,15 @@ $flag-min-resolution: 192dpi;
background-color: rgba($white, 0.025) !important;
}
}
}

.iti__selected-dial-code {
color: $white;
}
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
.iti__flag {
background-image: url("https://unpkg.com/[email protected]/dist/assets/flags.png");
background-image: url("https://unpkg.com/[email protected]/build/img/flags@2x.png");
}
}
}
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
import classnames from 'classnames'

import intlTelInput from 'intl-tel-input'
import 'intl-tel-input/build/js/utils.js'
import intlTelInput from 'intl-tel-input/build/js/intlTelInputWithUtils.js'

import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
import { globalProps } from '../utilities/globalProps'
Expand Down Expand Up @@ -50,7 +49,7 @@ const formatToGlobalCountryName = (countryName: string) => {
}

const formatAllCountries = () => {
const countryData = window.intlTelInputGlobals.getCountryData()
const countryData = intlTelInput.getCountryData()

for (let i = 0; i < countryData.length; i++) {
const country = countryData[i]
Expand Down Expand Up @@ -214,14 +213,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
// This also Fixes things for our react_component rendering on the Rails Side
useEffect(formatAllCountries, [])

// If an initial country is not specified, the "globe" icon will show
// Always set a country
const fallbackCountry =
preferredCountries.length > 0 ? preferredCountries[0] :
onlyCountries.length > 0 ? onlyCountries.sort()[0] :
"af";

useEffect(() => {
const telInputInit = intlTelInput(inputRef.current, {
separateDialCode: true,
preferredCountries,
countryOrder: preferredCountries,
allowDropdown: !disabled,
autoInsertDialCode: false,
initialCountry,
onlyCountries
initialCountry: initialCountry || fallbackCountry,
onlyCountries,
countrySearch: false,
fixDropdownWidth: false,
formatAsYouType: false,
})

inputRef.current.addEventListener("countrychange", (evt: Event) => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.
Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below in the remaining dropdown.
Loading

0 comments on commit 32add9d

Please sign in to comment.