playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
 
-import { getAllIcons } from "../../utilities/icons/allicons"
-
 import Flex from '../../pb_flex/_flex'
 import PbReactPopover from '../../pb_popover/_popover'
 import Button from '../../pb_button/_button'
@@ -67,8 +65,6 @@ const toolbarDropdownItems = [
     },
 ]
 
-  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
-
   const handleTogglePopover = () => {
     setShowPopover(!showPopover)
   }
@@ -92,16 +88,12 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
             size="lg"
         />
         <div>{text}</div>
-        <Flex className={showPopover ? "fa-flip-vertical" : ""}
-            display="inline_flex"
-        >
-          <Icon 
-              className="svg-inline--fa"
-              customIcon={angleDown}
-              fixedWidth
-              margin-left="xs"
-          />
-        </Flex>
+        <Icon
+            fixedWidth
+            flip={showPopover ? "vertical" : "none"}
+            icon="angle-down"
+            margin-left="xs"
+        />
       </Flex>
     );
   }
@@ -127,16 +119,12 @@ const popoverReference = (
                 size="lg"
             />
             <div>Paragraph</div>
-            <Flex className={showPopover ? "fa-flip-vertical" : ""}
-                display="inline_flex"
-            >
-              <Icon 
-                  className="svg-inline--fa"
-                  customIcon={angleDown}
-                  fixedWidth
-                  margin-left="xs"
-              />
-            </Flex>
+            <Icon
+                fixedWidth
+                flip={showPopover ? "vertical" : "none"}
+                icon="angle-down"
+                margin-left="xs"
+            />
           </Flex>
         )
        )

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

@@ -1,41 +1,171 @@
 {
   "template": "<RichTextEditor{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "requiredIndicator": false,
+    "simple": false,
+    "advancedEditorToolbar": true,
+    "inputHeight": "md",
+    "inputMinHeight": "sm",
+    "label": "Description",
+    "maxWidth": "md",
+    "name": "description"
+  },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
+      "props": [
+        "label",
+        "name"
+      ]
+    },
+    {
+      "name": "Toolbar",
       "props": [
-        "advancedEditor",
         "advancedEditorToolbar",
-        "toolbarBottom",
+        "simple",
         "focus",
-        "inputOptions",
-        "inline",
-        "label",
-        "extensions",
-        "name",
-        "onChange",
-        "placeholder",
+        "sticky"
+      ]
+    },
+    {
+      "name": "Sizing",
+      "props": [
         "inputHeight",
         "inputMinHeight",
-        "requiredIndicator",
-        "simple",
-        "sticky",
-        "template",
-        "value",
-        "maxWidth",
-        "TrixEditor",
-        "trixInstance"
+        "maxWidth"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "requiredIndicator"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "structureMode": "advanced",
+      "props": {
+        "advancedEditorToolbar": true,
+        "label": "Description",
+        "name": "description"
+      }
+    },
+    {
+      "name": "Simple",
+      "structureMode": "advanced",
+      "props": {
+        "advancedEditorToolbar": true,
+        "label": "Notes",
+        "name": "notes",
+        "simple": true
+      }
+    },
+    {
+      "name": "Focus Toolbar",
+      "structureMode": "advanced",
+      "props": {
+        "advancedEditorToolbar": false,
+        "focus": true,
+        "label": "Focus editor"
+      }
+    },
+    {
+      "name": "Tall Editor",
+      "structureMode": "advanced",
+      "props": {
+        "inputHeight": "lg",
+        "inputMinHeight": "md",
+        "label": "Tall editor"
+      }
+    },
+    {
+      "name": "Required",
+      "structureMode": "advanced",
+      "props": {
+        "label": "Description",
+        "name": "description",
+        "requiredIndicator": true
+      }
+    },
+    {
+      "name": "Sticky",
+      "structureMode": "advanced",
+      "props": {
+        "label": "Sticky editor",
+        "sticky": true
+      }
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "advancedEditorToolbar": {
+      "structureMode": "advanced"
+    },
+    "inputHeight": {
+      "structureMode": "advanced"
+    },
+    "inputMinHeight": {
+      "structureMode": "advanced"
+    },
+    "sticky": {
+      "structureMode": "advanced"
+    }
+  },
+  "hints": {
+    "advanced": {
+      "presetName": "Default",
+      "message": "The Advanced structure wraps RichTextEditor with TipTap useEditor and EditorContent.",
+      "type": "info"
+    },
+    "focus": {
+      "when": {
+        "focus": true
+      },
+      "message": "Focus Toolbar shows the toolbar when the advanced editor receives focus.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "advanced",
+    "modes": {
+      "advanced": {
+        "label": "Advanced",
+        "template": "<RichTextEditor\n  advancedEditor={editor}{{props}}\n>\n  <EditorContent editor={editor} />\n</RichTextEditor>",
+        "children": "",
+        "wrapper": "const RichTextEditorPlayground = () => {\n  const editor = useEditor({\n    extensions: [StarterKit, TipTapLink],\n    content: 'Add your text here. You can format your text, add links, quotes, and bullets.',\n  })\n\n  if (!editor) return null\n\n  return {{component}}\n}\n\n<RichTextEditorPlayground />",
+        "externalImports": [
+          "import { useEditor, EditorContent } from '@tiptap/react'",
+          "import StarterKit from '@tiptap/starter-kit'",
+          "import TipTapLink from '@tiptap/extension-link'"
+        ]
+      }
+    }
+  },
+  "hiddenProps": [
+    "advancedEditor",
+    "extensions",
+    "inputOptions",
+    "onChange",
+    "template",
+    "TrixEditor",
+    "trixInstance",
+    "value",
+    "placeholder"
+  ],
+  "propSyncOnEnable": {
+    "advancedEditorToolbar": {
+      "structureMode": "advanced"
+    },
+    "inputHeight": {
+      "structureMode": "advanced"
+    },
+    "inputMinHeight": {
+      "structureMode": "advanced"
+    },
+    "sticky": {
+      "structureMode": "advanced"
+    }
+  }
 }

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

@@ -0,0 +1,153 @@
+{
+  "structureModes": {
+    "default": "advanced",
+    "modes": {
+      "advanced": {
+        "label": "Advanced",
+        "template": "<RichTextEditor\n  advancedEditor={editor}{{props}}\n>\n  <EditorContent editor={editor} />\n</RichTextEditor>",
+        "children": "",
+        "wrapper": "const RichTextEditorPlayground = () => {\n  const editor = useEditor({\n    extensions: [StarterKit, TipTapLink],\n    content: 'Add your text here. You can format your text, add links, quotes, and bullets.',\n  })\n\n  if (!editor) return null\n\n  return {{component}}\n}\n\n<RichTextEditorPlayground />",
+        "externalImports": [
+          "import { useEditor, EditorContent } from '@tiptap/react'",
+          "import StarterKit from '@tiptap/starter-kit'",
+          "import TipTapLink from '@tiptap/extension-link'"
+        ]
+      }
+    }
+  },
+  "defaults": {
+    "advancedEditorToolbar": true,
+    "inputHeight": "md",
+    "inputMinHeight": "sm",
+    "label": "Description",
+    "maxWidth": "md",
+    "name": "description",
+    "requiredIndicator": false,
+    "simple": false
+  },
+  "hiddenProps": [
+    "advancedEditor",
+    "extensions",
+    "inputOptions",
+    "onChange",
+    "template",
+    "TrixEditor",
+    "trixInstance",
+    "value",
+    "placeholder"
+  ],
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["label", "name"]
+    },
+    {
+      "name": "Toolbar",
+      "props": ["advancedEditorToolbar", "simple", "focus", "sticky"]
+    },
+    {
+      "name": "Sizing",
+      "props": ["inputHeight", "inputMinHeight", "maxWidth"]
+    },
+    {
+      "name": "State",
+      "props": ["requiredIndicator"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "structureMode": "advanced",
+      "props": {
+        "advancedEditorToolbar": true,
+        "label": "Description",
+        "name": "description"
+      }
+    },
+    {
+      "name": "Simple",
+      "structureMode": "advanced",
+      "props": {
+        "advancedEditorToolbar": true,
+        "label": "Notes",
+        "name": "notes",
+        "simple": true
+      }
+    },
+    {
+      "name": "Focus Toolbar",
+      "structureMode": "advanced",
+      "props": {
+        "advancedEditorToolbar": false,
+        "focus": true,
+        "label": "Focus editor"
+      }
+    },
+    {
+      "name": "Tall Editor",
+      "structureMode": "advanced",
+      "props": {
+        "inputHeight": "lg",
+        "inputMinHeight": "md",
+        "label": "Tall editor"
+      }
+    },
+    {
+      "name": "Required",
+      "structureMode": "advanced",
+      "props": {
+        "label": "Description",
+        "name": "description",
+        "requiredIndicator": true
+      }
+    },
+    {
+      "name": "Sticky",
+      "structureMode": "advanced",
+      "props": {
+        "label": "Sticky editor",
+        "sticky": true
+      }
+    }
+  ],
+  "conditionals": {
+    "advancedEditorToolbar": {
+      "structureMode": "advanced"
+    },
+    "inputHeight": {
+      "structureMode": "advanced"
+    },
+    "inputMinHeight": {
+      "structureMode": "advanced"
+    },
+    "sticky": {
+      "structureMode": "advanced"
+    }
+  },
+  "propSyncOnEnable": {
+    "advancedEditorToolbar": {
+      "structureMode": "advanced"
+    },
+    "inputHeight": {
+      "structureMode": "advanced"
+    },
+    "inputMinHeight": {
+      "structureMode": "advanced"
+    },
+    "sticky": {
+      "structureMode": "advanced"
+    }
+  },
+  "hints": {
+    "advanced": {
+      "presetName": "Default",
+      "message": "The Advanced structure wraps RichTextEditor with TipTap useEditor and EditorContent.",
+      "type": "info"
+    },
+    "focus": {
+      "when": { "focus": true },
+      "message": "Focus Toolbar shows the toolbar when the advanced editor receives focus.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -158,6 +158,7 @@ const Select = ({
               className="pb_select_kit_caret svg-inline--fa"
               customIcon={angleDown}
               fixedWidth
+              size="sm"
          />
          : 
          null

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

@@ -8,7 +8,29 @@
     "multiple": false,
     "required": false,
     "requiredIndicator": false,
-    "showArrow": false
+    "showArrow": false,
+    "blankSelection": "Select an option",
+    "label": "Country",
+    "name": "country",
+    "options": [
+      {
+        "value": "us",
+        "text": "United States"
+      },
+      {
+        "value": "ca",
+        "text": "Canada"
+      },
+      {
+        "value": "uk",
+        "text": "United Kingdom"
+      },
+      {
+        "value": "au",
+        "text": "Australia"
+      }
+    ],
+    "value": "us"
   },
   "groups": [
     {
@@ -18,8 +40,7 @@
         "name",
         "value",
         "options",
-        "blankSelection",
-        "includeBlank"
+        "blankSelection"
       ]
     },
     {
@@ -28,7 +49,8 @@
         "disabled",
         "error",
         "required",
-        "requiredIndicator"
+        "requiredIndicator",
+        "onChange"
       ]
     },
     {
@@ -93,36 +115,35 @@
       }
     },
     {
-      "name": "Disabled",
+      "name": "Multiple",
       "props": {
-        "label": "Role",
-        "name": "role",
-        "value": "member",
-        "disabled": true,
+        "label": "Teams",
+        "name": "teams",
+        "multiple": true,
         "options": [
           {
-            "value": "admin",
-            "text": "Admin"
+            "value": "eng",
+            "text": "Engineering"
           },
           {
-            "value": "member",
-            "text": "Member"
+            "value": "design",
+            "text": "Design"
           },
           {
-            "value": "guest",
-            "text": "Guest"
+            "value": "ops",
+            "text": "Operations"
           }
         ]
       }
     },
     {
-      "name": "Required",
+      "name": "Inline Compact",
       "props": {
         "label": "Priority",
         "name": "priority",
         "value": "medium",
-        "required": true,
-        "requiredIndicator": true,
+        "inline": true,
+        "compact": true,
         "options": [
           {
             "value": "low",
@@ -145,5 +166,30 @@
       "requires": "label"
     }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default shows a labeled select with a selected value and a simple options array.",
+      "type": "info"
+    },
+    "error": {
+      "presetName": "With Error",
+      "message": "With Error passes an error message and blank selection for validation states.",
+      "type": "info"
+    },
+    "multiple": {
+      "presetName": "Multiple",
+      "message": "Multiple switches the native select into multi-select mode using the same options shape.",
+      "type": "info"
+    },
+    "inline_compact": {
+      "presetName": "Inline Compact",
+      "message": "Inline Compact combines inline and compact for dense form layouts.",
+      "type": "info"
+    }
+  },
+  "hiddenProps": [
+    "inputOptions",
+    "includeBlank"
+  ]
 }

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

@@ -1,12 +1,32 @@
 {
+  "defaults": {
+    "blankSelection": "Select an option",
+    "compact": false,
+    "disabled": false,
+    "inline": false,
+    "label": "Country",
+    "multiple": false,
+    "name": "country",
+    "options": [
+      { "value": "us", "text": "United States" },
+      { "value": "ca", "text": "Canada" },
+      { "value": "uk", "text": "United Kingdom" },
+      { "value": "au", "text": "Australia" }
+    ],
+    "required": false,
+    "requiredIndicator": false,
+    "showArrow": false,
+    "value": "us"
+  },
+  "hiddenProps": ["inputOptions", "includeBlank"],
   "groups": [
     {
       "name": "Content",
-      "props": ["label", "name", "value", "options", "blankSelection", "includeBlank"]
+      "props": ["label", "name", "value", "options", "blankSelection"]
     },
     {
       "name": "State",
-      "props": ["disabled", "error", "required", "requiredIndicator"]
+      "props": ["disabled", "error", "required", "requiredIndicator", "onChange"]
     },
     {
       "name": "Appearance",
@@ -44,27 +64,26 @@
       }
     },
     {
-      "name": "Disabled",
+      "name": "Multiple",
       "props": {
-        "label": "Role",
-        "name": "role",
-        "value": "member",
-        "disabled": true,
+        "label": "Teams",
+        "name": "teams",
+        "multiple": true,
         "options": [
-          { "value": "admin", "text": "Admin" },
-          { "value": "member", "text": "Member" },
-          { "value": "guest", "text": "Guest" }
+          { "value": "eng", "text": "Engineering" },
+          { "value": "design", "text": "Design" },
+          { "value": "ops", "text": "Operations" }
         ]
       }
     },
     {
-      "name": "Required",
+      "name": "Inline Compact",
       "props": {
         "label": "Priority",
         "name": "priority",
         "value": "medium",
-        "required": true,
-        "requiredIndicator": true,
+        "inline": true,
+        "compact": true,
         "options": [
           { "value": "low", "text": "Low" },
           { "value": "medium", "text": "Medium" },
@@ -76,5 +95,26 @@
   "conditionals": {
     "requiredIndicator": { "requires": "label" }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default shows a labeled select with a selected value and a simple options array.",
+      "type": "info"
+    },
+    "error": {
+      "presetName": "With Error",
+      "message": "With Error passes an error message and blank selection for validation states.",
+      "type": "info"
+    },
+    "multiple": {
+      "presetName": "Multiple",
+      "message": "Multiple switches the native select into multi-select mode using the same options shape.",
+      "type": "info"
+    },
+    "inline_compact": {
+      "presetName": "Inline Compact",
+      "message": "Inline Compact combines inline and compact for dense form layouts.",
+      "type": "info"
+    }
+  }
 }

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

@@ -94,7 +94,7 @@
       ]
     },
     "onChange": {
-      "type": "ReactNode",
+      "type": "function",
       "platforms": [
         "react"
       ]
@@ -140,7 +140,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     },
     "onchange": {
       "platforms": [

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -30,7 +30,7 @@
       <%= pb_rails("body", props: { status: "negative", text: object.error, dark: object.dark }) %>
     <% end %>
     <% if object.multiple != true %>
-      <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>
+      <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret", size: "sm"}) %>
     <% end %>
   <% end %>
 <% end %>