Skip to content

Commit fba7adb

Browse files
kangareekangaree
authored
[PLAY-1774] Fix Timeline Label and Step Spacing (#4097)
**What does this PR do?** - Remove 0 height which breaks padding and margin for Timeline labels - Use flex align-items: center to center step children and connectors - Remove margin that was centering step children/connectors before - Correct step children CSS (add ^ "starts with" so you can add global props like "pb_timeline_item_step my_xxs") **Screenshots:** Screenshots to visualize your addition/change ![Screenshot 2025-01-09 at 9 25 05 AM](https://github.com/user-attachments/assets/6ade2b70-07c1-4f09-95ea-0ad9c78afa0b) **How to test?** Steps to confirm the desired behavior: 1. Go to https://runway.powerhrg.com/backlog_items/PLAY-1774 2. View the code sandbox and make sure 3. Padding works as expected on labels 4. The step "children" (online status and icons) are centered with the "connectors" #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review.
1 parent 98776f3 commit fba7adb

File tree

1 file changed

+30
-30
lines changed

1 file changed

+30
-30
lines changed

‎playbook/app/pb_kits/playbook/pb_timeline/_timeline.scss

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ $gap_lg: $height_from_top + $space_lg;
5050
>div {
5151
&:last-child {
5252
flex-basis: auto !important;
53-
[class=pb_timeline_item_step] {
53+
[class^=pb_timeline_item_step] {
5454
[class=pb_timeline_item_connector] {
5555
opacity: 0;
5656
}
@@ -66,29 +66,25 @@ $gap_lg: $height_from_top + $space_lg;
6666
[class*=pb_timeline_item_kit] {
6767
&[class*=_solid] {
6868
flex-basis: 100%;
69-
[class=pb_timeline_item_left_block] {
70-
height: 0px;
71-
}
72-
[class=pb_timeline_item_step] {
69+
[class^=pb_timeline_item_step] {
7370
@include flex_wrapper(row);
71+
align-items: center;
7472
margin-top: $space_xs;
7573
margin-bottom: $space_xs;
7674
[class=pb_timeline_item_connector] {
77-
@include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
75+
@include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
7876
}
7977
}
8078
}
8179
&[class*=_dotted] {
8280
flex-basis: 100%;
83-
[class=pb_timeline_item_left_block] {
84-
height: 0;
85-
}
86-
[class=pb_timeline_item_step] {
81+
[class^=pb_timeline_item_step] {
8782
@include flex_wrapper(row);
83+
align-items: center;
8884
margin-top: $space_xs;
8985
margin-bottom: $space_xs;
9086
[class=pb_timeline_item_connector] {
91-
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
87+
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
9288
}
9389
}
9490
}
@@ -99,7 +95,7 @@ $gap_lg: $height_from_top + $space_lg;
9995
>div {
10096
&:last-child {
10197
flex-basis: auto !important;
102-
[class=pb_timeline_item_step] {
98+
[class^=pb_timeline_item_step] {
10399
[class=pb_timeline_item_connector] {
104100
opacity: 0;
105101
}
@@ -129,12 +125,12 @@ $gap_lg: $height_from_top + $space_lg;
129125
}
130126
}
131127
}
132-
[class=pb_timeline_item_step] {
128+
[class^=pb_timeline_item_step] {
133129
@include flex_wrapper(row);
134130
margin-top: $space_xs;
135131
margin-bottom: $space_xs;
136132
[class=pb_timeline_item_connector] {
137-
@include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
133+
@include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
138134
}
139135
}
140136
}
@@ -153,12 +149,12 @@ $gap_lg: $height_from_top + $space_lg;
153149
}
154150
}
155151
}
156-
[class=pb_timeline_item_step] {
152+
[class^=pb_timeline_item_step] {
157153
@include flex_wrapper(row);
158154
margin-top: $space_xs;
159155
margin-bottom: $space_xs;
160156
[class=pb_timeline_item_connector] {
161-
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
157+
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
162158
}
163159
}
164160
}
@@ -170,7 +166,7 @@ $gap_lg: $height_from_top + $space_lg;
170166
align-items: flex-start;
171167
align-self: auto;
172168
>div:last-child {
173-
[class=pb_timeline_item_step] {
169+
[class^=pb_timeline_item_step] {
174170
[class=pb_timeline_item_connector] {
175171
opacity: 0;
176172
}
@@ -180,13 +176,14 @@ $gap_lg: $height_from_top + $space_lg;
180176
@include flex_wrapper(row);
181177
&[class*=_solid] {
182178
flex-basis: 100%;
183-
[class=pb_timeline_item_step] {
179+
[class^=pb_timeline_item_step] {
184180
@include flex_wrapper(column);
181+
align-items: center;
185182
align-content: flex-start;
186183
margin-right: $space_sm;
187184
margin-left: $space_sm;
188185
[class=pb_timeline_item_connector] {
189-
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
186+
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
190187
}
191188
}
192189
[class=pb_timeline_item_left_block] {
@@ -200,12 +197,13 @@ $gap_lg: $height_from_top + $space_lg;
200197
}
201198
&[class*=_dotted] {
202199
flex-basis: 100%;
203-
[class=pb_timeline_item_step] {
200+
[class^=pb_timeline_item_step] {
204201
@include flex_wrapper(column);
202+
align-items: center;
205203
margin-right: $space_sm;
206204
margin-left: $space_sm;
207205
[class=pb_timeline_item_connector] {
208-
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
206+
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
209207
}
210208
}
211209
[class=pb_timeline_item_left_block] {
@@ -223,7 +221,7 @@ $gap_lg: $height_from_top + $space_lg;
223221
align-items: flex-start;
224222
align-self: auto;
225223
>div:last-child {
226-
[class=pb_timeline_item_step] {
224+
[class^=pb_timeline_item_step] {
227225
[class=pb_timeline_item_connector] {
228226
opacity: 0;
229227
}
@@ -233,13 +231,14 @@ $gap_lg: $height_from_top + $space_lg;
233231
@include flex_wrapper(row);
234232
&[class*=_solid] {
235233
flex-basis: 100%;
236-
[class=pb_timeline_item_step] {
234+
[class^=pb_timeline_item_step] {
237235
@include flex_wrapper(column);
236+
align-items: center;
238237
align-content: flex-start;
239238
margin-right: $space_sm;
240239
margin-left: $space_sm;
241240
[class=pb_timeline_item_connector] {
242-
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
241+
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
243242
}
244243
}
245244
[class=pb_timeline_item_left_block] {
@@ -253,12 +252,13 @@ $gap_lg: $height_from_top + $space_lg;
253252
}
254253
&[class*=_dotted] {
255254
flex-basis: 100%;
256-
[class=pb_timeline_item_step] {
255+
[class^=pb_timeline_item_step] {
257256
@include flex_wrapper(column);
257+
align-items: center;
258258
margin-right: $space_sm;
259259
margin-left: $space_sm;
260260
[class=pb_timeline_item_connector] {
261-
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
261+
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
262262
}
263263
}
264264
[class=pb_timeline_item_left_block] {
@@ -274,7 +274,7 @@ $gap_lg: $height_from_top + $space_lg;
274274
}
275275
&[class*=_gap_xs] {
276276
[class*=pb_timeline_item_kit] {
277-
[class=pb_timeline_item_step] {
277+
[class^=pb_timeline_item_step] {
278278
[class=pb_timeline_item_connector] {
279279
height: $gap_xs !important;
280280
}
@@ -283,7 +283,7 @@ $gap_lg: $height_from_top + $space_lg;
283283
}
284284
&[class*=_gap_sm] {
285285
[class*=pb_timeline_item_kit] {
286-
[class=pb_timeline_item_step] {
286+
[class^=pb_timeline_item_step] {
287287
[class=pb_timeline_item_connector] {
288288
height: $gap_sm !important;
289289
}
@@ -292,7 +292,7 @@ $gap_lg: $height_from_top + $space_lg;
292292
}
293293
&[class*=_gap_md] {
294294
[class*=pb_timeline_item_kit] {
295-
[class=pb_timeline_item_step] {
295+
[class^=pb_timeline_item_step] {
296296
[class=pb_timeline_item_connector] {
297297
height: $gap_md !important;
298298
}
@@ -301,7 +301,7 @@ $gap_lg: $height_from_top + $space_lg;
301301
}
302302
&[class*=_gap_lg] {
303303
[class*=pb_timeline_item_kit] {
304-
[class=pb_timeline_item_step] {
304+
[class^=pb_timeline_item_step] {
305305
[class=pb_timeline_item_connector] {
306306
height: $gap_lg !important;
307307
}

0 commit comments

Comments
 (0)