playbook_ui 16.6.0.pre.alpha.PLAY2941iconbuttonsfontawesomeicons16097 → 16.6.0.pre.alpha.RTEPOC15801

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3bed4584dabb4f4e7e69874dbffca2b5e2e8f8e271db23656bb11ecc42d243f0
-  data.tar.gz: fe526f8e75eae5a1735e4b75fb3c03f15ca73f7fd423a022ed6c1ae1b7d2172a
+  metadata.gz: '0579ec6de5e9e30afb606c6eadccdbabeebc719f76d24e94ffe7430209adf83e'
+  data.tar.gz: d1adde04c2ae78461561bcd870bbdc28c1a17523ff57690f211d3e46e99af18e
 SHA512:
-  metadata.gz: 971f25b641ec97a375e46fa4cd5348d7f31056e7e90e804564aa4e6091c7d8fa5679efc3c2a9ab05f31c77e0ecdc73bd7f27be6166ebb51141ea9bbab233ad2f
-  data.tar.gz: 6586ee67929d3a1407b45c1ba311d8a60d427e0ac7737167fde8b22e0e827d7c3bd1eed304e2512f65e9ae512dd8a67aa36f90bef425115a09f8cbc291b289aa
+  metadata.gz: c29039b3e065b5af3245c26a9255e13b5c7160e0402416e8e2eccc29e4ba0b6bc791da1bdf309bc76cf384e3c4c9e97aaf682402215e184be33ae070ae1dff46
+  data.tar.gz: 517ea2840ffe6696926263093a7e87d9f453f679399122494354acaa1ad4410a57b6c5ff66bb751d10eec1ece049365db2bdc9930a0312b03977275ab100bddf

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -37,12 +37,13 @@ type AdvancedTableProps = {
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
   columnVisibilityControl?: GenericObject
-  customSort?: boolean
+  customSort?:boolean;
+  dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
   enableSortingRemoval?: boolean
   expandedControl?: GenericObject
-  expandByDepth?: GenericObject[]
+  expandByDepth?: { [key: string]: string | number }
   onExpandByDepthClick?: (arg: number, arg1: any) => void
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
@@ -66,7 +67,6 @@ type AdvancedTableProps = {
   persistToggleExpansionButton?: boolean,
   sortControl?: GenericObject
   sortParentOnly?: boolean
-  stickyLeftColumn?: string[]
   tableData: GenericObject[]
   tableOptions?: GenericObject
   tableProps?: GenericObject
@@ -78,18 +78,6 @@ type AdvancedTableProps = {
   fullScreenControl?: (controls: FullscreenControls) => void
 } & GlobalProps;
 
-/**
- * Subcomponent props (AdvancedTable.Header / AdvancedTable.Body). Must be a plain `type NameProps = { ... }` block—
- * `yarn generate-ai-metadata` only parses that shape in this file (not Omit<> / intersection).
- * Not used on the root component; playground routes these via propTargets.
- */
-type _AdvancedTableSubkitSchemaProps = {
-  enableSorting?: boolean
-  sortIcon?: string | string[]
-  collapsibleTrail?: boolean
-  subRowHeaders?: string[]
-}
-
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},

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

@@ -50,7 +50,7 @@
       ]
     },
     "customSort": {
-      "type": "boolean",
+      "type": "boolean;",
       "platforms": [
         "react"
       ]
@@ -81,7 +81,7 @@
       ]
     },
     "expandByDepth": {
-      "type": "array",
+      "type": "{ [key: string]: string | number }",
       "platforms": [
         "react"
       ]
@@ -114,22 +114,6 @@
       ],
       "default": false
     },
-    "maxHeight": {
-      "type": "enum",
-      "platforms": [
-        "react"
-      ],
-      "values": [
-        "auto",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl",
-        "xxl",
-        "xxxl"
-      ]
-    },
     "onRowToggleClick": {
       "type": "function",
       "platforms": [
@@ -149,18 +133,11 @@
       ]
     },
     "paginationProps": {
-      "type": "GenericObject",
+      "type": "function",
       "platforms": [
         "react"
       ]
     },
-    "pinnedRows": {
-      "type": "GenericObject",
-      "platforms": [
-        "react",
-        "rails"
-      ]
-    },
     "responsive": {
       "type": "enum",
       "platforms": [
@@ -224,12 +201,6 @@
         "react"
       ]
     },
-    "stickyLeftColumn": {
-      "type": "array",
-      "platforms": [
-        "react"
-      ]
-    },
     "tableData": {
       "type": "array",
       "platforms": [
@@ -286,29 +257,11 @@
         "react"
       ]
     },
-    "enableSorting": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
-    "sortIcon": {
-      "type": "string | string[]",
-      "platforms": [
-        "react"
-      ]
-    },
-    "collapsibleTrail": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
-    "subRowHeaders": {
-      "type": "array",
+    "pinnedRows": {
       "platforms": [
-        "react"
-      ]
+        "rails"
+      ],
+      "type": "string"
     }
   },
   "globalProps": true,

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

@@ -7,19 +7,6 @@
     "rails"
   ],
   "props": {
-    "componentOverlay": {
-      "type": "GenericObject",
-      "platforms": [
-        "react",
-        "rails"
-      ]
-    },
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "grayscale": {
       "type": "boolean",
       "platforms": [
@@ -78,6 +65,11 @@
         "offline",
         "online"
       ]
+    },
+    "componentOverlay": {
+      "platforms": [
+        "rails"
+      ]
     }
   },
   "globalProps": true,

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

@@ -156,20 +156,6 @@
       ],
       "default": null
     },
-    "padding": {
-      "type": "enum",
-      "platforms": [
-        "react"
-      ],
-      "values": [
-        "none",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl"
-      ]
-    },
     "tag": {
       "type": "enum",
       "platforms": [

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

@@ -7,12 +7,6 @@
     "rails"
   ],
   "props": {
-    "closeProps": {
-      "type": "GenericObject",
-      "platforms": [
-        "react"
-      ]
-    },
     "removeIcon": {
       "type": "boolean",
       "platforms": [

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

@@ -23,12 +23,6 @@
       ],
       "default": "default"
     },
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "highlightedText": {
       "type": "array",
       "platforms": [

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.tsx

@@ -15,6 +15,7 @@ type BreadCrumbsProps = {
   data?: {[key: string]: string},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  text?: string,
   children?: React.ReactChild[] | React.ReactNode,
 }
 const BreadCrumbs = (props: BreadCrumbsProps): React.ReactElement => {

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

@@ -11,13 +11,6 @@ $pb_button_sizes: (
   "lg":   ($font_large - 2px),
 );
 
-// Icon-only: fixed square hit targets (not derived from font padding).
-$pb_button_icon_only_dimensions: (
-  "sm": 35px,
-  "md": 40px,
-  "lg": 45px,
-);
-
 // Base button class
 .pb_button_kit {
   @include pb_button;
@@ -120,26 +113,32 @@ $pb_button_icon_only_dimensions: (
     }
   }
 
-  // Icon-only button (icon prop set, no text) — fixed squares; icon scales via font-size from size prop.
-  // Rails: .pb_button_icon_only; React: class or :has(...) when label is empty.
-  // Rails uses a truly empty .pb_button_content; React wraps text in a child span (may be empty).
+  // Icon-only button (icon prop set, no text) - square with equal padding
+  // Rails: uses .pb_button_icon_only class
+  // React: when pb_button_content is empty (no text). Do not match when content has
+  // text + icon (e.g. "Exit Fullscreen" + FA icon) which can include empty spans.
   &.pb_button_icon_only,
   &:has(.pb_button_content:empty) {
     aspect-ratio: 1;
-    box-sizing: border-box;
-    $pb_button_icon_only_default: map-get($pb_button_icon_only_dimensions, "md");
-    width: $pb_button_icon_only_default;
-    min-width: $pb_button_icon_only_default;
-    height: $pb_button_icon_only_default;
-    min-height: $pb_button_icon_only_default;
-    padding: 0 !important;
-    @each $name, $dim in $pb_button_icon_only_dimensions {
-      &.pb_button_size_#{$name} {
-        width: $dim;
-        min-width: $dim;
-        height: $dim;
-        min-height: $dim;
-      }
+    min-width: auto;
+    width: auto;
+    height: auto;
+    padding: $pb_button_v_padding !important;
+    min-height: ($pb_button_v_padding * 2) + $font_small;
+    
+    &.pb_button_size_sm {
+      padding: $font_smaller !important;
+      min-height: ($font_smaller * 2) + $font_smaller;
+    }
+    
+    &.pb_button_size_md {
+      padding: $font_small !important;
+      min-height: ($font_small * 2) + $font_small;
+    }
+    
+    &.pb_button_size_lg {
+      padding: ($font_large - 2px) !important;
+      min-height: (($font_large - 2px) * 2) + ($font_large - 2px);
     }
 
     // Remove margins from icons

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

@@ -73,10 +73,8 @@ module Playbook
         emoji_regex.match?(icon)
       end
 
-      # Icon-only = icon with no label. Label may come from `text` or from a block (e.g. CopyButton);
-      # block content must not be treated as icon-only when `text` is unset.
       def icon_only?
-        icon.present? && text.blank? && children.blank? && variant != "reaction"
+        icon.present? && text.blank? && variant != "reaction"
       end
 
       def classname

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx

@@ -9,6 +9,7 @@ type ButtonToolbarProps = {
   aria?: {[key: string]: string},
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
+  connected?: boolean,
   data?: {[key: string]: string},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,

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

@@ -7,6 +7,14 @@
     "rails"
   ],
   "props": {
+    "connected": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
     "onClick": {
       "type": "ReactNode",
       "platforms": [
@@ -43,13 +51,6 @@
         "secondary"
       ],
       "default": "primary"
-    },
-    "connected": {
-      "platforms": [
-        "rails"
-      ],
-      "type": "boolean",
-      "default": false
     }
   },
   "globalProps": true,

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

@@ -61,21 +61,6 @@
       ],
       "default": false
     },
-    "borderRadius": {
-      "type": "enum",
-      "platforms": [
-        "react"
-      ],
-      "values": [
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl",
-        "none",
-        "rounded"
-      ]
-    },
     "dragId": {
       "type": "string",
       "platforms": [
@@ -99,25 +84,12 @@
       ],
       "default": true
     },
-    "highlight": {
-      "type": "GenericObject",
-      "platforms": [
-        "react",
-        "rails"
-      ]
-    },
     "length": {
       "type": "number",
       "platforms": [
         "react"
       ]
     },
-    "padding": {
-      "type": "string",
-      "platforms": [
-        "react"
-      ]
-    },
     "selected": {
       "type": "boolean",
       "platforms": [
@@ -158,6 +130,12 @@
       ],
       "default": false
     },
+    "highlight": {
+      "platforms": [
+        "rails"
+      ],
+      "type": "string"
+    },
     "items": {
       "platforms": [
         "rails"
@@ -180,11 +158,11 @@
   "usage": {
     "react": {
       "import": "import { Card } from 'playbook-ui'",
-      "example": "<Card background=\"white\" borderRadius=\"xs\"></Card>"
+      "example": "<Card background=\"white\" tag=\"div\"></Card>"
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"card\", props: { background: \"white\", border_radius: \"xs\" }) %>"
+      "example": "<%= pb_rails(\"card\", props: { background: \"white\", tag: \"div\" }) %>"
     }
   }
 }

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

@@ -15,12 +15,6 @@
       ],
       "default": false
     },
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "disabled": {
       "type": "boolean",
       "platforms": [

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

@@ -7,12 +7,6 @@
     "rails"
   ],
   "props": {
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "disabled": {
       "type": "boolean",
       "platforms": [

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

@@ -34,24 +34,9 @@
       ]
     },
     "iconSize": {
-      "type": "enum",
+      "type": "IconSizes",
       "platforms": [
         "react"
-      ],
-      "values": [
-        "lg",
-        "xs",
-        "sm",
-        "1x",
-        "2x",
-        "3x",
-        "4x",
-        "5x",
-        "6x",
-        "7x",
-        "8x",
-        "9x",
-        "10x"
       ]
     },
     "onIconClick": {
@@ -95,11 +80,11 @@
   "usage": {
     "react": {
       "import": "import { Collapsible } from 'playbook-ui'",
-      "example": "<Collapsible iconColor=\"default\" iconSize=\"lg\"></Collapsible>"
+      "example": "<Collapsible iconColor=\"default\" tag=\"h1\"></Collapsible>"
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"collapsible\", props: { icon_color: \"default\", icon_size: \"lg\" }) %>"
+      "example": "<%= pb_rails(\"collapsible\", props: { icon_color: \"default\", tag: \"h1\" }) %>"
     }
   }
 }

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

@@ -28,12 +28,6 @@
         "rails"
       ]
     },
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "iconEnabled": {
       "type": "boolean",
       "platforms": [

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

@@ -35,12 +35,6 @@
         "rails"
       ]
     },
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "decimals": {
       "type": "enum",
       "platforms": [

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

@@ -20,26 +20,24 @@
       ],
       "default": "left"
     },
-    "statChange": {
-      "type": "GenericObject",
+    "statLabel": {
+      "type": "string statValue?: { unit?: string value?: string | number",
       "platforms": [
         "react",
         "rails"
       ]
     },
-    "statLabel": {
-      "type": "string",
+    "statChange": {
       "platforms": [
-        "react",
         "rails"
-      ]
+      ],
+      "type": "string"
     },
     "statValue": {
-      "type": "GenericObject",
       "platforms": [
-        "react",
         "rails"
-      ]
+      ],
+      "type": "string"
     }
   },
   "globalProps": true,

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

@@ -8,7 +8,7 @@
   ],
   "props": {
     "alignment": {
-      "type": "enum",
+      "type": "\"left\" | \"center\" | \"right\";",
       "platforms": [
         "react",
         "rails"
@@ -20,14 +20,8 @@
       ],
       "default": "left"
     },
-    "dark": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
     "showDayOfWeek": {
-      "type": "boolean",
+      "type": "boolean;",
       "platforms": [
         "react",
         "rails"
@@ -35,7 +29,7 @@
       "default": false
     },
     "showCurrentYear": {
-      "type": "boolean",
+      "type": "boolean;",
       "platforms": [
         "react",
         "rails"
@@ -43,7 +37,7 @@
       "default": false
     },
     "showIcon": {
-      "type": "boolean",
+      "type": "boolean;",
       "platforms": [
         "react",
         "rails"
@@ -51,20 +45,21 @@
       "default": false
     },
     "size": {
-      "type": "enum",
+      "type": "\"sm\" | \"md\" | \"lg\";",
       "platforms": [
         "react",
         "rails"
       ],
       "values": [
-        "sm",
+        "lg",
         "md",
-        "lg"
+        "sm",
+        "xs"
       ],
       "default": "md"
     },
     "unstyled": {
-      "type": "boolean",
+      "type": "boolean;",
       "platforms": [
         "react",
         "rails"
@@ -72,7 +67,7 @@
       "default": false
     },
     "value": {
-      "type": "Date",
+      "type": "Date;",
       "platforms": [
         "react"
       ]
@@ -93,11 +88,11 @@
   "usage": {
     "react": {
       "import": "import { Date } from 'playbook-ui'",
-      "example": "<Date alignment=\"left\" size=\"sm\"></Date>"
+      "example": "<Date alignment=\"left\" size=\"lg\"></Date>"
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"date\", props: { alignment: \"left\", size: \"sm\" }) %>"
+      "example": "<%= pb_rails(\"date\", props: { alignment: \"left\", size: \"lg\" }) %>"
     }
   }
 }