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.

Sign up for GitHub

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

Jump to bottom

[PLAY-1485] Fix overflow container bug by using padding instead of outline #3807

Merged
merged 10 commits into from
Oct 31, 2024
Merged

[PLAY-1485] Fix overflow container bug by using padding instead of outline #3807

merged 10 commits into from
Oct 31, 2024

Conversation

kangaree
Copy link
Contributor

@kangaree kangaree commented Oct 16, 2024 •
edited
Loading

What does this PR do?

In PLAY-829, we removed the buffer to fix content alignment issues and added an outline so the content would not 'jump' (which was handled originally by the buffer).

  • Fix overflow container bug by using padding instead of outline
  • Subtract 1px of padding in the selected label container to account for the extra 1px border of selected label
  • Do this for all padding sizes xxs to xl
  • For "selectable cards", keep an outline as the content is different (a padding 0 div wrapped around flex and cards)
  • Fix the dark mode for rails and apply it to the card

Screenshots: Screenshots to visualize your addition/change
Screenshot 2024-10-30 at 10 25 07 AM

Screenshot 2024-10-23 at 9 15 54 AM

How to test? Steps to confirm the desired behavior:

  1. Go to the Playbook Website
  2. Go to the Selectable Card kit
  3. Click the cards
  4. Make sure the content does not "jump" or shift around and stays in place
  5. Go to the Nitro test env
  6. Use the Impersonation Flyout
  7. Search by title so multiple results show (e.g., "Nitro Quality Ninja")
  8. The selected card should not be cut off
  9. If you select a card, the content should not "jump" or shift around
  10. Since there are multiple employees, everything should fit in the overlay- the impersonate and cancel button should fit on the overlay and not be below a scroll.

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
Fix overflow container bug by using padding instead of outline
646f419 
In PLAY-829, we removed the buffer and added an outline
so the content would not 'jump'
Use padding of the label container, but still remove the buffer
@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 labels Oct 16, 2024
@kangaree kangaree requested review from a team as code owners October 16, 2024 18:48
@github-actions GitHub Actions
Copy link

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4094

Your Alpha for NPM is 14.5.0-alpha.PLAY1485selectablecardoverflowoutlinebug4094

@kangaree kangaree changed the title [PLAT-1485] Fix overflow container bug by using padding instead of outline [PLAY-1485] Fix overflow container bug by using padding instead of outline Oct 16, 2024
@kangaree kangaree added alpha and removed alpha labels Oct 16, 2024
@github-actions GitHub Actions
Copy link

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4097

Your Alpha for NPM is 14.5.0-alpha.PLAY1485selectablecardoverflowoutlinebug4097

@kangaree kangaree added alpha and removed alpha labels Oct 16, 2024
@github-actions GitHub Actions
Copy link

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4098

Your Alpha for NPM is 14.5.0-alpha.PLAY1485selectablecardoverflowoutlinebug4098

@kangaree kangaree added the Product Approved pending technical review, OK to merge to master label Oct 21, 2024
@kangaree kangaree added alpha and removed alpha labels Oct 23, 2024
@github-actions GitHub Actions
Copy link

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4216

Your Alpha for NPM is 14.5.0-alpha.PLAY1485selectablecardoverflowoutlinebug4216

@kangaree kangaree added alpha and removed alpha labels Oct 23, 2024
@github-actions GitHub Actions
Copy link

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 14.6.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4222

Your Alpha for NPM is 14.6.0-alpha.PLAY1485selectablecardoverflowoutlinebug4222

@kangaree kangaree added alpha and removed alpha labels Oct 25, 2024
@github-actions GitHub Actions
Copy link

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 14.6.2.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4247

Your Alpha for NPM is 14.6.2-alpha.PLAY1485selectablecardoverflowoutlinebug4247

@kangaree kangaree added alpha and removed alpha labels Oct 29, 2024
@github-actions GitHub Actions
Copy link

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 14.6.2.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4274

Your Alpha for NPM is 14.6.2-alpha.PLAY1485selectablecardoverflowoutlinebug4274

@nidaqg nidaqg added the Code Approved Approved by a Playbook Admin label Oct 31, 2024
@kangaree kangaree added milano 20 MAX - Deploy this PR to a review environment via Milano and removed milano 20 MAX - Deploy this PR to a review environment via Milano labels Oct 31, 2024
@jasperfurniss jasperfurniss added this pull request to the merge queue Oct 31, 2024
Merged via the queue into master with commit f8db614 Oct 31, 2024
6 checks passed
@jasperfurniss jasperfurniss deleted the PLAY-1485-selectablecard-overflow-outline-bug branch October 31, 2024 19:23
@github-actions GitHub Actions
Copy link

You merged this pr to master branch:
- Ruby Gem: 14.7.0.pre.rc.7
- NPM: 14.7.0-rc.7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jasperfurniss jasperfurniss jasperfurniss left review comments

@nidaqg nidaqg nidaqg approved these changes

Assignees
No one assigned
Labels
alpha bug Fixes to issues discovered in Playbook (USED IN CHANGELOG) Code Approved Approved by a Playbook Admin milano 20 MAX - Deploy this PR to a review environment via Milano Product Approved pending technical review, OK to merge to master
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@kangaree @jasperfurniss @nidaqg