playbook_ui 15.2.0.pre.alpha.testingtiptap11313 → 15.2.0.pre.alpha.toastfixes11417

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 (49) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/_button.scss +6 -0
  3. data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb +7 -3
  4. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +29 -0
  5. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +8 -0
  6. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +0 -1
  7. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +5 -3
  8. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md +2 -0
  9. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +4 -1
  10. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js +10 -0
  11. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  12. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +105 -22
  13. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +2 -41
  14. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +0 -1
  15. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +20 -60
  16. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +0 -36
  17. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +2 -8
  18. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -6
  19. data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js +1 -127
  20. data/app/pb_kits/playbook/pb_timeline/_timeline.scss +250 -233
  21. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
  22. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +2 -2
  23. data/app/pb_kits/playbook/tokens/_positioning.scss +1 -0
  24. data/app/pb_kits/playbook/utilities/_positioning.scss +6 -1
  25. data/app/pb_kits/playbook/utilities/globalProps.ts +3 -1
  26. data/dist/chunks/{_line_graph-BoA3Vs81.js → _line_graph-BmLd7KGj.js} +1 -1
  27. data/dist/chunks/_typeahead-BhGFKFka.js +6 -0
  28. data/dist/chunks/{_weekday_stacked-CjVj28hU.js → _weekday_stacked-5TWRvQol.js} +2 -2
  29. data/dist/chunks/vendor.js +1 -1
  30. data/dist/playbook-doc.js +2 -2
  31. data/dist/playbook-rails-react-bindings.js +1 -1
  32. data/dist/playbook-rails.js +1 -1
  33. data/dist/playbook.css +1 -1
  34. data/lib/playbook/pb_forms_helper.rb +7 -6
  35. data/lib/playbook/version.rb +1 -1
  36. data/lib/playbook/z_index.rb +1 -1
  37. metadata +5 -16
  38. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.jsx +0 -38
  39. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.md +0 -1
  40. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx +0 -34
  41. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md +0 -1
  42. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx +0 -37
  43. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md +0 -1
  44. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx +0 -37
  45. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx +0 -38
  46. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md +0 -1
  47. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx +0 -69
  48. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md +0 -1
  49. data/dist/chunks/_typeahead-BkqswwwC.js +0 -6
data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js CHANGED
@@ -1,7 +1,5 @@
1
1
  import React from 'react'
2
- import { render, screen, fireEvent, waitFor } from '../utilities/test-utils'
3
- import { useEditor, EditorContent } from "@tiptap/react"
4
- import StarterKit from "@tiptap/starter-kit"
2
+ import { render, screen } from '../utilities/test-utils'
5
3
 
6
4
  import RichTextEditor from './_rich_text_editor'
7
5
 
@@ -64,127 +62,3 @@ test('returns "Dark" class name', () => {
64
62
  const kit = screen.getByTestId(testId)
65
63
  expect(kit).toHaveClass(`${kitClass} dark`)
66
64
  })
67
-
68
- // TipTap testing
69
- const TestAdvancedEditor = ({ toolbarOnFocus = false, ...props }) => {
70
- const editor = useEditor({
71
- extensions: [StarterKit],
72
- content: '<p>Test content</p>',
73
- })
74
-
75
- if (!editor) return null
76
-
77
- return (
78
- <RichTextEditor
79
- advancedEditor={editor}
80
- data={{ testid: testId }}
81
- toolbarOnFocus={toolbarOnFocus}
82
- {...props}
83
- >
84
- <EditorContent editor={editor} />
85
- </RichTextEditor>
86
- )
87
- }
88
-
89
- describe('Advanced TipTap Editor works as expected', () => {
90
- test('renders advanced editor with toolbar', () => {
91
- render(<TestAdvancedEditor />)
92
-
93
- const kit = screen.getByTestId(testId)
94
- expect(kit).toHaveClass(kitClass)
95
-
96
- // Check for advanced container
97
- const advancedContainer = kit.querySelector('.pb_rich_text_editor_advanced_container')
98
- expect(advancedContainer).toBeInTheDocument()
99
-
100
- // Check for toolbar
101
- const toolbar = kit.querySelector('.toolbar')
102
- expect(toolbar).toBeInTheDocument()
103
- })
104
-
105
- test('renders advanced editor without toolbar when advancedEditorToolbar is false', () => {
106
- render(<TestAdvancedEditor advancedEditorToolbar={false} />)
107
-
108
- const kit = screen.getByTestId(testId)
109
- const toolbar = kit.querySelector('.toolbar')
110
- expect(toolbar).not.toBeInTheDocument()
111
- })
112
-
113
- test('shows/hides toolbar on focus when focus is enabled', async () => {
114
- render(<TestAdvancedEditor focus />)
115
-
116
- const kit = screen.getByTestId(testId)
117
-
118
- // Initially toolbar should be hidden
119
- let toolbar = kit.querySelector('.toolbar')
120
- expect(toolbar).not.toBeInTheDocument()
121
-
122
- const editorElement = kit.querySelector('.ProseMirror')
123
- // Focus the editor
124
- fireEvent.focus(editorElement)
125
-
126
- // Toolbar should now be visible
127
- await waitFor(() => {
128
- toolbar = kit.querySelector('.toolbar')
129
- expect(toolbar).toBeInTheDocument()
130
- })
131
- })
132
-
133
-
134
- test('supports simple prop with advanced editor', () => {
135
- render(<TestAdvancedEditor simple />)
136
-
137
- const kit = screen.getByTestId(testId)
138
- const toolbar = kit.querySelector('.toolbar')
139
- expect(toolbar).toBeInTheDocument()
140
- const toolbarDropdown = kit.querySelector('.editor_dropdown_button')
141
- expect(toolbarDropdown).not.toBeInTheDocument()
142
- expect(kit).toHaveClass(`${kitClass} simple`)
143
- })
144
-
145
- test('supports sticky prop with advanced editor', () => {
146
- render(<TestAdvancedEditor sticky />)
147
-
148
- const kit = screen.getByTestId(testId)
149
- const stickyToolbar = kit.querySelector('.pb_rich_text_editor_tiptap_toolbar_sticky')
150
- expect(stickyToolbar).toBeInTheDocument()
151
- expect(kit).toHaveClass(`${kitClass} sticky`)
152
- })
153
-
154
- test('applies aria-label when provided', () => {
155
- const ariaLabel = 'Rich Text Editor'
156
- render(<TestAdvancedEditor aria={{ label: ariaLabel }} />)
157
-
158
- const kit = screen.getByTestId(testId)
159
- expect(kit).toHaveAttribute('aria-label', ariaLabel)
160
- })
161
-
162
- test('supports inline prop with advanced editor', () => {
163
- render(<TestAdvancedEditor inline />)
164
-
165
- const kit = screen.getByTestId(testId)
166
- const toolbar = kit.querySelector('.toolbar')
167
- expect(toolbar).toBeInTheDocument()
168
- expect(kit).toHaveClass(`${kitClass} inline`)
169
- })
170
-
171
- describe('TipTap Editor Functionality', () => {
172
- test('can type and update content', async () => {
173
- render(<TestAdvancedEditor />)
174
-
175
- const kit = screen.getByTestId(testId)
176
- const editorContent = kit.querySelector('.ProseMirror')
177
-
178
- // Focus and type in the editor
179
- fireEvent.focus(editorContent)
180
- fireEvent.input(editorContent, {
181
- target: { textContent: 'New content' }
182
- })
183
-
184
- await waitFor(() => {
185
- expect(editorContent).toHaveTextContent('New content')
186
- })
187
- })
188
- })
189
- })
190
-
data/app/pb_kits/playbook/pb_timeline/_timeline.scss CHANGED
@@ -43,270 +43,287 @@ $gap_lg: $height_from_top + $space_lg;
43
43
  flex-direction: $flex_direction;
44
44
  }
45
45
 
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
- }
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
- [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
- }
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
- &[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
- }
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
- &[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
- }
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
- &[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;
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
- [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);
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
- &[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);
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
- &[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
- }
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
- [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
- }
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
- &[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
- }
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
- &[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
- }
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
- &[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
- }
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
- &[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
- }
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
+ }
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
  })