playbook_ui 14.21.2.pre.alpha.PLAY2005useClickpropreact8411 → 14.21.2.pre.alpha.PLAY2018verticalBordertableheaderborders8316

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx

@@ -14,21 +14,21 @@ const [selectedOption, setSelectedOption] = useState();
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
+      value: "United States",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "United-states"
     },
     {
       label: "Canada",
-      value: "canada",
+      value: "Canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "canada"
     },
     {
       label: "Pakistan",
-      value: "pakistan",
+      value: "Pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pakistan"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb

@@ -2,21 +2,21 @@
   options = [
     {
       label: "United States",
-      value: "unitedStates",
+      value: "United States",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "Canada",
-      value: "canada",
+      value: "Canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "ca"
     },
     {
       label: "Pakistan",
-      value: "pakistan",
+      value: "Pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pk"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx

@@ -11,21 +11,21 @@ const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
+      value: "United States",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "United-states"
     },
     {
       label: "Canada",
-      value: "canada",
+      value: "Canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "canada"
     },
     {
       label: "Pakistan",
-      value: "pakistan",
+      value: "Pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pakistan"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx

@@ -6,18 +6,15 @@ const DropdownDefault = (props) => {
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
-      id: "us"
+      value: "United States",
     },
     {
       label: "Canada",
-      value: "canada",
-      id: "ca"
+      value: "Canada",
     },
     {
       label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
+      value: "Pakistan",
     }
   ];  
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx

@@ -8,20 +8,20 @@ const [selectedOption, setSelectedOption] = useState();
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
+      value: "United States",
       icon: "🇺🇸",
       id: "United-states"
 
     },
     {
       label: "United Kingdom",
-      value: "unitedKingdom",
+      value: "United Kingdom",
       icon: "🇬🇧",
       id: "united-kingdom"
     },
     {
       label: "Pakistan",
-      value: "pakistan",
+      value: "Pakistan",
       icon: "🇵🇰",
       id: "pakistan"
     }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb

@@ -2,21 +2,21 @@
   options = [
     {
       label: "United States",
-      value: "unitedStates",
+      value: "United States",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "United Kingdom",
-      value: "unitedKingdom",
+      value: "United Kingdom",
       areaCode: "+44",
       icon: "🇬🇧",
       id: "gb"
     },
     {
       label: "Pakistan",
-      value: "pakistan",
+      value: "Pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pk"

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

@@ -15,8 +15,6 @@ examples:
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
-  - dropdown_with_custom_icon_options: Custom Icon Options
-  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
@@ -39,8 +37,6 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
-  - dropdown_with_custom_icon_options: Custom Icon Options
-  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value

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

@@ -19,6 +19,4 @@ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
 export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
 export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
-export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
-export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
-export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
+export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'

data/app/pb_kits/playbook/pb_filter/Filter/index.tsx

@@ -1,29 +1,18 @@
 import React from 'react'
 import FilterSingle, { FilterSingleProps } from './FilterSingle'
 import FilterDouble, { FilterDoubleProps } from './FilterDouble'
-import FilterSidebar, { FilterSidebarProps } from './FilterSidebar'
-import FilterSection from './FilterSection'
 
 type FilterProps =
   | FilterSingleProps
   | (FilterDoubleProps & {
       double?: boolean,
     })
-  | (FilterSidebarProps & {
-    variant?: null | 'sidebar',
-  })
 
 const Filter = ({
   double = false,
-  variant,
   ...templateProps
   }: FilterProps): React.ReactElement => {
   const displayFilter = () => {
-    if (variant === 'sidebar') {
-      return (
-        <FilterSidebar {...templateProps} />
-      )
-    }
     if (double === true) {
       return (
         <FilterDouble {...templateProps} />
@@ -41,6 +30,4 @@ const Filter = ({
   )
 }
 
-Filter.Section = FilterSection
-
 export default Filter

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -88,10 +88,6 @@
     z-index: 1;
   }
 
-  [class^=pb_collapsible_kit] .toggle-content.filter_section_collapsible {
-    padding-top: $space_xs !important;
-  }
-
   &[class*=dark] {
     .filters .filter {
     border-right: 1px solid $border_dark !important;

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

@@ -24,5 +24,4 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
-  - filter_sidebar: Sidebar
 

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

@@ -8,4 +8,3 @@ export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
 export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
-export { default as FilterSidebar } from './_filter_sidebar.jsx'

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

@@ -1,7 +1,7 @@
 <%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["a"], sticky_right_column: ["b"] }) do %>
   <thead>
     <tr>
-      <th data-sticky-id="a">Column 1</th>
+      <th id="a">Column 1</th>
       <th>Column 2</th>
       <th>Column 3</th>
       <th>Column 4</th>
@@ -15,12 +15,12 @@
       <th>Column 12</th>
       <th>Column 13</th>
       <th>Column 14</th>
-      <th data-sticky-id="b">Column 15</th>
+      <th id="b">Column 15</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td data-sticky-id="a">Value 1</td>
+      <td id="a">Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
@@ -34,10 +34,10 @@
       <td>Value 12</td>
       <td>Value 13</td>
       <td>Value 14</td>
-      <td data-sticky-id="b">Value 15</td>
+      <td id="b">Value 15</td>
     </tr>
     <tr>
-      <td data-sticky-id="a">Value 1</td>
+      <td id="a">Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
@@ -51,10 +51,10 @@
       <td>Value 12</td>
       <td>Value 13</td>
       <td>Value 14</td>
-      <td data-sticky-id="b">Value 15</td>
+      <td id="b">Value 15</td>
     </tr>
     <tr>
-      <td data-sticky-id="a">Value 1</td>
+      <td id="a">Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
@@ -68,7 +68,7 @@
       <td>Value 12</td>
       <td>Value 13</td>
       <td>Value 14</td>
-      <td data-sticky-id="b">Value 15</td>
+      <td id="b">Value 15</td>
     </tr>
   </tbody>
 <% end %>

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

@@ -1,3 +1,3 @@
 The `sticky_left_column` and `sticky_right_column` props can be used together on the same table as needed.
 
-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.
+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.

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

@@ -1,9 +1,9 @@
 <%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
   <thead>
     <tr>
-      <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 id="1">Column 1</th>
+      <th id="2">Column 2</th>
+      <th id="3">Column 3</th>
       <th>Column 4</th>
       <th>Column 5</th>
       <th>Column 6</th>
@@ -20,9 +20,9 @@
   </thead>
   <tbody>
     <tr>
-      <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 id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
       <td>Value 6</td>
@@ -38,9 +38,9 @@
 
     </tr>
     <tr>
-      <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 id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
       <td>Value 6</td>
@@ -56,9 +56,9 @@
 
     </tr>
     <tr>
-      <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 id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td 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_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_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_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/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,7 +4,7 @@
       border-right: 1px solid $border_light !important;
     }
 
-    thead tr:not(:first-child) th {
+    thead tr:last-child th {
       border-right: 1px solid $border_light !important;
     }
     

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'