playbook_ui_docs 14.14.0.pre.alpha.play1868dependencyremovallodash6286 → 14.14.0.pre.alpha.play1922tooltipfloatingui6361

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 061d86c114467cb29dcd09863c10613ad2ea3d0df540102b5af47849f7e74072
-  data.tar.gz: b54a409a2d962f6da9053e9886e4aaf528d7c44b196f47b981c6292a6314d4f8
+  metadata.gz: a654517eed7995d2dd04f924b21ac98079c8bf6e64ddd9389aef999c0ef814d2
+  data.tar.gz: b30aa5fa5020fb86b549c3ea0766a988b8588c98e314d921cb05d875568e7ece
 SHA512:
-  metadata.gz: bc54456b0ef11d021e9aff54ce762995dcfb34d8afff6f9a5fd0abb8dd113860fa857fa3ef33594818eb7390e7151e4d884d9d4e95f1f7946ad7631148932902
-  data.tar.gz: 4677177d296f46c457a14f343e74ea206cc0056f2233deeb0e75580654844639a8539271ea831860fd06e7c4d990dfa15ad64b3dbb2864ad212ed06b73d84bb9
+  metadata.gz: d37123b09e80fdca9db9c6b97ebc3ad049f2b4d7a7105c5bf8532eaed35d917089489ddc826ebe793cb671c1241e4774246425b849306487c8df3abe35b3e443
+  data.tar.gz: 2ceaefad3e14f464dd06d569d90eff4f7ee338384b46812fdeff3faf803bd996ac68938df67c32ca29a8edadad4350daa860515e103eaecf83b1a566d78cd036

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "--",
+    size: "sm"
+}) %>
+
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "$0.00",
+    size: "sm"
+}) %>
+
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    null_display: " ",
+    size: "sm"
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Currency } from 'playbook-ui'
+
+const CurrencyNullDisplay = (props) => {
+  return (
+    <>
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="--"
+          {...props}
+      />
+
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="$0.00"
+          {...props}
+      />
+    
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay=" "
+          {...props}
+      />
+    </>
+  )
+}
+
+export default CurrencyNullDisplay

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md

@@ -0,0 +1 @@
+To customize how the `amount` field appears when it is empty, use the `null_display` prop and set it to the desired value you want to display.

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md

@@ -0,0 +1 @@
+To customize how the `amount` field appears when it is empty, use the `nullDisplay` prop and set it to the desired value you want to display.

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

@@ -10,6 +10,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
   
   react:
   - currency_variants: Variants
@@ -21,6 +22,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
 
   swift:
   - currency_size_swift: Size

data/app/pb_kits/playbook/pb_currency/docs/index.js

@@ -6,4 +6,5 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
 export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
-export { default as CurrencyNegative } from './_currency_negative.jsx'
+export { default as CurrencyNegative } from './_currency_negative.jsx'
+export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
+  <% end %>
+
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-delay",
+      tooltip_id: "delay-tooltip",
+      position: 'top',
+      delay_open: 1000,
+      delay_close: 1000
+    }) do %>
+        1s open/close delay 
+  <% end %>
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-open-delay",
+      tooltip_id: "open-tooltip",
+      position: 'top',
+      delay_open: 1000
+    }) do %>
+        1s open delay 
+  <% end %>
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-close-delay",
+      tooltip_id: "close-tooltip",
+      position: 'top',
+      delay_close: 1000
+    }) do %>
+        1s close delay 
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md

@@ -0,0 +1,3 @@
+Waits for the specified time when the event listener runs before triggering the tooltip.
+
+The `delay_open` and `delay_close` accept numbers in milliseconds. 1 second is 1000 milliseconds.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
+  <%= pb_rails("flex/flex_item") do %>
+    <%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>
+
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#tooltip-interaction",
+      tooltip_id: "tooltip-with-interaction",
+      position: 'top',
+      interaction: true
+    }) do %>
+        You can copy me
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item") do %>
+    <%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>
+
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#tooltip-no-interaction",
+      tooltip_id: "tooltip-without-interaction",
+      position: 'top',
+    }) do %>
+        I'm just a regular tooltip
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -2,8 +2,10 @@ examples:
 
   rails:
   - tooltip_default: Default
+  - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
+  - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
 
   react: