From 7022aa6722df674a215a7596e104514e9c7e627f Mon Sep 17 00:00:00 2001
From: Gary Kang <gary.kang@powerhrg.com>
Date: Thu, 9 Jan 2025 08:44:59 -0500
Subject: [PATCH] Center step child and connector by align-items instead of
 margin

---
 .../playbook/pb_timeline/_timeline.scss       | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_timeline/_timeline.scss b/playbook/app/pb_kits/playbook/pb_timeline/_timeline.scss
index 83db34482b..9e5c236f2e 100644
--- a/playbook/app/pb_kits/playbook/pb_timeline/_timeline.scss
+++ b/playbook/app/pb_kits/playbook/pb_timeline/_timeline.scss
@@ -68,10 +68,11 @@ $gap_lg: $height_from_top + $space_lg;
                 flex-basis: 100%;
                 [class=pb_timeline_item_step] {
                     @include flex_wrapper(row);
+                    align-items: center;
                     margin-top: $space_xs;
                     margin-bottom: $space_xs;
                     [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                        @include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
                     }
                 }
             }
@@ -79,18 +80,14 @@ $gap_lg: $height_from_top + $space_lg;
                 flex-basis: 100%;
                 [class=pb_timeline_item_step] {
                     @include flex_wrapper(row);
+                    align-items: center;
                     margin-top: $space_xs;
                     margin-bottom: $space_xs;
                     [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                        @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
                     }
                 }
             }
-            [class=pb_timeline_item_step] { 
-                > :first-child:not([class^=pb_icon_circle_kit]) { 
-                    margin-top: $space_xs;
-                }
-            }
         }
         &[class*=_with_date] {
             @include flex_wrapper(row);
@@ -133,7 +130,7 @@ $gap_lg: $height_from_top + $space_lg;
                         margin-top: $space_xs;
                         margin-bottom: $space_xs;
                         [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                            @include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
                         }
                     }
                 }
@@ -157,7 +154,7 @@ $gap_lg: $height_from_top + $space_lg;
                         margin-top: $space_xs;
                         margin-bottom: $space_xs;
                         [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                            @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
                         }
                     }
                 }
@@ -181,11 +178,12 @@ $gap_lg: $height_from_top + $space_lg;
                 flex-basis: 100%;
                 [class=pb_timeline_item_step] {
                     @include flex_wrapper(column);
+                    align-items: center;
                     align-content: flex-start;
                     margin-right: $space_sm;
                     margin-left: $space_sm;
                     [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                        @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
                     }
                 }
                 [class=pb_timeline_item_left_block] {
@@ -201,10 +199,11 @@ $gap_lg: $height_from_top + $space_lg;
                 flex-basis: 100%;
                 [class=pb_timeline_item_step] {
                     @include flex_wrapper(column);
+                    align-items: center;
                     margin-right: $space_sm;
                     margin-left: $space_sm;
                     [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                        @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
                     }
                 }
                 [class=pb_timeline_item_left_block] {
@@ -234,11 +233,12 @@ $gap_lg: $height_from_top + $space_lg;
                     flex-basis: 100%;
                     [class=pb_timeline_item_step] {
                         @include flex_wrapper(column);
+                        align-items: center;
                         align-content: flex-start;
                         margin-right: $space_sm;
                         margin-left: $space_sm;
                         [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                            @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
                         }
                     }
                     [class=pb_timeline_item_left_block] {
@@ -254,10 +254,11 @@ $gap_lg: $height_from_top + $space_lg;
                     flex-basis: 100%;
                     [class=pb_timeline_item_step] {
                         @include flex_wrapper(column);
+                        align-items: center;
                         margin-right: $space_sm;
                         margin-left: $space_sm;
                         [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                            @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
                         }
                     }
                     [class=pb_timeline_item_left_block] {