playbook_ui_docs 13.21.0.pre.alpha.PBNTR225advancedtablefeedback2438 → 13.21.0.pre.alpha.PLAY12582474

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a7abf0ceeb7d0ed9e4cd3b915bf3af0baf851e488a03437584ba7aea31ad7f7
-  data.tar.gz: 894ada11f2499a8eed0f3b76b0a13e31eb2c8e78741fee6372422db99030eb2f
+  metadata.gz: 355c5f2e4f6b09a4409aedc6f6c69514390af804c251dc1662232eaa94b2b441
+  data.tar.gz: d2c41204c8551916731e66ebefb124df0e1d711bcf85dd3ffff62f9c5d86da0a
 SHA512:
-  metadata.gz: '09b137eaf2072c5feefdab4375780d82a5fc4a644d9a3be84d9f6534d6d45ec118222f03cc9d0068506d7fd5b1c07aabf169b5a60e731492cb646f9b72a10721'
-  data.tar.gz: ac620b4c6d31a9d2e565cb535c20af628e31165ec312393a12997422162b43c01c89aa3573fdb925c457b20bd590ce12251d6329aa8312cfaf97ceae21edd1c5
+  metadata.gz: 6e6eb67e15ab413c5e784b4cee06beb389a58d246550ee3208cf95185df5a3ded7c28278ba56164b6dc404159e89b07296c86dbabe99bec9969eee25eb93c2ba
+  data.tar.gz: 3fc86ff626fd3d298bcd2327a2bf10152eb097b0dfa5646d7d4079b3068696bd4cfc7411c979e5678fef5dd2947f5af16372b629e117426c217ea3c9ade52094

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

@@ -1,4 +1,6 @@
 examples:
+  # rails:
+  #   - advanced_table_default: Default (Required Props)
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -1,5 +1,55 @@
+<%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { multitoast: "#toast-short" } }) %>
+
 <%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "multitoast-to-hide",
+  closeable: true,
+  id: "toast-short",
   multi_line: true,
-  text: "Scan to Assign Selected Items. Click here to generate report",
+  text: "Multi-line is used when the given text will not fit on one line.",
   status: "tip",
+  vertical: "top",
+  horizontal: "center"
 }) %>
+
+<%= pb_rails("button", props: { text: "Long Multiline", variant: "secondary", data: { multitoast: "#toast-long" } }) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "multitoast-to-hide",
+  closeable: true,
+  id: "toast-long",
+  multi_line: true,
+  text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
+  status: "tip",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+
+<script type="text/javascript">
+  const multitoasts = document.querySelectorAll(".multitoast-to-hide")
+  const multibuttons = document.querySelectorAll("button[data-multitoast]")
+
+  const hideMultiToasts = () => {
+    multitoasts.forEach((toast) => {
+      toast.style.display = "none"
+    })
+  }
+
+  multibuttons.forEach((button) => {
+    button.onclick = () => {
+      hideMultiToasts()
+      let toast = document.querySelector(button.getAttribute("data-multitoast"))
+
+      if (toast) {
+        toast.style.display = "flex"
+      }
+    }
+  })
+</script>
+
+<!-- hiding toast on page load -->
+<style>
+  #toast-long, #toast-short {
+    display: none;
+  }
+</style>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx

@@ -1,18 +1,69 @@
-import React from 'react'
+import React, { useState } from 'react'
 
+import Button from '../../pb_button/_button'
 import FixedConfirmationToast from '../_fixed_confirmation_toast'
 
 const FixedConfirmationToastMultiLine = (props) => {
-  return (
-    <div>
-      <FixedConfirmationToast
-          multiLine
-          status="tip"
-          text="Scan to Assign Selected Items. Click here to generate report"
-          {...props}
-      />
-    </div>
-  )
+
+    const [openShort, setOpenShort] = useState(false)
+    const [openLong, setOpenLong] = useState(false)
+
+    const handleClickShort = () => {
+        setOpenShort(true)
+    }
+    const handleClickLong= () => {
+        setOpenLong(true)
+    }
+
+    const handleCloseShort = () => {
+        setOpenShort(false)
+    }
+
+    const handleCloseLong= () => {
+        setOpenLong(false)
+    }
+
+    return (
+        <>
+            <Button
+                onClick={handleClickShort}
+                text="Short Multiline"
+                variant="secondary"
+                {...props}
+            />
+            {' '}
+            <Button
+                onClick={handleClickLong}
+                text="Long Multiline"
+                variant="secondary"
+                {...props}
+            />
+
+            <FixedConfirmationToast
+                closeable 
+                horizontal='center'
+                multiLine
+                onClose={handleCloseShort}
+                open={openShort}
+                status='tip'
+                text='Multi-line is used when the given text will not fit on one line.'
+                vertical='top'
+                {...props}
+            />
+
+            <FixedConfirmationToast
+                closeable
+                horizontal='center'
+                multiLine
+                onClose={handleCloseLong}
+                open={openLong}
+                status='tip'
+                text='Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.'
+                vertical='top'
+                {...props}
+            />
+        </>
+    )
 }
 
 export default FixedConfirmationToastMultiLine

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb

@@ -75,8 +75,6 @@
     })
   }
 
-  hideToasts()
-
   buttons.forEach((button) => {
     button.onclick = () => {
       hideToasts()
@@ -88,3 +86,10 @@
     }
   })
 </script>
+
+<!-- hiding toast on page load -->
+<style>
+  #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
+    display: none;
+  }
+</style>

data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb

@@ -46,7 +46,3 @@
     <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
 </div>
-
-
-
-</div>