playbook_ui 15.1.0.pre.alpha.textinputlabelfix11151 → 15.1.0.pre.alpha.timelinescss11189
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/Hooks/useTableState.ts +9 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +105 -29
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +36 -9
- data/app/pb_kits/playbook/pb_timeline/_timeline.scss +250 -233
- data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
- data/app/pb_kits/playbook/pb_timeline/timeline.test.js +2 -2
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +10 -10
- data/app/pb_kits/playbook/utilities/_hover.scss +2 -2
- data/app/pb_kits/playbook/utilities/globalProps.ts +2 -2
- data/dist/chunks/{_line_graph-B-1uF3pN.js → _line_graph-BxcVBQsJ.js} +1 -1
- data/dist/chunks/_typeahead-eZENQ_Y_.js +6 -0
- data/dist/chunks/{_weekday_stacked-1o7KVL87.js → _weekday_stacked-DEdRaOVm.js} +3 -3
- 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/hover.rb +5 -1
- data/lib/playbook/version.rb +1 -1
- metadata +5 -5
- data/dist/chunks/_typeahead-C8eN5nhR.js +0 -6
|
@@ -43,270 +43,287 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
43
43
|
flex-direction: $flex_direction;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
46
|
+
@mixin timeline_item_step_base($direction: row, $align: center, $margin_v: $space_xs, $margin_h: 0) {
|
|
47
|
+
@include flex_wrapper($direction);
|
|
48
|
+
align-items: $align;
|
|
49
|
+
|
|
50
|
+
@if $direction == row {
|
|
51
|
+
margin-top: $margin_v;
|
|
52
|
+
margin-bottom: $margin_v;
|
|
53
|
+
} @else {
|
|
54
|
+
margin-right: $margin_h;
|
|
55
|
+
margin-left: $margin_h;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@mixin timeline_gap_height($height) {
|
|
60
|
+
.pb_timeline_item_kit_solid,
|
|
61
|
+
.pb_timeline_item_kit_dotted {
|
|
62
|
+
.pb_timeline_item_step {
|
|
63
|
+
.pb_timeline_item_connector {
|
|
64
|
+
height: $height !important;
|
|
64
65
|
}
|
|
65
66
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@mixin timeline_left_block($margin_bottom: $space_lg, $width: auto, $min_width: auto, $height: auto, $display: block) {
|
|
71
|
+
.pb_timeline_item_left_block {
|
|
72
|
+
margin-bottom: $margin_bottom;
|
|
73
|
+
|
|
74
|
+
@if $width != auto {
|
|
75
|
+
width: $width;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@if $min_width != auto {
|
|
79
|
+
min-width: $min_width;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@if $height != auto {
|
|
83
|
+
height: $height;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@if $display != block {
|
|
87
|
+
display: $display;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@mixin timeline_right_block($margin_bottom: $space_lg) {
|
|
93
|
+
.pb_timeline_item_right_block {
|
|
94
|
+
@include flex_wrapper(column);
|
|
95
|
+
margin-bottom: $margin_bottom;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.pb_timeline_kit_horizontal,
|
|
100
|
+
.pb_timeline_kit_horizontal_with_date {
|
|
101
|
+
@include flex_wrapper(row);
|
|
102
|
+
width: 100%;
|
|
103
|
+
|
|
104
|
+
>div {
|
|
105
|
+
&:last-child {
|
|
106
|
+
flex-basis: auto !important;
|
|
107
|
+
|
|
108
|
+
.pb_timeline_item_step {
|
|
109
|
+
.pb_timeline_item_connector {
|
|
110
|
+
opacity: 0;
|
|
77
111
|
}
|
|
78
112
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
margin-bottom: $space_xs;
|
|
86
|
-
[class=pb_timeline_item_connector] {
|
|
87
|
-
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
|
|
88
|
-
}
|
|
89
|
-
}
|
|
113
|
+
|
|
114
|
+
.pb_timeline_item_right_block {
|
|
115
|
+
display: block;
|
|
116
|
+
width: 100%;
|
|
117
|
+
overflow: hidden;
|
|
118
|
+
white-space: nowrap;
|
|
90
119
|
}
|
|
91
120
|
}
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
display: block;
|
|
105
|
-
width: 100%;
|
|
106
|
-
overflow: hidden;
|
|
107
|
-
white-space: nowrap;
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
[class*=pb_timeline_item_kit] {
|
|
112
|
-
&[class*=_solid] {
|
|
113
|
-
flex-basis: 100%;
|
|
114
|
-
[class=pb_timeline_item_left_block] {
|
|
115
|
-
display: flex;
|
|
116
|
-
height: 55px;
|
|
117
|
-
[class=pb_date_stacked_kit_center_sm] {
|
|
118
|
-
[class=pb_date_stacked_day_month] {
|
|
119
|
-
[class=pb_caption_kit_md] {
|
|
120
|
-
text-align: left;
|
|
121
|
-
}
|
|
122
|
-
[class=pb_title_kit_4] {
|
|
123
|
-
text-align: left;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
[class^=pb_timeline_item_step] {
|
|
129
|
-
@include flex_wrapper(row);
|
|
130
|
-
margin-top: $space_xs;
|
|
131
|
-
margin-bottom: $space_xs;
|
|
132
|
-
[class=pb_timeline_item_connector] {
|
|
133
|
-
@include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
&[class*=_dotted] {
|
|
138
|
-
flex-basis: 100%;
|
|
139
|
-
[class=pb_timeline_item_left_block] {
|
|
140
|
-
height: 55px;
|
|
141
|
-
[class=pb_date_stacked_kit_center_sm] {
|
|
142
|
-
[class=pb_date_stacked_day_month] {
|
|
143
|
-
[class=pb_caption_kit_md] {
|
|
144
|
-
text-align: left;
|
|
145
|
-
}
|
|
146
|
-
[class=pb_title_kit_4] {
|
|
147
|
-
text-align: left;
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
[class^=pb_timeline_item_step] {
|
|
153
|
-
@include flex_wrapper(row);
|
|
154
|
-
margin-top: $space_xs;
|
|
155
|
-
margin-bottom: $space_xs;
|
|
156
|
-
[class=pb_timeline_item_connector] {
|
|
157
|
-
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.pb_timeline_item_kit_solid {
|
|
124
|
+
flex-basis: 100%;
|
|
125
|
+
|
|
126
|
+
.pb_timeline_item_step {
|
|
127
|
+
@include timeline_item_step_base(row, center, $space_xs);
|
|
128
|
+
|
|
129
|
+
.pb_timeline_item_connector {
|
|
130
|
+
@include pb_timeline_line_solid($connector_width,
|
|
131
|
+
$connector_width,
|
|
132
|
+
0 $icon_margin 0 $icon_margin );
|
|
161
133
|
}
|
|
162
134
|
}
|
|
163
135
|
}
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
136
|
+
|
|
137
|
+
.pb_timeline_item_kit_dotted {
|
|
138
|
+
flex-basis: 100%;
|
|
139
|
+
|
|
140
|
+
.pb_timeline_item_step {
|
|
141
|
+
@include timeline_item_step_base(row, center, $space_xs);
|
|
142
|
+
|
|
143
|
+
.pb_timeline_item_connector {
|
|
144
|
+
@include pb_timeline_line_dotted_horizontal($connector_width,
|
|
145
|
+
$connector_width,
|
|
146
|
+
0 $icon_margin 0 $icon_margin );
|
|
173
147
|
}
|
|
174
148
|
}
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.pb_timeline_kit_horizontal_with_date {
|
|
153
|
+
.pb_timeline_item_kit_solid {
|
|
154
|
+
@include timeline_left_block(auto, auto, auto, 55px, flex);
|
|
155
|
+
|
|
156
|
+
.pb_timeline_item_left_block {
|
|
157
|
+
.pb_date_stacked_kit_center_sm {
|
|
158
|
+
.pb_date_stacked_day_month {
|
|
159
|
+
.pb_caption_kit_md {
|
|
160
|
+
text-align: left;
|
|
187
161
|
}
|
|
188
162
|
}
|
|
189
|
-
[class=pb_timeline_item_left_block] {
|
|
190
|
-
margin-bottom: $space_lg;
|
|
191
|
-
width: 0px;
|
|
192
|
-
}
|
|
193
|
-
[class=pb_timeline_item_right_block] {
|
|
194
|
-
@include flex_wrapper(column);
|
|
195
|
-
margin-bottom: $space_lg;
|
|
196
|
-
}
|
|
197
163
|
}
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.pb_timeline_item_kit_dotted {
|
|
168
|
+
@include timeline_left_block(auto, auto, auto, 55px);
|
|
169
|
+
|
|
170
|
+
.pb_timeline_item_left_block {
|
|
171
|
+
.pb_date_stacked_kit_center_sm {
|
|
172
|
+
.pb_date_stacked_day_month {
|
|
173
|
+
.pb_caption_kit_md {
|
|
174
|
+
text-align: left;
|
|
207
175
|
}
|
|
208
176
|
}
|
|
209
|
-
[class=pb_timeline_item_left_block] {
|
|
210
|
-
margin-bottom: $space_lg;
|
|
211
|
-
width: 0px;
|
|
212
|
-
}
|
|
213
|
-
[class=pb_timeline_item_right_block] {
|
|
214
|
-
@include flex_wrapper(column);
|
|
215
|
-
margin-bottom: $space_lg;
|
|
216
|
-
}
|
|
217
177
|
}
|
|
218
178
|
}
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
}
|
|
228
|
-
}
|
|
179
|
+
|
|
180
|
+
.pb_timeline_item_step {
|
|
181
|
+
@include timeline_item_step_base(row, center, $space_xs);
|
|
182
|
+
|
|
183
|
+
.pb_timeline_item_connector {
|
|
184
|
+
@include pb_timeline_line_dotted_horizontal($connector_width,
|
|
185
|
+
$connector_width,
|
|
186
|
+
0 $icon_margin 0 $icon_margin );
|
|
229
187
|
}
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
}
|
|
253
|
-
&[class*=_dotted] {
|
|
254
|
-
flex-basis: 100%;
|
|
255
|
-
[class^=pb_timeline_item_step] {
|
|
256
|
-
@include flex_wrapper(column);
|
|
257
|
-
align-items: center;
|
|
258
|
-
margin-right: $space_sm;
|
|
259
|
-
margin-left: $space_sm;
|
|
260
|
-
[class=pb_timeline_item_connector] {
|
|
261
|
-
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
[class=pb_timeline_item_left_block] {
|
|
265
|
-
margin-bottom: $space_lg;
|
|
266
|
-
min-width: $space_lg;
|
|
267
|
-
}
|
|
268
|
-
[class=pb_timeline_item_right_block] {
|
|
269
|
-
@include flex_wrapper(column);
|
|
270
|
-
margin-bottom: $space_lg;
|
|
271
|
-
}
|
|
272
|
-
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.pb_timeline_kit_vertical,
|
|
193
|
+
.pb_timeline_kit_vertical_with_date,
|
|
194
|
+
.pb_timeline_kit_vertical_gap_xs,
|
|
195
|
+
.pb_timeline_kit_vertical_gap_sm,
|
|
196
|
+
.pb_timeline_kit_vertical_gap_md,
|
|
197
|
+
.pb_timeline_kit_vertical_gap_lg,
|
|
198
|
+
.pb_timeline_kit_vertical_with_date_gap_xs,
|
|
199
|
+
.pb_timeline_kit_vertical_with_date_gap_sm,
|
|
200
|
+
.pb_timeline_kit_vertical_with_date_gap_md,
|
|
201
|
+
.pb_timeline_kit_vertical_with_date_gap_lg {
|
|
202
|
+
@include flex_wrapper(column);
|
|
203
|
+
align-items: flex-start;
|
|
204
|
+
align-self: auto;
|
|
205
|
+
|
|
206
|
+
>div:last-child {
|
|
207
|
+
.pb_timeline_item_step {
|
|
208
|
+
.pb_timeline_item_connector {
|
|
209
|
+
opacity: 0;
|
|
273
210
|
}
|
|
274
211
|
}
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
.pb_timeline_item_kit_solid {
|
|
216
|
+
@include flex_wrapper(row);
|
|
217
|
+
flex-basis: 100%;
|
|
218
|
+
|
|
219
|
+
.pb_timeline_item_step {
|
|
220
|
+
@include timeline_item_step_base(column, center, 0, $space_sm);
|
|
221
|
+
align-content: flex-start;
|
|
222
|
+
|
|
223
|
+
.pb_timeline_item_connector {
|
|
224
|
+
@include pb_timeline_line_solid($connector_width,
|
|
225
|
+
$connector_width,
|
|
226
|
+
$icon_margin 0 $icon_margin 0);
|
|
282
227
|
}
|
|
283
228
|
}
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
229
|
+
|
|
230
|
+
@include timeline_left_block($space_lg, 0px);
|
|
231
|
+
@include timeline_right_block($space_lg);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
.pb_timeline_item_kit_dotted {
|
|
236
|
+
@include flex_wrapper(row);
|
|
237
|
+
flex-basis: 100%;
|
|
238
|
+
|
|
239
|
+
.pb_timeline_item_step {
|
|
240
|
+
@include timeline_item_step_base(column, center, 0, $space_sm);
|
|
241
|
+
|
|
242
|
+
.pb_timeline_item_connector {
|
|
243
|
+
@include pb_timeline_line_dotted_vertical($connector_width,
|
|
244
|
+
$connector_width,
|
|
245
|
+
$icon_margin 0 $icon_margin 0);
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
@include timeline_left_block($space_lg, 0px);
|
|
250
|
+
@include timeline_right_block($space_lg);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
&.pb_timeline_kit_vertical_with_date,
|
|
254
|
+
&.pb_timeline_kit_vertical_with_date_gap_xs,
|
|
255
|
+
&.pb_timeline_kit_vertical_with_date_gap_sm,
|
|
256
|
+
&.pb_timeline_kit_vertical_with_date_gap_md,
|
|
257
|
+
&.pb_timeline_kit_vertical_with_date_gap_lg {
|
|
258
|
+
@include flex_wrapper(column);
|
|
259
|
+
align-items: flex-start;
|
|
260
|
+
align-self: auto;
|
|
261
|
+
|
|
262
|
+
>div:last-child {
|
|
263
|
+
.pb_timeline_item_step {
|
|
264
|
+
.pb_timeline_item_connector {
|
|
265
|
+
opacity: 0;
|
|
290
266
|
}
|
|
291
267
|
}
|
|
292
268
|
}
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
269
|
+
|
|
270
|
+
.pb_timeline_item_kit_solid {
|
|
271
|
+
@include flex_wrapper(row);
|
|
272
|
+
|
|
273
|
+
flex-basis: 100%;
|
|
274
|
+
|
|
275
|
+
.pb_timeline_item_step {
|
|
276
|
+
@include timeline_item_step_base(column, center, 0, $space_sm);
|
|
277
|
+
align-content: flex-start;
|
|
278
|
+
|
|
279
|
+
.pb_timeline_item_connector {
|
|
280
|
+
@include pb_timeline_line_solid($connector_width,
|
|
281
|
+
$connector_width,
|
|
282
|
+
$icon_margin 0 $icon_margin 0);
|
|
299
283
|
}
|
|
300
284
|
}
|
|
285
|
+
|
|
286
|
+
@include timeline_left_block($space_lg, auto, $space_lg);
|
|
287
|
+
@include timeline_right_block($space_lg);
|
|
301
288
|
}
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
289
|
+
|
|
290
|
+
.pb_timeline_item_kit_dotted {
|
|
291
|
+
flex-basis: 100%;
|
|
292
|
+
|
|
293
|
+
.pb_timeline_item_step {
|
|
294
|
+
@include timeline_item_step_base(column, center, 0, $space_sm);
|
|
295
|
+
|
|
296
|
+
.pb_timeline_item_connector {
|
|
297
|
+
@include pb_timeline_line_dotted_vertical($connector_width,
|
|
298
|
+
$connector_width,
|
|
299
|
+
$icon_margin 0 $icon_margin 0);
|
|
308
300
|
}
|
|
309
301
|
}
|
|
302
|
+
|
|
303
|
+
@include timeline_left_block($space_lg, auto, $space_lg);
|
|
304
|
+
@include timeline_right_block($space_lg);
|
|
310
305
|
}
|
|
311
306
|
}
|
|
312
307
|
}
|
|
308
|
+
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
.pb_timeline_kit_vertical_gap_xs,
|
|
312
|
+
.pb_timeline_kit_vertical_with_date_gap_xs {
|
|
313
|
+
@include timeline_gap_height($gap_xs);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.pb_timeline_kit_vertical_gap_sm,
|
|
317
|
+
.pb_timeline_kit_vertical__with_date_gap_sm {
|
|
318
|
+
@include timeline_gap_height($gap_sm);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.pb_timeline_kit_vertical_gap_md,
|
|
322
|
+
.pb_timeline_kit_vertical_with_date_gap_md {
|
|
323
|
+
@include timeline_gap_height($gap_md);
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.pb_timeline_kit_vertical_gap_lg,
|
|
327
|
+
.pb_timeline_kit_vertical_with_date_gap_lg {
|
|
328
|
+
@include timeline_gap_height($gap_lg);
|
|
329
|
+
}
|
|
@@ -38,7 +38,7 @@ const Timeline = ({
|
|
|
38
38
|
const ariaProps = buildAriaProps(aria)
|
|
39
39
|
const dataProps = buildDataProps(data)
|
|
40
40
|
const htmlProps = buildHtmlProps(htmlOptions)
|
|
41
|
-
const dateStyle = showDate === true ? '
|
|
41
|
+
const dateStyle = showDate === true ? 'with_date' : ''
|
|
42
42
|
const itemGapStyle = itemGap === 'none' ? '' : `gap_${itemGap}`
|
|
43
43
|
const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, itemGapStyle)
|
|
44
44
|
|
|
@@ -161,12 +161,12 @@ test('should pass showDate prop', () => {
|
|
|
161
161
|
const props = { showDate: true }
|
|
162
162
|
render(<TimelineDefault {...props} />)
|
|
163
163
|
const kit = screen.getByTestId(testId)
|
|
164
|
-
expect(kit).toHaveClass('
|
|
164
|
+
expect(kit).toHaveClass('pb_timeline_kit_horizontal_with_date')
|
|
165
165
|
})
|
|
166
166
|
|
|
167
167
|
test('should pass showDate prop with Children', () => {
|
|
168
168
|
const props = { showDate: true }
|
|
169
169
|
render(<TimelineWithChildren {...props} />)
|
|
170
170
|
const kit = screen.getByTestId(testId)
|
|
171
|
-
expect(kit).toHaveClass('
|
|
171
|
+
expect(kit).toHaveClass('pb_timeline_kit_horizontal_with_date')
|
|
172
172
|
})
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
@import "../tokens/shadows";
|
|
5
5
|
@import "../tokens/positioning";
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
.pb_typeahead_kit {
|
|
8
8
|
.typeahead-kit-select__option {
|
|
9
9
|
cursor: pointer;
|
|
10
10
|
}
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
transition: opacity .15s ease-in-out;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
-
|
|
31
|
+
.pb_text_input_kit {
|
|
32
32
|
.text_input_wrapper {
|
|
33
33
|
.text_input {
|
|
34
34
|
max-height: none;
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
-
|
|
50
|
+
.pb_list_kit_xpadding_borderless_ {
|
|
51
51
|
max-height: 18em;
|
|
52
52
|
overflow-y: auto;
|
|
53
53
|
overscroll-behavior: contain;
|
|
@@ -60,15 +60,15 @@
|
|
|
60
60
|
border-radius: $border_rad_heavier;
|
|
61
61
|
transition: opacity .25s ease-in-out;
|
|
62
62
|
}
|
|
63
|
-
&:focus-within
|
|
63
|
+
&:focus-within .pb_list_kit_xpadding_borderless_ {
|
|
64
64
|
display: block;
|
|
65
65
|
opacity: 1;
|
|
66
66
|
}
|
|
67
|
-
&:not(:focus-within)
|
|
67
|
+
&:not(:focus-within) .pb_list_kit_xpadding_borderless_ {
|
|
68
68
|
display: none;
|
|
69
69
|
opacity: 0;
|
|
70
70
|
}
|
|
71
|
-
|
|
71
|
+
.pb_list_kit_xpadding_borderless_ {
|
|
72
72
|
li {
|
|
73
73
|
transition: background-color .25s ease-in-out;
|
|
74
74
|
}
|
|
@@ -161,7 +161,7 @@
|
|
|
161
161
|
.typeahead-plus-icon {
|
|
162
162
|
color: $text_lt_lighter;
|
|
163
163
|
}
|
|
164
|
-
|
|
164
|
+
.pb_badge_kit_primary span {
|
|
165
165
|
line-height: 16.5px;
|
|
166
166
|
letter-spacing: normal;
|
|
167
167
|
}
|
|
@@ -176,14 +176,14 @@
|
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
178
|
|
|
179
|
-
|
|
179
|
+
&.dark {
|
|
180
180
|
.pb_typeahead_wrapper .pb_typeahead_loading_indicator {
|
|
181
181
|
color: $text_dk_light;
|
|
182
182
|
}
|
|
183
183
|
.pb_text_input_kit_label {
|
|
184
184
|
color: $text_dk_light;
|
|
185
185
|
}
|
|
186
|
-
|
|
186
|
+
.pb_text_input_kit.dark .text_input_wrapper .text_input {
|
|
187
187
|
display: inherit !important;
|
|
188
188
|
}
|
|
189
189
|
.typeahead-kit-select__menu {
|
|
@@ -227,7 +227,7 @@
|
|
|
227
227
|
.typeahead-kit-select__option--is-focused {
|
|
228
228
|
background-color: $active_dark;
|
|
229
229
|
}
|
|
230
|
-
|
|
230
|
+
.pb_list_kit_xpadding_borderless_ {
|
|
231
231
|
background-color: $bg_dark;
|
|
232
232
|
}
|
|
233
233
|
.pb_item_kit {
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
@include hover-color-classes($text_colors);
|
|
61
61
|
@include hover-color-classes($category_colors);
|
|
62
62
|
|
|
63
|
-
.
|
|
63
|
+
.hover_visible_true {
|
|
64
64
|
opacity: 0;
|
|
65
65
|
transition: opacity $transition-speed ease;
|
|
66
66
|
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
.group_hover:hover {
|
|
73
|
-
.group_hover.
|
|
73
|
+
.group_hover.hover_visible_true {
|
|
74
74
|
opacity: 1;
|
|
75
75
|
}
|
|
76
76
|
}
|
|
@@ -65,7 +65,7 @@ type Hover = Shadow & {
|
|
|
65
65
|
color?: string,
|
|
66
66
|
scale?: "sm" | "md" | "lg",
|
|
67
67
|
underline?: boolean,
|
|
68
|
-
|
|
68
|
+
visible?: boolean,
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
type GroupHover = {
|
|
@@ -252,7 +252,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
|
252
252
|
css += hover.underline ? `hover_underline ` : '';
|
|
253
253
|
css += hover.scale ? `hover_scale_${hover.scale} ` : '';
|
|
254
254
|
css += hover.color ? `hover_color-${hover.color } ` : '';
|
|
255
|
-
css += hover.
|
|
255
|
+
css += hover.visible ? `hover_visible_true` : '';
|
|
256
256
|
return css;
|
|
257
257
|
},
|
|
258
258
|
|