Merge branch 'master' into PLAY-1649-roll-out-height-global-props

playbook/CHANGELOG.md

@@ -1,3 +1,37 @@
+#  🐉 Draggable Kit Now Available For Rails! ✨
+##### November 18, 2024
+
+![playbookrelease14-8-0](https://github.com/user-attachments/assets/5248b47b-d84f-486c-b77d-453731ff6584)
+
+Now introducing the Draggable Kit for Rails! It’s easy to implement with a simple, flexible subcomponent structure right out of the box and works with almost any kit. Like its React counterpart, it’s fully customizable to fit your Rails project’s unique needs.
+
+[14.8.0](https://github.com/powerhome/playbook/tree/14.8.0) full list of changes:
+
+**Kit Enhancements:**
+- Remove react-modal from Drawer Kit ([\#3891](https://github.com/powerhome/playbook/pull/3891)) ([@markdoeswork](https://github.com/markdoeswork))
+- Add Color Hover Docs and Fix Background Hover ([\#3874](https://github.com/powerhome/playbook/pull/3874)) ([@markdoeswork](https://github.com/markdoeswork))
+- Adding defaultDate Prop to Date Picker Quick Pick Variant ([\#3907](https://github.com/powerhome/playbook/pull/3907)) ([@carloslimasd](https://github.com/carloslimasd))
+- Timeline Small Variant: Add "Gap" Prop to Timeline Kit ([\#3903](https://github.com/powerhome/playbook/pull/3903)) ([@skduncan](https://github.com/skduncan))
+
+
+**Fixed Bugs:**
+- Fix Dark Mode Date Colors- Dots, Icons, and Captions ([\#3894](https://github.com/powerhome/playbook/pull/3894)) ([@kangaree](https://github.com/kangaree))
+
+
+**Improvements:**
+- Global Hover Visibility Prop ([\#3905](https://github.com/powerhome/playbook/pull/3905)) ([@kangaree](https://github.com/kangaree))
+- Bump intl-tel-input from 24.6.0 to 24.7.0 ([\#3895](https://github.com/powerhome/playbook/pull/3895)) ([@dependabot](https://github.com/dependabot))
+- Fixing Github Action Errors ([\#3904](https://github.com/powerhome/playbook/pull/3904)) ([@jasperfurniss](https://github.com/jasperfurniss))
+- Semver Targets Trigger Correct RCs - Update Version ([\#3831](https://github.com/powerhome/playbook/pull/3831)) ([@skduncan](https://github.com/skduncan))
+- Semver Targets Trigger Correct RCs - Check Label ([\#3822](https://github.com/powerhome/playbook/pull/3822)) ([@skduncan](https://github.com/skduncan))
+
+**New Kits:**
+- Draggable Kit in Rails ([\#3863](https://github.com/powerhome/playbook/pull/3863)) ([@nidaqg](https://github.com/nidaqg))
+
+
+[Full Changelog](https://github.com/powerhome/playbook/compare/14.7.0...14.8.0)
+
+
 # Go Further With Our Custom Timelines!
 ##### November 8, 2024
 

playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: {table_data: @table_data, column_definitions: column_definitions}) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions }) %>

playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -55,5 +55,5 @@
 
 <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.html.erb

@@ -0,0 +1,53 @@
+<%
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      custom_renderer: ->(row, value) {
+        capture do
+          pb_rails("flex") do
+            pb_rails("title", props: { text: value, size: 4 }) +
+            pb_rails("badge", props: { dark: true, margin_left: "xxs", text: row[:newEnrollments].to_i > 20 ? "High" : "Low", variant: "neutral" })
+          end
+        end
+      }
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      custom_renderer: ->(row, value) { pb_rails("pill", props: { text: value, variant: "success" }) }
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      custom_renderer: ->(row, value) { content_tag(:a, value, href: "#") }
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      custom_renderer: ->(row, value) {
+        capture do
+          pb_rails("flex", props: { align_items: "end", orientation: "column" }) do
+            pb_rails("detail", props: { bold: true, color: "default", text: value }) +
+            pb_rails("caption", props: { size: "xs", text: row[:graduatedStudents] })
+          end
+        end
+      }
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+  ]
+%>
+
+<%= pb_rails("advanced_table", props: { id: "custom_cell", table_data: @table_data, column_definitions: column_definitions }) %>

playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md

@@ -0,0 +1,5 @@
+The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional `custom_renderer` item within each column_definitions. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire `row` object. The row object provides all data for the current row.
+
+See [here](https://playbook.powerapp.cloud/kits/advanced_table/rails#column_definitions) for more indepth information on column_definitions are how to use them.
+
+See [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme) for the structure of the table_data used.

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

@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_beta_sort: Enable Sorting
+  - advanced_table_custom_cell_rails: Custom Components for Cells
 
   react:
   - advanced_table_default: Default (Required Props)

playbook/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -11,7 +11,9 @@
                                 </button>
                             <% end %>
                             <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
-                                <% if index.zero? %>
+                                <% if column[:custom_renderer].present? %>
+                                    <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
+                                <% elsif index.zero? %>
                                     <% if object.depth.zero? %>
                                         <%= object.row[column[:accessor].to_sym] %>
                                     <% else %>

playbook/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -26,6 +26,21 @@ def depth_accessors
 
     private
 
+      def custom_renderer_value(column, index)
+        if index.zero?
+          if depth.zero?
+            row[column[:accessor].to_sym]
+          else
+            depth_accessors.each_with_index do |item, accessor_index|
+              key = item.to_sym
+              return row[key] if depth - 1 == accessor_index
+            end
+          end
+        else
+          row[column[:accessor].to_sym]
+        end
+      end
+
       def subrow_depth_classname
         depth.positive? ? "depth-sub-row-#{depth}" : ""
       end

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

@@ -4,11 +4,11 @@ import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/pro
 import { globalProps, GlobalProps, globalInlineProps } 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,
@@ -77,6 +79,7 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
+            'sticky-left-column': stickyLeftcolumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -86,34 +89,113 @@ 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()
     }, [])
 
     return (
         <>
-            {isTableTag ? (
-                <table
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                    style={dynamicInlineProps}
-                >
-                    {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}
+                            style={dynamicInlineProps}
+                        >
+                            {children}
+                        </table>
+                    ) : (
+                        <div
+                            {...ariaProps}
+                            {...dataProps}
+                            {...htmlProps}
+                            className={classNames}
+                            id={id}
+                            style={dynamicInlineProps}
+                        >
+                            {children}
+                        </div>
+                    )}
                 </div>
+            ) : (
+                isTableTag ? (
+                    <table
+                        {...ariaProps}
+                        {...dataProps}
+                        {...htmlProps}
+                        className={classNames}
+                        id={id}
+                        style={dynamicInlineProps}
+                    >
+                        {children}
+                    </table>
+                ) : (
+                    <div
+                        {...ariaProps}
+                        {...dataProps}
+                        {...htmlProps}
+                        className={classNames}
+                        id={id}
+                        style={dynamicInlineProps}
+                    >
+                        {children}
+                    </div>
+                )
             )}
         </>
     )