playbook_ui 14.8.0.pre.alpha.PLAY16254545 → 14.8.0.pre.alpha.pbntr661createstickyleftprop4612

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b2b5ad03216b06c9f37e1792a0b208efbfd3d44b79f73696e1a3b006f89228c
-  data.tar.gz: 282f44cd7aee29b4bc0ca84396be2a914a3786e91c8b308c5e7f284b84d4d74c
+  metadata.gz: 447188fd32d5d83aeaf14c246e24bbb2ded7d4ef68ec21db96a48fc115a50d49
+  data.tar.gz: 4c1d2183a6df9ebefcb605e8aaeb52c097cdc1726c672a234237aa194b67c475
 SHA512:
-  metadata.gz: 0b14587326a80d3f8a7663ab14df6c51720aae8ad3a3492370dd853a956292a7b80901b2782e6ea04fbdb37b38d7810490234b4396bc9c891158432c208578f4
-  data.tar.gz: a1f50ae88764cf79258478662bd9cd294b394d8c3cbd3c96580045ba2a5a67c3d924d9ee0170daf134ca9400078c4709c18dff06ea98927392f412343b5d7216
+  metadata.gz: 99ea4d44f89369d8d928c441c86ebac5261bd849fda00bdb2490b209fb906232be43c480d49101c24f56c2fcacd23f662025e1dba331dd9472275e5d67040df5
+  data.tar.gz: b5e4d90132d0d728c6fb9c023b9ceeaf8ac64a017cdac314b5d85c774917a806540eb97dab62d7690112cbff97a395e794c271fb7375d4a3c50e6e13afe1abbc

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

@@ -6,12 +6,12 @@
                 ) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
-    <span class="pb_checkbox_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 class="pb_checkbox_checkmark">
+    <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>

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

@@ -18,10 +18,6 @@ module Playbook
       prop :form_spacing, type: Playbook::Props::Boolean,
                           default: false
 
-      def checked_html
-        checked ? "checked='true'" : nil
-      end
-
       def classname
         generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
       end

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

@@ -1,7 +1,84 @@
-<%= pb_rails("checkbox" , props: {
-  text: "Select ",
-  value: "checkbox-value",
-  name: "main",
-  indeterminate: true,
-  id: "test-indeterminate-js"
-}) %>
+<% checkboxes = [
+  { name: 'Coffee', id: 'coffee', checked: false },
+  { name: 'Ice Cream', id: 'ice-cream', checked: false },
+  { name: 'Chocolate', id: 'chocolate', checked: true }
+] %>
+
+<%= pb_rails("table", props: { container: false, size: "md" }) do %>
+  <thead>
+    <tr>
+      <th>
+        <%= pb_rails("checkbox", props: {
+          checked: true,
+          text: "Uncheck All",
+          value: "checkbox-value",
+          name: "main-checkbox",
+          indeterminate: true,
+          id: "indeterminate-checkbox"
+        }) %>
+      </th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <% checkboxes.each do |checkbox| %>
+      <tr>
+        <td>
+          <%= pb_rails("checkbox", props: {
+            checked: checkbox[:checked],
+            text: checkbox[:name],
+            value: checkbox[:id],
+            name: "#{checkbox[:id]}-indeterminate-checkbox",
+            id: "#{checkbox[:id]}-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/_dropdown.scss

@@ -53,6 +53,7 @@
     }
 
     .pb_dropdown_container {
+      position: absolute;
       background-color: $white;
       overflow: hidden;
       box-shadow: $shadow_deep;

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

@@ -3,7 +3,6 @@
     class: object.classname,
     data: object.data,
     id: object.id,
-    style: object.container_style,
     **combined_html_options) do %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
             <% if content.present? %> 

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb

@@ -7,10 +7,6 @@ module Playbook
         generate_classname("pb_dropdown_container", "close", separator: " ")
       end
 
-      def container_style
-        "position: absolute"
-      end
-
       def data
         Hash(prop(:data)).merge(dropdown_container: true)
       end

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -4,11 +4,11 @@ import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/pro
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
 import {
-  TableHead,
-  TableHeader,
-  TableBody,
-  TableRow,
-  TableCell,
+    TableHead,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableCell,
 } from "./subcomponents";
 
 type TableProps = {
@@ -28,6 +28,7 @@ type TableProps = {
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
     sticky?: boolean,
+    stickyLeftcolumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
     verticalBorder?: boolean,
@@ -51,6 +52,7 @@ const Table = (props: TableProps): React.ReactElement => {
         singleLine = false,
         size = 'sm',
         sticky = false,
+        stickyLeftcolumn = [],
         striped = false,
         tag = 'table',
         verticalBorder = false,
@@ -76,6 +78,7 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
+            'sticky-left-column': stickyLeftcolumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -85,6 +88,56 @@ const Table = (props: TableProps): React.ReactElement => {
         className
     )
 
+    useEffect(() => {
+        const handleStickyColumns = () => {
+            let accumulatedWidth = 0;
+    
+            stickyLeftcolumn.forEach((colId, index) => {
+                const isLastColumn = index === stickyLeftcolumn.length - 1;
+                const header = document.querySelector(`th[id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+    
+                if (header) {
+                    header.classList.add('sticky');
+                    (header as HTMLElement).style.left = `${accumulatedWidth}px`;
+    
+                    if (!isLastColumn) {
+                        header.classList.add('with-border');
+                        header.classList.remove('sticky-shadow');
+                    } else {
+                        header.classList.remove('with-border');
+                        header.classList.add('sticky-shadow');
+                    }
+    
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
+    
+                cells.forEach((cell) => {
+                    cell.classList.add('sticky');
+                    (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+                    
+                    if (!isLastColumn) {
+                        cell.classList.add('with-border');
+                        cell.classList.remove('sticky-shadow');
+                    } else {
+                        cell.classList.remove('with-border');
+                        cell.classList.add('sticky-shadow');
+                    }
+                });
+            });
+        };
+
+        setTimeout(() => {
+            handleStickyColumns();
+        }, 10);
+
+        window.addEventListener('resize', handleStickyColumns);
+
+        return () => {
+            window.removeEventListener('resize', handleStickyColumns);
+        };
+    }, [stickyLeftcolumn]);
+
     useEffect(() => {
         const instance = new PbTable()
         instance.connect()
@@ -92,26 +145,52 @@ const Table = (props: TableProps): React.ReactElement => {
 
     return (
         <>
-            {isTableTag ? (
-                <table
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                >
-                    {children}
-                </table>
-            ) : (
-                <div
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                >
-                    {children}
+            {responsive === 'scroll' ? (
+                <div className='table-responsive-scroll'>
+                    {isTableTag ? (
+                        <table
+                            {...ariaProps}
+                            {...dataProps}
+                            {...htmlProps}
+                            className={classNames}
+                            id={id}
+                        >
+                            {children}
+                        </table>
+                    ) : (
+                        <div
+                            {...ariaProps}
+                            {...dataProps}
+                            {...htmlProps}
+                            className={classNames}
+                            id={id}
+                        >
+                            {children}
+                        </div>
+                    )}
                 </div>
+            ) : (
+                isTableTag ? (
+                    <table
+                        {...ariaProps}
+                        {...dataProps}
+                        {...htmlProps}
+                        className={classNames}
+                        id={id}
+                    >
+                        {children}
+                    </table>
+                ) : (
+                    <div
+                        {...ariaProps}
+                        {...dataProps}
+                        {...htmlProps}
+                        className={classNames}
+                        id={id}
+                    >
+                        {children}
+                    </div>
+                )
             )}
         </>
     )

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableStickyLeftColumns = () => {
+    return (
+        <Table
+            responsive="scroll"
+            size="md"
+            stickyLeftcolumn={["1", "2", "3"]}
+        >
+            <thead>
+                <tr>
+                    <th id="1">{'Column 1'}</th>
+                    <th id="2">{'Column 2'}</th>
+                    <th id="3">{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                    <th>{'Column 6'}</th>
+                    <th>{'Column 7'}</th>
+                    <th>{'Column 8'}</th>
+                    <th>{'Column 9'}</th>
+                    <th>{'Column 10'}</th>
+                    <th>{'Column 11'}</th>
+                    <th>{'Column 12'}</th>
+                    <th>{'Column 13'}</th>
+                    <th>{'Column 14'}</th>
+                    <th>{'Column 15'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td>{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td>{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td>{'Value 15'}</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}
+
+export default TableStickyLeftColumns

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md

@@ -0,0 +1,2 @@
+The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`

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

@@ -33,6 +33,7 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
+    - table_sticky_left_columns: Sticky Left Column
     - table_alignment_row: Row Alignment
     - table_alignment_column: Cell Alignment
     - table_alignment_shift_row: Row Shift

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

@@ -25,3 +25,4 @@ export { default as TableDiv } from './_table_div.jsx'
 export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
+export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'

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

@@ -20,3 +20,5 @@
 @import "table_header";
 @import "striped";
 @import "outer_padding";
+@import "sticky_columns";
+@import "scroll";

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

@@ -0,0 +1,4 @@
+    .table-responsive-scroll {
+        display: block;
+        overflow-x: auto;
+    }

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

@@ -0,0 +1,18 @@
+@import "../../tokens/colors";
+
+[class^="pb_table"] {
+    .sticky {
+        position: sticky !important;
+        left: 0;
+        z-index: 1;
+        background-color: white;
+    }
+
+    .with-border {
+        border-right: 1px solid $border_light !important;
+    }
+
+    .sticky-shadow {
+        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
+    }
+}