playbook_ui 15.8.0.pre.rc.0 → 16.0.0.pre.alpha.HFH3979Applydepwarningfixtoplaybook13635

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -4,7 +4,7 @@ import Flex from "../../pb_flex/_flex";
 import FlexItem from "../../pb_flex/_flex_item";
 import SectionSeparator from "../../pb_section_separator/_section_separator";
 
-import  EditorButton  from "./EditorButton";
+import EditorButton  from "./EditorButton";
 import ToolbarDropdown from "./ToolbarDropdown";
 import ToolbarNodes from "./ToolbarNodes";
 import { ToolbarTypes } from "./EditorTypes";

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -44,6 +44,8 @@ type RichTextEditorProps = {
   name?: string,
   onChange: (html: string, text: string) => void,
   placeholder?: string,
+  inputHeight?: "sm" | "md" | "lg",
+  inputMinHeight?: "sm" | "md" | "lg",
   simple?: boolean,
   sticky?: boolean,
   template: string,
@@ -68,6 +70,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     name,
     onChange = noop,
     placeholder,
+    inputHeight,
+    inputMinHeight,
     simple = false,
     sticky = false,
     template = '',
@@ -214,9 +218,10 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       {
         advancedEditor ? (
           <div 
-              className={classnames("pb_rich_text_editor_advanced_container", { 
-              ["toolbar-active"]: shouldShowToolbar,
-              })}
+              className={classnames(
+                "pb_rich_text_editor_advanced_container",
+                { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
+              )}
           >
             {shouldShowToolbar && (
               <EditorToolbar editor={advancedEditor}

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -205,6 +205,59 @@
     }
   }
 }
+
+.pb_rich_text_editor_advanced_container.input_height_sm {
+  div {
+    .tiptap.ProseMirror {
+      height: 131px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_height_md {
+  div {
+    .tiptap.ProseMirror {
+      height: 180px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_height_lg {
+  div {
+    .tiptap.ProseMirror {
+      height: 230px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_sm {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 131px;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_md {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 180px;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_lg {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 230px;
+    }
+  }
+}
+
+
 .tiptap-content {
   @include preview_tiptap_first_child;
   a {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import RichTextEditor from '../_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+import { Caption } from "playbook-ui"
+
+
+const RichTextEditorAdvancedHeight = (props) => {
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor2 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor3 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  return (
+    <div>
+      <Caption>sm</Caption>
+      <RichTextEditor
+          advancedEditor={editor}
+          inputHeight="sm"
+          {...props}
+      >
+        <EditorContent editor={editor} />
+      </RichTextEditor>
+
+      <br />
+
+      <Caption>md</Caption>
+      <RichTextEditor
+          advancedEditor={editor2}
+          inputHeight="md"
+          {...props}
+      >
+        <EditorContent editor={editor2} />
+      </RichTextEditor>
+
+      <br />
+
+      <Caption>lg</Caption>
+      <RichTextEditor
+          advancedEditor={editor3}
+          inputHeight="lg"
+          {...props}
+      >
+        <EditorContent editor={editor3} />
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedHeight

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.md

@@ -0,0 +1 @@
+Use the `inputHeight` prop to keep the text area a specific height. If the text exceeds the text area, it will automatically add a scrollbar to maintain the fixed height.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import RichTextEditor from '../_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+import { Caption } from "playbook-ui"
+
+
+const RichTextEditorAdvancedMinHeight = (props) => {
+
+  const editor1 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor2 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor3 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  return (
+    <div>
+    <Caption>sm</Caption>
+      <RichTextEditor
+          advancedEditor={editor1}
+          inputMinHeight="sm"
+          {...props}
+      >
+        <EditorContent editor={editor1} />
+      </RichTextEditor>
+
+         <br />
+
+    <Caption>md</Caption>
+      <RichTextEditor
+          advancedEditor={editor2}
+          inputMinHeight="md"
+          {...props}
+      >
+        <EditorContent editor={editor2} />
+      </RichTextEditor>
+
+         <br />
+
+    <Caption>lg</Caption>
+      <RichTextEditor
+          advancedEditor={editor3}
+          inputMinHeight="lg"
+          {...props}
+      >
+        <EditorContent editor={editor3} />
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedMinHeight

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md

@@ -0,0 +1 @@
+Use the inputMinHeight prop to render the text area with a minimum height. If the text exceeds the text area, the text area will grow to accommodate it.

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

@@ -29,5 +29,7 @@ examples:
   # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_advanced_inline: Advanced (Inline)
+  - rich_text_editor_advanced_height: Advanced Height
+  - rich_text_editor_advanced_min_height: Advanced Min Height
   - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview

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

@@ -16,4 +16,6 @@ export { default as RichTextEditorAdvancedFocus } from './_rich_text_editor_adva
 export { default as RichTextEditorAdvancedTemplates } from './_rich_text_editor_advanced_templates.jsx'
 export { default as RichTextEditorAdvancedAttributes } from './_rich_text_editor_advanced_attributes.jsx'
 export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_advanced_sticky.jsx'
-export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
+export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
+export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
+export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'

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

@@ -0,0 +1,68 @@
+sections:
+  - title: "Size & Density"
+    examples:
+      - table_sm
+      - table_md
+      - table_lg
+      - table_multiline
+      - table_single_line
+      - table_outer_padding
+
+  - title: "Layout & Structure"
+    examples:
+      - table_responsive_table
+      - table_with_subcomponents
+      - table_with_subcomponents_as_divs
+      - table_with_background_kit
+
+
+  - title: "Sticky & Positional Behaviors"
+    examples:
+      - table_sticky
+      - table_sticky_left_columns
+      - table_sticky_right_columns
+      - table_sticky_columns
+      - table_alignment_row
+      - table_alignment_column
+      - table_alignment_shift_row
+      - table_alignment_shift_data
+      - table_side_highlight
+      - table_container
+
+  - title: "Collapsible & Nested Behaviors"
+    examples:
+      - table_with_collapsible
+      - table_with_dynamic_collapsible
+      - table_with_collapsible_with_custom_click
+      - table_with_collapsible_with_custom_content
+      - table_with_collapsible_with_nested_rows
+      - table_with_collapsible_with_nested_table
+
+  - title: "Data Presentation"
+    examples:
+      - table_data_table
+      - table_vertical_border
+      - table_striped
+
+  - title: "Header Variants"
+    examples:
+      - table_header
+      - table_with_header_style_borderless
+      - table_with_header_style_floating
+
+  - title: "Interactive Tables"
+    examples:
+      - table_with_clickable_rows
+      - table_with_selectable_rows
+      - table_with_filter_variant
+      - table_with_filter_variant_with_pagination
+      - table_disable_hover
+
+  - title: "Table Actions"
+    examples:
+      - table_one_action
+      - table_two_actions
+      - table_two_plus_actions
+      - table_action_middle
+      - table_icon_buttons
+      

data/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js

@@ -1,55 +1,42 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
-
-import Body from '../../../pb_body/_body'
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import { camelToSnakeCase } from '../../../utilities/text'
-import { SCREEN_SIZES } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
 
-const testSubject = 'body'
+// Note: TextInput excluded - alignContent is a flexbox property that doesn't apply to form inputs
+testGlobalProp(
+  'alignContent',
+  ['start', 'center', 'end', 'spaceBetween', 'spaceAround', 'spaceEvenly'],
+  (v) => `align_content_${camelToSnakeCase(v)}`,
+  (size, v) => `align_content_${size}_${camelToSnakeCase(v)}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
 
-test('Global Props: returns proper class name', () => {
-  const propValues = ["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly"]
-  for(let x = 0, y = propValues.length; x < y; ++x) {
-    const testId = `${testSubject}-${propValues[x]}`
-    render(
-      <Body
-          alignContent={`${propValues[x]}`}
-          data={{ testid: testId }}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`align_content_${camelToSnakeCase(propValues[x])}`)
+testGlobalPropResponsiveWithDefault(
+  'alignContent',
+  { default: "spaceAround", xs: "center", sm: "spaceAround", md: "center" },
+  (v) => `align_content_${camelToSnakeCase(v)}`,
+  (size, v) => `align_content_${size}_${camelToSnakeCase(v)}`
+)
 
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${propValues[x]}-${size}`
-      render(
-        <Body
-            alignContent={{ [size]: propValues[x] }}
-            data={{ testid: testId }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`align_content_${size}_${camelToSnakeCase(propValues[x])}`)
-    })
-  }
-})
+testGlobalPropAbsence(
+  'alignContent',
+  ['align_content_start', 'align_content_center', 'align_content_end', 'align_content_space_between', 'align_content_space_around', 'align_content_space_evenly'],
+  undefined,
+  { skipNull: true }
+)
 
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        alignContent={{ default: "spaceAround", xs: "center", sm: "spaceAround", md: "center" }}
-        data={{ testid: testId }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`align_content_space_around`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`align_content_xs_center`)
-  expect(kit).toHaveClass(`align_content_sm_space_around`)
-  expect(kit).toHaveClass(`align_content_md_center`)
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+// NOTE: Using allowRenderingErrors: true because invalid types (like numbers) cause rendering errors with camelToSnakeCase
+testGlobalPropInvalidValues(
+  'alignContent',
+  ['invalid', 'bad_value', 'not_an_align_value', 'special-chars!@#'],
+  ['align_content_invalid', 'align_content_bad_value', 'align_content_not_an_align_value', 'align_content_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true, allowRenderingErrors: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js

@@ -1,54 +1,42 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
-
-import Body from '../../../pb_body/_body'
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import { camelToSnakeCase } from '../../../utilities/text'
-import { SCREEN_SIZES } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+// Note: TextInput excluded - alignItems is a flexbox property that doesn't apply to form inputs
+testGlobalProp(
+  'alignItems',
+  ['start', 'center', 'end', 'baseline', 'stretch', 'flexStart', 'flexEnd'],
+  (v) => `align_items_${camelToSnakeCase(v)}`,
+  (size, v) => `align_items_${size}_${camelToSnakeCase(v)}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
 
-const testSubject = 'body'
+testGlobalPropResponsiveWithDefault(
+  'alignItems',
+  { default: 'end', xs: 'center', sm: 'end', md: 'center' },
+  (v) => `align_items_${camelToSnakeCase(v)}`,
+  (size, v) => `align_items_${size}_${camelToSnakeCase(v)}`
+)
 
-test('Global Props: returns proper class name', () => {
-  const propValues = ["start", "center", "end", "baseline", "stretch", "flexStart", "flexEnd"]
-  for(let x = 0, y = propValues.length; x < y; ++x) {
-    const testId = `${testSubject}-${propValues[x]}`
-    render(
-      <Body
-          alignItems={`${propValues[x]}`}
-          data={{ testid: testId }}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`align_items_${camelToSnakeCase(propValues[x])}`)
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${propValues[x]}-${size}`
-      render(
-        <Body
-            alignItems={{ [size]: propValues[x] }}
-            data={{ testid: testId }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`align_items_${size}_${camelToSnakeCase(propValues[x])}`)
-    })
-  }
-})
+testGlobalPropAbsence(
+  'alignItems',
+  ['align_items_start', 'align_items_center', 'align_items_end', 'align_items_baseline', 'align_items_stretch', 'align_items_flex_start', 'align_items_flex_end'],
+  undefined,
+  { skipNull: true }
+)
 
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        alignItems={{ default: "end", xs: "center", sm: "end", md: "center" }}
-        data={{ testid: testId }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`align_items_end`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`align_items_xs_center`)
-  expect(kit).toHaveClass(`align_items_sm_end`)
-  expect(kit).toHaveClass(`align_items_md_center`)
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+// NOTE: Using allowRenderingErrors: true because invalid types (like numbers) cause rendering errors with camelToSnakeCase
+testGlobalPropInvalidValues(
+  'alignItems',
+  ['invalid', 'bad_value', 'not_an_align_value', 'special-chars!@#'],
+  ['align_items_invalid', 'align_items_bad_value', 'align_items_not_an_align_value', 'align_items_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true, allowRenderingErrors: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js

@@ -1,55 +1,42 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
-
-import Body from '../../../pb_body/_body'
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import { camelToSnakeCase } from '../../../utilities/text'
-import { SCREEN_SIZES } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
 
-const testSubject = 'body'
+// Note: TextInput excluded - alignSelf is a flexbox property that doesn't apply to form inputs
+testGlobalProp(
+  'alignSelf',
+  ['start', 'center', 'end', 'stretch', 'baseline', 'auto'],
+  (v) => `align_self_${camelToSnakeCase(v)}`,
+  (size, v) => `align_self_${size}_${camelToSnakeCase(v)}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
 
-test('Global Props: returns proper class name', () => {
-  const propValues = ["start", "center", "end", "stretch", "baseline", "auto"]
-  for(let x = 0, y = propValues.length; x < y; ++x) {
-    const testId = `${testSubject}-${propValues[x]}`
-    render(
-      <Body
-          alignSelf={`${propValues[x]}`}
-          data={{ testid: testId }}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`align_self_${camelToSnakeCase(propValues[x])}`)
+testGlobalPropResponsiveWithDefault(
+  'alignSelf',
+  { default: 'end', xs: 'center', sm: 'end', md: 'center' },
+  (v) => `align_self_${camelToSnakeCase(v)}`,
+  (size, v) => `align_self_${size}_${camelToSnakeCase(v)}`
+)
 
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${propValues[x]}-${size}`
-      render(
-        <Body
-            alignSelf={{ [size]: propValues[x] }}
-            data={{ testid: testId }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`align_self_${size}_${camelToSnakeCase(propValues[x])}`)
-    })
-  }
-})
+testGlobalPropAbsence(
+  'alignSelf',
+  ['align_self_start', 'align_self_center', 'align_self_end', 'align_self_stretch', 'align_self_baseline', 'align_self_auto'],
+  undefined,
+  { skipNull: true }
+)
 
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        alignSelf={{ default: "end", xs: "center", sm: "end", md: "center" }}
-        data={{ testid: testId }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`align_self_end`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`align_self_xs_center`)
-  expect(kit).toHaveClass(`align_self_sm_end`)
-  expect(kit).toHaveClass(`align_self_md_center`)
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+// NOTE: Using allowRenderingErrors: true because invalid types (like numbers) cause rendering errors with camelToSnakeCase
+testGlobalPropInvalidValues(
+  'alignSelf',
+  ['invalid', 'bad_value', 'not_an_align_value', 'special-chars!@#'],
+  ['align_self_invalid', 'align_self_bad_value', 'align_self_not_an_align_value', 'align_self_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true, allowRenderingErrors: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/borderRadius.test.js

@@ -0,0 +1,33 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+// NOTE: TextInput excluded - borderRadius is not a valid prop for input elements
+testGlobalProp(
+  'borderRadius',
+  ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'rounded'],
+  (v) => `border_radius_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+testGlobalPropAbsence(
+  'borderRadius',
+  ['border_radius_none', 'border_radius_xs', 'border_radius_sm', 'border_radius_md', 'border_radius_lg', 'border_radius_xl', 'border_radius_rounded'],
+  undefined,
+  { skipNull: true }
+)
+
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'borderRadius',
+  ['invalid', 'bad_value', 'not_a_radius', 'special-chars!@#'],
+  ['border_radius_invalid', 'border_radius_bad_value', 'border_radius_not_a_radius', 'border_radius_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)