playbook_ui_docs 13.10.0.pre.alpha.play10561409 → 13.10.0.pre.alpha.play10561428

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9e8b0f34e3ce1ae0e6dd4ff0fd257aa7dd073be6361014f46b171c8f74ac9332
-  data.tar.gz: feb0177fc6b2782b778e1e06236ecc982d873f3655beb35954c30b87376e2297
+  metadata.gz: a9910aa7ddf2bedaba1ac25b50e36262211927ec14e1959ec60dbd5d178ec937
+  data.tar.gz: 8c0f71901ebc99aa4dcc522cb4ac2332655577ae3a50034abd9a5818be4fc085
 SHA512:
-  metadata.gz: cf3ff6c0e522f2c1635b9f0769d65f71d46329ef5e8ee1eb824f16e07dd9216a6674ecf08e20c45ebf707974293ec485a65e812285d2d1e558462c1a709e3639
-  data.tar.gz: ade5d5455664e3e1ab79535370bbb4a14dce3da1d224c6cb82bd8fb2a5addc42ac40836e41bd93dc106c0b02f4d6969b526c34a4d29372e2651a01721268e5d9
+  metadata.gz: 7ebe74f371e1fba8e4cdf565ed8e1dbb99798bc55d8399021c396852dcb16d64753d2548549f4ee86b706c8323cb28b92e66fae42db6d22442b366cb7fe7cdbf
+  data.tar.gz: 8d3727a0257faca87c5c66ddae889bd68e17a028b9351d1a21b194d19c3f4ea7b0dd93a67f3060e7054e128af70f81df3038319272e2ad07ed68be5d0b0cf43d

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

@@ -5,26 +5,26 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width: 100px;
-    ">This is a truncated tooltip trigger.</span>
+      max-width: 65px;
+    ">Tooltip for truncation only</span>
     <%= pb_rails("tooltip", props: {
       trigger_element_selector: "#truncated-tooltip-2",
       tooltip_id: "truncated-2",
       position: 'left',
-      truncatable: true
+      truncation_enabled: true
     }) do %>
-        This is a truncated tooltip trigger.
+        Tooltip for truncation only
     <% end %>
   <% end %>
   <%= pb_rails("flex/flex_item") do %>
-    <span id='truncated-tooltip-1'>This tooltip trigger is not truncated.</span>
+    <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',
-      truncatable: true
+      truncation_enabled: true
     }) do %>
-        This tooltip trigger is not truncated.
+        Tooltip for truncation only
     <% end %>
   <% end %>
   

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

@@ -15,27 +15,27 @@ const TooltipTruncated = (props) => {
    >
     <FlexItem>
       <Tooltip 
-          className='tooltip-text-truncation'
+          className='tooltip-text-truncation short'
           style={{
             'backgroundColor': 'red'
           }}
-          text='This is a truncated tooltip trigger.' 
-          truncatable
+          text='Tooltip for truncation only short' 
+          truncationEnabled
           zIndex={10}
           {...props}
       >
-        {'This is a truncated tooltip trigger.'}
+        {'Tooltip for truncation only'}
       </Tooltip>
     </FlexItem>
     <FlexItem>
       <Tooltip 
-          className='tooltip-text-truncation'
-          text='This is a truncated tooltip trigger.' 
-          truncatable
+          className='tooltip-text-truncation long'
+          text='Tooltip for truncation only' 
+          truncationEnabled
           zIndex={10}
           {...props}
       >
-        {'This'}
+        {'Tooltip for truncation only'}
       </Tooltip>
     </FlexItem>
    </Flex>

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

@@ -1,4 +1,4 @@
-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.
+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.
 

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

@@ -3,5 +3,11 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100px;
+}
+.tooltip-text-truncation.short {
+  max-width: 65px;
+}
+
+.tooltip-text-truncation.long {
+  max-width: 180px;
 }