playbook_ui 18.1.0.pre.rc.2 → 18.1.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69806745bf9d406cc340a98ebaa54bbab8fd00312d756cd0bf60e3077db5794e
-  data.tar.gz: 0aef11e0e9dc51c336af96739287476e8b01e8397c2580cfff87d8ef0a17a7eb
+  metadata.gz: b509d67399d2f700fb0fdb9121ba71f5430009a0ad2d4c8c86b685cd904cf0d0
+  data.tar.gz: ee187a8a1510f7c9c51c68dfa5532d250ddd96e6688384386a092890eb84a9d3
 SHA512:
-  metadata.gz: 590f41d6ac3e5304ad388114c1a0a0264df448ef4e4df753a4e06058c4a80bae552f5aefb78f768ff257073694dcc9433fd697520a7603d7d2ce5b4b314fd5c5
-  data.tar.gz: 4dd0fe2434dc65fd2a2eab892ffd571d6c6f2fcf9d7ea72e5fb83da7d5f5cf44ccaf5c2e579765c2886092779b4b5c7de0007da7a12cc49998c23ca253815208
+  metadata.gz: dcc3382e3c37957e7f805db7de2b4f78b9b03bb40e8b11d283519842af3790d016626ae63b194268033a196ce8ea0fce84c30c5a8f73b42f9901655db25d3009
+  data.tar.gz: 315da4f419ed8096a01da8ef3d990dce428f4b60fc810e82cfb1c051f34e928ea4d7b3b8ccae5d7076eb61803cbf79526703a4a5a38b573b286fa6ea7be2a541

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
@@ -13,6 +13,7 @@ type CopyButtonProps = {
   aria?: { [key: string]: string }
   className?: string
   data?: { [key: string]: string }
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)}
   id?: string
   from?: string
   text?: string
@@ -29,6 +30,7 @@ const CopyButton = (props: CopyButtonProps) => {
     className,
     data = {},
     from = '',
+    htmlOptions = {},
     id,
     text = 'Copy',
     timeout = 1000,
@@ -42,12 +44,14 @@ const CopyButton = (props: CopyButtonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
   return (
     <div 
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx

@@ -86,3 +86,15 @@ test('passes text and tooltip props to button', () => {
   const tooltip = kit.querySelector('.pb_tooltip_kit')
   expect(tooltip).toBeInTheDocument()
 })
+
+test('applies htmlOptions to the root element', () => {
+  render(
+      <CopyButton
+          data={{ testid: 'html-options-test' }}
+          htmlOptions={{ title: 'copy title' }}
+          value="copy"
+      />
+  )
+
+  expect(screen.getByTestId('html-options-test')).toHaveAttribute('title', 'copy title')
+})

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -1,5 +1,6 @@
 
 import React from 'react'
+import classnames from 'classnames'
 
 import { buildCss, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps'
@@ -11,6 +12,7 @@ import TimeStacked from '../pb_time_stacked/_time_stacked'
 import DateStacked from '../pb_date_stacked/_date_stacked'
 
 type DateTimeStackedProps = {
+  className?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   date: Date,
@@ -27,20 +29,25 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
     date,
     datetime,
     dark,
+    className,
     htmlOptions = {},
     timeZone = 'America/New_York',
     showCurrentYear = false,
   } = props
 
-  const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
-  const htmlProps = buildHtmlProps(htmlOptions)
+  const classes = classnames(
+    buildCss('pb_date_time_stacked_kit'),
+    globalProps(props),
+    className
+  )
 
   return (
     <Flex
+        htmlOptions={htmlOptions}
         inline={false}
         vertical="stretch"
-        {...htmlProps}
         {...props}
+        className={classes}
     >
       <FlexItem>
         <DateStacked
@@ -58,7 +65,6 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
       />
       <FlexItem>
         <TimeStacked
-            className={classes}
             dark={dark}
             date={date || datetime}
             timeZone={timeZone}

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -74,3 +74,15 @@ test('hides current year by default', () => {
     expect(yearElement).toBeNull()
   }
 })
+
+test('applies kit class and global props to the root', () => {
+  const kit = renderKit(DateTimeStacked, {
+    data: { testid: 'datetimestacked-root' },
+    datetime,
+    dark: false,
+    margin: 'md',
+  })
+
+  expect(kit).toHaveClass('pb_date_time_stacked_kit')
+  expect(kit).toHaveClass('m_md')
+})

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx

@@ -1,22 +1,27 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../../utilities/props'
+import { buildCss, buildHtmlProps } from '../../utilities/props'
 import { globalProps } from '../../utilities/globalProps'
 
 type DialogBodyProps = {
   children: React.ReactNode | React.ReactNode[] | string,
   padding?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
-  className?: string
+  className?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
 } 
 
 // Body component
 const DialogBody = (props: DialogBodyProps): React.ReactElement => {
-  const { children, className } = props
+  const { children, className, htmlOptions = {} } = props
   const bodyCSS = buildCss("dialog_body")
   const bodySpacing = globalProps(props)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div className={classnames(bodyCSS, bodySpacing, className)}>
+    <div
+        {...htmlProps}
+        className={classnames(bodyCSS, bodySpacing, className)}
+    >
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -268,3 +268,13 @@ describe('isNativeSelectMenuInteraction', () => {
     expect(isNativeSelectMenuInteraction(dialog, select)).toBe(false)
   })
 })
+
+test("applies htmlOptions to Dialog.Body", () => {
+  render(
+    <Dialog.Body htmlOptions={{ title: "body title" }}>
+      {"Body content"}
+    </Dialog.Body>
+  )
+
+  expect(document.querySelector(".dialog_body")).toHaveAttribute("title", "body title")
+})

data/app/pb_kits/playbook/pb_empty_state/_empty_state.tsx

@@ -2,7 +2,7 @@
 import React from "react"
 import ReactDOMServer from "react-dom/server"
 import classnames from "classnames"
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
 import { globalProps } from "../utilities/globalProps"
 import Title from "../pb_title/_title"
 import Body from "../pb_body/_body"
@@ -22,6 +22,7 @@ type EmptyStateProps = {
   data?: { [key: string]: string },
   description?: string,
   header?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   image?: string,
   linkButton?: string,
@@ -40,6 +41,7 @@ const EmptyState = (props: EmptyStateProps) => {
     data = {},
     description,
     header = "",
+    htmlOptions = {},
     id,
     image,
     linkButton,
@@ -52,6 +54,7 @@ const EmptyState = (props: EmptyStateProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss("pb_empty_state_kit"), globalProps(props), className)
 
   const renderContent = () => {
@@ -137,6 +140,7 @@ const EmptyState = (props: EmptyStateProps) => {
     const layout = (
       <div {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={classes}
           id={id}
       >

data/app/pb_kits/playbook/pb_empty_state/empty_state.test.jsx

@@ -14,4 +14,15 @@ test('returns namespaced class name', () => {
 
   const kit = screen.getByTestId('primary-test')
   expect(kit).toHaveClass('pb_empty_state_kit')
+})
+
+test('applies htmlOptions to the root element', () => {
+  render(
+    <EmptyState
+        data={{ testid: 'html-options-test' }}
+        htmlOptions={{ title: 'empty state title' }}
+    />
+  )
+
+  expect(screen.getByTestId('html-options-test')).toHaveAttribute('title', 'empty state title')
 })

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
+import { buildHtmlProps } from '../../utilities/props'
 import { GlobalProps, globalProps } from '../../utilities/globalProps'
 
 import Card from '../../pb_card/_card'
@@ -10,13 +11,18 @@ export type FilterBackgroundProps = {
   className?: string,
   children?: React.ReactChild[] | React.ReactChild,
   dark?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
 } & GlobalProps
 
 const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {
-  const { background = true, className, children, dark } = props
+  const { background = true, className, children, dark, htmlOptions = {} } = props
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div className={classnames(`pb_filter_kit ${className}`, globalProps(props))}>
+    <div
+        {...htmlProps}
+        className={classnames(`pb_filter_kit ${className}`, globalProps(props))}
+    >
       { background ? 
           <Card
               dark={dark}

data/app/pb_kits/playbook/pb_filter/filter.test.js

@@ -153,6 +153,20 @@ test("generates quickpick options for interactive dropdown filters", () => {
   expect(handleChange).toHaveBeenCalledWith("quickpick-last-month");
 });
 
+test("applies htmlOptions to the root element", () => {
+  render(
+    <Filter
+        htmlOptions={{ title: "filter title" }}
+        results={1}
+    />
+  );
+
+  expect(document.querySelector(".pb_filter_kit")).toHaveAttribute(
+    "title",
+    "filter title"
+  );
+});
+
 test("renders double layout when double is true", () => {
   render(<FilterTest double />);
 

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 
@@ -32,7 +33,7 @@ const ProgressStepItem = (props: ProgressStepItemProps): React.ReactElement => {
     <li 
         {...dataProps}
         {...htmlProps}
-        className={classnames(progressStepItem, className)}
+        className={classnames(progressStepItem, globalProps(props), className)}
     >
       <div className="box">
         <div className="circle">

data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js

@@ -108,6 +108,22 @@ test('should render the children elements', () => {
   expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
 })
 
+test('should apply global props to ProgressStepItem', () => {
+  render(
+      <ProgressStep>
+        <ProgressStepItem
+            data={{ testid: step1Id }}
+            margin="md"
+            status="complete"
+        >
+            {'Step 1'}
+        </ProgressStepItem>
+      </ProgressStep>
+  )
+
+  expect(screen.getByTestId(step1Id)).toHaveClass('m_md')
+})
+
 test('should render info color', () => {
 render( 
         <ProgressStep

data/app/pb_kits/playbook/pb_source/_source.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildDataProps, buildAriaProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
 import { titleize } from '../utilities/text'
 
 import Avatar, { AvatarProps } from '../pb_avatar/_avatar'
@@ -22,23 +23,25 @@ type SourceProps = {
   user: AvatarProps,
 }
 
-const Source = ({
-  aria = {},
-  className,
-  data = {},
-  hideIcon = false,
-  htmlOptions = {},
-  id,
-  source,
-  type = 'inbound',
-  user = {},
-}: SourceProps): React.ReactElement => {
+const Source = (props: SourceProps): React.ReactElement => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    hideIcon = false,
+    htmlOptions = {},
+    id,
+    source,
+    type = 'inbound',
+    user = {},
+  } = props
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const ariaProps = buildAriaProps(aria)
 
   const css = classnames([
     'pb_source_kit',
+    globalProps(props),
     className,
   ])
 

data/app/pb_kits/playbook/pb_source/source.test.js

@@ -80,3 +80,9 @@ test('should pass user prop', () => {
     kit = screen.getByText(user.userId)
     expect(kit).toBeInTheDocument()
 })
+
+test('should apply global props to the root element', () => {
+    render(<SourceDefault margin="md" />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('m_md')
+})

data/dist/ai/forms.json

@@ -1,6 +1,6 @@
 {
   "metadataVersion": 1,
-  "version": "18.1.0-rc.2",
+  "version": "18.1.0-rc.3",
   "builder": {
     "class": "Playbook::Forms::Builder",
     "helper": "pb_form_with",

data/dist/ai/index.json

@@ -1,8 +1,8 @@
 {
-  "version": "18.1.0-rc.2",
+  "version": "18.1.0-rc.3",
   "metadataVersion": 1,
   "forms": "forms.json",
-  "generated": "2026-09-29T19:21:09.246Z",
+  "generated": "2026-09-29T19:46:50.397Z",
   "schemas": {
     "globalProps": "global-props.schema.json",
     "globalEventProps": "global-event-props.schema.json",