playbook_ui 15.2.0.pre.alpha.toastfixes11417 → 15.2.0.pre.rc.0

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.
Files changed (57) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +0 -7
  3. data/app/pb_kits/playbook/pb_button/_button.scss +0 -6
  4. data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb +3 -7
  5. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +0 -29
  6. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -4
  7. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb +16 -16
  8. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +1 -2
  9. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb +31 -31
  10. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +3 -4
  11. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +0 -8
  12. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +29 -105
  13. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +1 -0
  14. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +3 -5
  15. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md +0 -2
  16. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +1 -4
  17. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js +0 -10
  18. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -12
  19. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +2 -2
  20. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss +21 -15
  21. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +5 -6
  22. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +0 -2
  23. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +3 -11
  24. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +8 -9
  25. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +9 -36
  26. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +22 -105
  27. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -3
  28. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +6 -14
  29. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb +4 -8
  30. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +0 -5
  31. data/app/pb_kits/playbook/pb_text_input/text_input.html.erb +1 -3
  32. data/app/pb_kits/playbook/pb_text_input/text_input.rb +0 -6
  33. data/app/pb_kits/playbook/pb_timeline/_timeline.scss +233 -250
  34. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
  35. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +2 -2
  36. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +10 -10
  37. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -39
  38. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +0 -2
  39. data/app/pb_kits/playbook/tokens/_positioning.scss +0 -1
  40. data/app/pb_kits/playbook/utilities/_hover.scss +2 -2
  41. data/app/pb_kits/playbook/utilities/_positioning.scss +1 -6
  42. data/app/pb_kits/playbook/utilities/globalProps.ts +3 -5
  43. data/dist/chunks/{_line_graph-BmLd7KGj.js → _line_graph-C9stNsP3.js} +1 -1
  44. data/dist/chunks/_typeahead-D3MtsWXG.js +6 -0
  45. data/dist/chunks/{_weekday_stacked-5TWRvQol.js → _weekday_stacked-Bvc7R5vH.js} +3 -3
  46. data/dist/chunks/vendor.js +1 -1
  47. data/dist/playbook-doc.js +2 -2
  48. data/dist/playbook-rails-react-bindings.js +1 -1
  49. data/dist/playbook-rails.js +1 -1
  50. data/dist/playbook.css +1 -1
  51. data/lib/playbook/hover.rb +1 -5
  52. data/lib/playbook/pb_forms_helper.rb +6 -7
  53. data/lib/playbook/version.rb +2 -2
  54. data/lib/playbook/z_index.rb +1 -1
  55. metadata +5 -6
  56. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.md +0 -1
  57. data/dist/chunks/_typeahead-BhGFKFka.js +0 -6
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx CHANGED
@@ -38,7 +38,6 @@ const TextInputDefault = (props) => {
38
38
  {...props}
39
39
  />
40
40
  <TextInput
41
- id="last-name"
42
41
  label="Last Name"
43
42
  name="lastName"
44
43
  onChange={handleOnChangeFormField}
@@ -47,7 +46,6 @@ const TextInputDefault = (props) => {
47
46
  {...props}
48
47
  />
49
48
  <TextInput
50
- id="phone"
51
49
  label="Phone Number"
52
50
  name="phone"
53
51
  onChange={handleOnChangeFormField}
@@ -57,7 +55,6 @@ const TextInputDefault = (props) => {
57
55
  {...props}
58
56
  />
59
57
  <TextInput
60
- id="email"
61
58
  label="Email Address"
62
59
  name="email"
63
60
  onChange={handleOnChangeFormField}
@@ -67,7 +64,6 @@ const TextInputDefault = (props) => {
67
64
  {...props}
68
65
  />
69
66
  <TextInput
70
- id="zip"
71
67
  label="Zip Code"
72
68
  name="zip"
73
69
  onChange={handleOnChangeFormField}
@@ -88,7 +84,6 @@ const TextInputDefault = (props) => {
88
84
  <br />
89
85
 
90
86
  <TextInput
91
- id="first-name"
92
87
  label="First Name"
93
88
  onChange={handleOnChangeFirstName}
94
89
  placeholder="Enter first name"
data/app/pb_kits/playbook/pb_text_input/text_input.html.erb CHANGED
@@ -1,8 +1,6 @@
1
1
  <%= pb_content_tag(:div, id: nil ) do %>
2
2
  <% if object.label.present? %>
3
- <label for="<%= object.input_options[:id] || object.id %>" >
4
3
  <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
5
- </label>
6
4
  <% end %>
7
5
  <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
8
6
  <% if content.present? %>
@@ -17,7 +15,7 @@
17
15
  <% else %>
18
16
  <%= input_tag %>
19
17
  <% end %>
20
- <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }}) if object.error %>
18
+ <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
21
19
  <% end %>
22
20
  <% end %>
23
21
 
data/app/pb_kits/playbook/pb_text_input/text_input.rb CHANGED
@@ -64,16 +64,10 @@ module Playbook
64
64
  "#{object.id}-sanitized" if id.present?
65
65
  end
66
66
 
67
- def error_id
68
- "#{id}-error" if error.present?
69
- end
70
-
71
67
  private
72
68
 
73
69
  def all_input_options
74
70
  {
75
- 'aria-describedby': error.present? ? error_id : nil,
76
- 'aria-invalid': error.present?,
77
71
  autocomplete: autocomplete == true ? nil : (autocomplete.presence || "off"),
78
72
  class: "text_input #{input_options.dig(:classname) || ''}",
79
73
  data: validation_data,
data/app/pb_kits/playbook/pb_timeline/_timeline.scss CHANGED
@@ -43,287 +43,270 @@ $gap_lg: $height_from_top + $space_lg;
43
43
  flex-direction: $flex_direction;
44
44
  }
45
45
 
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;
46
+ [class^=pb_timeline_kit] {
47
+ &[class*=_horizontal] {
48
+ @include flex_wrapper(row);
49
+ width: 100%;
50
+ >div {
51
+ &:last-child {
52
+ flex-basis: auto !important;
53
+ [class^=pb_timeline_item_step] {
54
+ [class=pb_timeline_item_connector] {
55
+ opacity: 0;
56
+ }
57
+ }
58
+ [class=pb_timeline_item_right_block] {
59
+ display: block;
60
+ width: 100%;
61
+ overflow: hidden;
62
+ white-space: nowrap;
63
+ }
65
64
  }
66
65
  }
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;
66
+ [class*=pb_timeline_item_kit] {
67
+ &[class*=_solid] {
68
+ flex-basis: 100%;
69
+ [class^=pb_timeline_item_step] {
70
+ @include flex_wrapper(row);
71
+ align-items: center;
72
+ margin-top: $space_xs;
73
+ margin-bottom: $space_xs;
74
+ [class=pb_timeline_item_connector] {
75
+ @include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
76
+ }
111
77
  }
112
78
  }
113
-
114
- .pb_timeline_item_right_block {
115
- display: block;
116
- width: 100%;
117
- overflow: hidden;
118
- white-space: nowrap;
79
+ &[class*=_dotted] {
80
+ flex-basis: 100%;
81
+ [class^=pb_timeline_item_step] {
82
+ @include flex_wrapper(row);
83
+ align-items: center;
84
+ margin-top: $space_xs;
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
+ }
119
90
  }
120
91
  }
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 );
92
+ &[class*=_with_date] {
93
+ @include flex_wrapper(row);
94
+ width: 100%;
95
+ >div {
96
+ &:last-child {
97
+ flex-basis: auto !important;
98
+ [class^=pb_timeline_item_step] {
99
+ [class=pb_timeline_item_connector] {
100
+ opacity: 0;
101
+ }
102
+ }
103
+ [class=pb_timeline_item_right_block] {
104
+ display: block;
105
+ width: 100%;
106
+ overflow: hidden;
107
+ white-space: nowrap;
108
+ }
109
+ }
133
110
  }
134
- }
135
- }
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 );
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
+ }
147
161
  }
148
162
  }
149
163
  }
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;
161
- }
164
+ &[class*=_vertical] {
165
+ @include flex_wrapper(column);
166
+ align-items: flex-start;
167
+ align-self: auto;
168
+ >div:last-child {
169
+ [class^=pb_timeline_item_step] {
170
+ [class=pb_timeline_item_connector] {
171
+ opacity: 0;
162
172
  }
163
173
  }
164
174
  }
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;
175
+ [class*=pb_timeline_item_kit] {
176
+ @include flex_wrapper(row);
177
+ &[class*=_solid] {
178
+ flex-basis: 100%;
179
+ [class^=pb_timeline_item_step] {
180
+ @include flex_wrapper(column);
181
+ align-items: center;
182
+ align-content: flex-start;
183
+ margin-right: $space_sm;
184
+ margin-left: $space_sm;
185
+ [class=pb_timeline_item_connector] {
186
+ @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
175
187
  }
176
188
  }
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
+ }
177
197
  }
178
- }
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 );
198
+ &[class*=_dotted] {
199
+ flex-basis: 100%;
200
+ [class^=pb_timeline_item_step] {
201
+ @include flex_wrapper(column);
202
+ align-items: center;
203
+ margin-right: $space_sm;
204
+ margin-left: $space_sm;
205
+ [class=pb_timeline_item_connector] {
206
+ @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
207
+ }
208
+ }
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
+ }
187
217
  }
188
218
  }
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;
219
+ &[class*=_with_date] {
220
+ @include flex_wrapper(column);
221
+ align-items: flex-start;
222
+ align-self: auto;
223
+ >div:last-child {
224
+ [class^=pb_timeline_item_step] {
225
+ [class=pb_timeline_item_connector] {
226
+ opacity: 0;
227
+ }
228
+ }
210
229
  }
211
- }
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);
230
+ [class*=pb_timeline_item_kit] {
231
+ @include flex_wrapper(row);
232
+ &[class*=_solid] {
233
+ flex-basis: 100%;
234
+ [class^=pb_timeline_item_step] {
235
+ @include flex_wrapper(column);
236
+ align-items: center;
237
+ align-content: flex-start;
238
+ margin-right: $space_sm;
239
+ margin-left: $space_sm;
240
+ [class=pb_timeline_item_connector] {
241
+ @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
242
+ }
243
+ }
244
+ [class=pb_timeline_item_left_block] {
245
+ margin-bottom: $space_lg;
246
+ min-width: $space_lg;
247
+ }
248
+ [class=pb_timeline_item_right_block] {
249
+ @include flex_wrapper(column);
250
+ margin-bottom: $space_lg;
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
+ }
227
273
  }
228
274
  }
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);
275
+ &[class*=_gap_xs] {
276
+ [class*=pb_timeline_item_kit] {
277
+ [class^=pb_timeline_item_step] {
278
+ [class=pb_timeline_item_connector] {
279
+ height: $gap_xs !important;
280
+ }
281
+ }
246
282
  }
247
283
  }
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;
284
+ &[class*=_gap_sm] {
285
+ [class*=pb_timeline_item_kit] {
286
+ [class^=pb_timeline_item_step] {
287
+ [class=pb_timeline_item_connector] {
288
+ height: $gap_sm !important;
289
+ }
266
290
  }
267
291
  }
268
292
  }
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);
293
+ &[class*=_gap_md] {
294
+ [class*=pb_timeline_item_kit] {
295
+ [class^=pb_timeline_item_step] {
296
+ [class=pb_timeline_item_connector] {
297
+ height: $gap_md !important;
298
+ }
283
299
  }
284
300
  }
285
-
286
- @include timeline_left_block($space_lg, auto, $space_lg);
287
- @include timeline_right_block($space_lg);
288
301
  }
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);
302
+ &[class*=_gap_lg] {
303
+ [class*=pb_timeline_item_kit] {
304
+ [class^=pb_timeline_item_step] {
305
+ [class=pb_timeline_item_connector] {
306
+ height: $gap_lg !important;
307
+ }
300
308
  }
301
309
  }
302
-
303
- @include timeline_left_block($space_lg, auto, $space_lg);
304
- @include timeline_right_block($space_lg);
305
310
  }
306
311
  }
307
312
  }
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
- }
data/app/pb_kits/playbook/pb_timeline/_timeline.tsx CHANGED
@@ -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 ? 'with_date' : ''
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
 
data/app/pb_kits/playbook/pb_timeline/timeline.test.js CHANGED
@@ -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('pb_timeline_kit_horizontal_with_date')
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('pb_timeline_kit_horizontal_with_date')
171
+ expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date')
172
172
  })