playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4073 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4162

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -69,7 +69,6 @@ $flag-min-resolution: 192dpi;
 
   .iti__selected-country {
     position: absolute;
-    z-index: 2;
     top: 0;
     display: flex;
     height: 100%;
@@ -98,10 +97,6 @@ $flag-min-resolution: 192dpi;
     }
   }
 
-  .iti--allow-dropdown .iti__country-container:hover .iti__selected-country {
-    background-color: $focus_input_light;
-  }
-
   .iti__country-container:hover + .text_input {
     background-color: $focus_input_light;
   }
@@ -114,8 +109,9 @@ $flag-min-resolution: 192dpi;
   .iti__flag.iti__globe {
     background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
     background-position: center;
-    height: 20px;
-    background-size: 20px 20px;
+    height: 16px;
+    width: 16px;
+    background-size: 16px 16px;
   }
 
   .iti--show-flags .iti__selected-country {
@@ -187,7 +183,6 @@ $flag-min-resolution: 192dpi;
     border-radius: $space_xs; 
     border: 1px solid $border_light !important;
     position: absolute;
-    z-index: 2;
     top: 100%;
   }
 
@@ -261,3 +256,15 @@ $flag-min-resolution: 192dpi;
     }
   }
 }
+
+// Rails Phone Number Input padding placement of placeholders
+// is off in a Dialog because it doesn't account for
+// padding: 0 $space_xxs 0 $space_xs;
+// Set to 0 so the placeholder doesn't overlap with selected country
+.pb_dialog {
+  .pb_phone_number_input_rails {
+    .iti__selected-country {
+      padding: 0;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -23,12 +23,13 @@ module Playbook
                    default: ""
 
       def classname
-        generate_classname("pb_phone_number_input")
+        generate_classname("pb_phone_number_input_rails")
       end
 
       def phone_number_input_options
         {
           id: id,
+          className: classname,
           dark: dark,
           disabled: disabled,
           error: error,