playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

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

@@ -29,6 +29,8 @@ module Playbook
                                 default: false
       prop :full_width_cell, type: Playbook::Props::Boolean,
                              default: false
+      prop :group_separators, type: Playbook::Props::Boolean,
+                              default: false
       prop :pinned_rows, type: Playbook::Props::HashProp,
                          default: {}
 
@@ -46,7 +48,7 @@ module Playbook
         end.compact
       end
 
-      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {}, immediate_parent_row_id: nil, is_pinned_row: false, pinned_index: nil, skip_pinned_ids: nil, initial_table_data_attributes: nil, pinned_position: "top", pinned_bottom_total: nil)
+      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {}, immediate_parent_row_id: nil, is_pinned_row: false, pinned_index: nil, skip_pinned_ids: nil, initial_table_data_attributes: nil, pinned_position: "top", pinned_bottom_total: nil, group_closes_from_depth: nil)
         if skip_pinned_ids && row_id_for(row) && skip_pinned_ids.include?(row_id_for(row).to_s)
           return is_pinned_row ? [ActiveSupport::SafeBuffer.new, pinned_index] : ActiveSupport::SafeBuffer.new
         end
@@ -91,38 +93,51 @@ module Playbook
                                     initial_table_data_attributes || table_data_attributes
                                   end
 
+        children = row_children_for(row)
+        # Match React: every last sibling gets a separator. When the row is expanded,
+        # JS adds `group-separator-expanded` and CSS hides this row’s separator so the leaf keeps it.
+        # group_closes_from_depth is the depth of the outermost group this row closes (nil unless a last sibling).
+        show_group_separator = group_separators && current_depth.positive? && !group_closes_from_depth.nil?
+        row_classname = [additional_classes, ("group-separator-row" if show_group_separator)].compact.join(" ").strip
+        separator_inset_style = show_group_separator ? "--group-separator-inset: #{group_separator_inset_em(group_closes_from_depth)}em;" : nil
+
         # Additional class and data attributes needed for toggle logic
-        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, full_width_cell: full_width_cell }
+        row_props = { table_id: table_id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, group_separators: group_separators, classname: row_classname, 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, full_width_cell: full_width_cell }
         if is_pinned_row && !next_pinned_index.nil?
           row_props[:is_pinned_row] = true
           row_props[:pinned_position] = pinned_position.to_s
           row_props[:pinned_index] = next_pinned_index
           row_bg = (row_styling || []).find { |s| s[:row_id].to_s == row_id_for(row).to_s }&.[](:background_color) || "white"
-          row_props[:html_options] = { style: build_pinned_row_style(next_pinned_index, background: row_bg, position: pinned_position, bottom_total: pinned_bottom_total) }
+          pinned_style = build_pinned_row_style(next_pinned_index, background: row_bg, position: pinned_position, bottom_total: pinned_bottom_total)
+          row_props[:html_options] = { style: [pinned_style, separator_inset_style].compact.join(" ") }
           next_pinned_index += 1
+        elsif separator_inset_style
+          row_props[:html_options] = { style: separator_inset_style }
         end
         output << pb_rails("advanced_table/table_row", props: row_props)
 
         # 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
+        if inline_row_loading && 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
 
         if row[:children].present?
           row[:children].each do |child_row|
-            is_first_child = row[:children].first == child_row
+            is_first_child = row[:children].first.equal?(child_row)
+            is_last_child = group_separators && row[:children].last.equal?(child_row)
+            # Prefer nil? over || so year-level 0 is kept (0 is falsy in Ruby).
+            child_closes_from_depth = if is_last_child
+                                        group_closes_from_depth.nil? ? current_depth : group_closes_from_depth
+                                      end
             immediate_parent_id = row.object_id
             data_content = new_ancestor_ids.join("-") + "-#{child_row.object_id}"
 
@@ -133,7 +148,7 @@ module Playbook
               advanced_table_content: data_content,
             }
 
-            child_opts = { additional_classes: "toggle-content", table_data_attributes: child_data_attributes, immediate_parent_row_id: row[:id] }
+            child_opts = { additional_classes: "toggle-content", table_data_attributes: child_data_attributes, immediate_parent_row_id: row[:id], group_closes_from_depth: child_closes_from_depth }
             child_opts[:is_pinned_row] = is_pinned_row
             child_opts[:pinned_index] = next_pinned_index if is_pinned_row
             child_opts[:pinned_position] = pinned_position if is_pinned_row
@@ -212,12 +227,17 @@ module Playbook
         row_children_for(row)&.each { |child| collect_row_and_descendant_ids(child, set) }
       end
 
-      def find_row_by_id(data, id, depth: 0, ancestor_ids: [], parent_row: nil)
+      def find_row_by_id(data, id, depth: 0, ancestor_ids: [], parent_row: nil, parent_closes_from_depth: nil)
         id_str = id.to_s
-        Array(data).each do |row|
-          return { row: row, depth: depth, ancestor_ids: ancestor_ids, parent_row: parent_row } if row_id_for(row).to_s == id_str
-
-          found = find_row_by_id(row_children_for(row), id_str, depth: depth + 1, ancestor_ids: ancestor_ids + [row.object_id], parent_row: row)
+        rows = Array(data)
+        rows.each do |row|
+          # Same chain as render_row_and_children so a pinned nested root gets the right separator inset.
+          closes_from_depth = if parent_row && row.equal?(rows.last)
+                                parent_closes_from_depth.nil? ? depth - 1 : parent_closes_from_depth
+                              end
+          return { row: row, depth: depth, ancestor_ids: ancestor_ids, parent_row: parent_row, group_closes_from_depth: closes_from_depth } if row_id_for(row).to_s == id_str
+
+          found = find_row_by_id(row_children_for(row), id_str, depth: depth + 1, ancestor_ids: ancestor_ids + [row.object_id], parent_row: row, parent_closes_from_depth: closes_from_depth)
           return found if found
         end
         nil
@@ -299,6 +319,16 @@ module Playbook
         accessors&.length || 0
       end
 
+      # Mirrors React `buildGroupSeparatorInsets`: inset to the outermost closed
+      # group — year-level → 0 / full-bleed; nested → that group's collapsible-trail.
+      def group_separator_inset_em(closes_from_depth)
+        return 0 if closes_from_depth.to_i.zero?
+
+        trail_index = closes_from_depth.to_i + 1
+        additional_offset = trail_index > 1 ? (trail_index - 1) * 0.25 : 0
+        trail_index * 1.0 + additional_offset
+      end
+
     private
 
       def has_grouped_headers?

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

@@ -157,7 +157,7 @@ module Playbook
 
       # 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"
+        return false unless %w[header all].include?(enable_toggle_expansion)
 
         has_any_sub_rows? || (inline_row_loading && persist_toggle_expansion_button)
       end

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

@@ -22,7 +22,7 @@
                     <% (1..depth).each do |i| %>
                         <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
                         <% left_offset = i * 1.0 + additional_offset %>
-                        <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
+                        <div class="collapsible-trail" style="left: <%= left_offset %>em;<% if group_separators %> --collapsible-trail-left: <%= left_offset %>em;<% end %>"></div>
                     <% end %>
                 <% end %>
 

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

@@ -14,6 +14,8 @@ module Playbook
       prop :depth
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
+      prop :group_separators, type: Playbook::Props::Boolean,
+                              default: false
       prop :table_data_attributes, type: Playbook::Props::HashProp,
                                    default: {}
       prop :loading, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { getPlacementProps } from './Utilities/GetPlacementPropsHelper'
 
 import Image from "../pb_image/_image";
@@ -33,7 +34,7 @@ export type AvatarProps = {
   name?: string,
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
   status?: "away" | "offline" | "online",
-  } & GlobalProps
+  } & GlobalProps & GlobalEventProps
 
 const firstTwoInitials = (name: string) =>
   name.split(/\s/).map((name) => name[0])
@@ -94,6 +95,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_avatar/kit.schema.json

@@ -59,14 +59,25 @@
         "react",
         "rails"
       ],
-      "values": [
-        "md",
-        "lg",
-        "sm",
-        "xl",
-        "xs",
-        "xxs"
-      ],
+      "values": {
+        "react": [
+          "md",
+          "lg",
+          "sm",
+          "xl",
+          "xs",
+          "xxs"
+        ],
+        "rails": [
+          "xxs",
+          "xs",
+          "sm",
+          "md",
+          "base",
+          "lg",
+          "xl"
+        ]
+      },
       "default": "md"
     },
     "status": {
@@ -79,10 +90,12 @@
         "away",
         "offline",
         "online"
-      ]
+      ],
+      "default": null
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Avatar } from 'playbook-ui'",
@@ -90,7 +103,7 @@
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"avatar\", props: { size: \"md\", status: \"away\" }) %>"
+      "example": "<%= pb_rails(\"avatar\", props: { size: \"xxs\", status: \"away\" }) %>"
     }
   }
 }

data/app/pb_kits/playbook/pb_background/docs/_playground.json

@@ -5,6 +5,7 @@
     "backgroundColor": "light",
     "backgroundSize": "cover",
     "backgroundRepeat": "initial",
+    "imageUrl": "",
     "tag": "div"
   },
   "children": {

data/app/pb_kits/playbook/pb_background/kit.schema.json

@@ -112,7 +112,10 @@
         "react",
         "rails"
       ],
-      "default": null
+      "default": {
+        "react": "",
+        "rails": null
+      }
     },
     "backgroundRepeat": {
       "type": {
@@ -140,7 +143,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "imageOverlay": {
       "type": "enum",
@@ -217,7 +221,10 @@
         "blur",
         "scale"
       ],
-      "default": null
+      "default": {
+        "react": "",
+        "rails": null
+      }
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_badge/docs/_playground.json

@@ -2,6 +2,8 @@
   "template": "<Badge{{props}}>{{children}}</Badge>",
   "propTargets": {},
   "defaults": {
+    "closeProps": {},
+    "removeIcon": false,
     "rounded": false,
     "variant": "neutral"
   },

data/app/pb_kits/playbook/pb_badge/kit.schema.json

@@ -11,13 +11,15 @@
       "type": "GenericObject",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": {}
     },
     "removeIcon": {
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "removeOnClick": {
       "type": "function",
@@ -52,16 +54,28 @@
         "react",
         "rails"
       ],
-      "values": [
-        "error",
-        "info",
-        "neutral",
-        "notification",
-        "notificationError",
-        "primary",
-        "success",
-        "warning"
-      ],
+      "values": {
+        "react": [
+          "error",
+          "info",
+          "neutral",
+          "notification",
+          "notificationError",
+          "primary",
+          "success",
+          "warning"
+        ],
+        "rails": [
+          "success",
+          "warning",
+          "error",
+          "info",
+          "neutral",
+          "notification",
+          "notification_error",
+          "primary"
+        ]
+      },
       "default": "neutral"
     }
   },
@@ -73,7 +87,7 @@
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"badge\", props: { variant: \"error\" }) %>"
+      "example": "<%= pb_rails(\"badge\", props: { variant: \"success\" }) %>"
     }
   }
 }

data/app/pb_kits/playbook/pb_body/docs/_playground.json

@@ -2,10 +2,10 @@
   "template": "<Body{{props}}>{{children}}</Body>",
   "propTargets": {},
   "defaults": {
-    "color": "default",
+    "highlightedText": [],
     "highlighting": false,
-    "status": "neutral",
-    "tag": "div"
+    "tag": "div",
+    "text": ""
   },
   "children": {
     "editable": true,

data/app/pb_kits/playbook/pb_body/kit.schema.json

@@ -21,7 +21,10 @@
         "error",
         "success"
       ],
-      "default": "default"
+      "default": {
+        "react": "",
+        "rails": "default"
+      }
     },
     "dark": {
       "type": "boolean",
@@ -34,7 +37,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": []
     },
     "highlighting": {
       "type": "boolean",
@@ -55,7 +59,10 @@
         "negative",
         "positive"
       ],
-      "default": "neutral"
+      "default": {
+        "react": null,
+        "rails": "neutral"
+      }
     },
     "tag": {
       "type": "enum",
@@ -81,7 +88,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "variant": {
       "type": "enum",
@@ -90,7 +98,8 @@
       ],
       "values": [
         "link"
-      ]
+      ],
+      "default": null
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -34,10 +34,11 @@ type ButtonPropTypes = {
   size?: 'sm' | 'md' | 'lg',
   target?: string,
   text?: string,
+  // @schemaOmit Deprecated. Adds `pb_button_${type}` only (default `inline`). Use `fullWidth` for layout and `variant` for appearance. HTML type is `htmlType`.
   type?: 'inline' | null,
-  htmlType?: 'submit' | 'reset' | 'button' | undefined,
   value?: string | null,
   variant?: 'primary' | 'secondary' | 'link'| 'danger' | 'reaction',
+  htmlType?: 'submit' | 'reset' | 'button' | undefined,
   wrapperClass?: string,
 } & GlobalProps
 
@@ -60,6 +61,7 @@ const buttonClassName = (props: ButtonPropTypes) => {
   const isIconOnly = icon && !text && !children && variant !== 'reaction'
 
   if (variant) classNames.push(`pb_button_${variant}`)
+  // Deprecated `type` still controls this class, including legacy values. HTML type is `htmlType`.
   if (type) classNames.push(`pb_button_${type}`)
   if (fullWidth) classNames.push('pb_button_block')
   classNames.push(disabled ? 'pb_button_disabled' : 'pb_button_enabled')

data/app/pb_kits/playbook/pb_button/button.rb

@@ -23,6 +23,9 @@ module Playbook
                        default: false
       prop :target
       prop :text
+      # HTML type attribute. Not a class hook.
+      # React uses `htmlType` for this. There is no Rails `html_type` prop.
+      # schema_values: submit, reset, button
       prop :type
       prop :value
       prop :size, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -132,6 +132,160 @@ test('should render child target prop', () => {
     expect(kit).not.toHaveAttribute('rel')
 })
 
+describe('type and htmlType', () => {
+    test('defaults to pb_button_inline and html type button', () => {
+        render(
+            <Button
+                data={{ testid: 'default-type' }}
+                text="Save"
+            />
+        )
+
+        const kit = screen.getByTestId('default-type')
+        expect(kit).toHaveClass('pb_button_kit pb_button_primary pb_button_inline pb_button_enabled')
+        expect(kit).not.toHaveClass('pb_button_block')
+        expect(kit).toHaveAttribute('type', 'button')
+    })
+
+    test('type="inline" adds pb_button_inline without changing the html type', () => {
+        render(
+            <Button
+                data={{ testid: 'inline-type' }}
+                type="inline"
+            />
+        )
+
+        const kit = screen.getByTestId('inline-type')
+        expect(kit).toHaveClass('pb_button_inline')
+        expect(kit).toHaveAttribute('type', 'button')
+    })
+
+    test('type={null} omits the layout class', () => {
+        render(
+            <Button
+                data={{ testid: 'null-type' }}
+                type={null}
+            />
+        )
+
+        const kit = screen.getByTestId('null-type')
+        expect(kit).not.toHaveClass('pb_button_inline')
+        expect(kit).toHaveAttribute('type', 'button')
+    })
+
+    test('legacy and undocumented type strings still generate pb_button_${type}', () => {
+        const { unmount } = render(
+            <Button
+                data={{ testid: 'legacy-link' }}
+                type="link"
+            />
+        )
+
+        const linkType = screen.getByTestId('legacy-link')
+        expect(linkType).toHaveClass('pb_button_primary')
+        expect(linkType).toHaveClass('pb_button_link')
+        expect(linkType).toHaveAttribute('type', 'button')
+        unmount()
+
+        render(
+            <Button
+                data={{ testid: 'legacy-submit' }}
+                type="submit"
+            />
+        )
+
+        const submitType = screen.getByTestId('legacy-submit')
+        expect(submitType).toHaveClass('pb_button_submit')
+        expect(submitType).toHaveAttribute('type', 'button')
+    })
+
+    test('fullWidth keeps pb_button_inline and adds pb_button_block', () => {
+        render(
+            <Button
+                data={{ testid: 'full-width-type' }}
+                fullWidth
+            />
+        )
+
+        const kit = screen.getByTestId('full-width-type')
+        expect(kit).toHaveClass('pb_button_inline')
+        expect(kit).toHaveClass('pb_button_block')
+    })
+
+    test('htmlType sets the attribute on standard and reaction buttons', () => {
+        const { unmount } = render(
+            <Button
+                data={{ testid: 'html-submit' }}
+                htmlType="submit"
+            />
+        )
+
+        expect(screen.getByTestId('html-submit')).toHaveAttribute('type', 'submit')
+        unmount()
+
+        render(
+            <Button
+                data={{ testid: 'html-reset' }}
+                htmlType="reset"
+                variant="reaction"
+            />
+        )
+
+        const kit = screen.getByTestId('html-reset')
+        expect(kit).toHaveAttribute('type', 'reset')
+        expect(kit).toHaveClass('pb_button_reaction')
+        expect(kit).toHaveClass('pb_button_inline')
+    })
+
+    test('htmlType is omitted when link renders an anchor', () => {
+        render(
+            <Button
+                data={{ testid: 'html-link' }}
+                htmlType="submit"
+                link="https://example.com"
+            />
+        )
+
+        const kit = screen.getByTestId('html-link')
+        expect(kit.tagName).toBe('A')
+        expect(kit).toHaveAttribute('href', 'https://example.com')
+        expect(kit).not.toHaveAttribute('type')
+        expect(kit).toHaveClass('pb_button_inline')
+    })
+
+    test('htmlType overrides htmlOptions.type', () => {
+        render(
+            <Button
+                data={{ testid: 'html-override' }}
+                htmlOptions={{ type: 'submit' }}
+                htmlType="reset"
+            />
+        )
+
+        expect(screen.getByTestId('html-override')).toHaveAttribute('type', 'reset')
+    })
+
+    test('loading, disabled, and variant classes stay independent of type', () => {
+        render(
+            <Button
+                data={{ testid: 'type-states' }}
+                disabled
+                loading
+                type="inline"
+                variant="danger"
+            />
+        )
+
+        const kit = screen.getByTestId('type-states')
+        expect(kit).toHaveClass('pb_button_danger')
+        expect(kit).toHaveClass('pb_button_inline')
+        expect(kit).toHaveClass('pb_button_disabled')
+        expect(kit).toHaveClass('pb_button_loading')
+        expect(kit).toBeDisabled()
+        expect(kit).toHaveAttribute('type', 'button')
+    })
+})
+
 describe('icon-only button', () => {
     test('adds pb_button_icon_only class when icon is provided without text', () => {
         render(

data/app/pb_kits/playbook/pb_button/docs/_button_options_rails.md

@@ -0,0 +1,5 @@
+`type` sets the HTML `type` attribute (`submit`, `reset`, or `button`). It does not change classes. When `type` is omitted, the attribute is omitted and a button inside a form submits by default.
+
+There is no `html_type` prop. Pass `type` instead.
+
+`value` is the HTML `value` attribute. The visible label is `text`, so `value` does not appear on the button. When this button submits a form and it has a `name`, the browser includes that name and value in the form data. `"1234"` in the example is only a sample value.

data/app/pb_kits/playbook/pb_button/docs/_button_options_react.md

@@ -0,0 +1,9 @@
+`onClick` runs when the button is clicked. The example alerts.
+
+`htmlType` sets the HTML `type` attribute on a `<button>` (`submit`, `reset`, or `button`). It defaults to `button`, so the button does not submit a form unless you pass `htmlType="submit"`. When `link` is set, the kit renders an `<a>` and does not emit `htmlType`.
+
+`value` is the HTML `value` attribute. The visible label is `text`, so `value` does not appear on the button. When this button submits a form and it has a `name`, the browser includes that name and value in the form data. `"1234"` in the example is only a sample value.
+
+`tabIndex` sets the HTML `tabindex`. `0` keeps the button in the normal tab order.
+
+**Deprecated:** React `type`. It does not set the HTML attribute. It only adds the class `pb_button_${type}`. The default is `inline`, which adds `pb_button_inline`. That class has no stylesheet rule; the button is already inline-flex. `type={null}` omits the class. Other strings, including older undocumented values, still add `pb_button_${type}` so existing classnames stay the same.

data/app/pb_kits/playbook/pb_button/docs/_playground.json

@@ -8,8 +8,9 @@
     "iconRight": false,
     "loading": false,
     "newWindow": false,
-    "type": "inline",
-    "variant": "primary"
+    "target": "",
+    "variant": "primary",
+    "htmlType": "button"
   },
   "children": {
     "editable": true,
@@ -56,6 +57,7 @@
       "name": "Form",
       "props": [
         "htmlType",
+        "type",
         "form",
         "value",
         "tabIndex"