playbook_ui 13.10.0.pre.alpha.play10481357 → 13.10.0.pre.alpha.play10561409

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

@@ -28,6 +28,7 @@ type TooltipProps = {
   placement?: Placement,
   position?: "absolute" | "fixed";
   text: string,
+  truncatable?: boolean,
 } & GlobalProps
 
 const Tooltip = (props: TooltipProps): React.ReactElement => {
@@ -42,6 +43,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     placement: preferredPlacement = "top",
     position = "absolute",
     text,
+    truncatable = false,
     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,24 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     ],
     open,
     onOpenChange(open) {
-      setOpen(open)
+      if (truncatable) {
+        const domRef = refs.domReference.current;
+        if (
+          (domRef?.clientWidth === domRef?.scrollWidth) ||
+          (domRef?.scrollWidth === 0)
+        ) {
+          return
+        } else {
+          setOpen(open);
+        }
+      } else {
+        setOpen(open);
+      }
     },
     placement: preferredPlacement
   })
 
-
+      
   const { getFloatingProps } = useInteractions([
     useHover(context, {
       delay,
@@ -108,7 +121,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     <>
       <div
           className={`pb_tooltip_kit ${css}`}
-          ref={reference}
+          ref={refs.setReference}
           role="tooltip_trigger"
           style={{ display: "inline-flex" }}
           {...ariaProps}
@@ -120,7 +133,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
         <div
             {...getFloatingProps({
               className: `tooltip_tooltip ${placement} visible`,
-              ref: floating,
+              ref: refs.setFloating,
               role: "tooltip",
               style: {
                 position: strategy,

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

@@ -14,7 +14,6 @@ const TooltipDefaultReact = (props) => {
    >
     <FlexItem>
       <Tooltip 
-          className={"customClassNameHere"}
           placement='top' 
           text="Whoa. I'm a Tooltip" 
           zIndex={10}

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

@@ -0,0 +1,31 @@
+<%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
+  <%= pb_rails("flex/flex_item") do %>
+    <span id='truncated-tooltip-2' style="
+      display: inline-block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100px;
+    ">This is a truncated tooltip trigger.</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#truncated-tooltip-2",
+      tooltip_id: "truncated-2",
+      position: 'left',
+      truncatable: true
+    }) do %>
+        This is a truncated tooltip trigger.
+    <% end %>
+  <% end %>
+  <%= pb_rails("flex/flex_item") do %>
+    <span id='truncated-tooltip-1'>This tooltip trigger is not truncated.</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#truncated-tooltip-1",
+      tooltip_id: "truncated-1",
+      position: 'left',
+      truncatable: true
+    }) do %>
+        This tooltip trigger is not truncated.
+    <% end %>
+  <% end %>
+  
+<% end %>

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

@@ -0,0 +1,45 @@
+// @flow
+
+import React from 'react'
+import { Tooltip, Flex, FlexItem } from '../..'
+import './styles.css'
+
+const TooltipTruncated = (props) => {
+
+  return (
+   <Flex 
+       flexDirection='row'
+       gap='md'
+       justifyContent='center'
+       wrap
+   >
+    <FlexItem>
+      <Tooltip 
+          className='tooltip-text-truncation'
+          style={{
+            'backgroundColor': 'red'
+          }}
+          text='This is a truncated tooltip trigger.' 
+          truncatable
+          zIndex={10}
+          {...props}
+      >
+        {'This is a truncated tooltip trigger.'}
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip 
+          className='tooltip-text-truncation'
+          text='This is a truncated tooltip trigger.' 
+          truncatable
+          zIndex={10}
+          {...props}
+      >
+        {'This'}
+      </Tooltip>
+    </FlexItem>
+   </Flex>
+  )
+}
+
+export default TooltipTruncated

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

@@ -0,0 +1,5 @@
+If your implementation involves truncated text, you can set the `truncatable` prop to `true` and only display the tooltip when the trigger element is truncated.
+
+When activated, the component checks whether the trigger element's scrollWidth is equal to its clientWidth, or if the scrollWidth is equal to 0. If either of these conditions is met, the tooltip won't be displayed because the text is not truncated.
+
+This feature only works alongside with CSS `ellipsis` and setting a `max-width` for the trigger element. Check the CSS applied in the example above for details.

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_truncated: Text Truncation
 
   react:
   - tooltip_default_react: Default
@@ -11,3 +12,5 @@ examples:
   - tooltip_margin: Margin
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
+  - tooltip_truncated: Text Truncation
+

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 TooltipTruncated } from './_tooltip_truncated'

data/app/pb_kits/playbook/pb_tooltip/docs/styles.css

@@ -0,0 +1,7 @@
+.tooltip-text-truncation {
+  display: inline-block !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+}

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -54,6 +54,9 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   showTooltip(trigger) {
+    let triggerClasses = [...trigger.classList];
+    if (triggerClasses.includes("tooltip-disabled")) return
+
     this.popper = createPopper(trigger, this.tooltip, {
       placement: this.position,
       modifiers: [

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -7,3 +7,22 @@
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
   </div>
 <% end %>
+
+<script>
+  if (<%= object.truncatable %>) {
+    // only display tooltip if trigger element is truncated
+    document.addEventListener("DOMContentLoaded", function () {
+      const formatedTriggerElementId =
+        "<%= object.trigger_element_selector %>".replace("#", "");
+      const triggerElement = document.getElementById(formatedTriggerElementId);
+
+      // if scrollWidth is the same as the offsetWidth, the trigger element is not truncated
+      if (
+        triggerElement.offsetWidth === triggerElement.scrollWidth ||
+        triggerElement.scrollWidth === 0
+      ) {
+        triggerElement.classList.add("tooltip-disabled");
+      }
+    });
+  }
+</script>

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -7,6 +7,7 @@ module Playbook
       prop :trigger_element_selector
       prop :trigger_element_id, deprecated: true
       prop :tooltip_id
+      prop :truncatable, default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false