playbook_ui_docs 14.21.2.pre.alpha.PLAY2256stickydataidreact8446 → 14.21.2.pre.alpha.PLAY18938263

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/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.jsx

@@ -11,7 +11,7 @@ const TableStickyColumns = () => {
         >
             <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>
@@ -25,12 +25,12 @@ const TableStickyColumns = () => {
                     <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>
@@ -44,10 +44,10 @@ const TableStickyColumns = () => {
                     <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>
@@ -61,10 +61,10 @@ const TableStickyColumns = () => {
                     <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>
@@ -78,7 +78,7 @@ const TableStickyColumns = () => {
                     <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>
         </Table>

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_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 `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.jsx

@@ -10,9 +10,9 @@ const TableStickyLeftColumns = () => {
         >
             <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>
@@ -29,9 +29,9 @@ const TableStickyLeftColumns = () => {
             </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>
@@ -46,9 +46,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </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>
@@ -63,9 +63,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </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_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_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'