playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -2,13 +2,13 @@
   "template": "<Icon{{props}} />",
   "propTargets": {},
   "defaults": {
-    "border": false,
     "fixedWidth": true,
     "inverse": false,
     "listItem": false,
     "pulse": false,
     "fontStyle": "far",
-    "spin": false
+    "spin": false,
+    "icon": "user"
   },
   "groups": [
     {
@@ -22,7 +22,6 @@
       "props": [
         "size",
         "color",
-        "fontStyle",
         "fixedWidth"
       ]
     },
@@ -43,73 +42,99 @@
   ],
   "presets": [
     {
-      "name": "User",
+      "name": "Regular User",
       "props": {
-        "icon": "user"
+        "icon": "user",
+        "fixedWidth": true
       }
     },
     {
-      "name": "Check",
+      "name": "Primary Check",
       "props": {
         "icon": "check",
-        "color": "primary"
+        "color": "primary",
+        "fixedWidth": true
       }
     },
     {
-      "name": "Times",
+      "name": "Product Icon",
       "props": {
-        "icon": "times",
-        "color": "error"
+        "icon": "product-roofing",
+        "color": "product_5_background",
+        "fixedWidth": true
       }
     },
     {
-      "name": "Plus",
+      "name": "Small Search",
       "props": {
-        "icon": "plus"
+        "icon": "search",
+        "size": "sm",
+        "fixedWidth": true
       }
     },
     {
-      "name": "Search",
+      "name": "Spinning",
       "props": {
-        "icon": "search"
+        "icon": "sync",
+        "spin": true,
+        "fixedWidth": true
       }
     },
     {
-      "name": "Large",
+      "name": "Pulse Spinner",
       "props": {
-        "icon": "user",
-        "size": "lg"
+        "icon": "spinner",
+        "pulse": true,
+        "size": "2x",
+        "fixedWidth": true
       }
     },
     {
-      "name": "2x size",
+      "name": "Bordered Pull",
       "props": {
-        "icon": "check",
-        "size": "2x"
+        "icon": "arrow-left",
+        "border": true,
+        "pull": "left",
+        "fixedWidth": true
       }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "regular_user": {
+      "presetName": "Regular User",
+      "message": "Use any icon form Playbook Icons by passing the icon name to the icon prop.",
+      "type": "info"
     },
-    {
-      "name": "3x size",
-      "props": {
-        "icon": "search",
-        "size": "3x"
-      }
+    "product_icon": {
+      "presetName": "Product Icon",
+      "message": "Use any product icon by passing the icon name to the icon prop.",
+      "type": "info"
     },
-    {
-      "name": "Solid (fas)",
-      "props": {
-        "icon": "star",
-        "fontStyle": "fas"
-      }
+    "spinning": {
+      "presetName": "Spinning",
+      "message": "spin applies the continuous spinning animation.",
+      "type": "info"
     },
-    {
-      "name": "Spinning",
-      "props": {
-        "icon": "sync",
-        "spin": true
-      }
+    "pulse_spinner": {
+      "presetName": "Pulse Spinner",
+      "message": "pulse uses the stepped pulse animation, which is commonly paired with spinning icons.",
+      "type": "info"
+    },
+    "primary_check": {
+      "presetName": "Primary Check",
+      "message": "Use the color prop to change the color of the icon.",
+      "type": "info"
+    },
+    "small_search": {
+      "presetName": "Small Search",
+      "message": "Use the size prop to change the size of the icon.",
+      "type": "info"
     }
-  ],
-  "conditionals": {},
-  "hints": {}
+  },
+  "hiddenProps": [
+    "customIcon",
+    "fontStyle",
+    "border"
+  ]
 }

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

@@ -1,4 +1,14 @@
 {
+  "defaults": {
+    "icon": "user",
+    "fixedWidth": true,
+    "fontStyle": "far"
+  },
+  "hiddenProps": [
+    "customIcon",
+    "fontStyle",
+    "border"
+  ],
   "groups": [
     {
       "name": "Content",
@@ -6,7 +16,7 @@
     },
     {
       "name": "Appearance",
-      "props": ["size", "color", "fontStyle", "fixedWidth"]
+      "props": ["size", "color", "fixedWidth"]
     },
     {
       "name": "Transform",
@@ -15,46 +25,94 @@
   ],
   "presets": [
     {
-      "name": "User",
-      "props": { "icon": "user" }
+      "name": "Regular User",
+      "props": {
+        "icon": "user",
+        "fixedWidth": true
+      }
     },
     {
-      "name": "Check",
-      "props": { "icon": "check", "color": "primary" }
+      "name": "Primary Check",
+      "props": {
+        "icon": "check",
+        "color": "primary",
+        "fixedWidth": true
+      }
     },
     {
-      "name": "Times",
-      "props": { "icon": "times", "color": "error" }
+      "name": "Product Icon",
+      "props": {
+        "icon": "product-roofing",
+        "color": "product_5_background",
+        "fixedWidth": true
+      }
     },
     {
-      "name": "Plus",
-      "props": { "icon": "plus" }
+      "name": "Small Search",
+      "props": {
+        "icon": "search",
+        "size": "sm",
+        "fixedWidth": true
+      }
     },
     {
-      "name": "Search",
-      "props": { "icon": "search" }
+      "name": "Spinning",
+      "props": {
+        "icon": "sync",
+        "spin": true,
+        "fixedWidth": true
+      }
     },
     {
-      "name": "Large",
-      "props": { "icon": "user", "size": "lg" }
+      "name": "Pulse Spinner",
+      "props": {
+        "icon": "spinner",
+        "pulse": true,
+        "size": "2x",
+        "fixedWidth": true
+      }
     },
     {
-      "name": "2x size",
-      "props": { "icon": "check", "size": "2x" }
+      "name": "Bordered Pull",
+      "props": {
+        "icon": "arrow-left",
+        "border": true,
+        "pull": "left",
+        "fixedWidth": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "regular_user": {
+      "presetName": "Regular User",
+      "message": "Use any icon form Playbook Icons by passing the icon name to the icon prop.",
+      "type": "info"
     },
-    {
-      "name": "3x size",
-      "props": { "icon": "search", "size": "3x" }
+    "product_icon": {
+      "presetName": "Product Icon",
+      "message": "Use any product icon by passing the icon name to the icon prop.",
+      "type": "info"
     },
-    {
-      "name": "Solid (fas)",
-      "props": { "icon": "star", "fontStyle": "fas" }
+    "spinning": {
+      "presetName": "Spinning",
+      "message": "spin applies the continuous spinning animation.",
+      "type": "info"
     },
-    {
-      "name": "Spinning",
-      "props": { "icon": "sync", "spin": true }
+    "pulse_spinner": {
+      "presetName": "Pulse Spinner",
+      "message": "pulse uses the stepped pulse animation, which is commonly paired with spinning icons.",
+      "type": "info"
+    },
+    "primary_check": {
+      "presetName": "Primary Check",
+      "message": "Use the color prop to change the color of the icon.",
+      "type": "info"
+    },
+    "small_search": {
+      "presetName": "Small Search",
+      "message": "Use the size prop to change the size of the icon.",
+      "type": "info"
     }
-  ],
-  "conditionals": {},
-  "hints": {}
+  }
 }

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -10,7 +10,8 @@ module Playbook
       ICON_PATH_DEV_CACHE_TTL_SECONDS = 2
       ICON_PATH_PROD_CACHE_TTL_SECONDS = 60
 
-      prop :border, type: Playbook::Props::Boolean,
+      prop :border, type: Playbook::Props::Enum,
+                    values: [false, true, "none", "default", "active", "default_thick", "active_thick", "default_thicker", "active_thicker"],
                     default: false
       prop :fixed_width, type: Playbook::Props::Boolean,
                          default: true
@@ -319,8 +320,10 @@ module Playbook
       end
 
       def border_class
+        return nil if border.is_a?(String)
+
         prefix = is_svg? ? "svg_border" : "fa-border"
-        border ? prefix : nil
+        border == true ? prefix : nil
       end
 
       def fixed_width_class

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

@@ -8,12 +8,10 @@
   ],
   "props": {
     "border": {
-      "type": "string",
+      "type": "boolean | BorderPropValue",
       "platforms": [
-        "react",
-        "rails"
-      ],
-      "default": false
+        "react"
+      ]
     },
     "color": {
       "type": "string",

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

@@ -5,29 +5,131 @@
     "icon": "bars",
     "newWindow": false,
     "size": "2x",
-    "variant": "default"
+    "variant": "default",
+    "htmlType": "button"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
+      "props": [
+        "icon"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant",
+        "size"
+      ]
+    },
+    {
+      "name": "Action",
       "props": [
         "htmlType",
-        "icon",
-        "link",
-        "newWindow",
         "onClick",
-        "size",
+        "link",
         "target",
-        "variant"
+        "newWindow"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "icon": "bars",
+        "size": "2x",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Link Variant",
+      "props": {
+        "icon": "external-link-alt",
+        "size": "2x",
+        "variant": "link"
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "icon": "search",
+        "size": "sm",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Large",
+      "props": {
+        "icon": "plus",
+        "size": "lg",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Click Handler",
+      "props": {
+        "icon": "check",
+        "onClick": "() => alert('Clicked!')",
+        "size": "2x",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Linked Button",
+      "props": {
+        "icon": "arrow-up-right-from-square",
+        "link": "https://powerhrg.com/",
+        "newWindow": true,
+        "size": "2x",
+        "target": "_blank",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Submit",
+      "props": {
+        "htmlType": "submit",
+        "icon": "paper-plane",
+        "size": "2x",
+        "variant": "default"
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "IconButton wraps a Button and renders the selected icon inside it.",
+      "type": "info"
+    },
+    "link_variant": {
+      "presetName": "Link Variant",
+      "message": "variant=\"link\" switches the icon button to the lighter link treatment.",
+      "type": "info"
+    },
+    "click_handler": {
+      "presetName": "Click Handler",
+      "message": "onClick is passed directly to the inner Button for interactive icon actions.",
+      "type": "info"
+    },
+    "linked_button": {
+      "presetName": "Linked Button",
+      "message": "Use link with target or newWindow when the icon button should navigate.",
+      "type": "info"
+    },
+    "submit": {
+      "presetName": "Submit",
+      "message": "htmlType controls the native button type for form use cases.",
+      "type": "info"
+    }
+  },
+  "customProps": {
+    "onClick": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    }
+  }
 }

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

@@ -0,0 +1,131 @@
+{
+  "defaults": {
+    "icon": "bars",
+    "size": "2x",
+    "variant": "default",
+    "htmlType": "button",
+    "newWindow": false
+  },
+  "customProps": {
+    "onClick": {
+      "type": "function",
+      "platforms": ["react"]
+    }
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "icon"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant",
+        "size"
+      ]
+    },
+    {
+      "name": "Action",
+      "props": [
+        "htmlType",
+        "onClick",
+        "link",
+        "target",
+        "newWindow"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "icon": "bars",
+        "size": "2x",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Link Variant",
+      "props": {
+        "icon": "external-link-alt",
+        "size": "2x",
+        "variant": "link"
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "icon": "search",
+        "size": "sm",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Large",
+      "props": {
+        "icon": "plus",
+        "size": "lg",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Click Handler",
+      "props": {
+        "icon": "check",
+        "onClick": "() => alert('Clicked!')",
+        "size": "2x",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Linked Button",
+      "props": {
+        "icon": "arrow-up-right-from-square",
+        "link": "https://powerhrg.com/",
+        "newWindow": true,
+        "size": "2x",
+        "target": "_blank",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Submit",
+      "props": {
+        "htmlType": "submit",
+        "icon": "paper-plane",
+        "size": "2x",
+        "variant": "default"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "IconButton wraps a Button and renders the selected icon inside it.",
+      "type": "info"
+    },
+    "link_variant": {
+      "presetName": "Link Variant",
+      "message": "variant=\"link\" switches the icon button to the lighter link treatment.",
+      "type": "info"
+    },
+    "click_handler": {
+      "presetName": "Click Handler",
+      "message": "onClick is passed directly to the inner Button for interactive icon actions.",
+      "type": "info"
+    },
+    "linked_button": {
+      "presetName": "Linked Button",
+      "message": "Use link with target or newWindow when the icon button should navigate.",
+      "type": "info"
+    },
+    "submit": {
+      "presetName": "Submit",
+      "message": "htmlType controls the native button type for form use cases.",
+      "type": "info"
+    }
+  }
+}

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

@@ -42,7 +42,7 @@
       "default": false
     },
     "onClick": {
-      "type": "ReactNode",
+      "type": "function",
       "platforms": [
         "react"
       ]