playbook_ui 14.12.0.pre.alpha.PBNTR720railscarddraggable5649 → 14.12.0.pre.alpha.PLAY1602lightboxoverlapnitrobug5655

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bfb340a31e2bb74d3749938720b1a44b2217e841d785f287f45499b70d8f03e5
-  data.tar.gz: 3cc515a9004e7a4558bd62bbda022c354e2fdfd15a9bd2541324a9d50287ae5c
+  metadata.gz: e4e36bc39d271fc8c5799f840523e24a02597aec41b0191a8aeca562b4ed325b
+  data.tar.gz: 3e057e647fb29b4c367d1508292b5ae7a9c923c0aaa02e771c24a33173375c84
 SHA512:
-  metadata.gz: 93eab8412f7e086ffd7fa534aff415b0f648ec73e247a281cd1e2dc357144dc90bf2d63dc7c36c027769b2ee6e7d1355852cf5f36b159a3559f2a491315dc174
-  data.tar.gz: 4a15e5855591a6a817a683f701958ccae8b6b10d1a9d825c9ebcff15c4e3b276b5eb08c12f7858f82ea6d8604fbdd0aee419dddffe02012b0992891767f46a16
+  metadata.gz: 9e4cd81b8cd28c013f41856ad9033d11f3cf2cf9e1c4db7cfbec611401dd9d8c3842a44c6a2be3f2030979f8bf52ebfdb236b3b8a4ca32ba928bd7b896cf93fe
+  data.tar.gz: c8d25c303eb65eef3ba5d59502429fbaf9d9220bbe798395fd48ed02dc90fa296cf78607294db601be3a0eae591236d46c15908544799c4c825308e2b630b0f0

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -1,24 +1,5 @@
-<% if object.draggable_item %>
-    <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
-        <%= pb_content_tag(object.tag) do %>
-            <% if object.draggable_item %>
-                <%= pb_rails("flex", props: { align: "center" }) do %>
-                    <% if object.drag_handle %>
-                        <span classname="card_draggable_handle">
-                            <%= pb_rails("icon", props: { icon: "grip-dots-vertical", padding_right: "xs" }) %>
-                        </span>
-                    <% end %>
-                    <div style="width: 100%">
-                        <%= content.presence %>
-                    </div>
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% else %>
-    <%= pb_content_tag(object.tag) do %>
-        <%= content.presence %>
-    <% end %>
+<%= pb_content_tag(object.tag) do %>
+    <%= content.presence %>
 <% end %>
 
 

data/app/pb_kits/playbook/pb_card/card.rb

@@ -17,13 +17,6 @@ module Playbook
       prop :background, type: Playbook::Props::Enum,
                         values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
                         default: "none"
-      prop :drag_id, type: Playbook::Props::String
-      prop :draggable_item, type: Playbook::Props::Boolean,
-                            default: false
-      prop :drag_handle, type: Playbook::Props::Boolean,
-                         default: true
-      prop :items, type: Playbook::Props::Array,
-                   default: []
 
       def classname
         generate_classname("pb_card_kit",

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb

@@ -7,7 +7,8 @@
 <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
   <%= pb_rails("draggable/draggable_container") do %>
     <% initial_items.each do |item| %>
-        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs", drag_id: item[:id], draggable_item: true }) do %>
+      <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
           <%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
             <%= pb_rails("flex", props:{gap: "xs"}) do %>
               <%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
@@ -31,6 +32,7 @@
             <% end %>
           <% end %>
         <% end %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md

@@ -1,7 +0,0 @@
-For a simplified version of the Draggable API for the Card kit, you can do the following:
-
-Use the `draggable` kit and manage state as shown.
-
-`draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
-
-The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.

data/app/pb_kits/playbook/pb_lightbox/lightbox.scss

@@ -2,6 +2,7 @@
 @import "../tokens/screen_sizes";
 
 $slides-margin: $space-md;
+$lightbox-z-index-floor: 9999900;
 
  .carousel {
 
@@ -13,7 +14,7 @@ $slides-margin: $space-md;
     top: 0;
     left: 0;
     right: 0;
-    z-index: 9999999;
+    z-index: $lightbox-z-index-floor + 99;
     align-items: center;
     transition: all .5s;
 
@@ -55,7 +56,7 @@ $slides-margin: $space-md;
   justify-content: space-between;
   flex-direction: column;
   background-color: black;
-  z-index: 1;
+  z-index: $lightbox-z-index-floor + 1;
   overflow: hidden;
 }
 
@@ -63,7 +64,7 @@ $slides-margin: $space-md;
   display: flex;
   height: calc(100% - 120px);
   width: 100%;
-  z-index: 1;
+  z-index: $lightbox-z-index-floor + 1;
 
   [class^="react-transform-wrapper"] {
     flex-shrink: 0;
@@ -87,7 +88,7 @@ $slides-margin: $space-md;
   .carousel-arrow-left {
     display: block;
     position: absolute;
-    z-index: 4;
+    z-index: $lightbox-z-index-floor + 4;
     top: 50%;
     @media only screen and (max-width: $screen-xs-max) {
       display: none;
@@ -97,7 +98,7 @@ $slides-margin: $space-md;
   .carousel-arrow-right {
     display: block;
     position: absolute;
-    z-index: 4;
+    z-index: $lightbox-z-index-floor + 4;
     top: 50%;
     right: 0;
     @media only screen and (max-width: $screen-xs-max) {
@@ -140,7 +141,7 @@ $slides-margin: $space-md;
   width: 100vw;
   padding: 3px;
   overflow: scroll;
-  z-index: 20;
+  z-index: $lightbox-z-index-floor + 20;
   &.centered {
     justify-content: center;
   }