playbook_ui 18.4.0.pre.rc.2 → 18.4.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf979102cddf24eba78bc3ad071b241acf007ec134900ee8b00fac1f6d1f8dc6
-  data.tar.gz: 8951942f83519448d7b92c161b19af1e50abcbd0f53fb1f0e6fea2fd84753475
+  metadata.gz: 8f8c562cdf4d8c2e781047b89b39658c8e2dd4bc998db9fc6df6ac4807e67f1c
+  data.tar.gz: 07a7adf138d0e6d7b525e651bddb4b96ce28ca6cf70e2e3c7e0fe8352aa2e65d
 SHA512:
-  metadata.gz: 405abb782e5dd83d295e1dc0dd5654ab2acc358bf06131e1d1cb5ca7d1bb935074cfeeb70bb916548e4d5494646378f4c29a68008d218973e5d8ddcfe9b01119
-  data.tar.gz: 2eb386e8010fe7f51a13eedd302e05f4a0730b4f4800866c84d77b4495344c249021fd488c035fc23181560a608eafe1e7e01060ea56337e387ef53e1d7d689a
+  metadata.gz: 31174cf9f1a631297db0872325864fc0cb3cee389bb13b1730285ad3ca8961685f6f837ab1b335458fcdafd4356661b7c19bf3198d33418775ad56ac385ce0a2
+  data.tar.gz: da82cc4cea55a44dba8f725c8ed3b8548ba549e90048b5a09c5f61110449be4c71a2127eca6b1cefd3db05237b8a75357e10d88e4b3f5e058fb871e20dc9c9e4

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

@@ -7,18 +7,24 @@
     "subRowHeaders": "AdvancedTable.Body.props"
   },
   "defaults": {
-    "columnGroupBorderColor": "none",
+    "cascadeCollapse": false,
     "enableToggleExpansion": "header",
+    "enableSortingRemoval": false,
     "fullWidthCell": false,
     "groupSeparators": false,
+    "initialLoadingRowsCount": 10,
     "inlineRowLoading": false,
     "loading": false,
     "maxHeight": "auto",
+    "pagination": false,
     "responsive": "scroll",
     "scrollBarNone": false,
     "selectableRows": false,
     "showActionsBar": true,
     "persistToggleExpansionButton": false,
+    "sortParentOnly": false,
+    "toggleExpansionIcon": "arrows-from-line",
+    "virtualizedRows": false,
     "collapsibleTrail": true,
     "columnVisibilityControl": {
       "default": true

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

@@ -21,7 +21,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "columnDefinitions": {
       "type": "array",
@@ -36,15 +37,28 @@
         "react",
         "rails"
       ],
-      "values": [
-        "text_lt_default",
-        "text_lt_light",
-        "text_lt_lighter",
-        "text_dk_default",
-        "text_dk_light",
-        "text_dk_lighter"
-      ],
-      "default": "none"
+      "values": {
+        "react": [
+          "text_lt_default",
+          "text_lt_light",
+          "text_lt_lighter",
+          "text_dk_default",
+          "text_dk_light",
+          "text_dk_lighter"
+        ],
+        "rails": [
+          "text_lt_default",
+          "text_lt_light",
+          "text_lt_lighter",
+          "text_dk_default",
+          "text_dk_light",
+          "text_dk_lighter",
+          "none"
+        ]
+      },
+      "default": {
+        "rails": "none"
+      }
     },
     "columnVisibilityControl": {
       "type": "GenericObject",
@@ -75,7 +89,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "expandedControl": {
       "type": "GenericObject",
@@ -115,7 +130,8 @@
       "type": "number",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": 10
     },
     "inlineRowLoading": {
       "type": "boolean",
@@ -170,7 +186,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "paginationProps": {
       "type": "GenericObject",
@@ -246,7 +263,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "stickyLeftColumn": {
       "type": "array",
@@ -278,7 +296,8 @@
       "type": "string | string[]",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": "arrows-from-line"
     },
     "onRowSelectionChange": {
       "type": "function",
@@ -296,7 +315,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "enableSorting": {
       "type": "boolean",

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,7 +90,8 @@
         "away",
         "offline",
         "online"
-      ]
+      ],
+      "default": null
     }
   },
   "globalProps": true,
@@ -91,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"

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

@@ -14,7 +14,7 @@
     { "name": "Content", "props": ["text", "icon", "iconRight"] },
     { "name": "Link Mode", "props": ["link", "target", "newWindow"] },
     { "name": "Reaction Mode", "props": ["count", "highlight"] },
-    { "name": "Form", "props": ["htmlType", "form", "value", "tabIndex"] }
+    { "name": "Form", "props": ["htmlType", "type", "form", "value", "tabIndex"] }
   ],
   "presets": [
     { "name": "Primary", "props": { "variant": "primary" }, "children": "Submit" },

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

@@ -24,7 +24,7 @@ examples:
   - button_block_content: Button Block Content
   - button_icon_options: Button Icon Options
   - button_accessibility: Button Accessibility Options
-  - button_options: Button Additional Options (onClick)
+  - button_options: Button Additional Options
   - button_size: Button Size
   - button_form: Button Form Attribute
   - button_hover: Button Hover