playbook_ui 14.21.2 → 14.22.0.pre.alpha.PLAY2248railstooltipclicktoopen8667

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

@@ -10,56 +10,56 @@ const DropdownMultiSelectWithCustomOptions = (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"
     },
     {
       label: "India",
-      value: "India",
+      value: "india",
       areaCode: "+91",
       icon: "🇮🇳",
       id: "india"
     },
     {
       label: "Australia",
-      value: "Australia",
+      value: "australia",
       areaCode: "+61",
       icon: "🇦🇺",
       id: "australia"
     },
     {
       label: "New Zealand",
-      value: "New Zealand",
+      value: "newZealand",
       areaCode: "+64",
       icon: "🇳🇿",
       id: "new-zealand"
     },
     {
       label: "Italy",
-      value: "Italy",
+      value: "italy",
       areaCode: "+39",
       icon: "🇮🇹",
       id: "italy"
     },
     {
       label: "Spain",
-      value: "Spain",
+      value: "spain",
       areaCode: "+34",
       icon: "🇪🇸",
       id: "spain"

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

@@ -1,15 +1,15 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
+    { label: 'United States', value: 'unitedsStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'india', id: 'in' },
+    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
+    { label: 'Australia', value: 'australia', id: 'au' },
+    { label: 'New Zealand', value: 'newZealand', id: 'nz' },
+    { label: 'Germany', value: 'germany', id: 'de' },
+    { label: 'France', value: 'france', id: 'fr' },
+    { label: 'Italy', value: 'italy', id: 'it' },
   ]
 %>
 

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

@@ -5,50 +5,59 @@ const DropdownMultiSelectWithDefault = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "United Kingdom",
-      value: "United Kingdom",
-    },
+      value: "unitedKingdom",
+      id: "gb"
+    },  
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     },
     {
       label: "India",
-      value: "India",
+      value: "india",
+      id: "in"
     },
     {
       label: "Australia",
-      value: "Australia",
+      value: "australia",
+      id: "au"
     },
     {
       label: "New Zealand",
-      value: "New Zealand",
+      value: "new Zealand",
+      id: "nz"
     },
     {
       label: "Italy",
-      value: "Italy",
+      value: "italy",
+      id: "it"
     },
     {
       label: "Spain",
-      value: "Spain",
-    },
-  ];
+      value: "spain",
+      id: "es"
+    }
+  ];  
 
   const defaultSelectedOptions = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
     },
     {
       label: "Italy",
-      value: "Italy",
+      value: "italy",
     },
   ];
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.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_separators_hidden.jsx

@@ -6,15 +6,18 @@ const DropdownSeparatorsHidden = (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_subcomponent_structure.jsx

@@ -7,15 +7,18 @@ const DropdownSubcomponentStructure = (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_subcomponent_structure_rails.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_subtle_variant.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_subtle_variant.jsx

@@ -6,15 +6,18 @@ const DropdownSubtleVariant = (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_autocomplete.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/_dropdown_with_autocomplete.jsx

@@ -7,21 +7,21 @@ const DropdownWithAutocomplete = (props) => {
   const 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/_dropdown_with_autocomplete_with_subcomponents.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_autocomplete_with_subcomponents.jsx

@@ -11,7 +11,7 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
   const options = [
     {
       label: "Jasper Furniss",
-      value: "Jasper Furniss",
+      value: "jasperFurniss",
       territory: "PHL",
       title: "Lead UX Engineer",
       id: "jasper-furniss",
@@ -19,7 +19,7 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
     },
     {
       label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
+      value: "ramonRuiz",
       territory: "PHL",
       title: "Senior UX Designer",
       id: "ramon-ruiz",
@@ -27,7 +27,7 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
     },
     {
       label: "Carlos Lima",
-      value: "Carlos Lima",
+      value: "carlosLima",
       territory: "PHL",
       title: "Nitro Developer",
       id: "carlos-lima",
@@ -35,7 +35,7 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
     },
     {
       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_display.jsx

@@ -14,7 +14,7 @@ const DropdownWithCustomDisplay = (props) => {
   const options = [
     {
       label: "Jasper Furniss",
-      value: "Jasper Furniss",
+      value: "jasperFurniss",
       territory: "PHL",
       title: "Lead UX Engineer",
       id: "jasper-furniss",
@@ -22,7 +22,7 @@ const DropdownWithCustomDisplay = (props) => {
     },
     {
       label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
+      value: "ramonRuiz",
       territory: "PHL",
       title: "Senior UX Designer",
       id: "ramon-ruiz",
@@ -30,7 +30,7 @@ const DropdownWithCustomDisplay = (props) => {
     },
     {
       label: "Carlos Lima",
-      value: "Carlos Lima",
+      value: "carlosLima",
       territory: "PHL",
       title: "Nitro Developer",
       id: "carlos-lima",
@@ -38,7 +38,7 @@ const DropdownWithCustomDisplay = (props) => {
     },
     {
       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_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"