playbook_ui 14.21.2.pre.alpha.PLAY2241tablestickycolumnsdatanotids8357 → 14.21.2.pre.alpha.PLAY2256stickydataidreact8446

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md

@@ -1,3 +1,3 @@
 The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
 
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.
+Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using props.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx

@@ -10,9 +10,9 @@ const TableStickyLeftColumns = () => {
         >
             <thead>
                 <tr>
-                    <th id="1">{'Column 1'}</th>
-                    <th id="2">{'Column 2'}</th>
-                    <th id="3">{'Column 3'}</th>
+                    <th data-sticky-id="1">{'Column 1'}</th>
+                    <th data-sticky-id="2">{'Column 2'}</th>
+                    <th data-sticky-id="3">{'Column 3'}</th>
                     <th>{'Column 4'}</th>
                     <th>{'Column 5'}</th>
                     <th>{'Column 6'}</th>
@@ -29,9 +29,9 @@ const TableStickyLeftColumns = () => {
             </thead>
             <tbody>
                 <tr>
-                    <td id="1">{'Value 1'}</td>
-                    <td id="2">{'Value 2'}</td>
-                    <td id="3">{'Value 3'}</td>
+                    <td data-sticky-id="1">{'Value 1'}</td>
+                    <td data-sticky-id="2">{'Value 2'}</td>
+                    <td data-sticky-id="3">{'Value 3'}</td>
                     <td>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>
@@ -46,9 +46,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="1">{'Value 1'}</td>
-                    <td id="2">{'Value 2'}</td>
-                    <td id="3">{'Value 3'}</td>
+                    <td data-sticky-id="1">{'Value 1'}</td>
+                    <td data-sticky-id="2">{'Value 2'}</td>
+                    <td data-sticky-id="3">{'Value 3'}</td>
                     <td>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>
@@ -63,9 +63,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="1">{'Value 1'}</td>
-                    <td id="2">{'Value 2'}</td>
-                    <td id="3">{'Value 3'}</td>
+                    <td data-sticky-id="1">{'Value 1'}</td>
+                    <td data-sticky-id="2">{'Value 2'}</td>
+                    <td data-sticky-id="3">{'Value 3'}</td>
                     <td>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md

@@ -1,5 +1,5 @@
-The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding `data-sticky-id` to the `<th>` and `<td>`.
 
-If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
+If you are using the sub-component variant, then you will pass the `data-sticky-id` to `<Table.Header>` and `<Table.Cell>`
 
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.
+Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using `stickyLeftColumn` prop.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx

@@ -22,9 +22,9 @@ const TableStickyRightColumns = () => {
                     <th>{'Column 10'}</th>
                     <th>{'Column 11'}</th>
                     <th>{'Column 12'}</th>
-                    <th id="13">{'Column 13'}</th>
-                    <th id="14">{'Column 14'}</th>
-                    <th id="15">{'Column 15'}</th>
+                    <th data-sticky-id="13">{'Column 13'}</th>
+                    <th data-sticky-id="14">{'Column 14'}</th>
+                    <th data-sticky-id="15">{'Column 15'}</th>
                 </tr>
             </thead>
             <tbody>
@@ -41,9 +41,9 @@ const TableStickyRightColumns = () => {
                     <td>{'Value 10'}</td>
                     <td>{'Value 11'}</td>
                     <td>{'Value 12'}</td>
-                    <td id="13">{'Value 13'}</td>
-                    <td id="14">{'Value 14'}</td>
-                    <td id="15">{'Value 15'}</td>
+                    <td data-sticky-id="13">{'Value 13'}</td>
+                    <td data-sticky-id="14">{'Value 14'}</td>
+                    <td data-sticky-id="15">{'Value 15'}</td>
                 </tr>
                 <tr>
                     <td>{'Value 1'}</td>
@@ -58,9 +58,9 @@ const TableStickyRightColumns = () => {
                     <td>{'Value 10'}</td>
                     <td>{'Value 11'}</td>
                     <td>{'Value 12'}</td>
-                    <td id="13">{'Value 13'}</td>
-                    <td id="14">{'Value 14'}</td>
-                    <td id="15">{'Value 15'}</td>
+                    <td data-sticky-id="13">{'Value 13'}</td>
+                    <td data-sticky-id="14">{'Value 14'}</td>
+                    <td data-sticky-id="15">{'Value 15'}</td>
                 </tr>
                 <tr>
                     <td>{'Value 1'}</td>
@@ -75,9 +75,9 @@ const TableStickyRightColumns = () => {
                     <td>{'Value 10'}</td>
                     <td>{'Value 11'}</td>
                     <td>{'Value 12'}</td>
-                    <td id="13">{'Value 13'}</td>
-                    <td id="14">{'Value 14'}</td>
-                    <td id="15">{'Value 15'}</td>
+                    <td data-sticky-id="13">{'Value 13'}</td>
+                    <td data-sticky-id="14">{'Value 14'}</td>
+                    <td data-sticky-id="15">{'Value 15'}</td>
                 </tr>
             </tbody>
         </Table>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md

@@ -1,5 +1,5 @@
-The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-id` to the `<th>` and `<td>`.
 
-If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
+If you are using the sub-component variant, then you will pass the `data-sticky-id` to `<Table.Header>` and `<Table.Cell>`
 
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyRightColumn` prop.
+Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using the `stickyRightColumn` prop.

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -4,6 +4,10 @@
       border-right: 1px solid $border_light !important;
     }
 
+    thead tr:not(:first-child) th {
+      border-right: 1px solid $border_light !important;
+    }
+    
     @media screen and (min-width: $screen-xs-min) {
       tr:hover, .pb_table_tr:hover {
         td:last-child, .pb_table_td:last-child {

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

@@ -9,6 +9,7 @@ import {
   shift,
   useFloating,
   useHover,
+  useClick,
   useInteractions,
 } from "@floating-ui/react"
 
@@ -23,6 +24,7 @@ type TooltipProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
   children: JSX.Element,
+  useClickToOpen?: boolean,
   data?: { [key: string]: string },
   delay?: number | Partial<{open: number; close: number}>,
   height?: string,
@@ -46,6 +48,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     aria = {},
     className,
     children,
+    useClickToOpen = false,
     data = {},
     delay = 0,
     height,
@@ -110,14 +113,21 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     placement: preferredPlacement
   })
 
+  const hover = useHover(context, {
+    delay,
+    handleClose: interaction ? safePolygon({
+      blockPointerEvents: false
+    }) : null,
+    enabled: !useClickToOpen // Disable hover when useClickToOpen is true
+  })
+
+  const click = useClick(context, {
+    enabled: useClickToOpen // Only enable click when useClickToOpen is true
+  })
 
-  const { getFloatingProps } = useInteractions([
-    useHover(context, {
-      delay,
-      handleClose: interaction ? safePolygon({
-        blockPointerEvents: false
-      }) : null
-    })
+  const { getFloatingProps, getReferenceProps } = useInteractions([
+    hover,
+    click
   ])
 
   const staticSide = {
@@ -142,22 +152,24 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
   return (
     <>
       <div
-          className={`pb_tooltip_kit ${css}`}
-          ref={(element) => {
-            refs.setReference(element);
-            if (ref) {
-              if (typeof ref === "function") {
-                ref(element);
-              } else if (typeof ref === "object") {
-                ref.current = element;
+          {...getReferenceProps({
+            className: `pb_tooltip_kit ${css}`,
+            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-block" }}
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
+            },
+            role: "tooltip_trigger",
+            style: { display: "inline-block" },
+            ...ariaProps,
+            ...dataProps,
+            ...htmlProps,
+          })}
       >
         {children}
       </div>

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import Button from '../../pb_button/_button'
+import Tooltip from '../_tooltip'
+import Flex from '../../pb_flex/_flex'
+
+const TooltipClickOpen = (props) => {
+  return (
+    <Flex flexDirection='row'
+        gap='md'
+        wrap
+    >
+      <Tooltip
+          placement='top'
+          text='Tooltip Opened'
+          useClickToOpen
+          zIndex={10}
+          {...props}
+      >
+        <Button text='Click to Open' />
+      </Tooltip>
+    </Flex>
+  )
+}
+
+export default TooltipClickOpen

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

@@ -0,0 +1 @@
+Set the prop `useClickToOpen` so that the tooltip will only appear when an item is clicked rather than hovered over.

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

@@ -18,3 +18,4 @@ examples:
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
   - tooltip_show_tooltip_react: Show Tooltip
+  - tooltip_click_open: Click to Open

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

@@ -5,3 +5,4 @@ export { default as TooltipSizing } from './_tooltip_sizing'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
 export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'
+export { default as TooltipClickOpen } from './_tooltip_click_open'