Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PLAY-1774] Fix Timeline Label and Step Spacing #4097

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

kangaree
Copy link
Contributor

@kangaree kangaree commented Jan 7, 2025

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

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:

  • LABELS Add a label: enhancement, bug, improvement, new kit, deprecated, or breaking. See Changelog & Labels for details.
  • DEPLOY I have added the milano label to show I'm ready for a review.

@kangaree kangaree added bug Fixes to issues discovered in Playbook (USED IN CHANGELOG) milano 20 MAX - Deploy this PR to a review environment via Milano alpha minor Semver Target labels Jan 7, 2025
@kangaree kangaree requested a review from a team as a code owner January 7, 2025 19:10
Copy link

github-actions bot commented Jan 7, 2025

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5274

Your Alpha for NPM is 14.10.0-alpha.PLAY1774timelinelabelstepspacing5274

nidaqg
nidaqg previously approved these changes Jan 8, 2025
@nidaqg nidaqg added Code Approved Approved by a Playbook Admin and removed Needs Review labels Jan 8, 2025
Copy link

github-actions bot commented Jan 9, 2025

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5314

Your Alpha for NPM is 14.10.0-alpha.PLAY1774timelinelabelstepspacing5314

@kangaree kangaree added alpha and removed alpha labels Jan 9, 2025
Copy link

github-actions bot commented Jan 9, 2025

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5315

Your Alpha for NPM is 14.10.0-alpha.PLAY1774timelinelabelstepspacing5315

@@ -50,7 +50,7 @@ $gap_lg: $height_from_top + $space_lg;
>div {
&:last-child {
flex-basis: auto !important;
[class=pb_timeline_item_step] {
[class^=pb_timeline_item_step] {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the real mvp

Copy link
Contributor

@markdoeswork markdoeswork left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LG2M

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
alpha bug Fixes to issues discovered in Playbook (USED IN CHANGELOG) milano 20 MAX - Deploy this PR to a review environment via Milano minor Semver Target Needs Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants