playbook_ui 14.11.1.pre.alpha.PBNTR768stickyrightcolumn5431 → 14.11.1.pre.alpha.PBNTR798datepickerturbo5537
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +2 -2
- data/app/pb_kits/playbook/pb_button/button.html.erb +2 -3
- data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +1 -6
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +24 -16
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames.html.erb +13 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames_rails.md +3 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +3 -9
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +7 -12
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +9 -14
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +6 -11
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +8 -14
- data/app/pb_kits/playbook/pb_list/item.html.erb +30 -8
- data/app/pb_kits/playbook/pb_list/item.rb +7 -0
- data/app/pb_kits/playbook/pb_list/list.html.erb +31 -11
- data/app/pb_kits/playbook/pb_list/list.rb +4 -0
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +6 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +30 -12
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb +15 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx +24 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +20 -1
- data/app/pb_kits/playbook/pb_radio/_radio.scss +12 -8
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +8 -3
- data/app/pb_kits/playbook/pb_timeline/_timeline.scss +30 -30
- data/dist/chunks/{_typeahead-DCD3NrAk.js → _typeahead-TN5aDUj9.js} +1 -1
- data/dist/chunks/_weekday_stacked-BcnpLG66.js +45 -0
- 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/version.rb +1 -1
- metadata +10 -4
- data/dist/chunks/_weekday_stacked-aUbMqVRj.js +0 -45
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { render, screen } from "../utilities/test-utils";
|
|
2
|
+
import { render, screen, act } from "../utilities/test-utils";
|
|
3
3
|
import PhoneNumberInput from "./_phone_number_input";
|
|
4
4
|
|
|
5
5
|
const testId = "phoneNumberInput";
|
|
@@ -120,3 +120,22 @@ test("should trigger callback", () => {
|
|
|
120
120
|
|
|
121
121
|
expect(handleOnValidate).toBeCalledWith(true)
|
|
122
122
|
});
|
|
123
|
+
|
|
124
|
+
test("should format phone number as '555-555-5555' with formatAsYouType and 'us' country", () => {
|
|
125
|
+
const props = {
|
|
126
|
+
initialCountry: 'us',
|
|
127
|
+
formatAsYouType: true,
|
|
128
|
+
id: testId,
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
render(<PhoneNumberInput {...props} />);
|
|
132
|
+
|
|
133
|
+
const input = screen.getByRole("textbox");
|
|
134
|
+
|
|
135
|
+
act(() => {
|
|
136
|
+
input.value = "5555555555";
|
|
137
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
expect(input.value).toBe("555-555-5555");
|
|
141
|
+
});
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
@import "../pb_body/body";
|
|
5
5
|
@import "../tokens/transition";
|
|
6
6
|
|
|
7
|
-
[class^=pb_radio_kit] {
|
|
7
|
+
[class^="pb_radio_kit"] {
|
|
8
8
|
display: inline-flex;
|
|
9
9
|
cursor: pointer;
|
|
10
10
|
|
|
@@ -16,10 +16,11 @@
|
|
|
16
16
|
border-radius: 1000px;
|
|
17
17
|
border: 2px solid $border_light;
|
|
18
18
|
margin-right: $space_xs;
|
|
19
|
-
transition: background $transition_default ease,
|
|
19
|
+
transition: background $transition_default ease,
|
|
20
|
+
box-shadow $transition_default ease, border-color $transition_default ease;
|
|
20
21
|
}
|
|
21
22
|
|
|
22
|
-
@media (hover:hover) {
|
|
23
|
+
@media (hover: hover) {
|
|
23
24
|
&:hover .pb_radio_button {
|
|
24
25
|
background-color: $bg_light;
|
|
25
26
|
border-color: $border_light;
|
|
@@ -52,14 +53,14 @@
|
|
|
52
53
|
}
|
|
53
54
|
}
|
|
54
55
|
|
|
55
|
-
&:disabled:checked + .pb_radio_button{
|
|
56
|
+
&:disabled:checked + .pb_radio_button {
|
|
56
57
|
cursor: not-allowed;
|
|
57
58
|
background-color: $white;
|
|
58
59
|
border: 6px solid $neutral;
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
62
|
|
|
62
|
-
&[class*=vertical] {
|
|
63
|
+
&[class*="vertical"] {
|
|
63
64
|
flex-direction: column;
|
|
64
65
|
align-items: center;
|
|
65
66
|
.pb_radio_button {
|
|
@@ -80,7 +81,7 @@
|
|
|
80
81
|
}
|
|
81
82
|
&:checked {
|
|
82
83
|
& ~ .pb_radio_button {
|
|
83
|
-
border: 6px solid $
|
|
84
|
+
border: 6px solid $active_dark;
|
|
84
85
|
}
|
|
85
86
|
}
|
|
86
87
|
|
|
@@ -103,10 +104,10 @@
|
|
|
103
104
|
}
|
|
104
105
|
}
|
|
105
106
|
|
|
106
|
-
@media (hover:hover) {
|
|
107
|
+
@media (hover: hover) {
|
|
107
108
|
&:hover {
|
|
108
109
|
.pb_radio_button {
|
|
109
|
-
background-color: rgba($white
|
|
110
|
+
background-color: rgba($white, 0.1);
|
|
110
111
|
border-color: $border_dark;
|
|
111
112
|
}
|
|
112
113
|
}
|
|
@@ -115,6 +116,9 @@
|
|
|
115
116
|
> .pb_radio_button {
|
|
116
117
|
border-color: $error_dark;
|
|
117
118
|
}
|
|
119
|
+
> .pb_body_kit_negative {
|
|
120
|
+
color: $error_dark;
|
|
121
|
+
}
|
|
118
122
|
}
|
|
119
123
|
}
|
|
120
124
|
&.error {
|
|
@@ -29,6 +29,7 @@ const RadioChildren = (props) => {
|
|
|
29
29
|
marginBottom="none"
|
|
30
30
|
minWidth="xs"
|
|
31
31
|
options={options}
|
|
32
|
+
{...props}
|
|
32
33
|
/>
|
|
33
34
|
</Radio>
|
|
34
35
|
<Radio
|
|
@@ -40,10 +41,11 @@ const RadioChildren = (props) => {
|
|
|
40
41
|
value="Typeahead"
|
|
41
42
|
{...props}
|
|
42
43
|
>
|
|
43
|
-
<Typeahead
|
|
44
|
+
<Typeahead
|
|
44
45
|
marginBottom="none"
|
|
45
46
|
minWidth="xs"
|
|
46
47
|
options={options}
|
|
48
|
+
{...props}
|
|
47
49
|
/>
|
|
48
50
|
</Radio>
|
|
49
51
|
<Radio
|
|
@@ -54,9 +56,12 @@ const RadioChildren = (props) => {
|
|
|
54
56
|
value="Typography"
|
|
55
57
|
{...props}
|
|
56
58
|
>
|
|
57
|
-
<Title
|
|
59
|
+
<Title
|
|
60
|
+
text="Custom Typography"
|
|
61
|
+
{...props}
|
|
62
|
+
/>
|
|
58
63
|
</Radio>
|
|
59
64
|
</div>
|
|
60
65
|
)
|
|
61
66
|
}
|
|
62
|
-
export default RadioChildren
|
|
67
|
+
export default RadioChildren
|
|
@@ -50,7 +50,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
50
50
|
>div {
|
|
51
51
|
&:last-child {
|
|
52
52
|
flex-basis: auto !important;
|
|
53
|
-
[class
|
|
53
|
+
[class^=pb_timeline_item_step] {
|
|
54
54
|
[class=pb_timeline_item_connector] {
|
|
55
55
|
opacity: 0;
|
|
56
56
|
}
|
|
@@ -66,29 +66,25 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
66
66
|
[class*=pb_timeline_item_kit] {
|
|
67
67
|
&[class*=_solid] {
|
|
68
68
|
flex-basis: 100%;
|
|
69
|
-
[class
|
|
70
|
-
height: 0px;
|
|
71
|
-
}
|
|
72
|
-
[class=pb_timeline_item_step] {
|
|
69
|
+
[class^=pb_timeline_item_step] {
|
|
73
70
|
@include flex_wrapper(row);
|
|
71
|
+
align-items: center;
|
|
74
72
|
margin-top: $space_xs;
|
|
75
73
|
margin-bottom: $space_xs;
|
|
76
74
|
[class=pb_timeline_item_connector] {
|
|
77
|
-
@include pb_timeline_line_solid($connector_width, $connector_width,
|
|
75
|
+
@include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
|
|
78
76
|
}
|
|
79
77
|
}
|
|
80
78
|
}
|
|
81
79
|
&[class*=_dotted] {
|
|
82
80
|
flex-basis: 100%;
|
|
83
|
-
[class
|
|
84
|
-
height: 0;
|
|
85
|
-
}
|
|
86
|
-
[class=pb_timeline_item_step] {
|
|
81
|
+
[class^=pb_timeline_item_step] {
|
|
87
82
|
@include flex_wrapper(row);
|
|
83
|
+
align-items: center;
|
|
88
84
|
margin-top: $space_xs;
|
|
89
85
|
margin-bottom: $space_xs;
|
|
90
86
|
[class=pb_timeline_item_connector] {
|
|
91
|
-
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width,
|
|
87
|
+
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
|
|
92
88
|
}
|
|
93
89
|
}
|
|
94
90
|
}
|
|
@@ -99,7 +95,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
99
95
|
>div {
|
|
100
96
|
&:last-child {
|
|
101
97
|
flex-basis: auto !important;
|
|
102
|
-
[class
|
|
98
|
+
[class^=pb_timeline_item_step] {
|
|
103
99
|
[class=pb_timeline_item_connector] {
|
|
104
100
|
opacity: 0;
|
|
105
101
|
}
|
|
@@ -129,12 +125,12 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
129
125
|
}
|
|
130
126
|
}
|
|
131
127
|
}
|
|
132
|
-
[class
|
|
128
|
+
[class^=pb_timeline_item_step] {
|
|
133
129
|
@include flex_wrapper(row);
|
|
134
130
|
margin-top: $space_xs;
|
|
135
131
|
margin-bottom: $space_xs;
|
|
136
132
|
[class=pb_timeline_item_connector] {
|
|
137
|
-
@include pb_timeline_line_solid($connector_width, $connector_width,
|
|
133
|
+
@include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
|
|
138
134
|
}
|
|
139
135
|
}
|
|
140
136
|
}
|
|
@@ -153,12 +149,12 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
153
149
|
}
|
|
154
150
|
}
|
|
155
151
|
}
|
|
156
|
-
[class
|
|
152
|
+
[class^=pb_timeline_item_step] {
|
|
157
153
|
@include flex_wrapper(row);
|
|
158
154
|
margin-top: $space_xs;
|
|
159
155
|
margin-bottom: $space_xs;
|
|
160
156
|
[class=pb_timeline_item_connector] {
|
|
161
|
-
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width,
|
|
157
|
+
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
|
|
162
158
|
}
|
|
163
159
|
}
|
|
164
160
|
}
|
|
@@ -170,7 +166,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
170
166
|
align-items: flex-start;
|
|
171
167
|
align-self: auto;
|
|
172
168
|
>div:last-child {
|
|
173
|
-
[class
|
|
169
|
+
[class^=pb_timeline_item_step] {
|
|
174
170
|
[class=pb_timeline_item_connector] {
|
|
175
171
|
opacity: 0;
|
|
176
172
|
}
|
|
@@ -180,13 +176,14 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
180
176
|
@include flex_wrapper(row);
|
|
181
177
|
&[class*=_solid] {
|
|
182
178
|
flex-basis: 100%;
|
|
183
|
-
[class
|
|
179
|
+
[class^=pb_timeline_item_step] {
|
|
184
180
|
@include flex_wrapper(column);
|
|
181
|
+
align-items: center;
|
|
185
182
|
align-content: flex-start;
|
|
186
183
|
margin-right: $space_sm;
|
|
187
184
|
margin-left: $space_sm;
|
|
188
185
|
[class=pb_timeline_item_connector] {
|
|
189
|
-
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin
|
|
186
|
+
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
|
|
190
187
|
}
|
|
191
188
|
}
|
|
192
189
|
[class=pb_timeline_item_left_block] {
|
|
@@ -200,12 +197,13 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
200
197
|
}
|
|
201
198
|
&[class*=_dotted] {
|
|
202
199
|
flex-basis: 100%;
|
|
203
|
-
[class
|
|
200
|
+
[class^=pb_timeline_item_step] {
|
|
204
201
|
@include flex_wrapper(column);
|
|
202
|
+
align-items: center;
|
|
205
203
|
margin-right: $space_sm;
|
|
206
204
|
margin-left: $space_sm;
|
|
207
205
|
[class=pb_timeline_item_connector] {
|
|
208
|
-
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin
|
|
206
|
+
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
|
|
209
207
|
}
|
|
210
208
|
}
|
|
211
209
|
[class=pb_timeline_item_left_block] {
|
|
@@ -223,7 +221,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
223
221
|
align-items: flex-start;
|
|
224
222
|
align-self: auto;
|
|
225
223
|
>div:last-child {
|
|
226
|
-
[class
|
|
224
|
+
[class^=pb_timeline_item_step] {
|
|
227
225
|
[class=pb_timeline_item_connector] {
|
|
228
226
|
opacity: 0;
|
|
229
227
|
}
|
|
@@ -233,13 +231,14 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
233
231
|
@include flex_wrapper(row);
|
|
234
232
|
&[class*=_solid] {
|
|
235
233
|
flex-basis: 100%;
|
|
236
|
-
[class
|
|
234
|
+
[class^=pb_timeline_item_step] {
|
|
237
235
|
@include flex_wrapper(column);
|
|
236
|
+
align-items: center;
|
|
238
237
|
align-content: flex-start;
|
|
239
238
|
margin-right: $space_sm;
|
|
240
239
|
margin-left: $space_sm;
|
|
241
240
|
[class=pb_timeline_item_connector] {
|
|
242
|
-
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin
|
|
241
|
+
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
|
|
243
242
|
}
|
|
244
243
|
}
|
|
245
244
|
[class=pb_timeline_item_left_block] {
|
|
@@ -253,12 +252,13 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
253
252
|
}
|
|
254
253
|
&[class*=_dotted] {
|
|
255
254
|
flex-basis: 100%;
|
|
256
|
-
[class
|
|
255
|
+
[class^=pb_timeline_item_step] {
|
|
257
256
|
@include flex_wrapper(column);
|
|
257
|
+
align-items: center;
|
|
258
258
|
margin-right: $space_sm;
|
|
259
259
|
margin-left: $space_sm;
|
|
260
260
|
[class=pb_timeline_item_connector] {
|
|
261
|
-
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin
|
|
261
|
+
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
|
|
262
262
|
}
|
|
263
263
|
}
|
|
264
264
|
[class=pb_timeline_item_left_block] {
|
|
@@ -274,7 +274,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
274
274
|
}
|
|
275
275
|
&[class*=_gap_xs] {
|
|
276
276
|
[class*=pb_timeline_item_kit] {
|
|
277
|
-
[class
|
|
277
|
+
[class^=pb_timeline_item_step] {
|
|
278
278
|
[class=pb_timeline_item_connector] {
|
|
279
279
|
height: $gap_xs !important;
|
|
280
280
|
}
|
|
@@ -283,7 +283,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
283
283
|
}
|
|
284
284
|
&[class*=_gap_sm] {
|
|
285
285
|
[class*=pb_timeline_item_kit] {
|
|
286
|
-
[class
|
|
286
|
+
[class^=pb_timeline_item_step] {
|
|
287
287
|
[class=pb_timeline_item_connector] {
|
|
288
288
|
height: $gap_sm !important;
|
|
289
289
|
}
|
|
@@ -292,7 +292,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
292
292
|
}
|
|
293
293
|
&[class*=_gap_md] {
|
|
294
294
|
[class*=pb_timeline_item_kit] {
|
|
295
|
-
[class
|
|
295
|
+
[class^=pb_timeline_item_step] {
|
|
296
296
|
[class=pb_timeline_item_connector] {
|
|
297
297
|
height: $gap_md !important;
|
|
298
298
|
}
|
|
@@ -301,7 +301,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
301
301
|
}
|
|
302
302
|
&[class*=_gap_lg] {
|
|
303
303
|
[class*=pb_timeline_item_kit] {
|
|
304
|
-
[class
|
|
304
|
+
[class^=pb_timeline_item_step] {
|
|
305
305
|
[class=pb_timeline_item_connector] {
|
|
306
306
|
height: $gap_lg !important;
|
|
307
307
|
}
|