playbook_ui 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4098 → 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4216
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +25 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +72 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +84 -3
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +28 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +9 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +33 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +34 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +10 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +71 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +2 -0
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
- data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +7 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +39 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
- data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_form/form.rb +2 -0
- data/app/pb_kits/playbook/pb_form/formHelper.js +27 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +86 -18
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +15 -6
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss +849 -931
- data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts +4 -1
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -2
- data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_popover/popover.rb +3 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +28 -0
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -0
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +5 -1
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
- data/dist/chunks/_typeahead-BhHnXJjy.js +22 -0
- data/dist/chunks/_weekday_stacked-B9Sy5PN8.js +45 -0
- data/dist/chunks/{lib-CEpcaI8y.js → lib-D-mTv-kp.js} +1 -1
- data/dist/chunks/{pb_form_validation-D9zkwt2b.js → pb_form_validation-BkWGwJsl.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/kit_base.rb +21 -1
- data/lib/playbook/pb_forms_helper.rb +3 -1
- data/lib/playbook/version.rb +1 -1
- metadata +24 -6
- data/dist/chunks/_typeahead-C9g4qCcE.js +0 -22
- data/dist/chunks/_weekday_stacked-B0Zid7Rv.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-
|
65
|
+
.iti__selected-country:focus-visible {
|
19
66
|
outline-style: none;
|
20
67
|
}
|
21
68
|
}
|
22
69
|
|
23
70
|
.iti__country {
|
24
|
-
padding: 5px
|
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-
|
33
|
-
|
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
|
-
.
|
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/
|
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
|
-
.
|
68
|
-
|
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--
|
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 .
|
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-
|
216
|
+
.iti__selected-country {
|
153
217
|
background-color: rgba($white, 0);
|
154
218
|
}
|
155
219
|
}
|
156
220
|
}
|
157
221
|
|
158
|
-
.iti__selected-
|
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/
|
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 =
|
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) => {
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
CHANGED
@@ -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
|
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.
|