playbook_ui_docs 14.21.2 → 14.22.0.pre.alpha.PLAY2248railstooltipclicktoopen8667

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

@@ -11,21 +11,21 @@ const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "United-states"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "canada"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pakistan"

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

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 
 %>

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

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

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: "United States",
+      value: "unitedStates",
       icon: "🇺🇸",
       id: "United-states"
 
     },
     {
       label: "United Kingdom",
-      value: "United Kingdom",
+      value: "unitedKingdom",
       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: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "United Kingdom",
-      value: "United Kingdom",
+      value: "unitedKingdom",
       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,6 +15,8 @@ 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
@@ -37,6 +39,8 @@ 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

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

@@ -19,4 +19,6 @@ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
 export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
 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 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'

data/app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx

@@ -0,0 +1,224 @@
+import React, { useState } from 'react'
+
+import Filter from '../../pb_filter/_filter'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
+import useCollapsible from '../../pb_collapsible/useCollapsible'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Checkbox from '../../pb_checkbox/_checkbox'
+import Flex from '../../pb_flex/_flex'
+import Table from '../../pb_table/_table'
+import Caption from '../../pb_caption/_caption'
+import Icon from '../../pb_icon/_icon'
+
+const people = [
+  { name: 'Hera Syndulla', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
+  { name: 'Kanan Jarrus', territory: 'USA', products: ['Siding', 'Roofing', 'Gutters'] },
+  { name: 'C1-10P', territory: 'USA', products: ['Roofing'] },
+  { name: 'Anakin Skywalker', territory: 'A galaxy far far away, like really far away...', products: ['Doors', 'Windows', 'Solar'] },
+  { name: 'Leia Organa', territory: 'Canada', products: ['Windows', 'Doors'] },
+  { name: 'Luke Skywalker', territory: 'Brazil', products: ['Solar', 'Roofing'] },
+  { name: 'Padmé Amidala', territory: 'Philippines', products: ['Siding', 'Gutters'] },
+  { name: 'Obi-Wan Kenobi', territory: 'USA', products: ['Windows', 'Siding'] },
+  { name: 'Ahsoka Tano', territory: 'Canada', products: ['Insulation', 'Solar'] },
+  { name: 'Boba Fett', territory: 'Brazil', products: ['Roofing', 'Gutters'] },
+  { name: 'Mace Windu', territory: 'Philippines', products: ['Doors', 'Siding'] },
+  { name: 'Grogu', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
+  { name: 'Sabine Wren', territory: 'Canada', products: ['Solar', 'Doors'] },
+  { name: 'C-3PO', territory: 'Brazil', products: ['Windows'] },
+  { name: 'R2-D2', territory: 'Philippines', products: ['Doors', 'Gutters'] },
+]
+
+const FilterSidebar = (props) => {
+  const [name, setName] = useState('')
+  const [ territory, setTerritory ] = useState('')
+  const [ products, setProducts ] = useState({})
+  const handleUpdateName = ({ target }) => {
+    setName(target.value)
+  }
+  const handleUpdateTerritory = ({ target }) => {
+    setTerritory(target.value)
+  }
+  const handleCheckboxChange = ({ target }) => {
+    setProducts(prev => ({
+      ...prev,
+      [target.name]: !prev[target.name],
+    }))
+  }
+  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
+  const [isProductsCollapsed, setIsProductsCollapsed] = useCollapsible(true)
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far away...' },
+  ]
+
+  const filteredPeople = people.filter((person) => {
+    const matchesName = person.name.toLowerCase().includes(name.toLowerCase())
+
+    const matchesTerritory = territory === '' ? true : person.territory === territory
+
+    const matchesProducts = Object.values(products).every((product) => !product) ? true : person.products.some(product => products[product])
+
+    return matchesName && matchesTerritory && matchesProducts
+  })
+
+  return (
+    <>
+      <Flex>
+        <Filter
+            isCollapsed={isCollapsed}
+            marginRight="xs"
+            onCollapse={() => setIsCollapsed(!isCollapsed)}
+            results={filteredPeople.length}
+            sortOptions={{
+              popularity: 'Popularity',
+              // eslint-disable-next-line
+              manager_title: 'Manager\'s Title',
+              // eslint-disable-next-line
+              manager_name: 'Manager\'s Name',
+            }}
+            sortValue={[{ name: 'popularity', dir: 'desc' }]}
+            variant="sidebar"
+            width="xs"
+            {...props}
+        >
+          <Filter.Section
+              collapsed={isCollapsed}
+              headerText="Full Name"
+          >
+            <TextInput
+                onChange={handleUpdateName}
+                placeholder="Enter name"
+                value={name}
+                {...props}
+            />
+          </Filter.Section>
+          <SectionSeparator />
+          <Filter.Section
+              collapsed={isCollapsed}
+              collapsible
+              headerText="Territory"
+          >
+            <Select
+                blankSelection="Select One..."
+                name="location"
+                onChange={handleUpdateTerritory}
+                options={options}
+                {...props}
+            />
+          </Filter.Section>
+          <SectionSeparator />
+          <Filter.Section
+              collapsed={isCollapsed}
+              collapsible
+              headerText="Products"
+          >
+            <div>
+              <Checkbox
+                  marginBottom="sm"
+                  name="Doors"
+                  onChange={handleCheckboxChange}
+                  text="Doors"
+              />
+            </div>
+            <div>
+              <Checkbox
+                  marginBottom="sm"
+                  name="Windows"
+                  onChange={handleCheckboxChange}
+                  text="Windows"
+              />
+            </div>
+            <div>
+              <Checkbox
+                  marginBottom="sm"
+                  name="Siding"
+                  onChange={handleCheckboxChange}
+                  text="Siding"
+              />
+            </div>
+            {!isProductsCollapsed &&
+              <>
+                <div>
+                  <Checkbox
+                      checked={products["Roofing"]}
+                      marginBottom="sm"
+                      name="Roofing"
+                      onChange={handleCheckboxChange}
+                      text="Roofing"
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                      checked={products["Gutters"]}
+                      marginBottom="sm"
+                      name="Gutters"
+                      onChange={handleCheckboxChange}
+                      text="Gutters"
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                      checked={products["Solar"]}
+                      marginBottom="sm"
+                      name="Solar"
+                      onChange={handleCheckboxChange}
+                      text="Solar"
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                      checked={products["Insulation"]}
+                      marginBottom="sm"
+                      name="Insulation"
+                      onChange={handleCheckboxChange}
+                      text="Insulation"
+                  />
+                </div>
+              </>
+            }
+            <div onClick={() => setIsProductsCollapsed(!isProductsCollapsed)}>
+              <Flex
+                  cursor="pointer"
+                  marginBottom="sm"
+              >
+                <Caption
+                    color="link"
+                    marginRight="xxs"
+                    size="xs"
+                    text={isProductsCollapsed ? "Show More" : "Show Less"}
+                />
+                <Icon
+                    icon={isProductsCollapsed ? "chevron-down" : "chevron-up"}
+                />
+              </Flex>
+            </div>
+          </Filter.Section>
+        </Filter>
+        <Table
+            size="sm"
+        >
+          <thead>
+            <tr>
+              <th>{'Name'}</th>
+              <th>{'Territory'}</th>
+              <th>{'Products'}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredPeople.map((person) => (<tr key={person.name}>
+              <td>{ person.name }</td>
+              <td>{ person.territory }</td>
+              <td>{ person.products.join(", ") }</td>
+            </tr>))}
+          </tbody>
+        </Table>
+      </Flex>
+    </>
+  )
+}
+
+export default FilterSidebar

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

@@ -24,4 +24,5 @@ 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,3 +8,4 @@ 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_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 id="a">Column 1</th>
+      <th data-sticky-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 id="b">Column 15</th>
+      <th data-sticky-id="b">Column 15</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td id="a">Value 1</td>
+      <td data-sticky-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 id="b">Value 15</td>
+      <td data-sticky-id="b">Value 15</td>
     </tr>
     <tr>
-      <td id="a">Value 1</td>
+      <td data-sticky-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 id="b">Value 15</td>
+      <td data-sticky-id="b">Value 15</td>
     </tr>
     <tr>
-      <td id="a">Value 1</td>
+      <td data-sticky-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 id="b">Value 15</td>
+      <td data-sticky-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 id="a">{'Column 1'}</th>
+                    <th data-sticky-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 id="b">{'Column 15'}</th>
+                    <th data-sticky-id="b">{'Column 15'}</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-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 id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-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 id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-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 id="b">{'Value 15'}</td>
+                    <td data-sticky-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 ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.
+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.

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 ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.
+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.

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 id="1">Column 1</th>
-      <th id="2">Column 2</th>
-      <th id="3">Column 3</th>
+      <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>Column 4</th>
       <th>Column 5</th>
       <th>Column 6</th>
@@ -20,9 +20,9 @@
   </thead>
   <tbody>
     <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
+      <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>Value 4</td>
       <td>Value 5</td>
       <td>Value 6</td>
@@ -38,9 +38,9 @@
 
     </tr>
     <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
+      <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>Value 4</td>
       <td>Value 5</td>
       <td>Value 6</td>
@@ -56,9 +56,9 @@
 
     </tr>
     <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
+      <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>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 id="1">{'Column 1'}</th>
-                    <th id="2">{'Column 2'}</th>
-                    <th id="3">{'Column 3'}</th>
+                    <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>{'Column 4'}</th>
                     <th>{'Column 5'}</th>
                     <th>{'Column 6'}</th>
@@ -29,9 +29,9 @@ const TableStickyLeftColumns = () => {
             </thead>
             <tbody>
                 <tr>
-                    <td id="1">{'Value 1'}</td>
-                    <td id="2">{'Value 2'}</td>
-                    <td id="3">{'Value 3'}</td>
+                    <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>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>
@@ -46,9 +46,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="1">{'Value 1'}</td>
-                    <td id="2">{'Value 2'}</td>
-                    <td id="3">{'Value 3'}</td>
+                    <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>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>
@@ -63,9 +63,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="1">{'Value 1'}</td>
-                    <td id="2">{'Value 2'}</td>
-                    <td id="3">{'Value 3'}</td>
+                    <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>{'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 ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+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>`.
 
-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 `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`.

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 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 `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-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 `data-sticky-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.
+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.