From 646f4197a8747314f67c2db77b71a36151ddc59a Mon Sep 17 00:00:00 2001 From: Gary Kang Date: Wed, 16 Oct 2024 14:40:01 -0400 Subject: [PATCH 1/6] Fix overflow container bug by using padding instead of outline 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 --- playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss | 3 +-- .../pb_kits/playbook/pb_selectable_card/_selectable_card.scss | 4 +++- 2 files changed, 4 insertions(+), 3 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..06a6b4d8c0 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 @@ -28,7 +28,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 +73,9 @@ $pb_selectable_card_border: 2px; position: relative; @include pb_card_selected; + // Selected card has 1px more border + // Remove 1px so content does not "jump" + padding: calc($space_sm - 1px); transition-property: none; transition-duration: 0s; From ff411187543995912a1773fa65b5cfd4ec877697 Mon Sep 17 00:00:00 2001 From: Gary Kang Date: Wed, 16 Oct 2024 15:11:13 -0400 Subject: [PATCH 2/6] Correct scss calc function --- .../pb_kits/playbook/pb_selectable_card/_selectable_card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 06a6b4d8c0..03bcb297ba 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 @@ -75,7 +75,7 @@ $pb_selectable_card_border: 2px; @include pb_card_selected; // Selected card has 1px more border // Remove 1px so content does not "jump" - padding: calc($space_sm - 1px); + padding: calc(#{$space_sm} - 1px); transition-property: none; transition-duration: 0s; From bece8403b0abb169272c570ccdc0bcb0729afe0e Mon Sep 17 00:00:00 2001 From: Gary Kang Date: Wed, 16 Oct 2024 17:14:45 -0400 Subject: [PATCH 3/6] Account for padding prop and subtract 1px from each size --- .../pb_selectable_card/_selectable_card.scss | 40 ++++++++++++++++++- 1 file changed, 38 insertions(+), 2 deletions(-) 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 03bcb297ba..a96f062958 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; @@ -73,8 +91,6 @@ $pb_selectable_card_border: 2px; position: relative; @include pb_card_selected; - // Selected card has 1px more border - // Remove 1px so content does not "jump" padding: calc(#{$space_sm} - 1px); transition-property: none; transition-duration: 0s; @@ -90,6 +106,26 @@ $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; + } + } + } + } } } From 7dee5c931e61b775b79a4c4f95f1c2f205aabe90 Mon Sep 17 00:00:00 2001 From: Gary Kang Date: Wed, 23 Oct 2024 09:00:05 -0400 Subject: [PATCH 4/6] Use previous correct styles with outline for display input variants --- .../pb_selectable_card/_selectable_card.scss | 28 +++++++++++++++++++ .../pb_selectable_card/_selectable_card.tsx | 1 + .../pb_selectable_card/selectable_card.rb | 6 +++- 3 files changed, 34 insertions(+), 1 deletion(-) 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 a96f062958..528925c4e0 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 @@ -129,6 +129,34 @@ $pb_selectable_paddings: ( } } + &[class*=_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; + } + } + } + } + &.dark { color: $white; > label { 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..eed1df33eb 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 @@ -66,6 +66,7 @@ const SelectableCard = (props: SelectableCardProps) => { 'checked': checked, 'disabled': disabled, 'enabled': !disabled, + 'display_input': variant === 'displayInput', }), { error }, dark ? 'dark' : '', 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..ecbd32a74a 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" : nil + end end end end From 0780dff9e86d5444e4f93c3c84dd2b32c69973f5 Mon Sep 17 00:00:00 2001 From: Gary Kang Date: Wed, 23 Oct 2024 09:10:15 -0400 Subject: [PATCH 5/6] Use dark prop for rails display input card if in dark mode --- .../playbook/pb_selectable_card/selectable_card.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 %> From e098e0a1a4c9fa69c579c93be8be733ad09f10b8 Mon Sep 17 00:00:00 2001 From: Gary Kang Date: Tue, 29 Oct 2024 10:31:29 -0400 Subject: [PATCH 6/6] Keep default classname and separate display_input class Don't affect custom css overrides --- .../pb_kits/playbook/pb_selectable_card/_selectable_card.scss | 2 +- .../pb_kits/playbook/pb_selectable_card/_selectable_card.tsx | 2 +- .../pb_kits/playbook/pb_selectable_card/selectable_card.rb | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) 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 528925c4e0..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 @@ -129,7 +129,7 @@ $pb_selectable_paddings: ( } } - &[class*=_display_input] { + &.display_input { input[type="checkbox"], input[type="radio"] { &:checked { 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 eed1df33eb..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 @@ -66,8 +66,8 @@ const SelectableCard = (props: SelectableCardProps) => { 'checked': checked, 'disabled': disabled, 'enabled': !disabled, - 'display_input': variant === 'displayInput', }), + variant === 'displayInput' ? 'display_input' : '', { error }, dark ? 'dark' : '', className 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 ecbd32a74a..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, display_input_class), + generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class) + display_input_class, error_class, dark_props, ].compact.join(" ") @@ -81,7 +81,7 @@ def error_class end def display_input_class - variant == "display_input" ? "display_input" : nil + variant == "display_input" ? " display_input" : "" end end end