playbook_ui 14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5341 → 14.11.1.pre.alpha.play1724darkmodeauditmap5409

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d4151d717eddca9843cbee0cfc1bb9749f739689a6b2e59dc4008a54f93abeba
-  data.tar.gz: 96d539dc7f12d61d3a1ef76e6018731f7f244ef9972e21d81c404e85a292405d
+  metadata.gz: e83117499bb2e6cbb6cea842eca16b0ccb5e6275695a2d26de0f256d23c04071
+  data.tar.gz: 9b69eec065deee4a74d8b98ae4042152ee5662ce230cdcd8d73772a77cb48c5c
 SHA512:
-  metadata.gz: c4ca0515955bc7b8f7b2e1b235e3361e6e9cfe8ef38e7e2969aa99196439399ba473b0e7d75cab6ad617813bff735c00d9782762d57090cbf45d2b13efa2dd18
-  data.tar.gz: 26428d2ec5528dcdf8b5d7efb8935e4efe7726c848502bc54847f1bc251ac06d30df8de8a1b32567b7f851a73789c57a51f4141dbc7f2179f00a2b6f67084c9c
+  metadata.gz: ae9fb865c35f071e2a77222453f19650f0c7de2ddae2cdd3560d1404a17ea90bbbea8c57223d17ee5e87b86561ecf65b5041546433a9d105f10ce615ae110f4f
+  data.tar.gz: a9c422d27b2373459e97a812436a86c7c91b499afc91429ca445606187e4dd2a658573936a119178b5ca41c9d462f062ea97ab16aa8bbad3bdb212fdad303447

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,5 +1,6 @@
-<%= pb_content_tag(object.tag,
-                object.tag == "button" ? object.options : object.link_options) do %>
+<%= content_tag(object.tag,
+                object.tag == "button" ? object.options : object.link_options,
+                **combined_html_options) do %>
     <% if object.variant === "reaction" %>
         <% if icon && object.valid_emoji(object.icon) %>
             <%= pb_rails("flex", props:{ align: "center" }) do %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:label) do %>
+<%= content_tag(:label, aria: object.aria,
+                        id: object.id,
+                        data: object.data,
+                        class: object.classname,
+                        **combined_html_options
+                ) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
     <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,5 +1,9 @@
-<%= pb_content_tag(:div,
-    class: object.classname + object.error_class) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname + object.error_class,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -1,14 +1,19 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <% if object.label.present? %>
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input
-            data-default-value="<%= input_default_value %>"
-            id="dropdown-selected-option"
-            name="<%= object.name %>"
-            style="display: none"
-            <%= object.required ? "required" : ""%>
+        <input 
+            data-default-value="<%= input_default_value %>" 
+            id="dropdown-selected-option" 
+            name="<%= object.name %>" 
+            style="display: none" 
+            <%= object.required ? "required" : ""%> 
         />
         <% if content.present? %>
             <%= content.presence %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -1,15 +1,20 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
-            <% if content.present? %>
+            <% if content.present? %> 
                 <%= content.presence %>
-            <% else %>
+            <% else %> 
                 <%= pb_rails("list/item", props: {
-                    display: "flex",
-                    justify_content: "center",
-                    padding:"xs",
-                    }) do %>
+                    display: "flex", 
+                    justify_content: "center", 
+                    padding:"xs", 
+                    }) do %> 
                         <%= pb_rails("body", props: {text: "No option"}) %>
                 <% end %>
             <% end %>
-    <% end %>
-<% end %>
+    <% end %>        
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -1,10 +1,15 @@
-<%= pb_content_tag(:div, id: object.option[:id]) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.option[:id],
+    **combined_html_options) do %>
     <%= pb_rails("list/item", props: {
-        display: "flex",
-        justify_content: "center",
-        padding:"none",
+        display: "flex", 
+        justify_content: "center", 
+        padding:"none", 
         cursor: "pointer"
-        }) do %>
+        }) do %> 
             <div class="dropdown_option_wrapper">
                 <% if content.present? %>
                     <%= content.presence %>
@@ -13,4 +18,4 @@
                 <% end %>
             </div>
     <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -1,16 +1,21 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <% if content.present? %>
         <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
           <%= content.presence %>
         </div>
     <% else %>
     <%= pb_rails("flex", props: {
-        align: "center",
-        border_radius:"lg",
-        classname: object.trigger_wrapper_classes,
-        cursor: "pointer",
-        justify: "between",
-        padding_x:"sm",
+        align: "center", 
+        border_radius:"lg", 
+        classname: object.trigger_wrapper_classes, 
+        cursor: "pointer", 
+        justify: "between", 
+        padding_x:"sm", 
         padding_y:"xs",
         html_options: {tabindex:"0"}
         }) do %>
@@ -18,7 +23,7 @@
             <%= pb_rails("flex", props: {align: "center"}) do %>
                 <% if object.custom_display.present?  %>
                     <%= pb_rails("flex", props: {align: "center"}) do %>
-                        <div id="dropdown_trigger_custom_display" style="display: none;">
+                        <div id="dropdown_trigger_custom_display" style="display: none;"> 
                             <%= object.custom_display %>
                         </div>
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
@@ -35,3 +40,4 @@
     <% end %>
     <% end %>
 <% end %>
+      

data/app/pb_kits/playbook/pb_map/_map.scss

@@ -3,6 +3,7 @@
 @import "../tokens/shadows";
 @import "../tokens/border_radius";
 @import "./_pb_map_button_mixin.scss";
+@import "../tokens/titles";
 
 [class*="pb_map"] {
   .pb_map-custom-button {
@@ -159,6 +160,7 @@
   }
 
   .maplibregl-popup-content {
+    @include pb_title_4;
     padding: $space_sm;
     background-color: $card_light;
     box-shadow: $shadow_deeper;
@@ -194,6 +196,7 @@
     }
 
     .maplibregl-popup-content {
+      @include pb_title_4;
       background-color: $bg_dark;
       color: $text_dk_default;
     }

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -25,12 +25,12 @@ const MapDefault = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML('Hello World!')) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll
         map.scrollZoom.disable();
-        
+
         //add attributioncontrols
         map.addControl(new maplibregl.AttributionControl({
           compact: true
@@ -49,7 +49,7 @@ const MapDefault = (props) => {
 
     }, [])
 
-return ( 
+return (
   <Map flyTo
       flyToClick={()=> {handleFlyTo(mapInstance)}}
       zoomBtns
@@ -63,7 +63,7 @@ return (
               position: 'absolute',
               left: 0,
               right: 0,
-              top: 0, 
+              top: 0,
               bottom: 0,
            }}
        />

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -25,12 +25,12 @@ const MapWithCustomButton = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML('Hello World!')) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll
         map.scrollZoom.disable();
-        
+
         //add attributioncontrols
         map.addControl(new maplibregl.AttributionControl({
           compact: true
@@ -49,8 +49,8 @@ const MapWithCustomButton = (props) => {
 
     }, [])
 
-return ( 
-  <Map 
+return (
+  <Map
       {...props}
   >
     <Map.Controls flyTo
@@ -59,10 +59,10 @@ return (
         zoomInClick={() => {handleZoomIn(mapInstance)}}
         zoomOutClick={()=> {handleZoomOut(mapInstance)}}
     >
-      <MapCustomButton icon="home" 
+      <MapCustomButton icon="home"
           onClick={() => alert("button clicked!")}
       />
-      <MapCustomButton icon="search" 
+      <MapCustomButton icon="search"
           onClick={() => alert("button clicked!")}
       />
     </Map.Controls>
@@ -72,7 +72,7 @@ return (
               position: 'absolute',
               left: 0,
               right: 0,
-              top: 0, 
+              top: 0,
               bottom: 0,
            }}
        />

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -25,7 +25,7 @@ const MapWithPlugin = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML('Hello World!')) // add popup
         .addTo(map);
 
         //add maplibre default zoom controls
@@ -48,7 +48,7 @@ const MapWithPlugin = (props) => {
         map.addControl(new maplibregl.AttributionControl({
             compact: true
         }));
-          
+
         //set map instance
         setMapInstance(map)
     }
@@ -62,8 +62,8 @@ const MapWithPlugin = (props) => {
     }, [])
 
 
-    
-return ( 
+
+return (
   <Map flyTo
       flyToClick={()=> {handleFlyTo(mapInstance)}}
       zoomBtns
@@ -77,7 +77,7 @@ return (
               position: 'absolute',
               left: 0,
               right: 0,
-              top: 0, 
+              top: 0,
               bottom: 0,
            }}
        />

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss

@@ -1,7 +1,7 @@
 @import "../../tokens/screen_sizes";
+@import "../../tokens/border_radius";
 
 .table-responsive-scroll {
-    display: block;
     overflow-x: scroll;
 
     // hides duplicate scroll bar for those that see two (byproduct of repeated table-responsive-scroll class
@@ -27,11 +27,12 @@
     // Responsive Styles
     @media (max-width: 1600px) {
         &[class*="table-responsive-scroll"] {
-            border-radius: 4px;
-            box-shadow: 1px 0 0 0px $border_light,
+                &:has(> table.table-card) {
+                    border-radius: $border_rad_light;
+                    box-shadow: 1px 0 0 0px $border_light,
                         -1px 0 0 0px $border_light
-        }
-
+                }
+            }
         &[class^=pb_table].table-sm.table-card thead tr th:first-child,
         &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
             border-left-width: 0px;