playbook_ui 16.1.0.pre.rc.1 → 16.1.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 417316b6bfeb02f46d29a9daa9fc6bccd490cffd020f4569d84a3d4ea52b8c34
-  data.tar.gz: 3b0839900fc4f979e353a7f7efe1b5d5c2d3f7d2a67aa46eabd8d4bcb9d2d6d0
+  metadata.gz: b33580083b52f611802569a00b2e0cb6d8ae6aaa31f5a91ffc329649a4857834
+  data.tar.gz: 26448175846617514793f365ac4518dd47836608e0dc05ae295461cfb1778517
 SHA512:
-  metadata.gz: b2cd2d914be8f665656c2992f46523369558857bc21fccb957ef5177d3585353f3b82e86ab6a626bba0f2db88d7de71e4d21dcc48d9c324cafc3d3cf19bdae1b
-  data.tar.gz: 82d3240c1359f6a8ecf636d7e1dba9fc8a73e5a5ec244027f93e1a14bd67c8c619302609adf530dfddf25888f4995ab1e3e476314a9300b33963301d0f206c26
+  metadata.gz: '04091c2ae2661ba6f1361b3e611e85f86b607efdfec658cbc48c57a7128565803535ea9cff192d7d3c1ca670cc69ce207d636b49b30d531815b310852985328d'
+  data.tar.gz: 553b79a320a6e6f2de774bd7ac22de0285dd27be4686c442de0560b1f495ddd7c9a28d4211c8a765f4b9b6040ed70a3ac49069278da2a631870f632cefa3ad43

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -11,8 +11,8 @@
     <% if content.present? %>
       <% content.presence %>
     <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { table_id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
-      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
+      <%= pb_rails("advanced_table/table_header", props: { table_id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar, inline_row_loading: object.inline_row_loading, persist_toggle_expansion_button: object.persist_toggle_expansion_button, table_data: object.table_data }) %>
+      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling, inline_row_loading: object.inline_row_loading }) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -33,6 +33,10 @@ module Playbook
                              default: false
       prop :row_styling, type: Playbook::Props::Array,
                          default: []
+      prop :inline_row_loading, type: Playbook::Props::Boolean,
+                                default: false
+      prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
+                                             default: false
 
       def classname
         additional_classes = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md

@@ -6,9 +6,9 @@ In the first Advanced Table in this code example, 2021 has an empty children arr
 This prop is set to `false` by default. 
 
 
-### persistToggleExpansion
+### persistToggleExpansionButton
 The `persistToggleExpansionButton` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
 
 In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persistToggleExpansionButton` in place. The third Advanced Table shows the toggle all button due to `persistToggleExpansionButton`. 
 
-This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.
+This prop is set to `false` by default and should only be used in conjunction with `inlineRowLoading`.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb

@@ -0,0 +1,64 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("caption", props: { text: "Inline Row Loading - Demonstrated in Row 1 (Rows 2 and 3 have data)" }) %>
+
+<%= pb_rails("advanced_table", props: {
+  id: "inline-loading-table-1",
+  table_data: @table_data_inline_loading,
+  column_definitions: column_definitions,
+  enable_toggle_expansion: "all",
+  inline_row_loading: true,
+  margin_bottom: "md"
+}) %>
+
+<%= pb_rails("caption", props: { text: "Inline Row Loading with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is not rendered" }) %>
+
+<%= pb_rails("advanced_table", props: {
+  id: "inline-loading-table-2",
+  table_data: @table_data_inline_loading_empty_children,
+  column_definitions: column_definitions,
+  enable_toggle_expansion: "all",
+  inline_row_loading: true,
+  margin_bottom: "md"
+}) %>
+
+<%= pb_rails("caption", props: { text: "Inline Row Loading and Persist Toggle Expansion Button with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is rendered" }) %>
+
+<%= pb_rails("advanced_table", props: {
+  id: "inline-loading-table-3",
+  table_data: @table_data_inline_loading_empty_children,
+  column_definitions: column_definitions,
+  enable_toggle_expansion: "all",
+  inline_row_loading: true,
+  persist_toggle_expansion_button: true
+}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md

@@ -0,0 +1,18 @@
+### inline_row_loading
+By default, the kit assumes that the initial dataset is complete, rendering expansion controls only when children are present. If, however, you want to implement lazy-loading patterns where children are fetched only when a parent is expanded, use the `inline_row_loading` prop.
+
+When `inline_row_loading` is set to `true`:
+- Expansion controls are rendered for rows with empty `children` arrays (you must pass `children: []` to any row that will have children loaded later)
+- When such a row is expanded, an inline loading indicator appears until the child data is loaded
+- This enables lazy-loading patterns without one-off hacks
+
+In the first table above, row "2021" has an empty `children` array. Click to expand it and see the inline loading state. Rows 2 and 3 have actual child data.
+
+This prop is set to `false` by default.
+
+### persist_toggle_expansion_button
+The `persist_toggle_expansion_button` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
+
+In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persist_toggle_expansion_button` in place. The third Advanced Table shows the toggle all button due to `persist_toggle_expansion_button`.
+
+This prop is set to `false` by default and should only be used in conjunction with `inline_row_loading`.

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

@@ -29,6 +29,7 @@ examples:
   - advanced_table_background_control_rails: Column Styling Background Color
   - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
   - advanced_table_column_border_color_rails: Column Group Border Color
+  - advanced_table_inline_row_loading_rails: Inline Row Loading
 
 
   react:

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -25,6 +25,8 @@ module Playbook
                              default: false
       prop :row_styling, type: Playbook::Props::Array,
                          default: []
+      prop :inline_row_loading, type: Playbook::Props::Boolean,
+                                default: false
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -69,7 +71,24 @@ module Playbook
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { table_id: table_id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id })
+        output << pb_rails("advanced_table/table_row", props: { table_id: table_id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id, inline_row_loading: inline_row_loading })
+
+        # Render inline loading row when inline_row_loading is enabled and row has empty children
+        if inline_row_loading
+          children = row_children_for(row)
+          if children.is_a?(::Array) && children.empty?
+            max_depth = cell_accessors_length(column_definitions)
+            if current_depth < max_depth
+              loading_row_data_attributes = {
+                advanced_table_content: "#{new_ancestor_ids.join('-')}-loading",
+                row_depth: current_depth + 1,
+                row_parent: "#{table_id}_#{row.object_id}",
+                inline_loading_row: true,
+              }
+              output << render_inline_loading_row(leaf_columns.length, current_depth, loading_row_data_attributes)
+            end
+          end
+        end
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -104,6 +123,37 @@ module Playbook
         ""
       end
 
+      # 3 helper methods for inline row loading
+      def render_inline_loading_row(column_count, depth, data_attributes)
+        padding_left = depth.zero? ? "0.5em" : "#{(depth + 1) * 2}em"
+
+        content_tag(:tr, class: "toggle-content inline-loading-row", data: data_attributes) do
+          content_tag(:td, colspan: column_count, style: "padding-left: #{padding_left}") do
+            pb_rails("loading_inline")
+          end
+        end
+      end
+
+      def row_children_for(row)
+        if row.respond_to?(:children)
+          row.children
+        elsif row.respond_to?(:[])
+          row[:children] || row["children"]
+        end
+      end
+
+      def cell_accessors_length(col_defs)
+        first_col = col_defs.first
+        return 0 unless first_col
+
+        accessors = if first_col.respond_to?(:cellAccessors)
+                      first_col.cellAccessors
+                    elsif first_col.respond_to?(:[])
+                      first_col[:cellAccessors] || first_col["cellAccessors"]
+                    end
+        accessors&.length || 0
+      end
+
     private
 
       def has_grouped_headers?

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -14,7 +14,7 @@
                   <%= object.render_select_all_checkbox %>
                 <% end %>
               <% end %>
-              <% if object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all" %>
+              <% if object.show_toggle_all_button? %>
                 <% if loading %>
                   <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
                 <% else %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -19,6 +19,12 @@ module Playbook
                              default: false
       prop :show_actions_bar, type: Playbook::Props::Boolean,
                               default: true
+      prop :inline_row_loading, type: Playbook::Props::Boolean,
+                                default: false
+      prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
+                                             default: false
+      prop :table_data, type: Playbook::Props::Array,
+                        default: []
 
       def classname
         additional_classes = []
@@ -135,6 +141,20 @@ module Playbook
         original_def.dig(:column_styling, :header_font_color)
       end
 
+      # Check if any row in the table has children
+      def has_any_sub_rows?
+        return false if table_data.blank?
+
+        table_data.any? { |row| row_has_children?(row) }
+      end
+
+      # Determines if the toggle-all button should be shown in the header based on inline row loading and persist toggle expansion button props
+      def show_toggle_all_button?
+        return false unless enable_toggle_expansion == "header" || enable_toggle_expansion == "all"
+
+        has_any_sub_rows? || (inline_row_loading && persist_toggle_expansion_button)
+      end
+
       # Check if header has custom background color
       def has_custom_header_background_color?(cell)
         cell[:header_background_color].present?
@@ -317,6 +337,20 @@ module Playbook
         end
         nil
       end
+
+      # 2 inline row loading helper methods
+      def row_has_children?(row)
+        children = row_children_for(row)
+        children.present? && children.is_a?(::Array) && !children.empty?
+      end
+
+      def row_children_for(row)
+        if row.respond_to?(:children)
+          row.children
+        elsif row.respond_to?(:[])
+          row[:children] || row["children"]
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -32,7 +32,7 @@
                                     <%= object.render_row_checkbox %>
                                 <% end %>
                             <% end %>
-                            <% if object.row[:children].present? %>
+                            <% if object.show_expand_button? %>
                                 <button
                                     id="<%= "#{object.table_id}_#{object.row.object_id}" %>"
                                     class="gray-icon expand-toggle-icon"

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -33,6 +33,8 @@ module Playbook
                       default: false
       prop :immediate_parent_row_id, type: Playbook::Props::String,
                                      default: ""
+      prop :inline_row_loading, type: Playbook::Props::Boolean,
+                                default: false
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -186,6 +188,23 @@ module Playbook
         end
       end
 
+      # Determines if the row should show an expand button (true if row has children or inline_row_loading true and row has empty children array)
+      def show_expand_button?
+        children = row_children
+        return true if children.present?
+        return true if inline_row_loading && children.is_a?(::Array) && children.empty?
+
+        false
+      end
+
+      def row_children
+        if row.respond_to?(:children)
+          row.children
+        elsif row.respond_to?(:[])
+          row[:children] || row["children"]
+        end
+      end
+
     private
 
       def custom_renderer_value(column, index)

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

@@ -0,0 +1,39 @@
+<%= pb_rails("textarea", props: { 
+  label: "ID on Container", 
+  id: "container-id",
+  name: "comment",
+  rows: 4
+}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { 
+  label: "ID on Textarea via input_options", 
+  input_options: { id: "textarea-id" },
+  name: "comment",
+  rows: 4
+}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { 
+  label: "Both Container and Textarea IDs", 
+  id: "container-id-2",
+  input_options: { id: "textarea-id-2" },
+  name: "comment",
+  rows: 4
+}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { 
+  label: "Data and ARIA Attributes", 
+  name: "description",
+  rows: 4,
+  input_options: {
+    'aria-label': "Enter description",
+    'aria-describedby': "help-text",
+    data: { controller: "textarea", action: "focus->handleFocus" },
+    id: "description-textarea"
+  }
+}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md

@@ -0,0 +1,3 @@
+Use the `input_options` / `inputOptions` prop to pass additional attributes directly to the underlying `<textarea>` element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, ARIA attributes, or other HTML attributes that need to be on the textarea element itself.
+
+Additional HTML attributes (e.g. data or ARIA attributes) can also be passed directly to the `<textarea>` via `input_options`.

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

@@ -8,6 +8,7 @@ examples:
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
+  - textarea_input_options: Input Options
 
   react:
   - textarea_default: Default

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -8,16 +8,10 @@
       <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
     <% end %>
   <% else %>
-    <%= text_area(
-        :object,
-        :method,
-        :data => object.textarea_options[:data],
-        :max_characters => object.max_characters,
-        :name => object.name,
-        :onkeyup => object.onkeyup,
-        :placeholder => object.placeholder,
-        :rows => object.rows,
-        :value => object.value) %>
+    <%= text_area_tag(
+        object.name,
+        object.value,
+        object.all_textarea_attributes) %>
     <% if object.error %>
       <% if object.character_count %>
         <%= pb_rails("flex", props: { spacing: "between", vertical: "center" }) do %>

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -8,6 +8,8 @@ module Playbook
       prop :error
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
       prop :label
       prop :method
       prop :name
@@ -36,6 +38,32 @@ module Playbook
         }
       end
 
+      def all_textarea_attributes
+        # Merge data attributes: emoji_mask data + input_options data
+        data_attrs = textarea_options[:data] || {}
+        input_data = input_options[:data] || {}
+        merged_data = data_attrs.merge(input_data)
+
+        base_attributes = {
+          id: input_options[:id] || "object_method",
+          max_characters: max_characters,
+          name: name,
+          onkeyup: onkeyup,
+          placeholder: placeholder,
+          rows: rows,
+          value: value,
+        }
+
+        # Merge input_options (excluding data to handle separately)
+        input_options_without_data = input_options.except(:data)
+        result = base_attributes.merge(input_options_without_data)
+
+        # Add merged data if present (input_options data takes precedence over emoji_mask data)
+        result[:data] = merged_data unless merged_data.empty?
+
+        result
+      end
+
     private
 
       def error_class

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 }
+)

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

@@ -0,0 +1,60 @@
+import React from 'react'
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import { render, screen } 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 validSizes = ['xs', 'sm', 'md', 'lg', 'xl']
+
+// NOTE: TextInput excluded - positioning props are not valid for input elements
+// Test bottom prop with string values
+testGlobalProp(
+  'bottom',
+  validSizes,
+  (v) => `bottom_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+// Test bottom prop with object values (inset) - tested separately due to object value complexity
+test('Global Props: bottom returns proper class name with object values (inset)', () => {
+  const testCases = [
+    { value: { value: 'md', inset: true }, expected: 'bottom_md_inset' },
+    { value: { value: 'lg', inset: false }, expected: 'bottom_lg' },
+    { value: { value: 'sm', inset: true }, expected: 'bottom_sm_inset' }
+  ]
+  
+  testCases.forEach(({ value, expected }) => {
+    const testId = `body-bottom-object-${value.value}-${value.inset}`
+    render(
+      <Body
+          bottom={value}
+          data={{ testid: testId }}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(expected)
+  })
+})
+
+testGlobalPropAbsence(
+  'bottom',
+  ['bottom_xs', 'bottom_sm', 'bottom_md', 'bottom_lg', 'bottom_xl'],
+  undefined,
+  { skipNull: true }
+)
+
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'bottom',
+  ['invalid', 'bad_value', 'not_a_size', 'special-chars!@#'],
+  ['bottom_invalid', 'bottom_bad_value', 'bottom_not_a_size', 'bottom_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

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

@@ -0,0 +1,42 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import { camelToSnakeCase } from '../../../utilities/text'
+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 TextInput from '../../../pb_text_input/_text_input'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+const validValues = [
+  'auto', 'default', 'none', 'contextMenu', 'help', 'pointer', 'progress', 'wait', 'cell',
+  'crosshair', 'text', 'verticalText', 'alias', 'copy', 'move', 'noDrop', 'notAllowed', 'grab',
+  'grabbing', 'eResize', 'nResize', 'neResize', 'nwResize', 'sResize', 'seResize', 'swResize', 'wResize',
+  'ewResize', 'nsResize', 'neswResize', 'nwseResize', 'colResize', 'rowResize', 'allScroll', 'zoomIn', 'zoomOut'
+]
+
+testGlobalProp(
+  'cursor',
+  validValues,
+  (v) => `cursor_${camelToSnakeCase(v)}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+
+testGlobalPropAbsence(
+  'cursor',
+  ['cursor_auto', 'cursor_pointer', 'cursor_default', 'cursor_none'],
+  undefined,
+  { skipNull: true }
+)
+
+// 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(
+  'cursor',
+  ['invalid', 'bad_value', 'not_a_cursor', 'special-chars!@#'],
+  ['cursor_invalid', 'cursor_bad_value', 'cursor_not_a_cursor', 'cursor_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true, allowRenderingErrors: true }
+)