playbook_ui 14.20.0.pre.alpha.play2168firstcolumnborderbug7988 → 14.20.0.pre.alpha.play2212tablekitstickycolumnswithresponsivenone7979

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3f7067bfc157238eeed0411dd4b7a72a2a147c63a0351d56ce847ddf99ff341e
-  data.tar.gz: b9eac90295c410baff2682a428b5474e5253718513e7b4d67e7586e1178f0725
+  metadata.gz: b4e9f81a39e99264f7447b0889451c36c4676c33f5f8c836d785432d0e9b4496
+  data.tar.gz: c870628692d424816911bdaa0c05517e26c05731a5d01e12e1de2b5a80720a87
 SHA512:
-  metadata.gz: 0cd89e4bdb8529b2cb909479f5d93dcc523059333930c977d23db6cea56d23431818ffb68ff2aadef3a31f0622b47dcddac9c68f8fe6fb6d2b280ebe18547d89
-  data.tar.gz: 6bba82a8c0f4c84a56597e5b3cfe85461fa9c65adcfac0c39c31a699502d09d284c48285e844be9c845aaa30655b04fc30af3f3cd1c8ad203747cd893f0ad581
+  metadata.gz: 827b59f32cbf03452c6fe62dd227dced2681eaf6d38fe7c1832b338b6909886f613ca5e7d7743c43073474642bdf7c6ed7a688ec0dbe679358f330f646c9c037
+  data.tar.gz: fed471e895d0f88a489c629f74b6fd49b318ca7e063e200522264433aac2b3b4628265cde7884b75549bfd462498aa058f00af42fa32eaaab7ad15d02924da03

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

@@ -87,16 +87,6 @@
     }
   }
 
-  &.advanced-table-hide-scrollbar {
-      &::-webkit-scrollbar {
-        display: none !important;
-      }
-
-      -ms-overflow-style: none !important;
-      scrollbar-width: none !important;
-    }
-  
-
   .row-selection-actions-card {
     border-bottom-right-radius: 0px !important;
     border-bottom-left-radius: 0px !important;
@@ -378,10 +368,6 @@
     box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
-  .pb_table_td:nth-child(2) {
-    box-shadow: inset 1px 0px 0px 0px var(--column-border-color) !important;
-  }
-
   // Color for collapsible trail
   .collapsible-trail {
     background-color: $border_light !important;
@@ -578,10 +564,6 @@
         box-shadow: $shadow_deep !important;
       }
 
-      .pb_table_td:nth-child(2) {
-        box-shadow: 0 0 0 0 !important;
-      }
-
       .pb_advanced_table_header,
       .pb_advanced_table_body {
         th.sticky-left,

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

@@ -53,7 +53,6 @@ type AdvancedTableProps = {
   pagination?: boolean,
   paginationProps?: GenericObject
   responsive?: "scroll" | "none",
-  scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
   sortControl?: GenericObject
@@ -93,7 +92,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     pagination = false,
     paginationProps,
     responsive = "scroll",
-    scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
     sortControl,
@@ -247,7 +245,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
-    scrollBarNone ? 'advanced-table-hide-scrollbar' : '',
     globalProps(props),
     className
   );

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

@@ -39,13 +39,9 @@ const AdvancedTableDefault = (props) => {
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          maxHeight="xs"
-          overflow="auto"
-          responsive="scroll"
-          scrollBarNone
           tableData={MOCK_DATA}
           {...props}
-          />
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions responsive }) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

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

@@ -1,12 +1,16 @@
-<%= pb_content_tag(:label, data: {
-  pb_checkbox_indeterminate_main: object.indeterminate_main,
-  pb_checkbox_indeterminate_parent: object.indeterminate_parent,
-}) do %>
+<%= pb_content_tag(:label) do %>
   <%= content.presence || object.input %>
-  <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
-    <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
-    <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
-  </span>
+  <% if object.indeterminate %>
+    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
+      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon hidden", fixed_width: true}) %>
+    </span>
+  <% else %>
+    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
+      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
+    </span>
+  <% end %>
   <span class="pb_checkbox_label">
     <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
   </span>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -5,8 +5,7 @@ module Playbook
     class Checkbox < Playbook::KitBase
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate_main, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate_parent
+      prop :indeterminate, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :value
       prop :name
@@ -20,7 +19,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_checkbox_kit", checked_class) + error_class
+        generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
       end
 
       def input
@@ -40,6 +39,10 @@ module Playbook
       def checked_class
         checked ? "on" : "off"
       end
+
+      def indeterminate_class
+        indeterminate ? " indeterminate" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,10 +9,11 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
+          checked: true,
           text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
-          indeterminate_main: true,
+          indeterminate: true,
           id: "indeterminate-checkbox"
         }) %>
       </th>
@@ -29,10 +30,55 @@
             value: checkbox[:id],
             name: "#{checkbox[:id]}-indeterminate-checkbox",
             id: "#{checkbox[:id]}-indeterminate-checkbox",
-            indeterminate_parent: "indeterminate-checkbox",
           }) %>
         </td>
       </tr>
     <% end %>
   </tbody>
 <% end %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
+    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
+    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
+
+    const updateMainCheckbox = () => {
+      // Count the number of checked child checkboxes
+      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
+      // Determine if the main checkbox should be in an indeterminate state
+      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
+      
+      // Set the main checkbox states
+      mainCheckbox.indeterminate = indeterminate;
+      mainCheckbox.checked = checkedCount > 0;
+
+      // Determine the main checkbox label based on the number of checked checkboxes
+      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+
+      // Determine the icon class to add and remove based on the number of checked checkboxes
+      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+
+      // Update main checkbox label
+      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
+      
+      // Add and remove the icon class to the main checkbox wrapper
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+      
+      // Toggle the visibility of the checkbox icon based on the indeterminate state
+      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
+      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
+    };
+
+    mainCheckbox.addEventListener('change', function() {
+      childCheckboxes.forEach(cb => cb.checked = this.checked);
+      updateMainCheckbox();
+    });
+
+    childCheckboxes.forEach(cb => {
+      cb.addEventListener('change', updateMainCheckbox);
+    });
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -115,7 +115,6 @@ export default class PbDropdown extends PbEnhancedElement {
 
   handleSearch(term = "") {
     const lcTerm = term.toLowerCase();
-    let hasMatch = false
     this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
       //make it so that if the option is selected, it will not show up in the search results
       if (this.isMultiSelect && this.selectedOptions.has(opt.dataset.dropdownOptionLabel)) {
@@ -129,32 +128,9 @@ export default class PbDropdown extends PbEnhancedElement {
       // hide or show option
       const match = label.includes(lcTerm);
       opt.style.display = match ? "" : "none";
-      if (match) hasMatch = true
     });
 
     this.adjustDropdownHeight();
-
-    this.removeNoOptionsMessage()
-    if (!hasMatch) {
-      this.showNoOptionsMessage()
-    }
-  }
-
-  showNoOptionsMessage() {
-    if (this.element.querySelector(".dropdown_no_options")) return;
-
-    const noOptionElement = document.createElement("div");
-    noOptionElement.className = "pb_body_kit_light dropdown_no_options pb_item_kit p_xs display_flex justify_content_center";
-    noOptionElement.textContent = "no option";
-
-    this.target.appendChild(noOptionElement);
-  }
-
-  removeNoOptionsMessage() {
-    const existing = this.element.querySelector(".dropdown_no_options");
-    if (existing) {
-      existing.remove();
-    }
   }
 
   handleOptionClick(event) {

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

@@ -3,7 +3,7 @@
 @import "../../pb_caption/caption_mixin";
 
 @media only screen and (max-width: $screen-xs-max) {
-  [class^=pb_table] {
+  [class^=pb_table]:not(.table-responsive-scroll) {
     &.table-sm.table-collapse-sm,
     &.table-md.table-collapse-sm,
     &.table-lg.table-collapse-sm {