RubyGems - playbook_ui_docs - Versions diffs - 13.11.1 → 13.12.0 - Mend

playbook_ui_docs 13.11.1 → 13.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.html.erb ADDED Viewed

@@ -0,0 +1,39 @@
+<%= pb_rails("flex", props: { orientation: "column", gap: "md" }) do %>
+  <%= pb_rails("button", props: {text: "Toggle state", id: "toggle-tooltip-button"}) %>
+  <%= pb_rails("body") do %>
+      Tooltip is: <code id="show-tooltip-state">enabled</code>
+  <% end %>
+  <%= pb_rails("flex/flex_item") do %>
+    <span id="truncated-tooltip-1">Hover me</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#truncated-tooltip-1",
+      tooltip_id: "truncated-1",
+      position: "right",
+    }) do %>
+        Tooltip is enabled
+    <% end %>
+  <% end %>
+<% end %>
+<script>
+const toggleTooltipButton = document.getElementById("toggle-tooltip-button");
+const showTooltipStateText = document.getElementById("show-tooltip-state");
+function hideTooltipIfNotTruncated(tooltipId) {
+  const tooltipElement = document.querySelector(
+    `[data-pb-tooltip-tooltip-id="${tooltipId}"]`
+  );
+  tooltipElement.dataset.pbTooltipShowTooltip =
+    tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "true" : "false";
+  showTooltipStateText.innerText =
+    tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "disabled" : "enabled";
+}
+toggleTooltipButton.addEventListener("click", () => {
+  hideTooltipIfNotTruncated("truncated-1");
+});
+</script>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.md ADDED Viewed

@@ -0,0 +1,5 @@
+You can build your own logic to control whether to show or hide the tooltip.
+Click on the `Toggle state` button to change the state of the component and hover over the 'hover me' text to see it in action.
+Each Tooltip has a `dataset` with the `pbTooltipShowTooltip` property set to true by default. To update it, access the `pbTooltipShowTooltip` in the dataset of your tooltip element: `yourTooltip.dataset.pbTooltipShowTooltip = 'false'`

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx ADDED Viewed

@@ -0,0 +1,45 @@
+// @flow
+import React, { useState } from 'react'
+import {  Button, Body, Flex, FlexItem, Tooltip } from '../..'
+const TooltipShowTooltipReact = (props) => {
+  const [showTooltip, setShowTooltip] = useState(true);
+  return (
+   <Flex
+       flexDirection='column'
+       gap='md'
+       wrap
+   >
+    <FlexItem>
+      <Button
+          onClick={()=> setShowTooltip(!showTooltip)}
+          text="Toggle state"
+      />
+    </FlexItem>
+    <FlexItem>
+      <Body >
+        <p>
+          {'Tooltip is: '}
+          <code>{showTooltip ? "enabled" : "disabled"}</code>
+        </p>
+      </Body>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          placement='right'
+          showTooltip={showTooltip}
+          text='Tooltip is enabled'
+          zIndex={10}
+          {...props}
+      >
+        {'Hover me.'}
+      </Tooltip>
+    </FlexItem>
+   </Flex>
+  )
+}
+export default TooltipShowTooltipReact

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.md ADDED Viewed

@@ -0,0 +1,3 @@
+You can build your own logic to control whether to show the tooltip using the `showTooltip` prop. Its default value is `true`.
+Click on the `Toggle state` button to change the state of the component and hover over the 'hover me' text to see it in action.

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

@@ -4,6 +4,7 @@ examples:
   - tooltip_default: Default
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
+  - tooltip_show_tooltip: Show Tooltip
   react:
   - tooltip_default_react: Default
@@ -11,3 +12,5 @@ examples:
   - tooltip_margin: Margin
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
+  - tooltip_show_tooltip_react: Show Tooltip

data/app/pb_kits/playbook/pb_tooltip/docs/index.js CHANGED Viewed

@@ -3,3 +3,4 @@ export { default as TooltipInteraction } from './_tooltip_interaction'
 export { default as TooltipMargin } from './_tooltip_margin'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
+export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'