playbook_ui 14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5400 → 14.11.1.pre.alpha.PBNTR769sticky5359

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 75abb8afb9decb32624e25ec10c037c124119a63db9bd90426a7eff8af0ad732
-  data.tar.gz: 597025d1e585db6c2e920cc29248178e948f7bb0aef4df1511c06212234455fd
+  metadata.gz: 83c318646e50eb8f4974a79029c4553c98dd90c0c878ec0fdd60fd77045d36a8
+  data.tar.gz: 777f930d187a4815ab702202437cbb96868039c9e115acfd97cee157bbd42d07
 SHA512:
-  metadata.gz: 16426f8a9c9a67eb8fbcac7f63ce42cc7b3cbba6948c3a32656be187861b82f5ed403428bcef3296b973b4440c77f02948973e93e60090d495f2af887b09f046
-  data.tar.gz: 60a3f74fb3f0ff2bf2afe6a825ff06ee31cef7ed55199d1d25695b47a947c94625591a1a92351bcb6e9a01bca427ffc9e7784955ecb46fafeca40e2648322c09
+  metadata.gz: b8a756512afdc408c56dbcccb9c6660ea746e14a3656f1fef48557bb09c57140f5f069c2160d2a6ac31883fae34861b9f909eb5fb0c05ec9fa4230145db24da9
+  data.tar.gz: 1cbeb5057637f11e479097c70b6e1e59b52abc1bd88d8f4ff0bf329e8ba56c1847eee4b3680c54c7b8cc423c0ad4c052cd77a3e9c5a348c58148a2747d0af1a0

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -15,6 +15,12 @@
     word-wrap: normal;
   }
 
+  .sticky-header {
+    thead {
+      z-index: 3 !important;
+    }
+  }
+
   .bg-silver {
     background-color: lighten($silver, $opacity_7);
   }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_responsive.jsx

@@ -0,0 +1,52 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableStickyHeaderResponsive = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          htmlOptions={{style: { maxHeight: "100vh" }}}
+          tableData={MOCK_DATA}
+          tableProps={{sticky:true}}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableStickyHeaderResponsive

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -22,6 +22,7 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
+  - advanced_table_sticky_header_responsive: Sticky Header and Responsive
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -13,4 +13,5 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
-export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
+export { default as AdvancedTableStickyHeaderResponsive } from './_advanced_table_sticky_header_responsive.jsx'

data/app/pb_kits/playbook/pb_draggable/docs/example.yml

@@ -11,7 +11,6 @@ examples:
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit
-  - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards
 
 

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb

@@ -4,23 +4,9 @@
     data: object.data,
     id: object.id,
     **combined_html_options) do %>
-  <% if enable_drag %>
-    <%= pb_rails("draggable", props: {initial_items: object.items}) do %>
-      <%= pb_rails("draggable/draggable_container") do %>
-        <%= pb_rails("list", props: {ordered: false}) do %>
-          <% object.items.each do |item| %>
-            <%= pb_rails("draggable/draggable_item", props: {drag_id: item[:drag_id]}) do %>
-              <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item), drag_id: item[:drag_id]) )%>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% else %>
-    <%= pb_rails("list") do %>
-      <% object.items.each do |item| %>
-        <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
-      <% end %>
+  <%= pb_rails("list") do %>
+    <% object.items.each do |item| %>
+      <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb

@@ -14,9 +14,6 @@ module Playbook
       prop :items, type: Playbook::Props::Array,
                    default: []
 
-      prop :enable_drag, type: Playbook::Props::Boolean,
-                         default: false
-
       def classname
         generate_classname("pb_selectable_list_kit")
       end

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb

@@ -4,13 +4,6 @@
     data: object.data,
     id: object.id,
     **combined_html_options) do %>
-  <% if object.drag_id && object.drag_handle %>
-    <span style="vertical-align: middle;">
-      <%= pb_rails("body") do %>
-        <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
-      <% end %>
-    </span>
-  <% end %>
   <% if object.variant == "radio"%>
     <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
     <% if content.present? %>
@@ -26,10 +19,10 @@
   <% if object.variant == "checkbox"%>
     <script>
       var checkboxElement = document.querySelector("#<%=object.id%> input[type=checkbox]")
-
+      
       checkboxElement.addEventListener("change", (evt) => {
         var listItemElement = document.querySelector("#<%=object.id%>")
-
+        
         if (evt.target.checked) {
           listItemElement.classList.add("checked_item");
         } else {
@@ -41,9 +34,9 @@
     <script>
       var radioElement = document.querySelector("#<%=object.id%> input[type=radio]")
 
-      radioElement.addEventListener("change", () => {
+      radioElement.addEventListener("change", () => {        
         var radios = radioElement.closest("ul").querySelectorAll("input[type=radio]")
-
+        
         radios.forEach((radio) => {
           if (radio.checked) {
             radio.closest("li").classList.add("checked_item");

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -6,9 +6,6 @@ module Playbook
       prop :tabindex
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
-      prop :drag_handle, type: Playbook::Props::Boolean,
-                         default: true
-      prop :drag_id, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
       prop :text, type: Playbook::Props::String
       prop :value, type: Playbook::Props::String

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,12 +27,11 @@
     // Responsive Styles
     @media (max-width: 1600px) {
         &[class*="table-responsive-scroll"] {
-                &:has(> table.table-card) {
-                    border-radius: $border_rad_light;
-                    box-shadow: 1px 0 0 0px $border_light,
+            border-radius: 4px;
+            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;