playbook_ui 14.6.2.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4247 → 14.6.2.pre.alpha.PLAY1538READMEroot4254

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0896cae36211162e8819470663f9dedb1716254cd40cb3a59c20caafd4d23b2d'
-  data.tar.gz: 713356bd680806bce64921cdcdd51e74e562b79b9cee92bff6b7d2ef4602e436
+  metadata.gz: 937d12c02fb86c6d950583e46f9c6755dd0ef0351b84f5400bfdf69d95278f66
+  data.tar.gz: 9ee029fd5a953bddb672d6cba2979934c46da0931d8ddc918e3a284e8daaa97a
 SHA512:
-  metadata.gz: 41b0df84cd4c1c54944f10026c6fb846bf9cff9016a376750c904321c40b0f7f16a4bf7372078f5d8a8d1f2048766c0726aabf89da3c0db5e79a2f41ecdb62b9
-  data.tar.gz: 92d6d3a078efc32f7de1cff32648381ac14d1bf74ff33ea749ca9fd50d61f5991a2a5a4a9661fb2c50688c6df4880ee34f78dd631882e973abec6b43d805d7a4
+  metadata.gz: ba93111f6a67037128bac6847e70f71ced20a53a047ba24184e033b411c687b975b5dc73bddca4cfe8ebf27384c68915e7cc2d4e1f226bc6738ab010564704cb
+  data.tar.gz: c87c6bca69f6d8d5a2ddec7b2f11a4bd7d430ffc0b673a427b2b6cf6f8740c967bbe9b5553217da385e4d839cba3899f45961097c33a0b927afd1892057d455b

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -28,7 +28,8 @@ $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 * 2;
+  border-width: $pb_card_border_width;
+  outline: 1px solid $border_color;
 }
 
 @mixin pb_card_selected_dark {

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -10,24 +10,6 @@
 $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;
@@ -46,6 +28,7 @@ $pb_selectable_paddings: (
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
+    outline: 1px solid transparent;
 
     @media (hover:hover) {
       &:hover {
@@ -91,7 +74,6 @@ $pb_selectable_paddings: (
 
         position: relative;
         @include pb_card_selected;
-        padding: calc(#{$space_sm} - 1px);
         transition-property: none;
         transition-duration: 0s;
 
@@ -106,54 +88,6 @@ $pb_selectable_paddings: (
           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;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &[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;
-        }
-      }
     }
   }
 

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -66,7 +66,6 @@ const SelectableCard = (props: SelectableCardProps) => {
       'checked': checked,
       'disabled': disabled,
       'enabled': !disabled,
-      'display_input': variant === 'displayInput',
     }),
   { error },
   dark ? 'dark' : '',

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -25,7 +25,7 @@
           <% end %>
           <div class="separator"></div>
           <div class="psuedo_separator"></div>
-          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) do %>
+          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
             <% if content.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -25,7 +25,7 @@ module Playbook
 
       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),
           error_class,
           dark_props,
         ].compact.join(" ")
@@ -79,10 +79,6 @@ module Playbook
       def error_class
         error ? "error" : nil
       end
-
-      def display_input_class
-        variant == "display_input" ? "display_input" : nil
-      end
     end
   end
 end