From f8db614fd5b9e913b47405a00cee91c1d58360d9 Mon Sep 17 00:00:00 2001
From: Gary Kang <42440452+kangaree@users.noreply.github.com>
Date: Thu, 31 Oct 2024 15:22:49 -0400
Subject: [PATCH] [PLAY-1485] Fix overflow container bug by using padding
instead of outline (#3807)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
**What does this PR do?**
In [PLAY-829](https://runway.powerhrg.com/backlog_items/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
**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:
- [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.
---
.../pb_kits/playbook/pb_card/_card_mixin.scss | 3 +-
.../pb_selectable_card/_selectable_card.scss | 68 ++++++++++++++++++-
.../pb_selectable_card/_selectable_card.tsx | 1 +
.../selectable_card.html.erb | 2 +-
.../pb_selectable_card/selectable_card.rb | 6 +-
5 files changed, 75 insertions(+), 5 deletions(-)
diff --git a/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss b/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss
index a3781bf2ac..f15d002ee0 100755
--- a/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss
+++ b/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss
@@ -28,8 +28,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
@mixin pb_card_selected($border_color: $primary) {
border-color: $border_color;
- border-width: $pb_card_border_width;
- outline: 1px solid $border_color;
+ border-width: $pb_card_border_width * 2;
}
@mixin pb_card_selected_dark {
diff --git a/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss b/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss
index f2dda25c0d..e84ccb6d81 100644
--- a/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss
+++ b/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss
@@ -10,6 +10,24 @@
$pb_selectable_card_indicator_size: 22px;
$pb_selectable_card_border: 2px;
+$pb_selectable_space_classes: (
+ xxs: $space_xxs,
+ xs: $space_xs,
+ sm: $space_sm,
+ md: $space_md,
+ lg: $space_lg,
+ xl: $space_xl,
+);
+$pb_selectable_paddings: (
+ p: "padding",
+ pr: "padding-right",
+ pl: "padding-left",
+ pt: "padding-top",
+ pb: "padding-bottom",
+ px: ("padding-left", "padding-right"),
+ py: ("padding-top", "padding-bottom")
+);
+
[class^=pb_selectable_card_kit] {
display: block;
margin-bottom: 0;
@@ -28,7 +46,6 @@ $pb_selectable_card_border: 2px;
padding: $space_sm;
margin-bottom: $space_sm;
cursor: pointer;
- outline: 1px solid transparent;
@media (hover:hover) {
&:hover {
@@ -74,6 +91,7 @@ $pb_selectable_card_border: 2px;
position: relative;
@include pb_card_selected;
+ padding: calc(#{$space_sm} - 1px);
transition-property: none;
transition-duration: 0s;
@@ -88,6 +106,54 @@ $pb_selectable_card_border: 2px;
background-color: $royal;
}
}
+
+ // Selected card has 1px more border
+ // Remove 1px so content does not "jump"
+ @each $position_name,
+ $position in $pb_selectable_paddings {
+ @each $space_name,
+ $space in $pb_selectable_space_classes {
+ ~ label.#{$position_name}_#{$space_name} {
+ @if type-of($position)=="list" {
+ @each $coordinate in $position {
+ #{$coordinate}: calc(#{$space} - 1px) !important;
+ }
+ }
+
+ @else {
+ #{$position}: calc(#{$space} - 1px) !important;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ &.display_input {
+ input[type="checkbox"],
+ input[type="radio"] {
+ &:checked {
+ ~label {
+ border-width: $pb_card_border_width;
+ outline: 1px solid $primary;
+ }
+
+ }
+ }
+
+ > label {
+ outline: 1px solid transparent;
+ padding: $space_sm;
+ }
+
+ &.dark {
+ input[type="checkbox"],
+ input[type="radio"] {
+ &:checked ~ label {
+ border-width: $pb_card_border_width;
+ outline: 1px solid $primary;
+ }
+ }
}
}
diff --git a/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx b/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx
index 923f602710..8b53177f62 100644
--- a/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx
+++ b/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx
@@ -67,6 +67,7 @@ const SelectableCard = (props: SelectableCardProps) => {
'disabled': disabled,
'enabled': !disabled,
}),
+ variant === 'displayInput' ? 'display_input' : '',
{ error },
dark ? 'dark' : '',
className
diff --git a/playbook/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb b/playbook/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb
index 0618d35d17..e3f997a773 100644
--- a/playbook/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb
@@ -25,7 +25,7 @@
<% end %>
- <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
+ <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) do %>
<% if content.nil? %>
<%= pb_rails("body", props: { text: object.text }) %>
<% else %>
diff --git a/playbook/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb b/playbook/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb
index a9934da1d4..6b6b2e6158 100644
--- a/playbook/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb
+++ b/playbook/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb
@@ -25,7 +25,7 @@ class SelectableCard < Playbook::KitBase
def classname
[
- generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
+ generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class) + display_input_class,
error_class,
dark_props,
].compact.join(" ")
@@ -79,6 +79,10 @@ def enable_disabled_class
def error_class
error ? "error" : nil
end
+
+ def display_input_class
+ variant == "display_input" ? " display_input" : ""
+ end
end
end
end