playbook_ui 13.11.1 → 13.12.0.pre.alpha.PLAY1081exporttypes1608

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default_swift.md

@@ -0,0 +1,11 @@
+![toggle-default](https://github.com/powerhome/playbook/assets/92755007/bd99bd01-d577-4455-b1f9-a88b637e8a60)
+
+
+```swift
+
+VStack(spacing: Spacing.small) {
+  PBToggle(checked: true)
+  PBToggle(checked: false)
+}
+
+```

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name_swift.md

@@ -0,0 +1,10 @@
+![toggle-name](https://github.com/powerhome/playbook/assets/92755007/e45a575c-ab14-4181-a5e8-eb8d1f57ab4d)
+
+```swift
+
+VStack(spacing: Spacing.small) {
+  PBToggle(label: "car", checked: false)
+  PBToggle(label: "bike", checked: false)
+}
+
+```

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md

@@ -0,0 +1,6 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **isHovering** | `Bool` | Changes the style of the Toggle | `false` | `true` `false` |
+| **label** | `String` | Adds a label to the Toggle | `nil` |  |
+| **checked** | `Bool` | Changes the style of the Toggle |  | `true` `false` |

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

@@ -13,3 +13,7 @@ examples:
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
 
+  swift:
+    - toggle_default_swift: Default State
+    - toggle_name_swift: Name and Value
+    - toggle_props_swift: ""

data/app/pb_kits/playbook/pb_tooltip/_tooltip.d.ts

@@ -0,0 +1,356 @@
+import React from "react";
+import { Placement } from "@floating-ui/react";
+declare const Tooltip: React.ForwardRefExoticComponent<(Pick<{
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string | string[];
+    children: JSX.Element;
+    data?: {
+        [key: string]: string;
+    };
+    delay?: number | Partial<{
+        open: number;
+        close: number;
+    }>;
+    icon?: string;
+    interaction?: boolean;
+    placement?: Placement;
+    position?: "absolute" | "fixed";
+    text: string;
+    showTooltip?: boolean;
+} & {
+    alignContent?: never;
+} & {
+    alignItems?: never;
+} & {
+    alignSelf?: never;
+} & {
+    borderRadius?: "md" | "lg" | "sm" | "xl" | "xs" | "none" | "rounded";
+} & {
+    cursor?: "none" | "progress" | "text" | "auto" | "default" | "pointer" | "alias" | "cell" | "copy" | "crosshair" | "grab" | "grabbing" | "help" | "move" | "wait" | "contextMenu" | "verticalText" | "noDrop" | "notAllowed" | "eResize" | "nResize" | "neResize" | "nwResize" | "sResize" | "seResize" | "swResize" | "wResize" | "ewResize" | "nsResize" | "neswResize" | "nwseResize" | "colResize" | "rowResize" | "allScroll" | "zoomIn" | "zoomOut";
+} & {
+    dark?: boolean;
+} & {
+    display?: import("../types").DisplayType;
+} & import("../types").DisplaySizes & {
+    flex?: "none" | "auto" | "initial" | "1" | "2" | "3" | "4" | "5" | "0" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+} & {
+    flexDirection?: "column" | "row" | "rowReverse" | "columnReverse";
+} & {
+    flexGrow?: 0 | 1;
+} & {
+    flexShrink?: 0 | 1;
+} & {
+    flexWrap?: "wrap" | "nowrap" | "wrapReverse";
+} & {
+    justifyContent?: never;
+} & {
+    justifySelf?: never;
+} & {
+    lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest";
+} & {
+    marginRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    margin?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    maxWidth?: import("../types").Sizes;
+} & {
+    numberSpacing?: "tabular";
+} & {
+    order?: 2 | "none" | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | "first" | 11 | 12;
+} & {
+    overflowX?: "auto" | "scroll" | "hidden" | "visible";
+    overflowY?: "auto" | "scroll" | "hidden" | "visible";
+    overflow?: "auto" | "scroll" | "hidden" | "visible";
+} & {
+    paddingRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    padding?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    position?: "fixed" | "relative" | "absolute" | "sticky" | "static";
+} & {
+    shadow?: "none" | "deep" | "deeper" | "deepest";
+} & {
+    textAlign?: "center" | "left" | "right" | "start" | "end" | "justify" | "justifyAll" | "matchParent";
+} & {
+    zIndex?: 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+} & {
+    hover?: string;
+}, string | number> | Pick<{
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string | string[];
+    children: JSX.Element;
+    data?: {
+        [key: string]: string;
+    };
+    delay?: number | Partial<{
+        open: number;
+        close: number;
+    }>;
+    icon?: string;
+    interaction?: boolean;
+    placement?: Placement;
+    position?: "absolute" | "fixed";
+    text: string;
+    showTooltip?: boolean;
+} & {
+    alignContent?: never;
+} & {
+    alignItems?: never;
+} & {
+    alignSelf?: never;
+} & {
+    borderRadius?: "md" | "lg" | "sm" | "xl" | "xs" | "none" | "rounded";
+} & {
+    cursor?: "none" | "progress" | "text" | "auto" | "default" | "pointer" | "alias" | "cell" | "copy" | "crosshair" | "grab" | "grabbing" | "help" | "move" | "wait" | "contextMenu" | "verticalText" | "noDrop" | "notAllowed" | "eResize" | "nResize" | "neResize" | "nwResize" | "sResize" | "seResize" | "swResize" | "wResize" | "ewResize" | "nsResize" | "neswResize" | "nwseResize" | "colResize" | "rowResize" | "allScroll" | "zoomIn" | "zoomOut";
+} & {
+    dark?: boolean;
+} & {
+    display?: import("../types").DisplayType;
+} & import("../types").DisplaySizes & {
+    flex?: "none" | "auto" | "initial" | "1" | "2" | "3" | "4" | "5" | "0" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+} & {
+    flexDirection?: "column" | "row" | "rowReverse" | "columnReverse";
+} & {
+    flexGrow?: 0 | 1;
+} & {
+    flexShrink?: 0 | 1;
+} & {
+    flexWrap?: "wrap" | "nowrap" | "wrapReverse";
+} & {
+    justifyContent?: never;
+} & {
+    justifySelf?: never;
+} & {
+    lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest";
+} & {
+    marginRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    margin?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    maxWidth?: import("../types").Sizes;
+} & {
+    numberSpacing?: "tabular";
+} & {
+    order?: 2 | "none" | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | "first" | 11 | 12;
+} & {
+    overflowX?: "auto" | "scroll" | "hidden" | "visible";
+    overflowY?: "auto" | "scroll" | "hidden" | "visible";
+    overflow?: "auto" | "scroll" | "hidden" | "visible";
+} & {
+    paddingRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    padding?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    position?: "fixed" | "relative" | "absolute" | "sticky" | "static";
+} & {
+    shadow?: "none" | "deep" | "deeper" | "deepest";
+} & {
+    textAlign?: "center" | "left" | "right" | "start" | "end" | "justify" | "justifyAll" | "matchParent";
+} & {
+    [key: string]: 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+} & {
+    hover?: string;
+}, string | number> | Pick<{
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string | string[];
+    children: JSX.Element;
+    data?: {
+        [key: string]: string;
+    };
+    delay?: number | Partial<{
+        open: number;
+        close: number;
+    }>;
+    icon?: string;
+    interaction?: boolean;
+    placement?: Placement;
+    position?: "absolute" | "fixed";
+    text: string;
+    showTooltip?: boolean;
+} & {
+    alignContent?: never;
+} & {
+    alignItems?: never;
+} & {
+    alignSelf?: never;
+} & {
+    borderRadius?: "md" | "lg" | "sm" | "xl" | "xs" | "none" | "rounded";
+} & {
+    cursor?: "none" | "progress" | "text" | "auto" | "default" | "pointer" | "alias" | "cell" | "copy" | "crosshair" | "grab" | "grabbing" | "help" | "move" | "wait" | "contextMenu" | "verticalText" | "noDrop" | "notAllowed" | "eResize" | "nResize" | "neResize" | "nwResize" | "sResize" | "seResize" | "swResize" | "wResize" | "ewResize" | "nsResize" | "neswResize" | "nwseResize" | "colResize" | "rowResize" | "allScroll" | "zoomIn" | "zoomOut";
+} & {
+    dark?: boolean;
+} & import("../types").DisplaySizes & {
+    flex?: "none" | "auto" | "initial" | "1" | "2" | "3" | "4" | "5" | "0" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+} & {
+    flexDirection?: "column" | "row" | "rowReverse" | "columnReverse";
+} & {
+    flexGrow?: 0 | 1;
+} & {
+    flexShrink?: 0 | 1;
+} & {
+    flexWrap?: "wrap" | "nowrap" | "wrapReverse";
+} & {
+    justifyContent?: never;
+} & {
+    justifySelf?: never;
+} & {
+    lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest";
+} & {
+    marginRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    margin?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    maxWidth?: import("../types").Sizes;
+} & {
+    numberSpacing?: "tabular";
+} & {
+    order?: 2 | "none" | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | "first" | 11 | 12;
+} & {
+    overflowX?: "auto" | "scroll" | "hidden" | "visible";
+    overflowY?: "auto" | "scroll" | "hidden" | "visible";
+    overflow?: "auto" | "scroll" | "hidden" | "visible";
+} & {
+    paddingRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    padding?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    position?: "fixed" | "relative" | "absolute" | "sticky" | "static";
+} & {
+    shadow?: "none" | "deep" | "deeper" | "deepest";
+} & {
+    textAlign?: "center" | "left" | "right" | "start" | "end" | "justify" | "justifyAll" | "matchParent";
+} & {
+    zIndex?: 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+} & {
+    hover?: string;
+}, string | number> | Pick<{
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string | string[];
+    children: JSX.Element;
+    data?: {
+        [key: string]: string;
+    };
+    delay?: number | Partial<{
+        open: number;
+        close: number;
+    }>;
+    icon?: string;
+    interaction?: boolean;
+    placement?: Placement;
+    position?: "absolute" | "fixed";
+    text: string;
+    showTooltip?: boolean;
+} & {
+    alignContent?: never;
+} & {
+    alignItems?: never;
+} & {
+    alignSelf?: never;
+} & {
+    borderRadius?: "md" | "lg" | "sm" | "xl" | "xs" | "none" | "rounded";
+} & {
+    cursor?: "none" | "progress" | "text" | "auto" | "default" | "pointer" | "alias" | "cell" | "copy" | "crosshair" | "grab" | "grabbing" | "help" | "move" | "wait" | "contextMenu" | "verticalText" | "noDrop" | "notAllowed" | "eResize" | "nResize" | "neResize" | "nwResize" | "sResize" | "seResize" | "swResize" | "wResize" | "ewResize" | "nsResize" | "neswResize" | "nwseResize" | "colResize" | "rowResize" | "allScroll" | "zoomIn" | "zoomOut";
+} & {
+    dark?: boolean;
+} & import("../types").DisplaySizes & {
+    flex?: "none" | "auto" | "initial" | "1" | "2" | "3" | "4" | "5" | "0" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+} & {
+    flexDirection?: "column" | "row" | "rowReverse" | "columnReverse";
+} & {
+    flexGrow?: 0 | 1;
+} & {
+    flexShrink?: 0 | 1;
+} & {
+    flexWrap?: "wrap" | "nowrap" | "wrapReverse";
+} & {
+    justifyContent?: never;
+} & {
+    justifySelf?: never;
+} & {
+    lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest";
+} & {
+    marginRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    marginY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    margin?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    maxWidth?: import("../types").Sizes;
+} & {
+    numberSpacing?: "tabular";
+} & {
+    order?: 2 | "none" | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | "first" | 11 | 12;
+} & {
+    overflowX?: "auto" | "scroll" | "hidden" | "visible";
+    overflowY?: "auto" | "scroll" | "hidden" | "visible";
+    overflow?: "auto" | "scroll" | "hidden" | "visible";
+} & {
+    paddingRight?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingLeft?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingTop?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingBottom?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingX?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    paddingY?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    padding?: "none" | "auto" | "initial" | "inherit" | import("../types").Sizes;
+    break?: string;
+    default?: string;
+} & {
+    position?: "fixed" | "relative" | "absolute" | "sticky" | "static";
+} & {
+    shadow?: "none" | "deep" | "deeper" | "deepest";
+} & {
+    textAlign?: "center" | "left" | "right" | "start" | "end" | "justify" | "justifyAll" | "matchParent";
+} & {
+    [key: string]: 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+} & {
+    hover?: string;
+}, string | number>) & React.RefAttributes<unknown>>;
+export default Tooltip;

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react"
+import React, { useRef, useState, forwardRef, ForwardedRef } from "react"
 
 import {
   arrow, 
@@ -28,9 +28,10 @@ type TooltipProps = {
   placement?: Placement,
   position?: "absolute" | "fixed";
   text: string,
+  showTooltip?: boolean,
 } & GlobalProps
 
-const Tooltip = (props: TooltipProps): React.ReactElement => {
+const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): React.ReactElement => {
   const {
     aria = {},
     className,
@@ -42,6 +43,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     placement: preferredPlacement = "top",
     position = "absolute",
     text,
+    showTooltip = true,
     zIndex,
     ...rest
   } = props
@@ -59,10 +61,9 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
 
   const {
     context,
-    floating,
     middlewareData: { arrow: { x: arrowX, y: arrowY } = {},  },
     placement,
-    reference,
+    refs,
     strategy,
     x,
     y,
@@ -82,12 +83,16 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     ],
     open,
     onOpenChange(open) {
-      setOpen(open)
+      if(!showTooltip) {
+        return
+      } else {
+        setOpen(open)
+      }
     },
     placement: preferredPlacement
   })
 
-
+      
   const { getFloatingProps } = useInteractions([
     useHover(context, {
       delay,
@@ -108,7 +113,16 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     <>
       <div
           className={`pb_tooltip_kit ${css}`}
-          ref={reference}
+          ref={(element) => {
+            refs.setReference(element);
+            if (ref) {
+              if (typeof ref === "function") {
+                ref(element);
+              } else if (typeof ref === "object") {
+                ref.current = element;
+              }
+            }
+          }}
           role="tooltip_trigger"
           style={{ display: "inline-flex" }}
           {...ariaProps}
@@ -120,7 +134,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
         <div
             {...getFloatingProps({
               className: `tooltip_tooltip ${placement} visible`,
-              ref: floating,
+              ref: refs.setFloating,
               role: "tooltip",
               style: {
                 position: strategy,
@@ -153,6 +167,8 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
       )}
     </>
   )
-}
+})
+
+Tooltip.displayName = "Tooltip"
 
 export default Tooltip

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

@@ -1,4 +1,4 @@
-<%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
+<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
   <%= pb_rails("flex/flex_item") do %>
     <span id='regular-tooltip-1'>Hover here (Top)</span>
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -9,12 +9,10 @@ const TooltipDefaultReact = (props) => {
    <Flex 
        flexDirection='row'
        gap='md'
-       justifyContent='center'
        wrap
    >
     <FlexItem>
       <Tooltip 
-          className={"customClassNameHere"}
           placement='top' 
           text="Whoa. I'm a Tooltip" 
           zIndex={10}

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx

@@ -9,7 +9,6 @@ const TooltipDelay = (props) => {
    <Flex 
        flexDirection='row'
        gap='md'
-       justifyContent='center'
        wrap
    >
     <FlexItem>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -9,7 +9,6 @@ const TooltipInteraction = (props) => {
    <Flex 
        flexDirection='row'
        gap='md'
-       justifyContent='center'
        wrap
    >
     <FlexItem>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -7,7 +7,6 @@ const TooltipMargin = (props) => {
   return (
     <Flex 
         flexDirection='row' 
-        justifyContent='center' 
         wrap
     >
       <Tooltip

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

@@ -1,4 +1,4 @@
-<%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
+<%= pb_rails("flex", props: { orientation: "column" }) do %>
   <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
     <%= pb_rails("button", props: {classname: "tooltip-example-trigger", text: "Example 1"}) %>
   <% end %>

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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'