playbook_ui 14.14.0.pre.alpha.revert4339revert4242play1633displaytitle6456 → 14.14.0.pre.rc.0

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -32,12 +32,11 @@
   <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
-  <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb

@@ -1,2 +1,3 @@
 <%= pb_rails("icon_button") %>
-<%= pb_rails("icon_button", props: {variant: "link", margin_top: "md" }) %>
+</br>
+<%= pb_rails("icon_button", props: {variant: "link"}) %>

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

@@ -2,8 +2,6 @@ examples:
   
   rails:
   - icon_button_default: Default
-  - icon_button_sizes: Sizes
-
-  react:
-  - icon_button_default: Default
-  - icon_button_sizes: Sizes
+  
+  
+  

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -8,7 +8,7 @@
   <%= pb_rails("icon", props: { icon: object.icon,
                                 fixed_width: true,
                                 dark: object.dark,
-                                size: object.size,
+                                size: "2x",
                                 color: "text_lt_default",
                                 classname: "icon_button_icon",
                                 padding_x: "xxs", padding_y: "xs" }) %>

data/app/pb_kits/playbook/pb_icon_button/icon_button.rb

@@ -14,9 +14,6 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default link],
                      default: "default"
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[1x 2x 3x 4x 5x 6x 7x 8x 9x 10x xs sm lg],
-                  default: "2x"
       def classname
         generate_classname("pb_icon_button_kit", variant)
       end

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname,
+      **combined_html_options) do %>
   <%= react_component("MultiLevelSelect", object.multi_level_select_options)  %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -1,9 +1,15 @@
   <% if object.collapsible %>
     <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
-        <%= pb_content_tag( object.tag,
-            href: object.link && object.link,
-            target: object.link && object.target
+        <%= content_tag(object.tag,
+          aria: object.aria,
+          class: object.classname,
+          data: object.data,
+          dark: object.dark,
+          id: object.id,
+          href: object.link && object.link,
+          target: object.link && object.target,
+          **combined_html_options
           ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -14,16 +20,22 @@
           <span class="pb_nav_list_item_text_collapsible">
             <%= object.text %>
           </span>
-        <% end %>
+        <% end %>    
        <% end %>
       <%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
         <%= content.presence %>
       <% end %>
     <% end %>
   <% else %>
-    <%= pb_content_tag( object.tag,
-        href: object.link && object.link,
-        target: object.link && object.target
+    <%= content_tag(object.tag,
+      aria: object.aria,
+      class: object.classname,
+      **combined_html_options,
+      data: object.data,
+      dark: object.dark,
+      id: object.id,
+      href: object.link && object.link,
+      target: object.link && object.target
       ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>

data/app/pb_kits/playbook/pb_nav/nav.html.erb

@@ -1,7 +1,12 @@
-<%= pb_content_tag(:nav) do %>
+<%= content_tag(:nav,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.title %>
-    <%= pb_content_tag do %>
-      <%= pb_content_tag(:a) do %>
+    <%= content_tag(:div, class: "pb_nav_list_title") do %>
+      <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
         <%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb

@@ -1,2 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria.merge!(label: object.status),
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
 <% end %>

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -8,7 +8,6 @@ import OverlayToken from './subcomponents/_overlay_token'
 export type OverlayChildrenProps = {
     children: React.ReactNode[] | React.ReactNode,
     color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
-    dynamic?: boolean,
     position: string,
     size: string,
 }
@@ -19,7 +18,6 @@ type OverlayProps = {
     children: React.ReactNode[] | React.ReactNode,
     color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
     data?: { [key: string]: string },
-    dynamic?: false,
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
@@ -32,7 +30,6 @@ const Overlay = (props: OverlayProps) => {
         children,
         color = "card_light",
         data = {},
-        dynamic = false,
         htmlOptions = {},
         id,
         layout = { "bottom": "full" },
@@ -72,7 +69,6 @@ const Overlay = (props: OverlayProps) => {
                 }) : OverlayToken({
                     children,
                     color,
-                    dynamic: dynamic,
                     position: getPosition(),
                     size: getSize()
                 })

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

@@ -2,11 +2,9 @@ examples:
   react:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
-  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
 
   rails:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
-  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle

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

@@ -1,4 +1,3 @@
 export { default as OverlayDefault } from './_overlay_default.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
-export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.html.erb

@@ -16,14 +16,12 @@ id: object.id,
         <% end %>
 
     <% else %>
-        <div class="<%= previous_overlay_class_name %>" data-previous-overlay-classname="<%= previous_overlay_class_name %>"></div>
+        <div class="<%= previous_overlay_class_name %>"></div>
 
-        <div data-overlay-scroll-element="true">
-            <%= content.presence %>
-        </div>
+        <%= content.presence %>
 
         <% if has_subsequent_overlay %>
-            <div class="<%= subsequent_overlay_class_name %>" data-subsequent-overlay-classname="<%= subsequent_overlay_class_name %>"></div>
+            <div class="<%= subsequent_overlay_class_name %>"></div>
         <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_overlay/overlay.rb

@@ -8,8 +8,6 @@ module Playbook
                    default: "card_light"
       prop :layout, type: Playbook::Props::HashProp,
                     default: { "bottom": "full" }
-      prop :dynamic, type: Playbook::Props::Boolean,
-                     default: false
 
       def classname
         generate_classname("pb_overlay")
@@ -107,13 +105,6 @@ module Playbook
           "bg_dark": "#0a0527",
         }
       end
-
-      def data_attributes
-        data ||= {}
-        data.merge!("data-pb-overlay" => true)
-        data.merge!("data-overlay-dynamic" => true) if dynamic
-        data
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx

@@ -1,5 +1,5 @@
-import React, { useRef, useEffect, useState } from 'react';
-import { OverlayChildrenProps } from '../_overlay';
+import React from 'react'
+import { OverlayChildrenProps } from '../_overlay'
 
 const previousOverlayDirectionMap: { [key: string]: string } = {
     "x": "left",
@@ -15,40 +15,11 @@ const OverlayToken = (props: OverlayChildrenProps) => {
     const {
         children,
         color,
-        dynamic,
         position,
         size,
     } = props
 
-    const scrollContainerRef = useRef<HTMLDivElement>(null);
-    const [isAtStart, setIsAtStart] = useState(true);
-    const [isAtEnd, setIsAtEnd] = useState(false);
-
-
-    const handleScroll = () => {
-        const container = scrollContainerRef.current;
-        if (container) {
-            const { scrollLeft, scrollWidth, clientWidth } = container;
-            const atStart = scrollLeft === 0;
-            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1; 
-
-            setIsAtStart(atStart);
-            setIsAtEnd(atEnd);
-        }
-    };
-
-    useEffect(() => {
-        const container = scrollContainerRef.current;
-        if (container) {
-            container.addEventListener('scroll', handleScroll);
-            handleScroll();
-            return () => {
-                container.removeEventListener('scroll', handleScroll);
-            };
-        }
-    }, []);
-
-    const hasSubsequentOverlay = position === "x" || position === "y";
+    const hasSubsequentOverlay = position === "x" || position === "y"
 
     const getPreviousOverlayDirection = () => {
         return hasSubsequentOverlay ? previousOverlayDirectionMap[position] : position
@@ -63,24 +34,15 @@ const OverlayToken = (props: OverlayChildrenProps) => {
 
     return (
         <>
-            <div className={dynamic ? isAtStart ? '' : previousOverlayClassName : previousOverlayClassName} />
-            {dynamic ? 
-                <div
-                    ref={scrollContainerRef}
-                    style={{
-                        overflowX: 'auto',     
-                    }}
-                >
-                    {children}
-                </div>
-                : 
-                    children
-                }
-            {hasSubsequentOverlay &&
-                <div className={dynamic ? isAtEnd ? '' : subsequentOverlayClassName : subsequentOverlayClassName} />
+            <div className={previousOverlayClassName} />
+
+            {children}
+
+            { hasSubsequentOverlay &&
+                <div className={subsequentOverlayClassName} />
             }
         </>
     )
 }
 
-export default OverlayToken;
+export default OverlayToken

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) do %>
   <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss

@@ -3,8 +3,7 @@
 @import "../tokens/border_radius";
 
 @mixin pb_progress_pill {
-  width: 100%;
-  max-width: 45px;
+  width: 45px;
   height: 4px;
   border-radius: $border_rad_light;
   margin-right: $space_xs;
@@ -28,10 +27,6 @@
   [class*=pb_progress_pill] {
     @include pb_progress_pill;
 
-    &.full_width_pill {
-      max-width: none;
-    }
-
     &[class*=_inactive] {
       background-color: $border_light;
       &.dark {

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx

@@ -13,7 +13,6 @@ type ProgressPillsProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
-  fullWidthPill?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   steps?: number,
@@ -21,19 +20,19 @@ type ProgressPillsProps = {
   value?: string,
 }
 
-const ProgressPill = ({ active, dark, steps: step, fullWidthPill }: ProgressPillsProps) => (
+const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
   <div
       className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
-      }${fullWidthPill ? ' full_width_pill' : ''}`}
+      }`}
       key={step}
   />
 )
 
-const showSteps = (steps: number, active: number, dark: boolean, fullWidthPill: boolean) => {
+const showSteps = (steps: number, active: number, dark: boolean) => {
   const items = []
 
   for (let step = 1; step <= steps; step++) {
-    items.push(ProgressPill({ steps: step, active, dark, fullWidthPill }))
+    items.push(ProgressPill({ steps: step, active, dark }))
   }
 
   return items
@@ -45,7 +44,6 @@ const ProgressPills = (props: ProgressPillsProps) => {
     aria = { hidden: 'true' },
     className,
     data = {},
-    fullWidthPill = false,
     htmlOptions = {},
     id,
     steps = 3,
@@ -81,7 +79,7 @@ const ProgressPills = (props: ProgressPillsProps) => {
               text={value}
           />
         </div>}
-      <div className="progress_pills">{showSteps(steps, active, dark, fullWidthPill)}</div>
+      <div className="progress_pills">{showSteps(steps, active, dark)}</div>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb

@@ -1,2 +1 @@
 <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>
-<%= pb_rails("progress_pills", props: { aria: { label: "9 out of 18 steps complete" }, steps: 18, active: 9, margin_top: "md" }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -10,13 +10,6 @@ const ProgressPillsDefault = (props) => {
                 steps={3}
                 {...props}
             />
-            <ProgressPills
-                active={9}
-                aria={{ label: '9 out of 18 steps complete' }}
-                marginTop="md"
-                steps={18}
-                {...props}
-            />
         </>
     )
 }

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

@@ -3,11 +3,9 @@ examples:
   rails:
   - progress_pills_default: Default
   - progress_pills_status: Status
-  - progress_pills_full_width: Full Container Width
 
 
 
   react:
   - progress_pills_default: Default
   - progress_pills_status: Status
-  - progress_pills_full_width: Full Container Width

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

@@ -1,3 +1,2 @@
 export { default as ProgressPillsDefault } from './_progress_pills_default.jsx'
 export { default as ProgressPillsStatus } from './_progress_pills_status.jsx'
-export { default as ProgressPillsFullWidth } from './_progress_pills_full_width.jsx'

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria_attributes,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <div class="progress_pills_status">
       <% object.with_status do |status| %>
@@ -9,7 +14,7 @@
 
     <div class="progress_pills">
       <% object.each_step do |step| %>
-        <span class="pb_progress_pill<%= object.active_step(step) %><%= object.make_full_width %><%= object.dark_pill %>"></span>
+        <span class="pb_progress_pill<%= object.active_step(step) %><%= object.dark_pill %>"></span>
       <% end %>
     </div>
 

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb

@@ -9,8 +9,6 @@ module Playbook
       prop :steps, type: Playbook::Props::Number,
                    default: 3
       prop :title
-      prop :full_width_pill, type: Playbook::Props::Boolean,
-                             default: false
 
       def classname
         generate_classname("pb_progress_pills_kit")
@@ -28,10 +26,6 @@ module Playbook
         step <= active ? "_active" : "_inactive"
       end
 
-      def make_full_width
-        full_width_pill ? " full_width_pill" : nil
-      end
-
       def aria_attributes
         return aria if aria.present?
 

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.test.js

@@ -23,20 +23,6 @@ const ProgressPillsDefault = () => {
     )
 }
 
-const ProgressPillsFullWidth = () => {
-    return (
-        <ProgressPills
-            active={2}
-            aria={{ label: ariaLabel }}
-            data={{ testid: testId }}
-            fullWidthPill
-            steps={3}
-            title={title}
-            value={value}
-        />
-    )
-}
-
 test('should pass data prop', () => {
     render(<ProgressPillsDefault />)
     const kit = screen.getByTestId(testId)
@@ -65,15 +51,4 @@ test('should render value', () => {
     render(<ProgressPillsDefault />)
     const kit = screen.getByText(value)
     expect(kit).toBeInTheDocument()
-})
-
-test('should apply fullWidthPill styling when fullWidthPill prop is true', () => {
-    render(<ProgressPillsFullWidth />)
-    const container = screen.getByTestId(testId)
-    const pillElements = container.querySelectorAll('.full_width_pill')
-  
-    expect(pillElements.length).toBeGreaterThan(0)
-    pillElements.forEach((pill) => {
-        expect(pill).toHaveClass('full_width_pill')
-    })
-})
+})

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb

@@ -1,7 +1,11 @@
 <%= content_tag(:div,
 class: object.wrapper_classname,
 style: object.style) do %>
-  <%= pb_content_tag do %>
+  <%= content_tag(:div,
+  id: object.id,
+  data: object.data_values,
+  class: object.classname,
+  **combined_html_options) do %>
     <%= content_tag(:div, "",
       class: "progress_simple_value",
       style: object.value_style) %>

data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag(:ul) do %>
+<%= content_tag(:ul,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb

@@ -1,6 +1,10 @@
-<%= pb_content_tag(:li) do %>
-  <div class="box" style="max-width: min-content;">
-    <div class="circle" id="<%= object.tooltip_trigger_class %>" >
+<%= content_tag(:li,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
+  <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
+    <div class="circle">
       <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
     </div>
     <% if object.tooltip.present? %>

data/app/pb_kits/playbook/pb_radio/radio.html.erb

@@ -7,21 +7,26 @@
     data: object.data,
     **combined_html_options
   }) do %>
-    <%= pb_content_tag(:label,
+    <%= content_tag(:label,
       'data-pb-radio-children': 'true',
       checked: object.checked,
-      value: object.value
-      ) do %>
+      class: object.classname,
+      id: object.id,
+      value: object.value) do %>
       <%= input %>
       <span class="pb_radio_button"></span>
     <% end %>
     <div data-pb-radio-children-wrapper="true"> <%= content %> </div>
   <% end %>
 <% else %>
-  <%= pb_content_tag(:label,
+  <%= content_tag(:label,
+      aria: object.aria,
       checked: object.checked,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
       value: object.value,
-      ) do %>
+      **combined_html_options) do %>
 
       <% if content.present? %>
         <%= content %>
@@ -32,4 +37,4 @@
       <span class="pb_radio_button"></span>
       <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark }) %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -21,7 +21,6 @@ module Playbook
       prop :options, type: Playbook::Props::HashArray, required: false, default: []
       prop :show_arrow, type: Playbook::Props::Boolean, default: false
       prop :required, type: Playbook::Props::Boolean, default: false
-      prop :validation_message, type: Playbook::Props::String, default: ""
 
       def classnames
         classname + inline_class + compact_class + show_arrow_class
@@ -89,13 +88,6 @@ module Playbook
         "app/pb_kits/playbook/utilities/icons/angle-down.svg"
       end
 
-      def data_attributes
-        data = attributes[:data] || {}
-        data.merge!("data-pb-select" => true)
-        data.merge!("data-validation-message" => validation_message) if validation_message.present?
-        data
-      end
-
     private
 
       def error_class

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

@@ -16,7 +16,7 @@ const TableWithCollapsible = (props) => {
     );
   };
 
-  return (
+return (
       <Table
           size="sm"
           {...props}

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

@@ -31,12 +31,9 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
-    - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
     - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
-    - table_with_clickable_rows: Table with Clickable Rows
-    - table_with_selectable_rows: Table with Selectable Rows
 
   react:
     - table_sm: Small
@@ -73,5 +70,3 @@ examples:
     - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
     - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
-    - table_with_clickable_rows: Table with Clickable Rows
-    - table_with_selectable_rows: Table with Selectable Rows

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

@@ -32,6 +32,4 @@ export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
 export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
 export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
 export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
-export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
-export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
-export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
+export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'