playbook_ui 14.22.0.pre.alpha.testdialog8898 → 14.22.0.pre.rc.0

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx

@@ -6,18 +6,15 @@ const DropdownDefault = (props) => {
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
-      id: "us"
+      value: "United States",
     },
     {
       label: "Canada",
-      value: "canada",
-      id: "ca"
+      value: "Canada",
     },
     {
       label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
+      value: "Pakistan",
     }
   ];  
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx

@@ -8,20 +8,20 @@ const [selectedOption, setSelectedOption] = useState();
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
+      value: "United States",
       icon: "🇺🇸",
       id: "United-states"
 
     },
     {
       label: "United Kingdom",
-      value: "unitedKingdom",
+      value: "United Kingdom",
       icon: "🇬🇧",
       id: "united-kingdom"
     },
     {
       label: "Pakistan",
-      value: "pakistan",
+      value: "Pakistan",
       icon: "🇵🇰",
       id: "pakistan"
     }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb

@@ -2,21 +2,21 @@
   options = [
     {
       label: "United States",
-      value: "unitedStates",
+      value: "United States",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "United Kingdom",
-      value: "unitedKingdom",
+      value: "United Kingdom",
       areaCode: "+44",
       icon: "🇬🇧",
       id: "gb"
     },
     {
       label: "Pakistan",
-      value: "pakistan",
+      value: "Pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pk"

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

@@ -15,8 +15,6 @@ examples:
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
-  - dropdown_with_custom_icon_options: Custom Icon Options
-  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
@@ -39,8 +37,6 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
-  - dropdown_with_custom_icon_options: Custom Icon Options
-  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
@@ -48,4 +44,6 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
+  - dropdown_close_on_select: Close On Selection
+
 

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

@@ -20,5 +20,4 @@ export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_
 export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
 export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
-export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
-export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
+export { default as DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -25,7 +25,7 @@ type DropdownOptionProps = {
   key?: string | number;
   option?: GenericObject;
   padding?: string;
-}  & GlobalProps;
+} & GlobalProps;
 
 const DropdownOption = (props: DropdownOptionProps) => {
   const {
@@ -56,16 +56,17 @@ const DropdownOption = (props: DropdownOptionProps) => {
 
   // When multiSelect, then if an option is selected, remove from dropdown
   const isSelected = Array.isArray(selected)
-   ? selected.some((item) => item.label === option?.label)
-   : (selected as GenericObject)?.label === option?.label;
+    ? selected.some((item) => item.label === option?.label)
+    : (selected as GenericObject)?.label === option?.label;
 
-  
   if (!isItemMatchingFilter(option) || (multiSelect && isSelected)) {
     return null;
   }
+
   const isFocused =
     focusedOptionIndex >= 0 &&
     filteredOptions[focusedOptionIndex].label === option?.label;
+
   const focusedClass = isFocused && "focused";
 
   const selectedClass = isSelected ? "selected" : "list";
@@ -91,7 +92,10 @@ const DropdownOption = (props: DropdownOptionProps) => {
         className={classes}
         id={id}
         key={key}
-        onClick= {() => handleOptionClick(option)}
+        onClick={(e) => {
+            e.stopPropagation();
+            handleOptionClick(option);
+        }}
     >
       <ListItem
           cursor="pointer"
@@ -100,12 +104,12 @@ const DropdownOption = (props: DropdownOptionProps) => {
           key={option?.label}
           padding="none"
       >
-          {children ? 
+        {children ?
           <div className="dropdown_option_wrapper">{children}</div> :
-              <Body dark={dark} 
-                  text={option?.label} 
-              />
-          }
+          <Body dark={dark}
+              text={option?.label}
+          />
+        }
       </ListItem>
     </div>
   );

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -44,6 +44,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
 
   const {
     autocomplete,
+    closeOnSelection,
     filterItem,
     handleBackspace,
     handleChange,
@@ -54,6 +55,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     isInputFocused,
     multiSelect,
     selected,
+    setIsDropDownClosed,
     setIsInputFocused,
     toggleDropdown,
   } = useContext(DropdownContext);
@@ -103,11 +105,26 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     ? placeholder
     : "Select...";
 
+  // Click handler that respects closeOnSelection
+  const handleInputClick = (e: React.MouseEvent) => {
+    e.stopPropagation(); // keep the wrapper's handler from firing
+    if (isDropDownClosed) {
+      // Always open if closed
+      setIsDropDownClosed(false);
+    } else if (!closeOnSelection) {
+      // Keep open if closeOnSelection is false
+      return;
+    } else {
+      // Default behavior - toggle
+      toggleDropdown();
+    }
+  };
+
   return (
-    <div {...ariaProps} 
-        {...dataProps} 
+    <div {...ariaProps}
+        {...dataProps}
         {...htmlProps}
-        className={classes} 
+        className={classes}
         id={id}
     >
       {
@@ -145,7 +162,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                     {customDisplay ? (
                       <Flex align="center">
                         {customDisplay}
-                        <Body dark={dark} 
+                        <Body dark={dark}
                             paddingLeft={`${joinedLabels ? "xs" : "none"}`}
                         >
                           {customDisplayPlaceholder}
@@ -164,10 +181,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                           <input
                               className="dropdown_input"
                               onChange={handleChange}
-                              onClick={(e) => {
-                                e.stopPropagation();// keep the wrapper’s handler from firing
-                                toggleDropdown();
-                              }}
+                              onClick={handleInputClick}
                               onFocus={() => setIsInputFocused(true)}
                               onKeyDown={(e) => {
                                  handleKeyDown(e);
@@ -186,8 +200,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         )}
                         </>
                       ) : (
-                        <Body dark={dark} 
-                            text={defaultDisplayPlaceholder} 
+                        <Body dark={dark}
+                            text={defaultDisplayPlaceholder}
                         />
                       )
                     )}
@@ -195,10 +209,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       <input
                           className="dropdown_input"
                           onChange={handleChange}
-                          onClick={(e) => {
-                            e.stopPropagation();// keep the wrapper’s handler from firing
-                            toggleDropdown();
-                          }}
+                          onClick={handleInputClick}
                           onFocus={() => setIsInputFocused(true)}
                           onKeyDown={handleKeyDown}
                           placeholder={
@@ -223,7 +234,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
                       }}
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                  > 
+                  >
                   {
                     selectedArray.length > 0 && (
                       <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>

data/app/pb_kits/playbook/pb_filter/Filter/index.tsx

@@ -1,29 +1,18 @@
 import React from 'react'
 import FilterSingle, { FilterSingleProps } from './FilterSingle'
 import FilterDouble, { FilterDoubleProps } from './FilterDouble'
-import FilterSidebar, { FilterSidebarProps } from './FilterSidebar'
-import FilterSection from './FilterSection'
 
 type FilterProps =
   | FilterSingleProps
   | (FilterDoubleProps & {
       double?: boolean,
     })
-  | (FilterSidebarProps & {
-    variant?: null | 'sidebar',
-  })
 
 const Filter = ({
   double = false,
-  variant,
   ...templateProps
   }: FilterProps): React.ReactElement => {
   const displayFilter = () => {
-    if (variant === 'sidebar') {
-      return (
-        <FilterSidebar {...templateProps} />
-      )
-    }
     if (double === true) {
       return (
         <FilterDouble {...templateProps} />
@@ -41,6 +30,4 @@ const Filter = ({
   )
 }
 
-Filter.Section = FilterSection
-
 export default Filter

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -88,10 +88,6 @@
     z-index: 1;
   }
 
-  [class^=pb_collapsible_kit] .toggle-content.filter_section_collapsible {
-    padding-top: $space_xs !important;
-  }
-
   &[class*=dark] {
     .filters .filter {
     border-right: 1px solid $border_dark !important;

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

@@ -24,5 +24,4 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
-  - filter_sidebar: Sidebar
 

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

@@ -8,4 +8,3 @@ export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
 export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
-export { default as FilterSidebar } from './_filter_sidebar.jsx'

data/app/pb_kits/playbook/pb_filter/filter.test.js

@@ -58,12 +58,12 @@ function FilterTest(props) {
 }
 
 test("triggers popover on filter button click", () => {
-  const { container } = render(<FilterTest data={{ testid: "render-test" }}/>);
+  render(<FilterTest data={{ testid: "render-test" }}/>);
 
   const btn = screen.getAllByRole("button")[0];
 
   // checks if the sort menu rendered
-  expect(container.querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByLabelText("sort-amount-down icon")).toBeInTheDocument()
   expect(screen.getByText('Popularity')).toBeInTheDocument() // check if filter/sort is rendered 
 
   // hits the filter button and triggers popover

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

@@ -104,8 +104,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyLeftColumn.forEach((colId, index) => {
                 const isLastColumn = index === stickyLeftColumn.length - 1;
-                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
+                const header = document.querySelector(`th[id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');
@@ -155,8 +155,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyRightColumnReversed.forEach((colId, index) => {
                 const isLastColumn = index === stickyRightColumn.length - 1;
-                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
+                const header = document.querySelector(`th[id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb

@@ -1,7 +1,7 @@
 <%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["a"], sticky_right_column: ["b"] }) do %>
   <thead>
     <tr>
-      <th data-sticky-id="a">Column 1</th>
+      <th id="a">Column 1</th>
       <th>Column 2</th>
       <th>Column 3</th>
       <th>Column 4</th>
@@ -15,12 +15,12 @@
       <th>Column 12</th>
       <th>Column 13</th>
       <th>Column 14</th>
-      <th data-sticky-id="b">Column 15</th>
+      <th id="b">Column 15</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td data-sticky-id="a">Value 1</td>
+      <td id="a">Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
@@ -34,10 +34,10 @@
       <td>Value 12</td>
       <td>Value 13</td>
       <td>Value 14</td>
-      <td data-sticky-id="b">Value 15</td>
+      <td id="b">Value 15</td>
     </tr>
     <tr>
-      <td data-sticky-id="a">Value 1</td>
+      <td id="a">Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
@@ -51,10 +51,10 @@
       <td>Value 12</td>
       <td>Value 13</td>
       <td>Value 14</td>
-      <td data-sticky-id="b">Value 15</td>
+      <td id="b">Value 15</td>
     </tr>
     <tr>
-      <td data-sticky-id="a">Value 1</td>
+      <td id="a">Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
@@ -68,7 +68,7 @@
       <td>Value 12</td>
       <td>Value 13</td>
       <td>Value 14</td>
-      <td data-sticky-id="b">Value 15</td>
+      <td id="b">Value 15</td>
     </tr>
   </tbody>
 <% end %>

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

@@ -11,7 +11,7 @@ const TableStickyColumns = () => {
         >
             <thead>
                 <tr>
-                    <th data-sticky-id="a">{'Column 1'}</th>
+                    <th id="a">{'Column 1'}</th>
                     <th>{'Column 2'}</th>
                     <th>{'Column 3'}</th>
                     <th>{'Column 4'}</th>
@@ -25,12 +25,12 @@ const TableStickyColumns = () => {
                     <th>{'Column 12'}</th>
                     <th>{'Column 13'}</th>
                     <th>{'Column 14'}</th>
-                    <th data-sticky-id="b">{'Column 15'}</th>
+                    <th id="b">{'Column 15'}</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td data-sticky-id="a">{'Value 1'}</td>
+                    <td id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -44,10 +44,10 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td data-sticky-id="b">{'Value 15'}</td>
+                    <td id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td data-sticky-id="a">{'Value 1'}</td>
+                    <td id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -61,10 +61,10 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td data-sticky-id="b">{'Value 15'}</td>
+                    <td id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td data-sticky-id="a">{'Value 1'}</td>
+                    <td id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -78,7 +78,7 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td data-sticky-id="b">{'Value 15'}</td>
+                    <td id="b">{'Value 15'}</td>
                 </tr>
             </tbody>
         </Table>

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

@@ -1,3 +1,3 @@
 The `sticky_left_column` and `sticky_right_column` props can be used together on the same table as needed.
 
-Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using props.
+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_columns_react.md

@@ -1,3 +1,3 @@
 The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
 
-Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using props.
+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.html.erb

@@ -1,9 +1,9 @@
 <%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
   <thead>
     <tr>
-      <th data-sticky-id="1">Column 1</th>
-      <th data-sticky-id="2">Column 2</th>
-      <th data-sticky-id="3">Column 3</th>
+      <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>
@@ -20,9 +20,9 @@
   </thead>
   <tbody>
     <tr>
-      <td data-sticky-id="1">Value 1</td>
-      <td data-sticky-id="2">Value 2</td>
-      <td data-sticky-id="3">Value 3</td>
+      <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>
@@ -38,9 +38,9 @@
 
     </tr>
     <tr>
-      <td data-sticky-id="1">Value 1</td>
-      <td data-sticky-id="2">Value 2</td>
-      <td data-sticky-id="3">Value 3</td>
+      <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>
@@ -56,9 +56,9 @@
 
     </tr>
     <tr>
-      <td data-sticky-id="1">Value 1</td>
-      <td data-sticky-id="2">Value 2</td>
-      <td data-sticky-id="3">Value 3</td>
+      <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>

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

@@ -10,9 +10,9 @@ const TableStickyLeftColumns = () => {
         >
             <thead>
                 <tr>
-                    <th data-sticky-id="1">{'Column 1'}</th>
-                    <th data-sticky-id="2">{'Column 2'}</th>
-                    <th data-sticky-id="3">{'Column 3'}</th>
+                    <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>
@@ -29,9 +29,9 @@ const TableStickyLeftColumns = () => {
             </thead>
             <tbody>
                 <tr>
-                    <td data-sticky-id="1">{'Value 1'}</td>
-                    <td data-sticky-id="2">{'Value 2'}</td>
-                    <td data-sticky-id="3">{'Value 3'}</td>
+                    <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>
@@ -46,9 +46,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td data-sticky-id="1">{'Value 1'}</td>
-                    <td data-sticky-id="2">{'Value 2'}</td>
-                    <td data-sticky-id="3">{'Value 3'}</td>
+                    <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>
@@ -63,9 +63,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td data-sticky-id="1">{'Value 1'}</td>
-                    <td data-sticky-id="2">{'Value 2'}</td>
-                    <td data-sticky-id="3">{'Value 3'}</td>
+                    <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>

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 `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-id` to the `<th>` and `<td>`.
+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>`.
 
-Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s 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 `sticky_left_column`.

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

@@ -1,5 +1,5 @@
-The `stickyLeftColumn` prop expects an array of the column `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-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>`.
 
-If you are using the sub-component variant, then you will pass the `data-sticky-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 `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using `stickyLeftColumn` prop.
+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.