RubyGems - playbook_ui - Versions diffs - 14.12.0.pre.alpha.testingwithfas5689 → 14.12.0.pre.rc.0 - Mend

playbook_ui 14.12.0.pre.alpha.testingwithfas5689 → 14.12.0.pre.rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (179) hide show

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx CHANGED Viewed

@@ -8,31 +8,27 @@ const TableWithCollapsibleWithCustomContent = (props) => {
       <Card
           borderNone
           borderRadius="none"
-          color="light"
+          color="light"
           paddingX="xl"
           paddingY="md"
           {...props}
       >
-         <Body paddingBottom="sm"
+         <Body paddingBottom="sm"
              text="Expanded Custom Layout"
              {...props}
          />
          <Flex justify="between">
            <Image
-               size="sm"
-               url="https://unsplash.it/500/400/?image=634"
+               url="https://via.placeholder.com/150"
            />
            <Image
-               size="sm"
-               url="https://unsplash.it/500/400/?image=634"
+               url="https://via.placeholder.com/150"
            />
            <Image
-               size="sm"
-               url="https://unsplash.it/500/400/?image=634"
+               url="https://via.placeholder.com/150"
            />
            <Image
-               size="sm"
-               url="https://unsplash.it/500/400/?image=634"
+               url="https://via.placeholder.com/150"
            />
           </Flex>
       </Card>
@@ -56,7 +52,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
       </Table.Head>
       <Table.Body>
-        <Table.Row collapsible
+        <Table.Row collapsible
             collapsibleContent={<Content/>}
             {...props}
         >
@@ -65,7 +61,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
           <Table.Cell>{'Value 3'}</Table.Cell>
           <Table.Cell>{'Value 4'}</Table.Cell>
           <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell textAlign="right">{
+          <Table.Cell textAlign="right">{
             <Icon
                 color="primary"
                 fixedWidth

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

@@ -5,8 +5,6 @@ examples:
     - table_lg: Large
     - table_sticky: Sticky Header
     - table_sticky_left_columns: Sticky Left Column
-    - table_sticky_right_columns: Sticky Right Column
-    - table_sticky_columns: Sticky Left and Right Columns
     - table_header: Table Header
     - table_alignment_row_rails: Row Alignment
     - table_alignment_column_rails: Cell Alignment
@@ -30,10 +28,6 @@ examples:
     - table_with_subcomponents_rails: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
-    - table_with_collapsible: Table with Collapsible
-    - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
-    - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
-    - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
   react:
     - table_sm: Small

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

@@ -1,207 +1,108 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
-const TABLE_COLLAPSIBLE_WRAPPER_SELECTOR = "[data-pb-table-collapsible-wrapper]";
 export default class PbTable extends PbEnhancedElement {
-  stickyLeftColumns: string[] = [];
-  stickyRightColumns: string[] = [];
-  stickyRightColumnsReversed: string[] = [];
-  static get selector(): string {
-    return TABLE_WRAPPER_SELECTOR;
-  }
-  connect() {
-    if (this.element.classList.contains('table-responsive-collapse')) {
-      const headers: string[] = [];
-      [].forEach.call(this.element.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-        const colSpan = header.colSpan
-        for (let i = 0; i < colSpan; i++) {
-          headers.push(header.textContent.replace(/\r?\n|\r/, ''));
-        }
-      });
-      [].forEach.call(this.element.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
-        [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
-          cell.setAttribute('data-title', headers[headerIndex])
-        })
-      })
-    }
+    private stickyLeftColumns: string[] = [];
+    private handleStickyLeftColumnsRef: () => void;
-    this.initStickyLeftColumns();
-    this.initStickyRightColumns();
-    this.handleCollapsibleClick();
-    this.handleCollapsibleRow();
-  }
-  initStickyLeftColumns() {
-    const table = this.element.querySelector('.sticky-left-column');
-    if (table) {
-      const classList = Array.from(table.classList);
-      const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-left-columns-ids-'));
-      if (stickyColumnClass) {
-        this.stickyLeftColumns = stickyColumnClass
-          .replace('sticky-left-columns-ids-', '')
-          .split('-');
-        if (this.stickyLeftColumns.length > 0) {
-          setTimeout(() => {
-            this.handleStickyLeftColumns();
-            window.addEventListener('resize', () => this.handleStickyLeftColumns());
-          }, 10);
-        }
-      }
+    static get selector(): string {
+      return '.table-responsive-collapse'
     }
-  }
-  handleStickyLeftColumns() {
-    let accumulatedWidth = 0;
-    this.stickyLeftColumns.forEach((colId, index) => {
-      const isLastColumn = index === this.stickyLeftColumns.length - 1;
-      const header = this.element.querySelector(`th[id="${colId}"]`);
-      const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
-      if (header) {
-        header.classList.add('sticky');
-        (header as HTMLElement).style.left = `${accumulatedWidth}px`;
-        if (!isLastColumn) {
-          header.classList.add('with-border-right');
-          header.classList.remove('sticky-left-shadow');
-        } else {
-          header.classList.remove('with-border-right');
-          header.classList.add('sticky-left-shadow');
-        }
-        accumulatedWidth += (header as HTMLElement).offsetWidth;
-      }
+    connect(): void {
+      const tables = document.querySelectorAll('.table-responsive-collapse');
+      // Each Table
+      [].forEach.call(tables, (table: HTMLTableElement) => {
+        // Header Titles
+        const headers: string[] = [];
+        [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+            const colSpan = header.colSpan
+            for (let i = 0; i < colSpan; i++) {
+              headers.push(header.textContent.replace(/\r?\n|\r/, ''));
+            }
+        });
+        // for each row in tbody
+        [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
+          // for each cell
+          [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
+            // apply the attribute
+            cell.setAttribute('data-title', headers[headerIndex])
+          })
+        })
+      });
-      cells.forEach((cell) => {
-        cell.classList.add('sticky');
-        (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+      // New sticky columns logic
+      this.initStickyLeftColumns();
+    }
-        if (!isLastColumn) {
-          cell.classList.add('with-border-right');
-          cell.classList.remove('sticky-left-shadow');
-        } else {
-          cell.classList.remove('with-border-right');
-          cell.classList.add('sticky-left-shadow');
+    private initStickyLeftColumns(): void {
+      // Find tables with sticky-left-column class
+      const tables = document.querySelectorAll('.sticky-left-column');
+      tables.forEach((table) => {
+        // Extract sticky left column IDs by looking at the component's class
+        const classList = Array.from(table.classList);
+        // Look for classes in the format sticky-left-column-{ids}
+        const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-columns-'));
+        if (stickyColumnClass) {
+          // Extract the IDs from the class name
+          this.stickyLeftColumns = stickyColumnClass
+              .replace('sticky-columns-', '')
+              .split('-');
+          if (this.stickyLeftColumns.length > 0) {
+            setTimeout(() => {
+              this.handleStickyLeftColumnsRef = this.handleStickyLeftColumns.bind(this);
+              this.handleStickyLeftColumns();
+              window.addEventListener('resize', this.handleStickyLeftColumnsRef);
+            }, 10);
+          }
         }
       });
-    });
-  }
-  initStickyRightColumns() {
-    const table = this.element.querySelector('.sticky-right-column');
-    if (table) {
-      const classList = Array.from(table.classList);
-      const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-right-columns-ids-'));
-      if (stickyColumnClass) {
-        this.stickyRightColumns = stickyColumnClass
-          .replace('sticky-right-columns-ids-', '')
-          .split('-');
-        this.stickyRightColumnsReversed = this.stickyRightColumns.reverse();
-        if (this.stickyRightColumns.length > 0) {
-          setTimeout(() => {
-            this.handleStickyRightColumns();
-            window.addEventListener('resize', () => this.handleStickyRightColumns());
-          }, 10);
-        }
-      }
     }
-  }
-  handleStickyRightColumns() {
-    let accumulatedWidth = 0;
-    this.stickyRightColumnsReversed.forEach((colId, index) => {
-      const isLastColumn = index === this.stickyRightColumns.length - 1;
-      const header = this.element.querySelector(`th[id="${colId}"]`);
-      const cells = this.element.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-right');
-          header.classList.add('sticky-right-shadow');
-        }
-        accumulatedWidth += (header as HTMLElement).offsetWidth;
-      }
+    private handleStickyLeftColumns(): void {
+      let accumulatedWidth = 0;
-      cells.forEach((cell) => {
-        cell.classList.add('sticky');
-        (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+      this.stickyLeftColumns.forEach((colId, index) => {
+        const isLastColumn = index === this.stickyLeftColumns.length - 1;
+        const header = document.querySelector(`th[id="${colId}"]`);
+        const cells = document.querySelectorAll(`td[id="${colId}"]`);
-        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');
-        }
-      });
-    });
-  }
-  handleCollapsibleClick() {
-    const collapsibleElements = this.element.querySelectorAll(TABLE_COLLAPSIBLE_WRAPPER_SELECTOR);
-    collapsibleElements.forEach((collapsibleElement) => {
-      collapsibleElement.addEventListener('click', (event) => {
-        document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
-        const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
-        toggleElements.forEach(element => {
-          element.classList.toggle('no-border');
-          element.classList.toggle('border-active');
-        });
-      })
-    })
-  }
-  handleCollapsibleRow() {
-    const collapsibleRows = this.element.querySelectorAll('.pb_table_collapsible_row');
-    if (collapsibleRows.length > 0) {
-      collapsibleRows.forEach((row) => {
-        const previousRow = row.previousElementSibling;
-        if (
-          previousRow &&
-          previousRow.tagName === 'TR'
-        ) {
-          const tdCount = previousRow.querySelectorAll('td').length;
-          const collapsibleTd = row.querySelector('td');
-          if (collapsibleTd) {
-            collapsibleTd.colSpan = tdCount;
+        if (header) {
+          header.classList.add('sticky');
+          (header as HTMLElement).style.left = `${accumulatedWidth}px`;
+          if (!isLastColumn) {
+            header.classList.add('with-border-right');
+            header.classList.remove('sticky-left-shadow');
+          } else {
+            header.classList.remove('with-border-right');
+            header.classList.add('sticky-left-shadow');
           }
-        } else {
-          return
+          accumulatedWidth += (header as HTMLElement).offsetWidth;
         }
-      });
-    }
-  }
-  // Cleanup method to remove event listener
-  disconnect() {
-    if (this.stickyLeftColumns.length > 0) {
-      window.removeEventListener('resize', () => this.handleStickyLeftColumns());
+        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-right');
+            cell.classList.remove('sticky-left-shadow');
+          } else {
+            cell.classList.remove('with-border-right');
+            cell.classList.add('sticky-left-shadow');
+          }
+        });
+      });
     }
-    if (this.stickyRightColumns.length > 0) {
-      window.removeEventListener('resize', () => this.handleStickyRightColumns());
+    // Cleanup method to remove event listener
+    disconnect(): void {
+      if (this.handleStickyLeftColumnsRef) {
+        window.removeEventListener('resize', this.handleStickyLeftColumnsRef);
+      }
     }
-  }
-}
+}

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss CHANGED Viewed

@@ -32,16 +32,4 @@
       }
     }
   }
-  .collapsible-tr {
-    cursor: pointer;
-  }
-  .no-border {
-    border-bottom: none !important;
-  }
-  .border-active {
-    border-bottom: 1px;
-  }
 }

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

@@ -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;

data/app/pb_kits/playbook/pb_table/table.html.erb CHANGED Viewed

@@ -4,7 +4,7 @@
   <% responsive_class = nil %>
 <% end %>
-<%= content_tag(:div, class: responsive_class, 'data-pb-table-wrapper' => true) do %>
+<%= content_tag(:div, class: responsive_class) do %>
   <% if object.tag == "table" %>
     <%= content_tag(:table,
       aria: object.aria,

data/app/pb_kits/playbook/pb_table/table.rb CHANGED Viewed

@@ -25,8 +25,6 @@ module Playbook
                     default: false
       prop :sticky_left_column, type: Playbook::Props::Array,
                                 default: []
-      prop :sticky_right_column, type: Playbook::Props::Array,
-                                 default: []
       prop :vertical_border, type: Playbook::Props::Boolean,
                              default: false
       prop :striped, type: Playbook::Props::Boolean,
@@ -42,7 +40,7 @@ module Playbook
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
-          sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
+          collapse_class, vertical_border_class, striped_class, outer_padding_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -85,7 +83,7 @@ module Playbook
         if sticky_left_column.empty?
           nil
         else
-          sticky_col_classname = "sticky-left-column sticky-left-columns-ids"
+          sticky_col_classname = "sticky-left-column sticky-columns"
           sticky_left_column.each do |id|
             sticky_col_classname += "-#{id}"
           end
@@ -94,19 +92,6 @@ module Playbook
         end
       end
-      def sticky_right_column_class
-        if sticky_right_column.empty?
-          nil
-        else
-          sticky_col_classname = "sticky-right-column sticky-right-columns-ids"
-          sticky_right_column.each do |id|
-            sticky_col_classname += "-#{id}"
-          end
-          sticky_col_classname
-        end
-      end
       def striped_class
         striped ? "striped" : nil
       end

data/app/pb_kits/playbook/pb_table/table_row.html.erb CHANGED Viewed

@@ -1,23 +1,4 @@
-<% if object.collapsible && object.tag == "table" %>
-    <%= content_tag(:tr,
-    aria: object.aria,
-    class: object.classname + " collapsible-tr",
-    data: object.data.merge(id: object.id),
-    id: object.id,
-    'data-pb-table-collapsible-wrapper' => true,
-    **combined_html_options) do %>
-    <%= content.presence %>
-  <% end %>
-  <tr class="pb_table_collapsible_row">
-    <%= pb_rails("collapsible", props: { classname: "collapsible_border_toggle#{object.id}" + " no-border", name: "default-example", tag: "td", padding: "none" }) do %>
-       <%= pb_rails("flex", props: { data: { "collapsible-main": "true"} }) %>
-       <%= pb_rails("collapsible/collapsible_content", props: { classname: object.collapsible_side_highlight ? "table_collapsible_side_highlight" : "", padding: "none", margin: "none", id: "collapsed-toggle#{object.id}" }) do %>
-          <%= object.collapsible_content %>
-      <% end %>
-    <% end %>
-  </tr>
-<% elsif object.tag == "table" %>
+<% if object.tag == "table" %>
     <%= content_tag(:tr,
       aria: object.aria,
       class: object.classname,

data/app/pb_kits/playbook/pb_table/table_row.rb CHANGED Viewed

@@ -8,11 +8,6 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
-      prop :collapsible, type: Playbook::Props::Boolean,
-                         default: false
-      prop :collapsible_content
-      prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
-                                        default: true
       def classname
         generate_classname("pb_table_row_kit", side_highlight_class) + tag_class

data/app/pb_kits/playbook/pb_text_input/docs/example.yml CHANGED Viewed

@@ -8,7 +8,6 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_options: Input Options
-  - text_input_mask: Mask
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -24,4 +23,4 @@ examples:
     - text_input_error_swift: With Error
     - text_input_disabled_swift: Disabled
     - text_input_add_on_swift: Add On
-    - text_input_props_swift: ""
+    - text_input_props_swift: ""

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb CHANGED Viewed

@@ -13,13 +13,9 @@
       <%= pb_rails("text_input/add_on", props: object.add_on_props) do %>
         <%= input_tag %>
       <% end %>
-    <% elsif mask.present? %>
-      <%= input_tag %>
-      <%= tag(:input, data: "sanitized-pb-input", id: sanitized_id, name: object.name, style: "display: none;") %>
     <% else %>
       <%= input_tag %>
     <% end %>
     <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_text_input/text_input.rb CHANGED Viewed

@@ -4,15 +4,6 @@
 module Playbook
   module PbTextInput
     class TextInput < Playbook::KitBase
-      VALID_MASKS = %w[currency zipCode postalCode ssn].freeze
-      MASK_PATTERNS = {
-        "currency" => '^\$\d{1,3}(?:,\d{3})*(?:\.\d{2})?$',
-        "zip_code" => '\d{5}',
-        "postal_code" => '\d{5}-\d{4}',
-        "ssn" => '\d{3}-\d{2}-\d{4}',
-      }.freeze
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: true
       prop :disabled, type: Playbook::Props::Boolean,
@@ -34,9 +25,6 @@ module Playbook
       prop :add_on, type: Playbook::Props::NestedProps,
                     nested_kit: Playbook::PbTextInput::AddOn
-      prop :mask, type: Playbook::Props::String,
-                  default: nil
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
         generate_classname("pb_text_input_kit") + default_margin_bottom + error_class + inline_class
@@ -58,10 +46,6 @@ module Playbook
         { dark: dark }.merge(add_on || {})
       end
-      def sanitized_id
-        "#{object.id}-sanitized" if id.present?
-      end
     private
       def all_input_options
@@ -71,13 +55,12 @@ module Playbook
           data: validation_data,
           disabled: disabled,
           id: input_options.dig(:id) || id,
-          name: mask.present? ? "" : name,
-          pattern: validation_pattern || mask_pattern,
+          name: name,
+          pattern: validation_pattern,
           placeholder: placeholder,
           required: required,
           type: type,
           value: value,
-          mask: mask,
         }.merge(input_options)
       end
@@ -92,7 +75,7 @@ module Playbook
       def validation_data
         fields = input_options.dig(:data) || {}
         fields[:message] = validation_message unless validation_message.blank?
-        mask ? fields.merge(pb_input_mask: true) : fields
+        fields
       end
       def error_class
@@ -102,19 +85,6 @@ module Playbook
       def inline_class
         inline ? " inline" : ""
       end
-      def mask_data
-        return {} unless mask
-        raise ArgumentError, "mask must be one of: #{VALID_MASKS.join(', ')}" unless VALID_MASKS.include?(mask)
-        { mask: mask }
-      end
-      def mask_pattern
-        return nil unless mask
-        MASK_PATTERNS[mask]
-      end
     end
   end
 end