playbook_ui 14.21.2.pre.alpha.PLAY2179playbookiconsupdate8389 → 14.21.2.pre.alpha.PLAY2233removetreemapchart8408

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_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 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>
@@ -15,12 +15,12 @@
       <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>
@@ -34,10 +34,10 @@
       <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>
@@ -51,10 +51,10 @@
       <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>
@@ -68,7 +68,7 @@
       <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>
 <% 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 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.html.erb

@@ -1,9 +1,9 @@
 <%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
   <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>
@@ -20,9 +20,9 @@
   </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>
@@ -38,9 +38,9 @@
 
     </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>
@@ -56,9 +56,9 @@
 
     </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_rails.md

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

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 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>
@@ -32,9 +32,9 @@
       <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>
@@ -49,9 +49,9 @@
       <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>
@@ -66,9 +66,9 @@
       <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>
 <% 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 ids you want to be sticky. Make sure to add the corresponding 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 `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-id` to the `<th>` and `<td>`.
 
-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.
+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.

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[id="${colId}"]`);
-      const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
+      const header = this.element.querySelector(`th[data-sticky-id="${colId}"]`);
+      const cells = this.element.querySelectorAll(`td[data-sticky-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[id="${colId}"]`);
-      const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
+      const header = this.element.querySelector(`th[data-sticky-id="${colId}"]`);
+      const cells = this.element.querySelectorAll(`td[data-sticky-id="${colId}"]`);
 
       if (header) {
         header.classList.add('sticky');

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 {