playbook_ui_docs 13.27.0.pre.alpha.testingcollapsible2912 → 13.27.0.pre.alpha.testingcollapsible2917

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9a85374fd9143acd2db66e83e92a0dce23993dc763dd17a10f4a4c15c241b1d0
-  data.tar.gz: eb3fa1cc1d0e7031301cf09e24cf73005111ed1363a3bd1b467792df66690572
+  metadata.gz: c4d6b57eeffaa765c9c090f0c5a1383d3a0d936f584100c34e4a2d54d0bc49bb
+  data.tar.gz: a7ff852dfc6a775fb551257485d008ca23e3dd799849a7854b8346c2ce511f36
 SHA512:
-  metadata.gz: 9d955d8734dbdeadfa5963b331acb768b79d991ae9052633659630d9a8578e62bfd9869a75de17cdd6b9aa79b65ad777ee171c40526a1d1ebc38c4027b233f45
-  data.tar.gz: d34ee87e7f1540dc1c700445e1a666cdc026a50a944d96e5f3273207026d56f24f8870546c7c85437ddd8464020ade6cc34fb497303f3ba1b95ed0d09bcd3f25
+  metadata.gz: d90ee5ae388bd319bb2523813c5be923c5d46d7b9fc68bc03126f01a86f47250e48d43daa3505495b3688d24569c0f8fbe71de634df6224581e2ae6bd01f65a1
+  data.tar.gz: f027b32612d0bf2a761b4197f14e91eca40ebe1f858283fe729f81cbdbad6548bab1d33efd01b959e6dc594a41a02d3cc3f4a7a47a8d0774520a22a8a38679cc

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible, useCollapsible, Background, Flex, Title, IconCircle, List, ListItem } from '../..'
+import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
 
 const CollapsibleCustomMain = () => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)
@@ -25,10 +25,7 @@ const CollapsibleCustomMain = () => {
                     size={4} 
                     text="Custom Main Section" 
                 />
-                <IconCircle 
-                    icon="check" 
-                    size="xs" 
-                />
+                <Collapsible.Icon collapsed={isCollapsed}/>
               </Flex>
           </Background>
       <Collapsible.Content padding="none">

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md

@@ -0,0 +1,5 @@
+A custom Main section can also be used in place of the provided `Collapsible.Main`. This gives devs full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
+
+If a custom component is used in place of the default, devs must handle collapsible toggling themselves via the useCollapsible hook as seen in this example.
+
+The default Collapsible icon can also be used as part of the custom Main as shown, you will need to pass the Collapsible state to the `collapsed` prop on the optional `Collapsible.Icon`.

data/app/pb_kits/playbook/pb_collapsible/docs/{_collapsible_custom_main.html.erb → _collapsible_custom_main_rails.html.erb}

@@ -2,10 +2,7 @@
     <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
       <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
         <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
-        <%= pb_rails("icon_circle", props: {
-        icon: "check",
-        size: "xs"
-      }) %>
+    <%= pb_rails("collapsible/collapsible_icon") %>
      <% end %>
       <% end %>
      <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md

@@ -0,0 +1,5 @@
+A custom Main section can also be used in place of the provided `collapsible/collapsible_main`. This gives devs full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
+
+If a custom component is used in place of the default, devs must add `data: {"collapsible-main": "true"}` to the custom Main for toggling of the collapsible to work correctly.
+
+The default Collapsible icon can also be used as part of the custom Main as shown with the optional  `collapsible/collapsible_icon`. This optional subcomponent accepts all icon related props `color`, `icon` and `size`.

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

@@ -7,7 +7,7 @@ examples:
   - collapsible_icons: Custom Icons
   - collapsible_external_controls: Toggle Collapsible With External Controls
   - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
-  - collapsible_custom_main: Custom Main
+  - collapsible_custom_main_rails: Custom Main Section
 
   react:
   - collapsible_default: Default
@@ -15,7 +15,7 @@ examples:
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
   - collapsible_state: useCollapsible Hook
-  - collapsible_custom_main: Custom Main
+  - collapsible_custom_main: Custom Main Section
 
 
   swift: