playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4077 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4175

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +25 -7
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +72 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +5 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  7. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +20 -4
  8. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
  9. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  10. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +1 -0
  11. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -0
  12. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  13. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  14. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
  15. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
  17. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  18. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
  19. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  20. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  21. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  22. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
  24. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
  25. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +19 -5
  26. data/dist/chunks/_weekday_stacked-PLi3twbe.js +45 -0
  27. data/dist/chunks/vendor.js +1 -1
  28. data/dist/playbook-doc.js +1 -1
  29. data/dist/playbook.css +1 -1
  30. data/lib/playbook/version.rb +1 -1
  31. metadata +9 -3
  32. data/dist/chunks/_weekday_stacked-BbASNHK_.js +0 -45
data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss CHANGED
@@ -5,6 +5,15 @@ $transform-rotate-deg: 135deg;
5
5
  $dropdown-min-width: 340px;
6
6
  $flag-min-resolution: 192dpi;
7
7
 
8
+ :root {
9
+ --iti-arrow-padding: #{$space_xs};
10
+ --iti-spacer-horizontal: #{$space_sm};
11
+ --iti-path-flags-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
12
+ --iti-path-flags-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
13
+ --iti-path-globe-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
14
+ --iti-path-globe-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe@2x.png");
15
+ }
16
+
8
17
  .pb_phone_number_input {
9
18
  .iti {
10
19
  width: 100%;
@@ -30,6 +39,15 @@ $flag-min-resolution: 192dpi;
30
39
  color: $charcoal;
31
40
  }
32
41
 
42
+ // iti-spacer-horizontal's default is 8px, or $space_xs
43
+ .iti__country-list .iti__flag, .iti__country-name {
44
+ margin-right: $space_xs;
45
+ }
46
+ [dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
47
+ margin-right: 0;
48
+ margin-left: $space_xs;
49
+ }
50
+
33
51
  .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
34
52
  .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 {
35
53
  background-color: transparent;
@@ -50,7 +68,7 @@ $flag-min-resolution: 192dpi;
50
68
  }
51
69
 
52
70
  .iti__country {
53
- padding: 5px 10px 5px 16px;
71
+ padding: 5px $space_xs 5px $space_sm;
54
72
  transition: $transition_default;
55
73
  }
56
74
 
@@ -69,15 +87,12 @@ $flag-min-resolution: 192dpi;
69
87
 
70
88
  .iti__selected-country {
71
89
  position: absolute;
72
- z-index: 2;
73
90
  top: 0;
74
91
  display: flex;
75
92
  height: 100%;
76
93
  justify-content: center;
77
94
  align-items: center;
78
95
  border-width: 0;
79
-
80
- padding: 0 $space_xxs 0 $space_xs;
81
96
  border-radius: $space_xxs;
82
97
 
83
98
  &[aria-expanded="true"] {
@@ -184,7 +199,6 @@ $flag-min-resolution: 192dpi;
184
199
  border-radius: $space_xs;
185
200
  border: 1px solid $border_light !important;
186
201
  position: absolute;
187
- z-index: 2;
188
202
  top: 100%;
189
203
  }
190
204