playbook_ui 14.5.0.pre.alpha.PBNTR614advancedtablepoc4155 → 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4094

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb

@@ -1,15 +1,5 @@
 <%= pb_content_tag do %>
-  <%= pb_rails(
-    "avatar",
-    props: object.users[0].merge({
-      classname: "pb_multiple_users_stacked_item first_item" +
-                 (object.double_bubble ? " double_bubble" : "") +
-                 (object.triple_bubble ? " triple_bubble" : "") +
-                 (object.quadruple_bubble ? " quadruple_bubble" : ""),
-      dark: object.dark,
-      size: 'xs'          
-    })
-  ) %>
+  <%= pb_rails("avatar", props: object.users[0].merge({size: object.bubble ? "sm" : "xs", classname: "pb_multiple_users_stacked_item first_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}", dark: object.dark}) ) %>
 
   <% unless object.only_one %>
     <% if object.more_than_two && !object.bubble %>
@@ -18,26 +8,14 @@
         text: "+#{object.users.count - object.display_count}",
         variant: "primary",
         rounded: true,
-        classname: "pb_multiple_users_stacked_item second_item"
-      }) %>
+        classname: "pb_multiple_users_stacked_item second_item" }) %>
     <% elsif object.bubble %>
-      <% object.users.slice(1, 3).each_with_index do |item, idx| %>
-        <%= pb_rails(
-          "avatar",
-          props: item.merge({
-            classname: object.bubble_classname(idx),
-            dark: object.dark
-          })
-        ) %>
+      <% object.users.slice(1,3).each_with_index do |item, idx| %>
+        <%= pb_rails("avatar", props: item.merge({size: "xs", classname: "pb_multiple_users_stacked_item #{idx == 0 ? "second_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : idx == 1 ? "third_item#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : "fourth_item"}", dark: object.dark}) ) %>
       <% end %>
     <% else %>
-      <%= pb_rails(
-        "avatar",
-        props: object.users[1].merge({
-          classname: "pb_multiple_users_stacked_item second_item",
-          dark: object.dark
-        })
-      ) %>
+      <%= pb_rails("avatar", props: object.users[1].merge({size: "xs", classname: "pb_multiple_users_stacked_item second_item", dark: object.dark}) ) %>
     <% end %>
   <% end %>
+
 <% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb

@@ -4,9 +4,6 @@ module Playbook
   module PbMultipleUsersStacked
     class MultipleUsersStacked < Playbook::KitBase
       prop :users, type: Playbook::Props::HashArray, required: true
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[sm md lg xl],
-                  default: "sm"
 
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default bubble],
@@ -28,10 +25,6 @@ module Playbook
         variant == "bubble"
       end
 
-      def double_bubble
-        bubble && users.count === 2
-      end
-
       def triple_bubble
         bubble && users.count === 3
       end
@@ -40,31 +33,8 @@ module Playbook
         bubble && users.count > 3
       end
 
-      def size_class
-        "size_#{size}" if bubble
-      end
-
       def classname
-        generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class, size_class)
-      end
-
-      def bubble_classname(index)
-        base_classname = "pb_multiple_users_stacked_item "
-
-        case index
-        when 0
-          base_classname += "second_item"
-          base_classname += " double_bubble" if double_bubble
-          base_classname += " triple_bubble" if triple_bubble
-          base_classname += " quadruple_bubble" if quadruple_bubble
-        when 1
-          base_classname += "third_item"
-          base_classname += " quadruple_bubble" if quadruple_bubble
-        else
-          base_classname += "fourth_item"
-        end
-
-        base_classname
+        generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class)
       end
 
     private

data/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;