playbook_ui 13.10.0.pre.alpha.play10481357 → 13.10.0.pre.alpha.play10561428

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

@@ -28,6 +28,7 @@ type TooltipProps = {
   placement?: Placement,
   position?: "absolute" | "fixed";
   text: string,
+  truncationEnabled?: boolean,
 } & GlobalProps
 
 const Tooltip = (props: TooltipProps): React.ReactElement => {
@@ -42,6 +43,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     placement: preferredPlacement = "top",
     position = "absolute",
     text,
+    truncationEnabled = 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 (truncationEnabled) {
+        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: 65px;
+    ">Tooltip for truncation only</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#truncated-tooltip-2",
+      tooltip_id: "truncated-2",
+      position: 'left',
+      truncation_enabled: true
+    }) do %>
+        Tooltip for truncation only
+    <% end %>
+  <% end %>
+  <%= pb_rails("flex/flex_item") do %>
+    <span id='truncated-tooltip-1'>Tooltip for truncation only</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#truncated-tooltip-1",
+      tooltip_id: "truncated-1",
+      position: 'left',
+      truncation_enabled: true
+    }) do %>
+        Tooltip for truncation only
+    <% 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 short'
+          style={{
+            'backgroundColor': 'red'
+          }}
+          text='Tooltip for truncation only short' 
+          truncationEnabled
+          zIndex={10}
+          {...props}
+      >
+        {'Tooltip for truncation only'}
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip 
+          className='tooltip-text-truncation long'
+          text='Tooltip for truncation only' 
+          truncationEnabled
+          zIndex={10}
+          {...props}
+      >
+        {'Tooltip for truncation only'}
+      </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 `truncationEnabled` 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,13 @@
+.tooltip-text-truncation {
+  display: inline-block !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tooltip-text-truncation.short {
+  max-width: 65px;
+}
+
+.tooltip-text-truncation.long {
+  max-width: 180px;
+}

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.truncation_enabled %>) {
+    // 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 :truncation_enabled, default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false