playbook_ui 14.11.1.pre.alpha.pbntr703collapsiblerowsrails5536 → 14.11.1.pre.alpha.play1724darkmodeauditmap5409

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

@@ -5,4 +5,3 @@ export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
-export { default as PhoneNumberInputFormat } from './_phone_number_input_format'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -21,8 +21,6 @@ module Playbook
                    default: ""
       prop :value, type: Playbook::Props::String,
                    default: ""
-      prop :format_as_you_type, type: Playbook::Props::Boolean,
-                                default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -34,7 +32,6 @@ module Playbook
           dark: dark,
           disabled: disabled,
           error: error,
-          formatAsYouType: format_as_you_type,
           initialCountry: initial_country,
           label: label,
           name: name,

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, act } from "../utilities/test-utils";
+import { render, screen } from "../utilities/test-utils";
 import PhoneNumberInput from "./_phone_number_input";
 
 const testId = "phoneNumberInput";
@@ -120,22 +120,3 @@ test("should trigger callback", () => {
 
   expect(handleOnValidate).toBeCalledWith(true)
 });
-
-test("should format phone number as '555-555-5555' with formatAsYouType and 'us' country", () => {
-    const props = {
-        initialCountry: 'us',
-        formatAsYouType: true,
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    
-    const input = screen.getByRole("textbox");
-    
-    act(() => {
-        input.value = "5555555555";
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-    });
-
-    expect(input.value).toBe("555-555-5555");
-});

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -4,7 +4,7 @@
 @import "../pb_body/body";
 @import "../tokens/transition";
 
-[class^="pb_radio_kit"] {
+[class^=pb_radio_kit] {
   display: inline-flex;
   cursor: pointer;
 
@@ -16,11 +16,10 @@
     border-radius: 1000px;
     border: 2px solid $border_light;
     margin-right: $space_xs;
-    transition: background $transition_default ease,
-      box-shadow $transition_default ease, border-color $transition_default ease;
+    transition: background $transition_default ease, box-shadow $transition_default ease, border-color $transition_default ease;
   }
 
-  @media (hover: hover) {
+  @media (hover:hover) {
     &:hover .pb_radio_button {
       background-color: $bg_light;
       border-color: $border_light;
@@ -53,14 +52,14 @@
       }
     }
 
-    &:disabled:checked + .pb_radio_button {
+    &:disabled:checked + .pb_radio_button{
       cursor: not-allowed;
       background-color: $white;
       border: 6px solid $neutral;
     }
   }
 
-  &[class*="vertical"] {
+  &[class*=vertical] {
     flex-direction: column;
     align-items: center;
     .pb_radio_button {
@@ -81,7 +80,7 @@
       }
       &:checked {
         & ~ .pb_radio_button {
-          border: 6px solid $active_dark;
+          border: 6px solid $primary;
         }
       }
 
@@ -104,10 +103,10 @@
       }
     }
 
-    @media (hover: hover) {
+    @media (hover:hover) {
       &:hover {
         .pb_radio_button {
-          background-color: rgba($white, 0.1);
+          background-color: rgba($white,.10);
           border-color: $border_dark;
         }
       }
@@ -116,9 +115,6 @@
       > .pb_radio_button {
         border-color: $error_dark;
       }
-      > .pb_body_kit_negative {
-        color: $error_dark;
-      }
     }
   }
   &.error {

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx

@@ -29,7 +29,6 @@ const RadioChildren = (props) => {
             marginBottom="none"
             minWidth="xs"
             options={options}
-            {...props}
         />
       </Radio>
       <Radio
@@ -41,11 +40,10 @@ const RadioChildren = (props) => {
           value="Typeahead"
           {...props}
       >
-        <Typeahead
+        <Typeahead 
             marginBottom="none"
             minWidth="xs"
             options={options}
-            {...props}
         />
       </Radio>
       <Radio
@@ -56,12 +54,9 @@ const RadioChildren = (props) => {
           value="Typography"
           {...props}
       >
-        <Title
-            text="Custom Typography"
-            {...props}
-        />
+        <Title text="Custom Typography" />
       </Radio>
     </div>
   )
 }
-export default RadioChildren
+export default RadioChildren

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb

@@ -4,23 +4,9 @@
     data: object.data,
     id: object.id,
     **combined_html_options) do %>
-  <% if enable_drag %>
-    <%= pb_rails("draggable", props: {initial_items: object.items}) do %>
-      <%= pb_rails("draggable/draggable_container") do %>
-        <%= pb_rails("list", props: {ordered: false}) do %>
-          <% object.items.each do |item| %>
-            <%= pb_rails("draggable/draggable_item", props: {drag_id: item[:drag_id]}) do %>
-              <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item), drag_id: item[:drag_id]) )%>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% else %>
-    <%= pb_rails("list") do %>
-      <% object.items.each do |item| %>
-        <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
-      <% end %>
+  <%= pb_rails("list") do %>
+    <% object.items.each do |item| %>
+      <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb

@@ -14,9 +14,6 @@ module Playbook
       prop :items, type: Playbook::Props::Array,
                    default: []
 
-      prop :enable_drag, type: Playbook::Props::Boolean,
-                         default: false
-
       def classname
         generate_classname("pb_selectable_list_kit")
       end

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb

@@ -4,13 +4,6 @@
     data: object.data,
     id: object.id,
     **combined_html_options) do %>
-  <% if object.drag_id && object.drag_handle %>
-    <span style="vertical-align: middle;">
-      <%= pb_rails("body") do %>
-        <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
-      <% end %>
-    </span>
-  <% end %>
   <% if object.variant == "radio"%>
     <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
     <% if content.present? %>
@@ -26,10 +19,10 @@
   <% if object.variant == "checkbox"%>
     <script>
       var checkboxElement = document.querySelector("#<%=object.id%> input[type=checkbox]")
-
+      
       checkboxElement.addEventListener("change", (evt) => {
         var listItemElement = document.querySelector("#<%=object.id%>")
-
+        
         if (evt.target.checked) {
           listItemElement.classList.add("checked_item");
         } else {
@@ -41,9 +34,9 @@
     <script>
       var radioElement = document.querySelector("#<%=object.id%> input[type=radio]")
 
-      radioElement.addEventListener("change", () => {
+      radioElement.addEventListener("change", () => {        
         var radios = radioElement.closest("ul").querySelectorAll("input[type=radio]")
-
+        
         radios.forEach((radio) => {
           if (radio.checked) {
             radio.closest("li").classList.add("checked_item");

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -6,9 +6,6 @@ module Playbook
       prop :tabindex
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
-      prop :drag_handle, type: Playbook::Props::Boolean,
-                         default: true
-      prop :drag_id, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
       prop :text, type: Playbook::Props::String
       prop :value, type: Playbook::Props::String

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

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, globalInlineProps } from '../utilities/globalProps'
+import PbTable from '.'
 import {
     TableHead,
     TableHeader,
@@ -9,7 +10,6 @@ import {
     TableRow,
     TableCell,
 } from "./subcomponents";
-import { addDataTitle } from './utilities/addDataTitle'
 
 type TableProps = {
     aria?: { [key: string]: string },
@@ -196,7 +196,8 @@ const Table = (props: TableProps): React.ReactElement => {
     }, [stickyRightColumn]);
 
     useEffect(() => {
-        addDataTitle()
+        const instance = new PbTable()
+        instance.connect()
     }, [])
 
     return (

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

@@ -1,3 +1,3 @@
-The `sticky_left_column` 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>`.
+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 `sticky_left_column`.
+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/example.yml

@@ -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,7 +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
 
   react:
     - table_sm: Small

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

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

@@ -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/table.html.erb

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

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