-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[PLAY-1548] Upgrade intl-tel-input to Latest and Make Fixes (#3791)
**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
Showing
7 changed files
with
960 additions
and
962 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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; | ||
} | ||
|
@@ -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"] { | ||
|
@@ -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); | ||
} | ||
|
||
|
@@ -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 { | ||
|
@@ -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; | ||
} | ||
|
@@ -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"); | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
.../playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
Oops, something went wrong.