playbook_ui 14.21.2.pre.alpha.PLAY2256stickydataidreact8446 → 14.21.2.pre.alpha.PLAY18938263

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

@@ -1,3 +1,3 @@
-The `sticky_left_column` prop 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>`.
+The `sticky_left_column` 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>`.
 
-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 `sticky_left_column`.
+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 `sticky_left_column`.

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 `data-sticky-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 id to the `<th>` and `<td>`.
 
-If you are using the sub-component variant, then you will pass the `data-sticky-id` to `<Table.Header>` and `<Table.Cell>`
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
 
-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.
+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.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb

@@ -13,9 +13,9 @@
       <th>Column 10</th>
       <th>Column 11</th>
       <th>Column 12</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>
+      <th id="13">Column 13</th>
+      <th id="14">Column 14</th>
+      <th id="15">Column 15</th>
     </tr>
   </thead>
   <tbody>
@@ -32,9 +32,9 @@
       <td>Value 10</td>
       <td>Value 11</td>
       <td>Value 12</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>
+      <td id="13">Value 13</td>
+      <td id="14">Value 14</td>
+      <td id="15">Value 15</td>
     </tr>
     <tr>
       <td>Value 1</td>
@@ -49,9 +49,9 @@
       <td>Value 10</td>
       <td>Value 11</td>
       <td>Value 12</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>
+      <td id="13">Value 13</td>
+      <td id="14">Value 14</td>
+      <td id="15">Value 15</td>
     </tr>
     <tr>
       <td>Value 1</td>
@@ -66,9 +66,9 @@
       <td>Value 10</td>
       <td>Value 11</td>
       <td>Value 12</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>
+      <td id="13">Value 13</td>
+      <td id="14">Value 14</td>
+      <td id="15">Value 15</td>
     </tr>
   </tbody>
 <% end %>

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 data-sticky-id="13">{'Column 13'}</th>
-                    <th data-sticky-id="14">{'Column 14'}</th>
-                    <th data-sticky-id="15">{'Column 15'}</th>
+                    <th id="13">{'Column 13'}</th>
+                    <th id="14">{'Column 14'}</th>
+                    <th 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 data-sticky-id="13">{'Value 13'}</td>
-                    <td data-sticky-id="14">{'Value 14'}</td>
-                    <td data-sticky-id="15">{'Value 15'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td 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 data-sticky-id="13">{'Value 13'}</td>
-                    <td data-sticky-id="14">{'Value 14'}</td>
-                    <td data-sticky-id="15">{'Value 15'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td 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 data-sticky-id="13">{'Value 13'}</td>
-                    <td data-sticky-id="14">{'Value 14'}</td>
-                    <td data-sticky-id="15">{'Value 15'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
                 </tr>
             </tbody>
         </Table>

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

@@ -1,3 +1,3 @@
-The `sticky_right_column` prop works in the same way as the above `sticky_left_column` 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>`.
+The `sticky_right_column` prop works in the same way as the above `sticky_left_column` 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>`.
 
-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 `sticky_right_column` prop.
+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 `sticky_right_column` prop.

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 `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-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 ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
 
-If you are using the sub-component variant, then you will pass the `data-sticky-id` to `<Table.Header>` and `<Table.Cell>`
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
 
-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.
+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.

data/app/pb_kits/playbook/pb_table/index.ts

@@ -64,8 +64,8 @@ export default class PbTable extends PbEnhancedElement {
 
     this.stickyLeftColumns.forEach((colId, index) => {
       const isLastColumn = index === this.stickyLeftColumns.length - 1;
-      const header = this.element.querySelector(`th[data-sticky-id="${colId}"]`);
-      const cells = this.element.querySelectorAll(`td[data-sticky-id="${colId}"]`);
+      const header = this.element.querySelector(`th[id="${colId}"]`);
+      const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
 
       if (header) {
         header.classList.add('sticky');
@@ -125,8 +125,8 @@ export default class PbTable extends PbEnhancedElement {
 
     this.stickyRightColumnsReversed.forEach((colId, index) => {
       const isLastColumn = index === this.stickyRightColumns.length - 1;
-      const header = this.element.querySelector(`th[data-sticky-id="${colId}"]`);
-      const cells = this.element.querySelectorAll(`td[data-sticky-id="${colId}"]`);
+      const header = this.element.querySelector(`th[id="${colId}"]`);
+      const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
 
       if (header) {
         header.classList.add('sticky');

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

@@ -4,10 +4,6 @@
       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,7 +9,6 @@ import {
   shift,
   useFloating,
   useHover,
-  useClick,
   useInteractions,
 } from "@floating-ui/react"
 
@@ -24,7 +23,6 @@ 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,
@@ -48,7 +46,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     aria = {},
     className,
     children,
-    useClickToOpen = false,
     data = {},
     delay = 0,
     height,
@@ -113,21 +110,14 @@ 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, getReferenceProps } = useInteractions([
-    hover,
-    click
+  const { getFloatingProps } = useInteractions([
+    useHover(context, {
+      delay,
+      handleClose: interaction ? safePolygon({
+        blockPointerEvents: false
+      }) : null
+    })
   ])
 
   const staticSide = {
@@ -152,24 +142,22 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
   return (
     <>
       <div
-          {...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;
-                }
+          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/example.yml

@@ -18,4 +18,3 @@ 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,4 +5,3 @@ 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'