playbook_ui 14.16.0 → 14.17.0.pre.alpha.play1499backgroundkitoverlay7105

data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
+
+import Card from '../../pb_card/_card'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+
+type LayoutGameProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+  numberOfRounds: number,
+  numberOfGames: number,
+  isOdd: boolean,
+} & GlobalProps
+
+// Game component (modeled after Item)
+const Game = (props: LayoutGameProps) => {
+  const { children, className, numberOfRounds, numberOfGames, isOdd } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  
+  const numberOfChildren = Array.isArray(children) ? children.length : 0
+  
+  const isMultiple = Array.isArray(children)
+  
+  let ratio = 0
+  let exponent
+  if (numberOfGames > 1) {
+    exponent = (numberOfRounds) - Math.log2(numberOfGames) - 1
+    ratio = 2 ** exponent
+  }
+  
+  if (numberOfChildren === 2) {
+    const [firstChild, secondChild] = React.Children.toArray(children)
+  
+    if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) { 
+    return (
+      <div
+          className={classnames('layout_game', globalProps(props), className)}
+          style={dynamicInlineProps}
+      >
+        <Card
+            marginY="xs"
+            padding="none"
+            shadow="deep"
+        >
+          <Card.Body padding="xs">{firstChild}</Card.Body>
+          <SectionSeparator />
+          <Card.Body padding="xs">{secondChild}</Card.Body>
+        </Card>
+        {isOdd && numberOfGames > 1  &&
+          <div
+              className="half_box"
+              style={{ height: `calc(${ratio} * 100% + 4px)` }}
+          />
+        }
+      </div>
+      )
+    }
+  }
+  
+  return (
+    <div
+        className={classnames('layout_game', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
+    {((!isMultiple && children) || numberOfChildren >= 1 )? (
+      children
+    ) : (
+      <Card
+          marginY="xs"
+          padding="none"
+          shadow="deep"
+      >
+        <Card.Body padding="xs">To be determined...</Card.Body>
+        <SectionSeparator />
+        <Card.Body padding="xs">To be determined...</Card.Body>
+      </Card>
+    )}
+      {isOdd && numberOfGames > 1  &&
+        <div
+            className="half_box"
+            style={{ height: `calc(${ratio} * 100% + 4px)` }}
+        />
+      }
+    </div>
+  )
+}
+
+export default Game

data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
+
+type LayoutRoundLabelProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+} & GlobalProps
+
+export const RoundLabel = (props: LayoutRoundLabelProps) => {
+  const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  return (
+    <div
+        className={classnames('layout_round_label', className)}
+        style={dynamicInlineProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+type LayoutRoundProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+  numberOfRounds: number,
+} & GlobalProps
+
+export const Round = (props: LayoutRoundProps) => {
+  const { children, className, numberOfRounds } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  const numberOfChildren = Array.isArray(children) ? children.length : 0
+
+  const childrenWithProps = Array.isArray(children) ? children.map((child, index) =>
+    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, numberOfGames: numberOfChildren, isOdd: index % 2 === 0, key: `child_${index}` }) : child
+  ) : children
+
+  const rightConnectors = Array.from({ length: numberOfChildren / 2 }, (_, index) => (
+    <div
+        className="right_connector"
+        key={`right_connector_${index}`}
+    />
+  ))
+
+  return (
+    <>
+      <div
+          className={classnames('layout_round', globalProps(props), className)}
+          style={dynamicInlineProps}
+      >
+        {childrenWithProps}
+      </div>
+      <div className="connector_container">{rightConnectors}</div>
+    </>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash'
+import { debounce } from "../../utilities/object" 
 import { useCallback, useMemo, useState } from 'react'
 
 export default function useVisibility(initialState = false) {

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_multi_level_select/_multi_level_select.tsx

@@ -7,11 +7,12 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
+import { cloneDeep } from "../utilities/object";
+
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
-import { cloneDeep } from "lodash";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";
 

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_rich_text_editor/_rich_text_editor.tsx

@@ -32,11 +32,12 @@ type RichTextEditorProps = {
   advancedEditor?: any,
   advancedEditorToolbar?: boolean,
   toolbarBottom?: boolean,
-  children?: React.ReactNode | React.ReactNode[]
+  children?: React.ReactNode | React.ReactNode[],
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+  inputOptions?: { [key: string]: string | number | boolean | (() => void) },
   id?: string,
   inline?: boolean,
   extensions?: { [key: string]: string }[],
@@ -61,6 +62,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     data = {},
     focus = false,
     htmlOptions = {},
+    inputOptions = {},
     inline = false,
     extensions,
     name,
@@ -70,7 +72,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     sticky = false,
     template = '',
     value = '',
-    maxWidth="md"
+    maxWidth = "md"
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -79,12 +81,28 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const htmlProps = buildHtmlProps(htmlOptions)
   
-  const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
-    element = editor?.element
+  const handleOnEditorReady = (editorInstance: Editor) => {
+    setEditor(editorInstance)
+    setTimeout(() => {
+      const oldId = editorInstance.element.getAttribute('input')
+      if (oldId) {
+        const hiddenInput = document.getElementById(oldId)
+        if (hiddenInput) {
+          const newId = (inputOptions.id as string) || oldId  
+          hiddenInput.id = newId
+          editorInstance.element.setAttribute('input', newId)
+
+          if (inputOptions.name) {
+            hiddenInput.setAttribute('name', inputOptions.name as string)
+          }
+        }
+      }
+    })
+  }
 
   // DOM manipulation must wait for editor to be ready
-  if (editor) {
-    const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
+  if (editor && editor.element) {
+    const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
       blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
 
     // replace default trix "block code" button with "inline code" button
@@ -118,8 +136,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   }, [editor, template])
 
   useEffect(() => {
-    if (!element) return
-    element.addEventListener('click', ({ target }: Event) => {
+    if (!editor?.element) return
+    editor.element.addEventListener('click', ({ target }: Event) => {
       const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
       if (!trixEditorContainer) return
 
@@ -128,7 +146,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
       if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
     })
-  }, [element])
+  }, [editor])
 
   const richTextEditorClass = 'pb_rich_text_editor_kit',
     simpleClass = simple ? 'simple' : '',
@@ -137,7 +155,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     inlineClass = inline ? 'inline' : '',
     toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
 
-  let css = classnames(globalProps(props, {maxWidth}), className)
+  let css = classnames(globalProps(props, { maxWidth }), className)
   css = classnames(
     richTextEditorClass,
     simpleClass,

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>
+<%= pb_rails("rich_text_editor", props: {input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb

@@ -1,5 +1,5 @@
 <%= react_component('RichTextEditor',
-  object.rich_text_options,
-  aria: object.aria,
-  data: object.data
-) %>
+                    object.rich_text_options,
+                    aria: object.aria,
+                    data: object.data
+                   ) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -20,6 +20,7 @@ module Playbook
       prop :value
       prop :template
       prop :placeholder
+      prop :input_options
 
       def classname
         generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
@@ -49,6 +50,7 @@ module Playbook
           value: value,
           template: template,
           placeholder: placeholder,
+          inputOptions: input_options,
         }
       end
     end

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/_table.tsx

@@ -21,6 +21,7 @@ type TableProps = {
     data?: { [key: string]: string },
     dataTable: boolean,
     disableHover?: boolean,
+    headerStyle?: "default" | "borderless" | "floating"
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     outerPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
@@ -46,6 +47,7 @@ const Table = (props: TableProps): React.ReactElement => {
         data = {},
         dataTable = false,
         disableHover = false,
+        headerStyle = "default",
         htmlOptions = {},
         id,
         outerPadding = '',
@@ -85,6 +87,8 @@ const Table = (props: TableProps): React.ReactElement => {
             'sticky-left-column': stickyLeftColumn,
             'sticky-right-column': stickyRightColumn,
             'striped': striped,
+            'header-borderless': headerStyle === 'borderless',
+            'header-floating': headerStyle === 'floating',
             [outerPaddingCss]: outerPadding !== '',
         },
         globalProps(props),

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

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import Table from '../../pb_table/_table'
+
+const TableWithHeaderStyleBorderless = (props) => {
+  return (
+    <>
+        <Table
+            headerStyle="borderless"
+            size="sm"
+            {...props}
+        >
+          <thead>
+              <tr>
+                  <th>{'Column 1'}</th>
+                  <th>{'Column 2'}</th>
+                  <th>{'Column 3'}</th>
+                  <th>{'Column 4'}</th>
+                  <th>{'Column 5'}</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>
+            </tr>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+              <td>{'Value 4'}</td>
+              <td>{'Value 5'}</td>
+            </tr>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+              <td>{'Value 4'}</td>
+              <td>{'Value 5'}</td>
+            </tr>
+          </tbody>
+        </Table>
+    </>
+  )
+}
+
+export default TableWithHeaderStyleBorderless

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

@@ -0,0 +1 @@
+Customize your header by removing the header borders with the `headerStyle="borderless"` prop.

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

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import Background from '../../pb_background/_background'
+import Card from '../../pb_card/_card'
+import Table from '../../pb_table/_table'
+
+const TableWithHeaderStyleFloating = (props) => {
+  return (
+    <>
+        <Card background="light" 
+            {...props}
+        >
+            <Table
+                headerStyle="floating"
+                size="sm"
+                {...props}
+            >
+              <Table.Head>
+                  <Background backgroundColor="light" 
+                      tag="tr"
+                      {...props}
+                  >
+                      <Table.Header>{'Column 1'}</Table.Header>
+                      <Table.Header>{'Column 2'}</Table.Header>
+                      <Table.Header>{'Column 3'}</Table.Header>
+                      <Table.Header>{'Column 4'}</Table.Header>
+                      <Table.Header>{'Column 5'}</Table.Header>
+                  </Background>
+              </Table.Head>
+              <Table.Body>
+                <Table.Row>
+                  <Table.Cell>{'Value 1'}</Table.Cell>
+                  <Table.Cell>{'Value 2'}</Table.Cell>
+                  <Table.Cell>{'Value 3'}</Table.Cell>
+                  <Table.Cell>{'Value 4'}</Table.Cell>
+                  <Table.Cell>{'Value 5'}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>{'Value 1'}</Table.Cell>
+                  <Table.Cell>{'Value 2'}</Table.Cell>
+                  <Table.Cell>{'Value 3'}</Table.Cell>
+                  <Table.Cell>{'Value 4'}</Table.Cell>
+                  <Table.Cell>{'Value 5'}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>{'Value 1'}</Table.Cell>
+                  <Table.Cell>{'Value 2'}</Table.Cell>
+                  <Table.Cell>{'Value 3'}</Table.Cell>
+                  <Table.Cell>{'Value 4'}</Table.Cell>
+                  <Table.Cell>{'Value 5'}</Table.Cell>
+                </Table.Row>
+              </Table.Body>
+            </Table>
+        </Card>
+    </>
+  )
+}
+
+export default TableWithHeaderStyleFloating

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

@@ -0,0 +1 @@
+Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `backgroundColor` for the element in which it is nested).

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

@@ -75,3 +75,5 @@ examples:
     - 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
+    - table_with_header_style_borderless: Header Style Borderless
+    - table_with_header_style_floating: Header Style Floating

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

@@ -35,3 +35,5 @@ export { default as TableWithCollapsibleWithNestedRows } from './_table_with_col
 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 TableWithHeaderStyleBorderless } from './_table_with_header_style_borderless.jsx'
+export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'

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

@@ -14,3 +14,79 @@
     }
   }
 }
+// remove all outward facing borders from header
+.header-borderless > thead,
+.header-borderless > thead > tr,
+.header-borderless > thead > tr > th,
+.header-borderless > .pb_table_thead,
+.header-borderless > .pb_table_thead > .pb_table_tr,
+.header-borderless > .pb_table_thead .pb_table_th {
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+}
+
+// remove bottom border (internal to table) on header cells - only light mode needs this redundancy handled likely due to a difference in the base scss and table-dark.scss
+.header-borderless:not(.table-dark) > thead > tr:last-child > th,
+.header-borderless:not(.table-dark) > .pb_table_thead > .pb_table_tr:last-child > .pb_table_th {
+  border-bottom: none !important;
+}
+
+// preserves top rounded corners to header at top of table-card for unnested card
+.header-borderless > thead > tr:first-child > th:first-child,
+.header-borderless > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
+  border-top-left-radius: $border_radius_md !important;
+}
+
+.header-borderless > thead > tr:first-child > th:last-child,
+.header-borderless > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
+  border-top-right-radius: $border_radius_md !important;
+}
+
+// ensures top border is from first row of body to prevent double borders
+.header-borderless > tbody > tr:first-child > td,
+.header-borderless > .pb_table_tbody > .pb_table_tr:first-child > .pb_table_td {
+  border-top: 1px solid $border_light !important;
+}
+
+// floating code - this carries over everything for header-borderless
+.header-floating > thead,
+.header-floating > thead > tr,
+.header-floating > thead > tr > th,
+.header-floating > .pb_table_thead,
+.header-floating > .pb_table_thead > .pb_table_tr,
+.header-floating > .pb_table_thead .pb_table_th {
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+}
+
+.header-floating:not(.table-dark) > thead > tr:last-child > th,
+.header-floating:not(.table-dark) > .pb_table_thead > .pb_table_tr:last-child > .pb_table_th {
+  border-bottom: none !important;
+}
+
+.header-floating > thead > tr:first-child > th:first-child,
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
+  border-top-left-radius: $border_radius_md !important;
+}
+
+.header-floating > thead > tr:first-child > th:last-child,
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
+  border-top-right-radius: $border_radius_md !important;
+}
+
+.header-floating > tbody > tr:first-child > td,
+.header-floating > .pb_table_tbody > .pb_table_tr:first-child > .pb_table_td {
+  border-top: 1px solid $border_light !important;
+}
+
+// flatten out corners for floating headerstyle variant to avoid small triangle of white/empty space
+.header-floating > thead > tr:first-child > th:first-child,
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child { 
+  border-top-left-radius: 0 !important; 
+} 
+.header-floating > thead > tr:first-child > th:last-child, 
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child { 
+  border-top-right-radius: 0 !important; 
+}

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

@@ -1,7 +1,7 @@
-[class^=pb_table] {
+[class^=pb_table]:not(:has(colgroup)) {
   &.striped {
     tbody, .pb_table_tbody {
-      tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
+      tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {
         background-color: $bg_light;
       }
     }
@@ -10,7 +10,7 @@
   &.dark {
     &.striped {
       tbody, .pb_table_tbody {
-        tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
+        tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {
           background-color: $bg_dark;
         }
       }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx

@@ -12,6 +12,7 @@ type TableHeadPropTypes = {
   children: React.ReactNode[] | React.ReactNode;
   className: string;
   data?: { [key: string]: string };
+  headerStyle?: "default" | "borderless" | "floating";
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   tag?: "table" | "div";
@@ -23,6 +24,7 @@ const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
+    headerStyle = "default",
     htmlOptions = {},
     id,
     tag = "table",
@@ -31,7 +33,15 @@ const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames("pb_table_thead", globalProps(props), className);
+  const classes = classnames(
+    "pb_table_thead", 
+    {
+      "pb_table_thead_borderless": headerStyle === "borderless" || headerStyle === "floating",
+      "pb_table_thead_floating": headerStyle === "floating",
+    },
+    globalProps(props), 
+    className
+  );
   const isTableTag = tag === "table";
 
   return (