playbook_ui_docs 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769 → 13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2783

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 753a6f2f7b01fdac359c30fa0690b8a8864bc1cfca6c6080612af234468de89a
-  data.tar.gz: 9f82ae6b5501e21723c87914acd09d18fca85a2ae2c6600005f6f0edb5129c57
+  metadata.gz: b07b838aabd7b19f577118c1cbfb8de1d9c7c26b67f5bc697a74aac343904d3f
+  data.tar.gz: 59ac0f44d520597e6d321c7976a570fbfd091bc75658720e8c149cef39118e01
 SHA512:
-  metadata.gz: 691c2efe2050ffd354f8f74bab421f572c11f1e6fe977a4347bc638af87f93003e1aaa7cba672fb0ab7bac2e8554187b9143cb5254f6586954f8af5295d81332
-  data.tar.gz: 6523b43812ff33c699ccfc9c0383680fa78bbb58e68c7f68e7d069100160ba864d7ec50efc3539c838d92e748e5b5a31ceda22202d84103adc74c22cd1b4490a
+  metadata.gz: 4c19279fda183a6c4f8e7561feec01930dd9fc215f5fbb744dd3ebc37009e091299e5c834c6b75e073f2b7551a81fc5f74f9bb8192fb17c50f873e43f1e63c76
+  data.tar.gz: ed187a5f2790a74e6b2604f80f63d2960b5b9fd12df44e35ec6506bab02ec5ab4590cd960aad0b8351787c18e31296ce0d65c09124f5e30261565f73fb515605

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

@@ -1,20 +1,31 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Dropdown } from '../../'
 
 const DropdownDefault = (props) => {
+// eslint-disable-next-line no-unused-vars
+const [selectedOption, setSelectedOption] = useState();
 
   const options = [
     {
       label: "United States",
       value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "United-states"
     },
     {
       label: "Canada",
       value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "canada"
     },
     {
       label: "Pakistan",
       value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
     }
   ];  
 
@@ -22,6 +33,7 @@ const DropdownDefault = (props) => {
   return (
   <div>
     <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >

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

@@ -1 +0,0 @@
-`options` for the Dropdown and `option` for the Dropdown.Option are the only required props for this kit. `options` must be an array of objects. Each object can contain any key/value pairs needed but 'label' and 'value' are required.

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

@@ -81,7 +81,7 @@ const DropdownWithCustomDisplay = (props) => {
                 />
               </FlexItem>
               <FlexItem>
-                <Badge dark
+                <Badge
                     rounded
                     text={option.status}
                     variant={`${

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

@@ -1,5 +1,3 @@
 The `customDisplay` prop can be used to customize the display of the selected item by allowing devs to pass in a component that will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
 
-The `placeholder` prop can also be used to customize the placeholder text for the default Trigger. 
-
-The `onSelect` prop is a function that gives the dev one argument: the selected option. In this example we are using the    `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.
+The `placeholder` prop can also be used to customize the placeholder text for the default Trigger. 

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

@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
 
 const DropdownWithCustomOptions = (props) => {
+// eslint-disable-next-line no-unused-vars
+  const [selectedOption, setSelectedOption] = useState();
 
   const options = [
     {
@@ -31,6 +33,7 @@ const DropdownWithCustomOptions = (props) => {
   return (
   <div>
     <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >

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

@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Dropdown } from '../..'
 
 const DropdownWithCustomPadding = (props) => {
+// eslint-disable-next-line no-unused-vars
+const [selectedOption, setSelectedOption] = useState();
 
   const options = [
     {
@@ -31,6 +33,7 @@ const DropdownWithCustomPadding = (props) => {
   return (
   <div>
     <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >

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

@@ -3,13 +3,10 @@ examples:
   
   react:
   - dropdown_default: Default
-  - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
+  - dropdown_with_autocomplete: Autocomplete
+  - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   - dropdown_with_custom_padding: Custom Padding for Dropdown Options
-  # - dropdown_with_autocomplete: Autocomplete
-  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
-  # - dropdown_with_external_control: useDropdown Hook
-  # - dropdown_with_hook: useDropdown Hook with Any Trigger
 

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

@@ -4,7 +4,4 @@ export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_op
 export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
 export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
 export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
-export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
-export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
-export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
-export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
+export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'