playbook_ui_docs 14.10.0.pre.alpha.play1662cssbargraph5193 → 14.10.0.pre.alpha.play1662cssbargraph5200

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7119ca26238f90df496bdd0b13e7972f8016e20d13d9610cdda2ef0cdb153c06
-  data.tar.gz: f01616ecd7feabf0c5a276a487345dd5acfe9c06ff8ddb9698c793f2b402d8b3
+  metadata.gz: 6a39030ed41d0a502e8ff8487c72b4116a5949a16075d0a0a8568f5c451e8da0
+  data.tar.gz: 53510d707ca5dc79bcdb56837c1d9dcf37b78524bad6424e0bc037d409ecf6e6
 SHA512:
-  metadata.gz: a2f899c83ccbeb19d33df131f4e5d73d1bc94755dc92d1507fbf71018d11f87bbd7dc408d716e2f482097e7e21169275f73bf17533f236027281c79388cb13ed
-  data.tar.gz: b3d038942441794b803e8bf71044bf17bec6d1159da4b0c59dcde455868f817ff247fe9810d6c468d5d0173463d953de7a0c1163488a5f25e4d787fd40b3b956
+  metadata.gz: ddb22c3ab914a13e3235b43c91a83ba0dadaf8a2ddb94729b89ac0e876dc905a3db74d6067aa677893e4b01b47d7af675bfb0b0b54bd873d73545b2b7ac67555
+  data.tar.gz: bebe8640c8aac8fd279a7d5b83317bd45329dc913880d06f535eaa2c3aad477c5bbda869e3f495a0e88df02383943c465e264697bf1304ef87dcfb70563d7667

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("section_separator", props: { text: "Default Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary", text: "Primary Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary", line_style: "dashed", text: "Primary Dashed Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary" }) do %>
+  <%= pb_rails("flex", props: { padding: "xs" }) do %>
+    <%= pb_rails("icon", props: { color: "primary", icon: "arrow-down" }) %>
+    <%= pb_rails("detail", props: { text: "Children", size: "sm", color: "link" }) %>
+  <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
+
+const children = (
+  <Flex padding="xs">
+    <Icon color="primary"
+        icon="arrow-down"
+    />
+    <Detail
+        color="link"
+        size="sm"
+        text="Children"
+    />
+  </Flex>
+)
+
+const SectionSeparatorColor = (props) => {
+  return (
+    <div>
+      <SectionSeparator text="Default Separator"
+          {...props}
+      />
+      <SectionSeparator color="primary"
+          text="Primary Separator"
+          {...props}
+      />
+      <SectionSeparator
+          color="primary"
+          lineStyle="dashed"
+          text="Primary Dashed Separator"
+          {...props}
+      />
+       <SectionSeparator color="primary"
+           {...props}
+       >
+        {children}
+      </SectionSeparator>
+    </div>
+  )
+}
+
+export default SectionSeparatorColor

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md

@@ -0,0 +1,3 @@
+Pass "primary" to the `color` prop to change any section separator color.
+
+**NOTE:** Passing `children` overrides any content provided via the `text` prop. The `color` prop does not affect the `text` prop's color, and the color of `children` is determined by the children's individual props. For greater control over text color customization, consider using a separator with `children`.

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

@@ -6,6 +6,7 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+  - section_separator_color: Color
 
   react:
   - section_separator_line: Line Separator
@@ -13,6 +14,7 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+  - section_separator_color: Color
 
   swift:
   - section_separator_line_swift: Line Separator

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

@@ -3,3 +3,4 @@ export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
 export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
 export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'
+export { default as SectionSeparatorColor } from './_section_separator_color.jsx'

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_description.md

@@ -0,0 +1,3 @@
+The Skeleton Loading kit can be used an intermediate loading state to give users a visual indication that content is loading. 
+
+**Please Note**: this kit is not meant to be integrated interally within other Playbook kits as a loading prop; rather, it can be used to create a composite of the section/kit/page with loading intermediataries, as demonstrated in the the "example component" doc examples.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("flex", props: { justify: "evenly" }) do %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "xl", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "lg", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "md", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "xs", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "none", height: "50px", width: "100px"}) %>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md

@@ -0,0 +1 @@
+The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("card", props: { border_none: true }) do %>
+    <%= pb_rails("skeleton_loading") %>
+<% end %>
+
+<%= pb_rails("card", props: { background: "light", border_none: true }) do %>
+    <%= pb_rails("skeleton_loading", props: { color: "white" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("skeleton_loading") %>
+<%= pb_rails("skeleton_loading") %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.html.erb

@@ -0,0 +1,119 @@
+<%= pb_rails("button", props: { id: "toggle-filter-button", margin_bottom: "md", text: "Show Filter", variant: "secondary" }) %>
+
+<div id="skeleton-loading-filter-content">
+  <%= pb_rails("card", props: { margin_bottom: "lg" }) do %>
+    <%= pb_rails("flex", props: { align_items: "center", justify: "between", orientation: "row" }) do %>
+      <%= pb_rails("flex", props: { align_items: "center", justify: "start", orientation: "row" }) do %>
+        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "40px", margin_right: "sm", width: "40px" }) %>
+        <%= pb_rails("skeleton_loading", props: { height: "16px", margin_right: "md", width: "80px" }) %>
+      <% end %>
+      <%= pb_rails("flex", props: { align_items: "center", justify: "end", orientation: "row" }) do %>
+        <%= pb_rails("skeleton_loading", props: { height: "18px", width: "120px" }) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("skeleton_loading", props: { height: "127px", width: "100%" }) %>
+</div>
+
+<div id="filter-content" style="display: none;">
+  <%= pb_rails("filter", props: {
+    margin_bottom: "xl",
+    min_width: "360px",
+    id: "2",
+    filters: [
+      { name: "name", value: "John Wick" }
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    results: 546,
+    template: "single"
+  }) do %>
+    <% example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
+    ] %>
+
+    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+      <%= form.text_field :example_text_field, props: { label: true } %>
+      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+      <%= form.actions do |action| %>
+        <%= action.submit props: {
+          text: "Apply",
+          data: {
+            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+        },}%>
+        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("filter", props: {
+    min_width: "360px",
+    id: "1",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+  }) do %>
+    <% example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
+    ] %>
+    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+      <%= form.text_field :example_text_field, props: { label: true } %>
+      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+      <%= form.actions do |action| %>
+        <%= action.submit props: {
+          text: "Apply",
+          data: {
+            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+        },}%>
+        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    const toggleButton = document.getElementById('toggle-filter-button')
+    const skeletonFilterContentDiv = document.getElementById('skeleton-loading-filter-content')
+    const filterContentDiv = document.getElementById('filter-content')
+    const secondFilterContentDiv = document.getElementById('second-filter-content')
+
+    let isLoading = true
+
+    toggleButton.addEventListener('click', function() {
+      isLoading = !isLoading
+
+      if (isLoading) {
+        skeletonFilterContentDiv.style.display = 'block'
+        filterContentDiv.style.display = 'none'
+        toggleButton.textContent = 'Show Filter'
+      } else {
+        skeletonFilterContentDiv.style.display = 'none'
+        filterContentDiv.style.display = 'block'
+        toggleButton.textContent = 'Show Skeleton Loading'
+      }
+    })
+  })
+</script>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
 
 const SortingChangeCallback = (sortOptions) => {
@@ -6,7 +6,8 @@ const SortingChangeCallback = (sortOptions) => {
 }
 
 const SkeletonLoadingFilter = (props) => {
-  const isLoading = true
+  const [isLoading, setIsLoading] = useState(true)
+  const toggleLoading = () => setIsLoading((prev) => !prev)
 
   const options = [
     { value: 'USA' },
@@ -18,6 +19,13 @@ const SkeletonLoadingFilter = (props) => {
 
   return (
     <div>
+      <Button 
+          marginBottom="md" 
+          onClick={toggleLoading} 
+          variant="secondary"
+      >
+          {isLoading ? "Show Filter" : "Show Skeleton Loading"}
+      </Button>
       <div>
         {isLoading ? (
           <Card 

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.html.erb

@@ -0,0 +1,15 @@
+<%= pb_rails("skeleton_loading", props: { height: "100px", width: "50%" }) %>
+
+<%= pb_rails("skeleton_loading", props: { gap: "md", height: "20px", margin_y: "md", stack: 3, width: "50px" }) %>
+
+<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "50%", width: "300px" }) %>
+<% end %>
+
+<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "30%", stack: 2, width: "70%" }) %>
+<% end %>
+
+<%= pb_rails("skeleton_loading", props: { height: "150px", margin_y: "md", width: "150px" }) %>
+
+<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "150px", width: "150px" }) %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -17,9 +17,11 @@ const SkeletonLoadingHeightWidth = (props) => (
         width="50px"
         {...props}
     />
-    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
+    <Card 
+        height='200px' 
         marginBottom="md"
         padding="none" 
+        width='100%'
         {...props}
     >
       <SkeletonLoading
@@ -30,8 +32,10 @@ const SkeletonLoadingHeightWidth = (props) => (
           {...props}
       />
     </Card>
-    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
+    <Card 
+        height='200px'
         padding="none"
+        width='100%'
         {...props}
     >
       <SkeletonLoading

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_rails.md

@@ -0,0 +1,3 @@
+The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
+
+Set the `height` and `width` props to the same value to make a square. A `rounded` border_radius will make a square a circle. If using percentages to make a square, your parent container must also be a square.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("skeleton_loading", props: { stack: 5 }) %>
+
+<%= pb_rails("skeleton_loading", props: { gap: "md", padding_top: "xl", stack: 3 }) %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.html.erb

@@ -0,0 +1,63 @@
+<%= pb_rails("button", props: { id: "toggle-user-button", margin_bottom: "md", text: "Show User", variant: "secondary" }) %>
+
+<div id="skeleton-loading-user-content">
+    <%= pb_rails("flex", props: { align_items: "center" }) do %>
+        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "38px", padding_right: "sm", width: "38px"}) %>
+        <%= pb_rails("skeleton_loading", props: { gap: "xxs", height: "18px", stack: 2, width: "161px"}) %>
+    <% end %>
+    <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
+        <%= pb_rails("flex", props: { align_items: "center", flex_direction: "column" }) do %>
+            <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "100px", padding_bottom: "xs", width: "100px"}) %>
+            <%= pb_rails("skeleton_loading", props: { height: "32px", padding_bottom: "xxs", width: "144px"}) %>
+            <%= pb_rails("skeleton_loading", props: { height: "21px", width: "164px"}) %>
+        <% end %>
+    <% end %>
+</div>
+
+<div id="user-content" style="display: none;">
+    <div>
+        <%= pb_rails("user", props: {
+            name: "Anna Black",
+            title: "Remodeling Consultant",
+            orientation: "horizontal",
+            align: "left",
+            avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+        }) %>
+    </div>
+    <div>
+        <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
+            <%= pb_rails("user", props: {
+                name: "Anna Black",
+                title: "Remodeling Consultant",
+                orientation: "vertical",
+                align: "center",
+                size: "lg",
+                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+            }) %>
+        <% end %>
+    </div>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    const toggleButton = document.getElementById('toggle-user-button')
+    const skeletonUserContentDiv = document.getElementById('skeleton-loading-user-content')
+    const userContentDiv = document.getElementById('user-content')
+
+    let isLoading = true
+
+    toggleButton.addEventListener('click', function() {
+      isLoading = !isLoading
+
+      if (isLoading) {
+        skeletonUserContentDiv.style.display = 'block'
+        userContentDiv.style.display = 'none'
+        toggleButton.textContent = 'Show User'
+      } else {
+        skeletonUserContentDiv.style.display = 'none'
+        userContentDiv.style.display = 'block'
+        toggleButton.textContent = 'Show Skeleton Loading'
+      }
+    })
+  })
+</script>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx

@@ -1,11 +1,19 @@
-import React from 'react';
-import { Flex, SkeletonLoading, User } from "playbook-ui";
+import React, { useState } from 'react';
+import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
 
 const SkeletonLoadingUser = (props) => {
-  const isLoading = true
+  const [isLoading, setIsLoading] = useState(true)
+  const toggleLoading = () => setIsLoading((prev) => !prev)
 
   return (
     <div>
+      <Button 
+          marginBottom="md" 
+          onClick={toggleLoading} 
+          variant="secondary"
+      >
+          {isLoading ? "Show User" : "Show Skeleton Loading"}
+      </Button>
       <div>
         {isLoading ? (
           <Flex alignItems="center">

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

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

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

@@ -0,0 +1,88 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableStickyColumns = () => {
+    return (
+        <Table
+            responsive="scroll"
+            size="md"
+            stickyLeftColumn={["a"]}
+            stickyRightColumn={["b"]}
+        >
+            <thead>
+                <tr>
+                    <th id="a">{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                    <th>{'Column 6'}</th>
+                    <th>{'Column 7'}</th>
+                    <th>{'Column 8'}</th>
+                    <th>{'Column 9'}</th>
+                    <th>{'Column 10'}</th>
+                    <th>{'Column 11'}</th>
+                    <th>{'Column 12'}</th>
+                    <th>{'Column 13'}</th>
+                    <th>{'Column 14'}</th>
+                    <th id="b">{'Column 15'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td id="a">{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td id="b">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="a">{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td id="b">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="a">{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td id="b">{'Value 15'}</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}
+
+export default TableStickyColumns

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

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

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

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

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

@@ -1 +1,3 @@
 The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.

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

@@ -1,2 +1,5 @@
 The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
+
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.

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

@@ -0,0 +1,87 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableStickyRightColumns = () => {
+    return (
+        <Table
+            responsive="scroll"
+            size="md"
+            stickyRightColumn={["13", "14", "15"]}
+        >
+            <thead>
+                <tr>
+                    <th>{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                    <th>{'Column 6'}</th>
+                    <th>{'Column 7'}</th>
+                    <th>{'Column 8'}</th>
+                    <th>{'Column 9'}</th>
+                    <th>{'Column 10'}</th>
+                    <th>{'Column 11'}</th>
+                    <th>{'Column 12'}</th>
+                    <th id="13">{'Column 13'}</th>
+                    <th id="14">{'Column 14'}</th>
+                    <th id="15">{'Column 15'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td>{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td>{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}
+
+export default TableStickyRightColumns

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

@@ -0,0 +1,5 @@
+The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyRightColumn` prop.