playbook_ui 14.13.0.pre.alpha.rails8compatible6232 → 14.13.0.pre.rc.0

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/docs/_progress_step_tooltip.html.erb

@@ -2,7 +2,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
   step 1
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", tooltip_position: "left", step_direction: "horizontal" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
   step 2
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
@@ -11,7 +11,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
   step 4
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5", tooltip_position: "left" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
   step 5
   <% end %>
 <% end %>
@@ -19,7 +19,7 @@
 <br /><br />
 
 <%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical", tooltip_position: "left" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
   <% end %>
@@ -31,10 +31,10 @@
 
 <br /><br>
 <%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right"  }) do %>
       <%= pb_rails("caption", props:{text: "Ordered"})%>
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped", tooltip_position: "right" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
       <%= pb_rails("caption", props:{text: "Shipped"})%>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
@@ -50,7 +50,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
       <%= pb_rails("caption", props:{text: "Shipped"})%>
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive", tooltip_position: "bottom"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
       <%= pb_rails("caption", props:{text: "Out for Delivery"})%>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>

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,4 +1,8 @@
-<%= pb_content_tag(:li) do %>
+<%= 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? %>

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_table/docs/_table_with_background_kit.html.erb

@@ -39,17 +39,20 @@
     </tr>
   </tbody>
 <% end %>
+
 <%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
   <colgroup>
     <%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
-    <%= pb_rails("background", props: { background_color: "info_subtle", tag: "col" }) %>
+    <%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %>
     <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
   </colgroup>
-  <thead>
-    <th>Column 1</th>
-    <th>Column 2</th>
-    <th>Column 3</th>
-  </thead>
+  <%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+    </tr>
+  <% end %>
   <tbody>
     <tr>
       <td>Value 1</td>

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

@@ -68,7 +68,7 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
             <Background
-                backgroundColor="info_subtle"
+                backgroundColor="card_light"
                 tag='col'
             />
             <Background
@@ -76,13 +76,16 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
           </colgroup>
-          <thead>
+          <Background
+              backgroundColor="card_light"
+              tag='thead'
+          >
             <tr>
-              <th>{'Column 1'}</th>
-              <th>{'Column 2'}</th>
-              <th>{'Column 3'}</th>
+                <th>{'Column 1'}</th>
+                <th>{'Column 2'}</th>
+                <th>{'Column 3'}</th>
             </tr>
-          </thead>
+          </Background>
           <tbody>
             <tr>
               <td>{'Value 1'}</td>

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'

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

@@ -2,7 +2,6 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
 const TABLE_COLLAPSIBLE_WRAPPER_SELECTOR = "[data-pb-table-collapsible-wrapper]";
-const TABLE_COLLAPSIBLE_CELL_SELECTOR = "[data-pb-table-collapsible-cell-id]";
 
 export default class PbTable extends PbEnhancedElement {
   stickyLeftColumns: string[] = [];
@@ -159,49 +158,18 @@ export default class PbTable extends PbEnhancedElement {
   }
 
   handleCollapsibleClick() {
-    const cells = this.element.querySelectorAll(TABLE_COLLAPSIBLE_CELL_SELECTOR);
     const collapsibleElements = this.element.querySelectorAll(TABLE_COLLAPSIBLE_WRAPPER_SELECTOR);
-
-    if (cells.length > 0) {
-      cells.forEach((cell) => {
-        const cellId = (cell as HTMLElement).dataset.pbTableCollapsibleCellId;
-
-        Array.from(cell.children).forEach((child) => {
-          if (child.id === cellId) {
-            Array.from(child.children).forEach((svgChild) => {
-              svgChild.id = cellId; // Assign cellId to SVG child
-              Array.from(svgChild.children).forEach((pathChild) => {
-                pathChild.id = cellId; // Assign cellId to path child
-              });
-            });
-          }
-        });
-        cell.addEventListener('click', (event) => {
-          if ((event.target as HTMLElement).id) {
-            document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`));
-
-            const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
-            toggleElements.forEach((element) => {
-              element.classList.toggle('no-border');
-              element.classList.toggle('border-active');
-            });
-          }
+    collapsibleElements.forEach((collapsibleElement) => {
+      collapsibleElement.addEventListener('click', (event) => {
+        document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
+
+        const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
+        toggleElements.forEach(element => {
+          element.classList.toggle('no-border');
+          element.classList.toggle('border-active');
         });
-      });
-
-    } else {
-      collapsibleElements.forEach((collapsibleElement) => {
-        collapsibleElement.addEventListener('click', (event) => {
-          document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
-
-          const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
-          toggleElements.forEach(element => {
-            element.classList.toggle('no-border');
-            element.classList.toggle('border-active');
-          });
-        })
       })
-    }
+    })
   }
 
   handleCollapsibleRow() {

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss

@@ -37,10 +37,6 @@
     cursor: pointer;
   }
 
-  .collapsible_cell {
-    cursor: default;
-  }
-
   .no-border {
     border-bottom: none !important;
   }

data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss

@@ -74,31 +74,6 @@
       &.table-card {
         background: none !important;
 
-        &.dark {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
-              td, .pb_table_td {
-                background: $bg_dark_card !important;
-                border-color: $border_dark !important;
-                &:before {
-                  color: $text_dk_light !important;
-                }
-                &:after {
-                  height: 0;
-                  background-color: transparent;
-                }
-  
-                &:first-child {
-                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
-                }
-                &:last-child {
-                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
-                }
-              }
-            }
-          }
-        }
-
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {
@@ -106,7 +81,6 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
-
               &:after {
                 height: 0;
                 background-color: transparent;

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -77,6 +77,7 @@
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {
+              background: $white !important;
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;