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

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

@@ -2,7 +2,7 @@
    options = [
     {
       label: "Jasper Furniss",
-      value: "Jasper Furniss",
+      value: "jasperFurniss",
       territory: "PHL",
       title: "Lead UX Engineer",
       id: "jasper-furniss",
@@ -10,7 +10,7 @@
     },
     {
       label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
+      value: "ramonRuiz",
       territory: "PHL",
       title: "Senior UX Designer",
       id: "ramon-ruiz",
@@ -18,7 +18,7 @@
     },
     {
       label: "Carlos Lima",
-      value: "Carlos Lima",
+      value: "carlosLima",
       territory: "PHL",
       title: "Nitro Developer",
       id: "carlos-lima",
@@ -26,7 +26,7 @@
     },
     {
       label: "Courtney Long",
-      value: "Courtney Long",
+      value: "courtneyLong",
       territory: "PHL",
       title: "Lead UX Designer",
       id: "courtney-long",

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

@@ -0,0 +1,52 @@
+<%
+  options = [
+    { label: "Item 1", value: "item-1", id: "1" },
+    { label: "Item 2", value: "item-2", id: "2" },
+    { label: "Item 3", value: "item-3", id: "3" }
+  ]
+%>
+
+<%= pb_rails("dropdown", props: { label: "Multiple Icons", options: options }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger") %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% options.each do |option| %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+          <%= pb_rails("flex") do %>
+            <%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
+            <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
+          <% end %>
+          <%= pb_rails("icon", props: { icon: "check" }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("dropdown", props: { label: "Icon on Left", options: options, padding_y: "md" }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger") %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% options.each do |option| %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center" }) do %>
+          <%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
+          <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("dropdown", props: { label: "Icon on Right", options: options }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger") %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% options.each do |option| %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+          <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
+          <%= pb_rails("icon", props: { icon: "check" }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,99 @@
+import React from 'react'
+import Dropdown from '../_dropdown'
+
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import Icon from '../../pb_icon/_icon'
+
+const DropdownCustomIconOptions = (props) => {
+
+  const options = [
+    { label: "Item 1", value: "item-1", id: "1" },
+    { label: "Item 2", value: "item-2", id: "2" },
+    { label: "Item 3", value: "item-3", id: "3" },
+  ]
+
+
+  return (
+  <div>
+      <Dropdown label="Multiple Icons"
+          options={options}
+          {...props}
+      >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <Flex align="center" 
+                justify="between"
+            >
+                <Flex align="center">
+                  <Icon icon="calendar" 
+                      paddingRight="xs"
+                      {...props}    
+                  />
+                  <Body color="default" 
+                      text={option.label}
+                      {...props}
+                  />
+                </Flex>
+                <Icon icon="check" 
+                    {...props}    
+                />
+            </Flex>
+          </Dropdown.Option>
+        ))}
+      </Dropdown>
+
+      <Dropdown label="Icon on Left"
+          options={options} 
+          paddingY="md"
+          {...props}
+      >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id}
+              option={option}
+          >
+            <Flex align="center">
+              <Icon icon="calendar" 
+                  paddingRight="xs"
+                  {...props}
+              />
+              <Body color="default" 
+                  text={option.label}
+                  {...props}
+              />
+            </Flex>
+          </Dropdown.Option>
+        ))}
+      </Dropdown>
+
+      <Dropdown label="Icon on Right"
+          options={options}
+          {...props}
+      >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id}
+              option={option}
+          >
+            <Flex align="center"
+                justify="between"
+            >
+              <Flex align="center">
+                <Body color="default" 
+                    text={option.label}
+                    {...props}
+                />
+              </Flex>
+              <Icon icon="check"
+                  {...props}
+              />
+            </Flex>
+          </Dropdown.Option>
+        ))}
+      </Dropdown>
+  </div>
+  )
+}
+
+export default  DropdownCustomIconOptions

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md

@@ -0,0 +1 @@
+Use the `dropdown/dropdown_option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md

@@ -0,0 +1 @@
+Use the `Dropdown.Option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text.

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

@@ -12,21 +12,21 @@ const DropdownWithCustomOptions = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       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_options_rails.html.erb

@@ -2,21 +2,21 @@
   options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       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_custom_padding.html.erb

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

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

@@ -6,21 +6,21 @@ const DropdownWithCustomPadding = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       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_radio_options.html.erb

@@ -0,0 +1,28 @@
+<%
+  options = [
+    { label: "Item 1", value: "item-1", id: "1" },
+    { label: "Item 2", value: "item-2", id: "2" },
+    { label: "Item 3", value: "item-3", id: "3" }
+  ]
+
+  selected_value = params[:selected_value]
+%>
+
+<%= pb_rails("dropdown", props: { label: "Choose Item", options: options }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger") %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% options.each do |option| %>
+      <% checked = (option[:value] == selected_value) %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center" }) do %>
+          <%= pb_rails("radio", props: {
+            text: option[:label],
+            name: "dropdown_radio",
+            value: option[:value],
+            checked: checked,
+          }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import Dropdown from '../_dropdown'
+
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import Radio from '../../pb_radio/_radio'
+
+const DropdownCustomRadioOptions = (props) => {
+  const [selectedValue, setSelectedValue] = useState(null)
+
+  const options = [
+    { label: "Item 1", value: "item-1", id: "1" },
+    { label: "Item 2", value: "item-2", id: "2" },
+    { label: "Item 3", value: "item-3", id: "3" },
+  ]
+
+
+  return (
+  <div>
+      <Dropdown
+          label="Select Item"
+          onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
+          options={options}
+          {...props}
+      >
+        {options.map((option) => {
+          return (
+            <Dropdown.Option key={option.id}
+                option={option}
+            >
+              <Flex align="center">
+                <Radio
+                    checked={selectedValue === option.value}
+                    name="dropdown_radio"
+                    value={option.value}
+                />
+                <Body text={option.label} />
+              </Flex>
+            </Dropdown.Option>
+          )
+        })}
+      </Dropdown>
+  </div>
+  )
+}
+
+export default  DropdownCustomRadioOptions

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md

@@ -0,0 +1 @@
+Radio inputs can be used inside `dropdown/dropdown_option` for a custom layout that mimics form-like selection within a dropdown.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md

@@ -0,0 +1 @@
+Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.

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

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: "United States",
+      value: "unitedStates",
       icon: "🇺🇸",
       id: "United-states"
 
     },
     {
       label: "United Kingdom",
-      value: "United Kingdom",
+      value: "unitedKingdom",
       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: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "United Kingdom",
-      value: "United Kingdom",
+      value: "unitedKingdom",
       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,6 +15,8 @@ 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
@@ -37,6 +39,8 @@ 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,4 +19,6 @@ 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 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'

data/app/pb_kits/playbook/pb_filter/filter.test.js

@@ -58,12 +58,12 @@ function FilterTest(props) {
 }
 
 test("triggers popover on filter button click", () => {
-  render(<FilterTest data={{ testid: "render-test" }}/>);
+  const { container } = render(<FilterTest data={{ testid: "render-test" }}/>);
 
   const btn = screen.getAllByRole("button")[0];
 
   // checks if the sort menu rendered
-  expect(screen.getByLabelText("sort-amount-down icon")).toBeInTheDocument()
+  expect(container.querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByText('Popularity')).toBeInTheDocument() // check if filter/sort is rendered 
 
   // hits the filter button and triggers popover

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -104,8 +104,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyLeftColumn.forEach((colId, index) => {
                 const isLastColumn = index === stickyLeftColumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');
@@ -155,8 +155,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyRightColumnReversed.forEach((colId, index) => {
                 const isLastColumn = index === stickyRightColumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');

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

@@ -11,7 +11,7 @@ const TableStickyColumns = () => {
         >
             <thead>
                 <tr>
-                    <th id="a">{'Column 1'}</th>
+                    <th data-sticky-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 id="b">{'Column 15'}</th>
+                    <th data-sticky-id="b">{'Column 15'}</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-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 id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-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 id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-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 id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
             </tbody>
         </Table>