playbook_ui 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7023 → 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2f3024c387b6354fb93533628a22c5b0e5e05a5b24735d3e8f23703b9de33df7
-  data.tar.gz: 26e66ccde416d7acc9c469c9fa9dbddac5ac349961a376243122706329ebf64e
+  metadata.gz: 54d0fea32b7f3d4e5aba4900e63c7c5d3c3fa2fde7eb40023db9161ce687b59b
+  data.tar.gz: b150e8eb3b1a4e3e58c815cacbac0caff8c4b24f98e7eb25ebe0b86564090a2f
 SHA512:
-  metadata.gz: 700c1d5e377e6833e197c36966a4e0289555648166f33fcb275d1da82afcbce72cd1443042c76ae95bd4d876a628852d90775589ad750f0e69626ed41f8aa4a5
-  data.tar.gz: '084375db1fa11393f8e7100bec0d61eb61769a879c939e7940253d30cc9af6b0ec32b0cd1687612eb66b8f6167ddda50c21f2dd35c18cb862460f7f02199146d'
+  metadata.gz: b4b1941d8d6c8473f8061f329012a8571328556829ed46bf1e7ac9da918b18b5f78f2841d015893bcb23f0250d9a7d30ae6fa2730e88430f4ed0ec633b583d28
+  data.tar.gz: 0c5967fdd0a1fd7af31ecde3f26f82daff27f46b360b0f1a1fc9fa3f0d53ef4c90c9d57dfdc8a8de9625ac07376f77bc6dc8711a906cca86d4486a06a3883534

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -338,8 +338,8 @@ test("enableExpansionIcon changes icon", () => {
 
   const kit = screen.getByTestId(testId)
   const tableHead = kit.querySelector('table')
-  const toggleIcon= tableHead.querySelector(".pb_icon_kit")
-  expect(toggleIcon).toHaveClass("fa-chevron-up")
+  const toggleIcon = tableHead.querySelector(".pb_custom_icon")
+  expect(toggleIcon).toBeInTheDocument()
 })
 
 test("sortIcon changes icon", () => {
@@ -360,8 +360,8 @@ test("sortIcon changes icon", () => {
 
   const kit = screen.getByTestId(testId)
   const sortIcon = kit.querySelector('.sort-button-icon')
-  const icon= sortIcon.querySelector(".pb_icon_kit")
-  expect(icon).toHaveClass("fa-chevron-down")
+  const icon = sortIcon.querySelector(".pb_custom_icon")
+  expect(icon).toBeInTheDocument()
 })
 
 test("Sort icon renders with enableSorting + sortControl works as expected", () => {
@@ -452,7 +452,7 @@ test("inlineRowLoading prop renders inline loading if true", () => {
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   expect(rowButton).toBeInTheDocument()
   rowButton.click()
-  const inlineLoading = kit.querySelector(".fa-spinner")
+  const inlineLoading = kit.querySelector(".pb_custom_icon")
   expect(inlineLoading).toBeInTheDocument()
 })
 

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -27,13 +27,20 @@ exports[`html structure is correct 1`] = `
               class="icon_wrapper"
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
-              <i
-                class="pb_icon_kit far fa-lg fa-fw fa-lg fa-chevron-down"
-              />
-              <span
-                aria-label="chevron-down icon"
-                hidden=""
-              />
+              <svg
+                class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
+                color="currentColor"
+                fill="none"
+                height="auto"
+                viewBox="0 0 30 25"
+                width="auto"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14.203 19.297l-9-9c-.469-.422-.469-1.125 0-1.594.422-.422 1.125-.422 1.594 0L15 16.953l8.203-8.203c.422-.469 1.125-.469 1.594 0a1.103 1.103 0 010 1.547l-9.047 9a1.027 1.027 0 01-1.547 0z"
+                  fill="#242B42"
+                />
+              </svg>
             </div>
           </div>
         </div>

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -75,15 +75,15 @@ test('returns correct icon', () => {
     </>
   )
 
-  expect(screen.getByTestId('test-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-mobile')
-  expect(screen.getByTestId('test-home').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+  expect(screen.getByTestId('test-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-home').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
-  expect(screen.getByTestId('test-work-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-laptop')
-  expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toHaveClass('envelope')
-  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-slash')
-  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+  expect(screen.getByTestId('test-work-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
-  expect(screen.getByTestId('test-empty').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+  expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
 })
 
 test("not compliant values return null in phone related contact types", () => {

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js

@@ -62,7 +62,7 @@ describe("DateRangeInline Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const arrow = kit.querySelector('.pb_icon_kit.fa-fw.fa-long-arrow-right')
+        const arrow = kit.querySelector('.pb_custom_icon')
         expect(arrow).toBeInTheDocument()
     })
 
@@ -93,7 +93,7 @@ describe("DateRangeInline Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const calendar = kit.querySelector('.pb_icon_kit.fa-fw.fa-calendar-alt')
+        const calendar = kit.querySelector('.pb_custom_icon')
         expect(calendar).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js

@@ -58,7 +58,7 @@ describe("DateRangeStacked Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const arrowicon = kit.querySelector('.pb_icon_kit.fa-fw.pb_date_range_stacked_arrow')
+        const arrowicon = kit.querySelector('.pb_custom_icon')
         expect(arrowicon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -1,11 +1,11 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
   items: [],
   dragData: { id: "", initialGroup: "" },
   isDragging: "",
-  activeContainer: ""
+  activeContainer: "",
 };
 
 const reducer = (state: InitialStateType, action: ActionType) => {
@@ -31,9 +31,23 @@ const reducer = (state: InitialStateType, action: ActionType) => {
       const { dragId, targetId } = action.payload;
       const newItems = [...state.items];
       const draggedItem = newItems.find(item => item.id === dragId);
-      const draggedIndex = newItems.indexOf(draggedItem);
+      const targetItem = newItems.find(item => item.id === targetId);
+    
+      if (!draggedItem || !targetItem || draggedItem.container !== targetItem.container) {
+        return state;
+      }
+
+      if (dragId === targetId) {
+        return state;
+      }
+
+      const draggedIndex = newItems.findIndex(item => item.id === dragId);
       const targetIndex = newItems.findIndex(item => item.id === targetId);
 
+      if (draggedIndex === -1 || targetIndex === -1) {
+        return state;
+      }
+
       newItems.splice(draggedIndex, 1);
       newItems.splice(targetIndex, 0, draggedItem);
 
@@ -48,7 +62,11 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 const DragContext = createContext<any>({});
 
 export const DraggableContext = () => {
-  return useContext(DragContext);
+  const context = useContext(DragContext);
+  if (context === undefined) {
+    throw new Error('DraggableContext must be used within a DraggableProvider');
+  }
+  return context;
 };
 
 export const DraggableProvider = ({
@@ -63,7 +81,11 @@ export const DraggableProvider = ({
   dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
-
+  
+  // Store initial items in a ref to use if needed (for consistency when needed in future updates)
+  const initialItemsRef = useRef(initialItems);
+  const [isDragging, setIsDragging] = useState(false);
+  
   // Parse dropZone prop - handle both string format (backward compatibility) and object format
   let dropZoneType = 'ghost';
   let dropZoneColor = 'neutral';
@@ -86,45 +108,64 @@ export const DraggableProvider = ({
 
   useEffect(() => {
     dispatch({ type: 'SET_ITEMS', payload: initialItems });
+    initialItemsRef.current = initialItems;
   }, [initialItems]);
 
   useEffect(() => {
-    onReorder(state.items);
-  }, [state.items]);
+    if (onReorder) {
+      onReorder(state.items);
+    }
+  }, [state.items, onReorder]);
 
   const handleDragStart = (id: string, container: string) => {
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
+    setIsDragging(true);
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id, initialGroup: container } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
+    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     if (onDragStart) onDragStart(id, container);
   };
 
   const handleDragEnter = (id: string, container: string) => {
-    if (state.dragData.id !== id) {
-      dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
-      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
+    if (!isDragging || container !== state.activeContainer) return;
+
+    if (state.dragData.id === id) return;
+
+    const draggedItem = state.items.find(item => item.id === state.dragData.id);
+    const targetItem = state.items.find(item => item.id === id);
+
+    if (!draggedItem || !targetItem || draggedItem.container !== targetItem.container) {
+      return;
     }
+
+    dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
+    
     if (onDragEnter) onDragEnter(id, container);
   };
 
   const handleDragEnd = () => {
+    setIsDragging(false);
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     if (onDragEnd) onDragEnd();
   };
 
-  const changeCategory = (itemId: string, container: string) => {
-    dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId, container } });
-  };
-
   const handleDrop = (container: string) => {
+    const draggedItem = state.items.find(item => item.id === state.dragData.id);
+    
+    if (draggedItem && draggedItem.container !== container) {
+      dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId: state.dragData.id, container } });
+    }
+
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-    changeCategory(state.dragData.id, container);
+
+    setIsDragging(false);
     if (onDrop) onDrop(container);
   };
 
   const handleDragOver = (e: Event, container: string) => {
     e.preventDefault();
+    e.stopPropagation();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     if (onDragOver) onDragOver(e, container);
   };
@@ -144,7 +185,7 @@ export const DraggableProvider = ({
     handleDragEnd,
     handleDrop,
     handleDragOver
-  }), [state, dropZoneType, dropZoneColor, dropZoneDirection]);
+  }), [state, dropZoneType, dropZoneColor, dropZoneDirection,  handleDragStart, handleDragEnter, handleDragEnd, handleDrop, handleDragOver]);
 
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -165,7 +165,7 @@ test("generated dragHandle with List", () => {
 
   const list = kit.querySelector(".pb_list_kit");
   expect(list).toBeInTheDocument();
-  const dragHandle = list.querySelector(".fa-grip-dots-vertical");
+  const dragHandle = list.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });
 
@@ -175,7 +175,7 @@ test("generated dragHandle with SelectableList", () => {
 
   const selectabellist = kit.querySelector(".pb_selectable_list_kit");
   expect(selectabellist).toBeInTheDocument();
-  const dragHandle = selectabellist.querySelector(".fa-grip-dots-vertical");
+  const dragHandle = selectabellist.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });
 
@@ -185,6 +185,6 @@ test("generated dragHandle with Card", () => {
 
   const card = kit.querySelector(".pb_card_kit_deselected_border_radius_md");
   expect(card).toBeInTheDocument();
-  const dragHandle = card.querySelector(".fa-grip-dots-vertical");
+  const dragHandle = card.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -95,7 +95,7 @@ test('generated customDisplay for trigger', () => {
 
   const kit = screen.getByTestId(testId)
   const trigger = kit.querySelector('.pb_dropdown_trigger')
-  const customDisplay = trigger.querySelector('.fa-flag.pb_icon_kit.fa-fw')
+  const customDisplay = trigger.querySelector('.pb_custom_icon')
   expect(customDisplay).toBeInTheDocument()
 })
 
@@ -170,7 +170,7 @@ test('generated custom Trigger', () => {
         options={options}
     >
       <Dropdown.Trigger>
-          <Icon icon="elephant" />
+          <Icon icon="flag" />
       </Dropdown.Trigger>
       {options.map((option) => (
       <Dropdown.Option key={option.id} 
@@ -182,7 +182,7 @@ test('generated custom Trigger', () => {
 
   const kit = screen.getByTestId(testId)
   const trigger = kit.querySelector('.pb_dropdown_trigger')
-  const customTrigger = trigger.querySelector('.fa-elephant.pb_icon_kit.fa-fw')
+  const customTrigger = trigger.querySelector('.pb_custom_icon')
   expect(customTrigger).toBeInTheDocument()
 })
 

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -205,4 +205,26 @@
       border-top-left-radius: 0;
     }
   }
+
+  .pb_text_input_kit.error {
+    .text_input_wrapper {
+      input:focus {
+        outline: none;
+      }
+    }
+
+    & + * input,
+    & + * select {
+      border-left-color: $red;
+    }
+  }
+
+  .pb_text_input_kit:not(.error):focus-within + .error,
+  .pb_text_input_kit:not(.error):focus-within + .pb_select .error {
+    input,
+    select {
+      border-left: none;
+      padding-left: calc(var(--iti-flag-width) + 1px);
+    }
+  }
 }

data/app/pb_kits/playbook/pb_icon/icon.test.js

@@ -16,7 +16,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw")
     })
 
     test("renders rotate prop", () => {[
@@ -31,7 +31,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass(`fa-user pb_icon_kit fa-fw fa-rotate-${rotateProp} far`)
+        expect(kit).toHaveClass(`pb_custom_icon svg-inline--fa rotate_${rotateProp} svg_fw`)
 
         cleanup()
     })
@@ -48,7 +48,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fa-flip-horizontal far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa flip_horizontal svg_fw")
     })
 
 
@@ -63,7 +63,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-spinner pb_icon_kit fa-fw fa-spin far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa spin svg_fw")
     })
 
     test("renders pull icon", () => {
@@ -77,7 +77,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw pull_left")
     })
 
     test("renders pull icon", () => {
@@ -91,7 +91,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw pull_left")
     })
 
     test("renders border around icon", () => {
@@ -105,7 +105,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-border fa-fw far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_border svg_fw")
     })
 
     test("renders size prop", () => {
@@ -132,7 +132,7 @@ describe("Icon Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_icon_kit fa-user fa-fw fa-${sizeProp} far`)
+            expect(kit).toHaveClass(`pb_custom_icon svg-inline--fa svg_${sizeProp} svg_fw`)
 
             cleanup()
         }) 
@@ -149,7 +149,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fas")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw")
     })
 
     test("renders with color prop", () => {

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js

@@ -29,7 +29,7 @@ describe("IconCircle Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector('.pb_icon_kit')
+        const icon = kit.querySelector('.pb_custom_icon')
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -33,7 +33,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector(".fa-lightbulb-on.pb_icon_kit.fa-fw")
+        const icon = kit.querySelector(".pb_custom_icon")
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js

@@ -29,7 +29,7 @@ describe("IconValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector(".fa-clipboard.pb_icon_kit.fa-fw")
+        const icon = kit.querySelector(".pb_custom_icon")
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_label_value/label_value.test.js

@@ -56,7 +56,7 @@ describe("LabelValue Kit", () => {
             />
         )
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector(".fa-truck.pb_icon_kit.fa-fw")
+        const icon = kit.querySelector(".pb_custom_icon")
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_link/link.test.jsx

@@ -73,7 +73,7 @@ test('adds icon', () => {
 
   const kit = screen.getByTestId('icon-test')
 
-  const icon = kit.querySelector('.pb_icon_kit')
+  const icon = kit.querySelector('.pb_custom_icon')
   expect(icon).toBeInTheDocument();
 })
 
@@ -87,7 +87,7 @@ test('adds icon right', () => {
 
   const kit = screen.getByTestId('icon-right-test')
 
-  const icon = kit.querySelector('.pb_icon_kit')
+  const icon = kit.querySelector('.pb_custom_icon')
   expect(icon).toBeInTheDocument();
 })
 

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js

@@ -95,11 +95,13 @@ test('should not have a left border', () => {
 test('should have a right icon', () => {
     render(<NavDefault iconRight="angle-down" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_right fa-fw fa-angle-down" />')
+    const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_right")
+    expect(icon).toBeInTheDocument()
 })
 
 test('should have a left icon', () => {
-    render(<NavDefault iconLeft="users-class" />)
+    render(<NavDefault iconLeft="angle-up" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_left fa-fw fa-users-class" />')
+    const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_left")
+    expect(icon).toBeInTheDocument()
 })

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

@@ -0,0 +1 @@
+To guarantee the vertical section separator displays properly, please add the `vertical: "stretch"`/`vertical="stretch"` property to the parent container (which is commonly a Flex container). This will stretch the container’s child elements vertically and ensure the section separator appears as expected.

data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js

@@ -19,23 +19,27 @@ test('it renders preset icon', () => {
     render(
       <StatChange
           change="increase"
+          id="preset-icon"
           value="28.4"
       />
     )
 
-    const kit = screen.getByLabelText('arrow-up icon')
-    expect(kit).toBeTruthy
+    const kit = document.querySelector('#preset-icon')
+    const icon = kit.querySelector(".pb_custom_icon")
+    expect(icon).toBeInTheDocument()
 })
 
 test('it renders custom icon', () => {
     render(
       <StatChange
           icon="chart-line-down"
+          id="custom-icon"
           value={6.1}
       />
 
     )
 
-    const kit = screen.getByLabelText('chart-line-down icon')
-    expect(kit).toBeTruthy
+    const kit = document.querySelector('#custom-icon')
+    const icon = kit.querySelector(".pb_custom_icon")
+    expect(icon).toBeInTheDocument()
 })

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

@@ -6,8 +6,16 @@
   &.table-lg {
     thead, .pb_table_thead {
       tr, .pb_table_tr {
-        th:not(:has([class*="pb"][class*="kit"])),
-        .pb_table_th:not(:has([class*="pb"][class*="kit"])) {
+        th:not(:has(
+          [class*="pb_body_kit"],
+          [class*="pb_detail_kit"],
+          [class*="pb_title_kit"]
+        )),
+        .pb_table_th:not(:has(
+          [class*="pb_body_kit"],
+          [class*="pb_detail_kit"],
+          [class*="pb_title_kit"]
+        )) {
           @include caption;
         }
 

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,11 +1,8 @@
-<%= content_tag(:div,
-      id: object.id,
-      data: object.data,
-      class: object.classname,
+<%= pb_content_tag(:div,
       style: remove_height_properties(combined_html_options[:style]) || "",
       **combined_html_options.except(:style)) do %>
   <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.height_and_width_helper %>">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
   </div>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -1,11 +1,8 @@
 <% if object.is_react? %>
   <%= react_component('Typeahead', object.typeahead_react_options) %>
 <% else %>
-  <%= content_tag(:div,
-                id: object.id,
-                data: object.data,
-                class: object.classname + object.inline_class,
-                **combined_html_options) do %>
+  <%= pb_content_tag(:div,
+                     class: object.classname + object.inline_class) do %>
     <div class="pb_typeahead_wrapper">
       <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
         <%= pb_rails("icon", props: {

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <% if object.avatar_url.present? || object.avatar %>
     <%= pb_rails("avatar", props: {
       name: object.name,

data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb

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