playbook_ui 14.10.0.pre.alpha.play1662cssbargraph5193 → 14.10.0.pre.alpha.play1662cssbargraph5201

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

@@ -1,8 +1,13 @@
 examples:
   
   rails:
-  # - skeleton_loading_default: Default
-  
+  - skeleton_loading_default: Default
+  - skeleton_loading_color: Color
+  - skeleton_loading_layout: Layout
+  - skeleton_loading_border_radius: Border Radius
+  - skeleton_loading_height_width: Height & Width  
+  - skeleton_loading_user: User Component Example
+  - skeleton_loading_filter: Filter Component Example
   
   react:
   - skeleton_loading_default: Default

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb

@@ -1,12 +1,8 @@
-<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
-<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
-<%= pb_content_tag(
-    # :div,
-    # aria: object.aria,
-    # class: object.classname,
-    # data: object.data,
-    # id: object.id,
-    # **combined_html_options
-) do %>
-  <span>SKELETON_LOADING CONTENT</span>
-<% end %>
+<%= pb_content_tag do %>
+  <% stack.times do |index| %>
+    <div
+      class="<%= item_classname(index) %>"
+      style="<%= item_inline_styles %>"
+    ></div>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb

@@ -2,7 +2,54 @@
 
 module Playbook
   module PbSkeletonLoading
-    class SkeletonLoading < ::Playbook::KitBase
+    class SkeletonLoading < Playbook::KitBase
+      prop :height, type: Playbook::Props::String,
+                    default: "16px"
+      prop :width, type: Playbook::Props::String,
+                   default: "100%"
+      prop :border_radius, type: Playbook::Props::Enum,
+                           values: %w[none xs sm md lg xl rounded],
+                           default: "sm"
+      prop :gap, type: Playbook::Props::Enum,
+                 values: %w[none xxs xs sm md lg xl xxl],
+                 default: "xxs"
+      prop :stack, type: Playbook::Props::Number,
+                   default: 1
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default white],
+                   default: "default"
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+
+      def classname
+        generate_classname("pb_skeleton_loading")
+      end
+
+      def global_inline_props
+        {}
+      end
+
+      def item_classname(index = nil)
+        classes = [
+          "pb_skeleton_loading_item",
+          "border_radius_#{border_radius}",
+          "color_#{color}",
+          ("dark" if dark),
+          gap_class(index),
+        ]
+        classes.compact.join(" ")
+      end
+
+      def item_inline_styles
+        styles = []
+        styles << "height: #{height}"
+        styles << "width: #{width}"
+        styles.join("; ")
+      end
+
+      def gap_class(index = nil)
+        stack > 1 && index.to_i.positive? && gap != "none" ? "gap_#{gap}" : nil
+      end
     end
   end
 end

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

@@ -28,7 +28,8 @@ type TableProps = {
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
     sticky?: boolean,
-    stickyLeftcolumn?: string[],
+    stickyLeftColumn?: string[],
+    stickyRightColumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
     verticalBorder?: boolean,
@@ -52,7 +53,8 @@ const Table = (props: TableProps): React.ReactElement => {
         singleLine = false,
         size = 'sm',
         sticky = false,
-        stickyLeftcolumn = [],
+        stickyLeftColumn = [],
+        stickyRightColumn= [],
         striped = false,
         tag = 'table',
         verticalBorder = false,
@@ -79,7 +81,8 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftcolumn,
+            'sticky-left-column': stickyLeftColumn,
+            'sticky-right-column': stickyRightColumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -90,11 +93,12 @@ const Table = (props: TableProps): React.ReactElement => {
     )
 
     useEffect(() => {
-        const handleStickyColumns = () => {
+        const handleStickyLeftColumns = () => {
+            if (!stickyLeftColumn.length) return;
             let accumulatedWidth = 0;
 
-            stickyLeftcolumn.forEach((colId, index) => {
-                const isLastColumn = index === stickyLeftcolumn.length - 1;
+            stickyLeftColumn.forEach((colId, index) => {
+                const isLastColumn = index === stickyLeftColumn.length - 1;
                 const header = document.querySelector(`th[id="${colId}"]`);
                 const cells = document.querySelectorAll(`td[id="${colId}"]`);
 
@@ -103,11 +107,11 @@ const Table = (props: TableProps): React.ReactElement => {
                     (header as HTMLElement).style.left = `${accumulatedWidth}px`;
 
                     if (!isLastColumn) {
-                        header.classList.add('with-border');
-                        header.classList.remove('sticky-shadow');
+                        header.classList.add('with-border-right');
+                        header.classList.remove('sticky-left-shadow');
                     } else {
-                        header.classList.remove('with-border');
-                        header.classList.add('sticky-shadow');
+                        header.classList.remove('with-border-right');
+                        header.classList.add('sticky-left-shadow');
                     }
 
                     accumulatedWidth += (header as HTMLElement).offsetWidth;
@@ -118,26 +122,71 @@ const Table = (props: TableProps): React.ReactElement => {
                     (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
                     if (!isLastColumn) {
-                        cell.classList.add('with-border');
-                        cell.classList.remove('sticky-shadow');
+                        cell.classList.add('with-border-right');
+                        cell.classList.remove('sticky-left-shadow');
                     } else {
-                        cell.classList.remove('with-border');
-                        cell.classList.add('sticky-shadow');
+                        cell.classList.remove('with-border-right');
+                        cell.classList.add('sticky-left-shadow');
                     }
                 });
             });
         };
 
         setTimeout(() => {
-            handleStickyColumns();
+            handleStickyLeftColumns();
         }, 10);
 
-        window.addEventListener('resize', handleStickyColumns);
+        window.addEventListener('resize', handleStickyLeftColumns);
 
         return () => {
-            window.removeEventListener('resize', handleStickyColumns);
+            window.removeEventListener('resize', handleStickyLeftColumns);
         };
-    }, [stickyLeftcolumn]);
+    }, [stickyLeftColumn]);
+
+    useEffect(() => {
+        const handleStickyRightColumns = () => {
+            if (!stickyRightColumn.length) return;
+            let accumulatedWidth = 0;
+
+            stickyRightColumn.reverse().forEach((colId, index) => {
+                const isLastColumn = index === stickyRightColumn.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.right = `${accumulatedWidth}px`;
+
+                    if (!isLastColumn) {
+                        header.classList.add('with-border-left');
+                        header.classList.remove('sticky-right-shadow');
+                    } else {
+                        header.classList.remove('with-border-left');
+                        header.classList.add('sticky-right-shadow');
+                    }
+
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
+
+                cells.forEach((cell) => {
+                    cell.classList.add('sticky');
+                    (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+
+                    if (!isLastColumn) {
+                        cell.classList.add('with-border-left');
+                        cell.classList.remove('sticky-right-shadow');
+                    } else {
+                        cell.classList.remove('with-border-left');
+                        cell.classList.add('sticky-right-shadow');
+                    }
+                });
+            });
+        };
+
+        setTimeout(() => {
+            handleStickyRightColumns();
+        }, 10);
+    }, [stickyRightColumn]);
 
     useEffect(() => {
         const instance = new PbTable()

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

@@ -0,0 +1,88 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableStickyColumns = () => {
+    return (
+        <Table
+            responsive="scroll"
+            size="md"
+            stickyLeftColumn={["a"]}
+            stickyRightColumn={["b"]}
+        >
+            <thead>
+                <tr>
+                    <th id="a">{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'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 id="b">{'Column 15'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td id="a">{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'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 id="b">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="a">{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'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 id="b">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="a">{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'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 id="b">{'Value 15'}</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}
+
+export default TableStickyColumns

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

@@ -0,0 +1,3 @@
+The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.

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

@@ -6,7 +6,7 @@ const TableStickyLeftColumns = () => {
         <Table
             responsive="scroll"
             size="md"
-            stickyLeftcolumn={["1", "2", "3"]}
+            stickyLeftColumn={["1", "2", "3"]}
         >
             <thead>
                 <tr>

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

@@ -1 +1,3 @@
 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>`.
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.

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

@@ -1,2 +1,5 @@
 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>`
+
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.

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

@@ -0,0 +1,87 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableStickyRightColumns = () => {
+    return (
+        <Table
+            responsive="scroll"
+            size="md"
+            stickyRightColumn={["13", "14", "15"]}
+        >
+            <thead>
+                <tr>
+                    <th>{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'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 id="13">{'Column 13'}</th>
+                    <th id="14">{'Column 14'}</th>
+                    <th id="15">{'Column 15'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'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 id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td>{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'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 id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td>{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'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 id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}
+
+export default TableStickyRightColumns

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

@@ -0,0 +1,5 @@
+The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It 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>`
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyRightColumn` prop.

data/app/pb_kits/playbook/pb_table/index.ts

@@ -2,7 +2,7 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
     private stickyLeftColumns: string[] = [];
-    private handleStickyColumnsRef: () => void;
+    private handleStickyLeftColumnsRef: () => void;
 
     static get selector(): string {
       return '.table-responsive-collapse'
@@ -31,10 +31,10 @@ export default class PbTable extends PbEnhancedElement {
       });
 
       // New sticky columns logic
-      this.initStickyColumns();
+      this.initStickyLeftColumns();
     }
 
-    private initStickyColumns(): void {
+    private initStickyLeftColumns(): void {
       // Find tables with sticky-left-column class
       const tables = document.querySelectorAll('.sticky-left-column');
 
@@ -52,16 +52,16 @@ export default class PbTable extends PbEnhancedElement {
 
           if (this.stickyLeftColumns.length > 0) {
             setTimeout(() => {
-              this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
-              this.handleStickyColumns();
-              window.addEventListener('resize', this.handleStickyColumnsRef);
+              this.handleStickyLeftColumnsRef = this.handleStickyLeftColumns.bind(this);
+              this.handleStickyLeftColumns();
+              window.addEventListener('resize', this.handleStickyLeftColumnsRef);
             }, 10);
           }
         }
       });
     }
 
-    private handleStickyColumns(): void {
+    private handleStickyLeftColumns(): void {
       let accumulatedWidth = 0;
 
       this.stickyLeftColumns.forEach((colId, index) => {
@@ -74,11 +74,11 @@ export default class PbTable extends PbEnhancedElement {
           (header as HTMLElement).style.left = `${accumulatedWidth}px`;
 
           if (!isLastColumn) {
-            header.classList.add('with-border');
-            header.classList.remove('sticky-shadow');
+            header.classList.add('with-border-right');
+            header.classList.remove('sticky-left-shadow');
           } else {
-            header.classList.remove('with-border');
-            header.classList.add('sticky-shadow');
+            header.classList.remove('with-border-right');
+            header.classList.add('sticky-left-shadow');
           }
 
           accumulatedWidth += (header as HTMLElement).offsetWidth;
@@ -89,11 +89,11 @@ export default class PbTable extends PbEnhancedElement {
           (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
           if (!isLastColumn) {
-            cell.classList.add('with-border');
-            cell.classList.remove('sticky-shadow');
+            cell.classList.add('with-border-right');
+            cell.classList.remove('sticky-left-shadow');
           } else {
-            cell.classList.remove('with-border');
-            cell.classList.add('sticky-shadow');
+            cell.classList.remove('with-border-right');
+            cell.classList.add('sticky-left-shadow');
           }
         });
       });
@@ -101,8 +101,8 @@ export default class PbTable extends PbEnhancedElement {
 
     // Cleanup method to remove event listener
     disconnect(): void {
-      if (this.handleStickyColumnsRef) {
-        window.removeEventListener('resize', this.handleStickyColumnsRef);
+      if (this.handleStickyLeftColumnsRef) {
+        window.removeEventListener('resize', this.handleStickyLeftColumnsRef);
       }
     }
 }

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

@@ -4,12 +4,48 @@
     display: block;
     overflow-x: scroll;
 
+    // hides duplicate scroll bar for those that see two (byproduct of repeated table-responsive-scroll class
+    // hides outer scroll bar in chrome and safari
+    &:not(.table-responsive-scroll .table-responsive-scroll) {
+        &::-webkit-scrollbar {
+            height: 0px;
+        }
+    }
+    // hides outer scroll bar in firefox
+    @supports (scrollbar-width: none) {
+        scrollbar-width: none;
+        .pb_table {
+            overflow-x: auto;
+            scrollbar-width: auto;
+        }
+    }
+    // ensures visible inner scroll bar can scroll
+    .pb_table {
+        overflow-x: auto;
+    }
+
     // Responsive Styles
     @media (max-width: 1600px) {
         &[class*="table-responsive-scroll"] {
             border-radius: 4px;
-            box-shadow: 1px 0 0 0px $border_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;
+        }
+
+        &[class^=pb_table].table-md.table-card thead tr th:first-child,
+        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:first-child {
+            border-left-width: 0px;
+        }
+
+        &[class^=pb_table].table-lg.table-card thead tr th:first-child,
+        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:first-child {
+            border-left-width: 0px;
+        }
 
         &[class^=pb_table].table-sm.table-card thead tr th:last-child,
         &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {

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

@@ -7,11 +7,25 @@
         background-color: white;
     }
 
-    .with-border {
+    // For use with sticky left columns
+    .sticky-left-shadow {
+        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
+        left: 0;
+    }
+
+    .with-border-right {
         border-right: 1px solid $border_light !important;
+        left: 0;
     }
 
-    .sticky-shadow {
-        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
+    // For use with sticky right columns
+    .sticky-right-shadow {
+        box-shadow: -4px 0 10px rgba(60, 106, 172, 0.16) !important;
+        right: 0;
+    }
+
+    .with-border-left {
+        border-left: 1px solid $border_light !important;
+        right: 0;
     }
 }