playbook_ui 14.5.0 → 14.6.0.pre.alpha.PBNTR5554217

Sign up to get free protection for your applications and to get access to all the features.
Files changed (112) 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_advanced_table/index.js +60 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -9
  9. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +1 -9
  10. data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
  11. data/app/pb_kits/playbook/pb_currency/_currency.tsx +16 -6
  12. data/app/pb_kits/playbook/pb_currency/currency.rb +38 -11
  13. data/app/pb_kits/playbook/pb_currency/currency.test.js +35 -0
  14. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +7 -0
  15. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +18 -0
  16. data/app/pb_kits/playbook/pb_currency/docs/example.yml +3 -1
  17. data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
  18. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
  19. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
  20. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
  21. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +84 -3
  22. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +28 -5
  23. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
  24. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  25. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +9 -0
  26. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +33 -0
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +10 -0
  28. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +34 -0
  29. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -0
  30. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +5 -0
  31. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -0
  32. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +10 -1
  33. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  34. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  35. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +2 -0
  36. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -0
  37. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -1
  38. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
  39. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  40. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb +41 -0
  41. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +71 -0
  42. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md +1 -0
  43. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md +1 -0
  44. data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
  45. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  46. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  47. data/app/pb_kits/playbook/pb_filter/filter.rb +2 -0
  48. data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
  49. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
  50. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
  51. data/app/pb_kits/playbook/pb_flex/flex_item.rb +7 -2
  52. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +39 -0
  53. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
  54. data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
  55. data/app/pb_kits/playbook/pb_form/form.rb +2 -0
  56. data/app/pb_kits/playbook/pb_form/formHelper.js +27 -0
  57. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +9 -1
  58. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +19 -0
  59. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +27 -0
  60. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
  61. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
  62. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  63. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +211 -227
  64. data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +5 -0
  65. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
  66. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +93 -0
  67. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +1 -0
  68. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +105 -0
  69. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +1 -0
  70. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +106 -0
  71. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +1 -0
  72. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +4 -0
  73. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
  74. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +149 -0
  75. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
  76. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  77. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
  78. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  79. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  80. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  81. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  82. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
  83. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
  84. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +86 -18
  85. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +15 -6
  86. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
  87. data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss +849 -931
  88. data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts +4 -1
  89. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -2
  90. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
  91. data/app/pb_kits/playbook/pb_popover/popover.rb +3 -1
  92. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +4 -1
  93. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +3 -1
  94. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -1
  95. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
  96. data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
  97. data/dist/chunks/_typeahead-BhHnXJjy.js +22 -0
  98. data/dist/chunks/_weekday_stacked-C2icYweq.js +45 -0
  99. data/dist/chunks/{lib-CEpcaI8y.js → lib-D-mTv-kp.js} +1 -1
  100. data/dist/chunks/{pb_form_validation-D9zkwt2b.js → pb_form_validation-BkWGwJsl.js} +1 -1
  101. data/dist/chunks/vendor.js +1 -1
  102. data/dist/playbook-doc.js +1 -1
  103. data/dist/playbook-rails-react-bindings.js +1 -1
  104. data/dist/playbook-rails.js +1 -1
  105. data/dist/playbook.css +1 -1
  106. data/lib/playbook/kit_base.rb +21 -1
  107. data/lib/playbook/pb_doc_helper.rb +5 -5
  108. data/lib/playbook/pb_forms_helper.rb +3 -1
  109. data/lib/playbook/version.rb +2 -2
  110. metadata +40 -9
  111. data/dist/chunks/_typeahead-BYw0HEgO.js +0 -22
  112. data/dist/chunks/_weekday_stacked-DumiyWjh.js +0 -45
@@ -5,7 +5,54 @@ $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 {
18
+ .iti {
19
+ width: 100%;
20
+ }
21
+
22
+ .iti__flag {
23
+ margin-right: 6px;
24
+ }
25
+
26
+ .iti__a11y-text {
27
+ display: none;
28
+ }
29
+
30
+ .iti__selected-dial-code {
31
+ font-family: $font_family_base;
32
+ font-size: $font_base;
33
+ line-height: 1.5;
34
+ letter-spacing: $lspace_normal;
35
+ font-weight: $regular;
36
+ font-style: normal;
37
+ text-rendering: optimizeLegibility;
38
+ -moz-font-feature-settings: "liga" on;
39
+ color: $charcoal;
40
+ }
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
+
51
+ .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
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 {
53
+ background-color: transparent;
54
+ }
55
+
9
56
  input::placeholder {
10
57
  color: $focus_input_light;
11
58
  }
@@ -15,13 +62,13 @@ $flag-min-resolution: 192dpi;
15
62
  border-color: $primary !important;
16
63
  }
17
64
 
18
- .iti__selected-flag:focus-visible {
65
+ .iti__selected-country:focus-visible {
19
66
  outline-style: none;
20
67
  }
21
68
  }
22
69
 
23
70
  .iti__country {
24
- padding: 5px 10px 5px 16px;
71
+ padding: 5px $space_xs 5px $space_sm;
25
72
  transition: $transition_default;
26
73
  }
27
74
 
@@ -29,8 +76,23 @@ $flag-min-resolution: 192dpi;
29
76
  border-bottom: 1px solid $border_light !important;
30
77
  }
31
78
 
32
- .iti__selected-flag {
33
- padding: 0 $space_xxs 0 $space_sm;
79
+ .iti__selected-country-primary {
80
+ display: flex;
81
+ justify-content: center;
82
+ align-items: center;
83
+ .iti__flag {
84
+ margin-right: 0;
85
+ }
86
+ }
87
+
88
+ .iti__selected-country {
89
+ position: absolute;
90
+ top: 0;
91
+ display: flex;
92
+ height: 100%;
93
+ justify-content: center;
94
+ align-items: center;
95
+ border-width: 0;
34
96
  border-radius: $space_xxs;
35
97
 
36
98
  &[aria-expanded="true"] {
@@ -51,24 +113,24 @@ $flag-min-resolution: 192dpi;
51
113
  }
52
114
  }
53
115
 
54
- .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
55
- background-color: $focus_input_light;
56
- }
57
-
58
- .iti__flag-container:hover + .text_input {
116
+ .iti__country-container:hover + .text_input {
59
117
  background-color: $focus_input_light;
60
118
  }
61
119
 
62
120
  .iti__flag {
63
- background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
121
+ background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
64
122
  border-radius: 1px;
65
123
  }
66
124
 
67
- .iti--separate-dial-code {
68
- width: 100%;
125
+ .iti__flag.iti__globe {
126
+ background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
127
+ background-position: center;
128
+ height: 16px;
129
+ width: 16px;
130
+ background-size: 16px 16px;
69
131
  }
70
132
 
71
- .iti--separate-dial-code .iti__selected-flag {
133
+ .iti--show-flags .iti__selected-country {
72
134
  background-color: rgba($white, $opacity_1);
73
135
  }
74
136
 
@@ -136,10 +198,12 @@ $flag-min-resolution: 192dpi;
136
198
  .iti__dropdown-content {
137
199
  border-radius: $space_xs;
138
200
  border: 1px solid $border_light !important;
201
+ position: absolute;
202
+ top: 100%;
139
203
  }
140
204
 
141
205
  &.dark {
142
- .iti--allow-dropdown .iti__flag-container {
206
+ .iti--allow-dropdown .iti__country-container {
143
207
  background-color: rgba($white, 0);
144
208
 
145
209
  &:hover {
@@ -149,13 +213,13 @@ $flag-min-resolution: 192dpi;
149
213
  background-color: rgba($white, 0.15);
150
214
  }
151
215
 
152
- .iti__selected-flag {
216
+ .iti__selected-country {
153
217
  background-color: rgba($white, 0);
154
218
  }
155
219
  }
156
220
  }
157
221
 
158
- .iti__selected-flag {
222
+ .iti__selected-country {
159
223
  background-color: rgba($white, 0);
160
224
  color: $white;
161
225
  }
@@ -196,11 +260,15 @@ $flag-min-resolution: 192dpi;
196
260
  background-color: rgba($white, 0.025) !important;
197
261
  }
198
262
  }
199
- }
200
263
 
264
+ .iti__selected-dial-code {
265
+ color: $white;
266
+ }
267
+ }
268
+
201
269
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
202
270
  .iti__flag {
203
- background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
271
+ background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
204
272
  }
205
273
  }
206
274
  }
@@ -1,8 +1,7 @@
1
1
  import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
2
2
  import classnames from 'classnames'
3
3
 
4
- import intlTelInput from 'intl-tel-input'
5
- import 'intl-tel-input/build/js/utils.js'
4
+ import intlTelInput from 'intl-tel-input/build/js/intlTelInputWithUtils.js'
6
5
 
7
6
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
8
7
  import { globalProps } from '../utilities/globalProps'
@@ -50,7 +49,7 @@ const formatToGlobalCountryName = (countryName: string) => {
50
49
  }
51
50
 
52
51
  const formatAllCountries = () => {
53
- const countryData = window.intlTelInputGlobals.getCountryData()
52
+ const countryData = intlTelInput.getCountryData()
54
53
 
55
54
  for (let i = 0; i < countryData.length; i++) {
56
55
  const country = countryData[i]
@@ -214,14 +213,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
214
213
  // This also Fixes things for our react_component rendering on the Rails Side
215
214
  useEffect(formatAllCountries, [])
216
215
 
216
+ // If an initial country is not specified, the "globe" icon will show
217
+ // Always set a country
218
+ const fallbackCountry =
219
+ preferredCountries.length > 0 ? preferredCountries[0] :
220
+ onlyCountries.length > 0 ? onlyCountries.sort()[0] :
221
+ "af";
222
+
217
223
  useEffect(() => {
218
224
  const telInputInit = intlTelInput(inputRef.current, {
219
225
  separateDialCode: true,
220
- preferredCountries,
226
+ countryOrder: preferredCountries,
221
227
  allowDropdown: !disabled,
222
228
  autoInsertDialCode: false,
223
- initialCountry,
224
- onlyCountries
229
+ initialCountry: initialCountry || fallbackCountry,
230
+ onlyCountries,
231
+ countrySearch: false,
232
+ fixDropdownWidth: false,
233
+ formatAsYouType: false,
225
234
  })
226
235
 
227
236
  inputRef.current.addEventListener("countrychange", (evt: Event) => {
@@ -1 +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.
1
+ 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.