playbook_ui_docs 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769 β 13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2783
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +13 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +1 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +4 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +4 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -4
- data/dist/playbook-doc.js +7 -7
- metadata +2 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +0 -62
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -75
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +0 -39
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b07b838aabd7b19f577118c1cbfb8de1d9c7c26b67f5bc697a74aac343904d3f
|
4
|
+
data.tar.gz: 59ac0f44d520597e6d321c7976a570fbfd091bc75658720e8c149cef39118e01
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4c19279fda183a6c4f8e7561feec01930dd9fc215f5fbb744dd3ebc37009e091299e5c834c6b75e073f2b7551a81fc5f74f9bb8192fb17c50f873e43f1e63c76
|
7
|
+
data.tar.gz: ed187a5f2790a74e6b2604f80f63d2960b5b9fd12df44e35ec6506bab02ec5ab4590cd960aad0b8351787c18e31296ce0d65c09124f5e30261565f73fb515605
|
@@ -1,20 +1,31 @@
|
|
1
|
-
import React from 'react'
|
1
|
+
import React, { useState } from 'react'
|
2
2
|
import { Dropdown } from '../../'
|
3
3
|
|
4
4
|
const DropdownDefault = (props) => {
|
5
|
+
// eslint-disable-next-line no-unused-vars
|
6
|
+
const [selectedOption, setSelectedOption] = useState();
|
5
7
|
|
6
8
|
const options = [
|
7
9
|
{
|
8
10
|
label: "United States",
|
9
11
|
value: "United States",
|
12
|
+
areaCode: "+1",
|
13
|
+
icon: "πΊπΈ",
|
14
|
+
id: "United-states"
|
10
15
|
},
|
11
16
|
{
|
12
17
|
label: "Canada",
|
13
18
|
value: "Canada",
|
19
|
+
areaCode: "+1",
|
20
|
+
icon: "π¨π¦",
|
21
|
+
id: "canada"
|
14
22
|
},
|
15
23
|
{
|
16
24
|
label: "Pakistan",
|
17
25
|
value: "Pakistan",
|
26
|
+
areaCode: "+92",
|
27
|
+
icon: "π΅π°",
|
28
|
+
id: "pakistan"
|
18
29
|
}
|
19
30
|
];
|
20
31
|
|
@@ -22,6 +33,7 @@ const DropdownDefault = (props) => {
|
|
22
33
|
return (
|
23
34
|
<div>
|
24
35
|
<Dropdown
|
36
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
25
37
|
options={options}
|
26
38
|
{...props}
|
27
39
|
>
|
@@ -1 +0,0 @@
|
|
1
|
-
`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.
|
@@ -1,5 +1,3 @@
|
|
1
1
|
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.
|
2
2
|
|
3
|
-
The `placeholder` prop can also be used to customize the placeholder text for the default Trigger.
|
4
|
-
|
5
|
-
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`.
|
3
|
+
The `placeholder` prop can also be used to customize the placeholder text for the default Trigger.
|
@@ -1,7 +1,9 @@
|
|
1
|
-
import React from 'react'
|
1
|
+
import React, { useState } from 'react'
|
2
2
|
import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
|
3
3
|
|
4
4
|
const DropdownWithCustomOptions = (props) => {
|
5
|
+
// eslint-disable-next-line no-unused-vars
|
6
|
+
const [selectedOption, setSelectedOption] = useState();
|
5
7
|
|
6
8
|
const options = [
|
7
9
|
{
|
@@ -31,6 +33,7 @@ const DropdownWithCustomOptions = (props) => {
|
|
31
33
|
return (
|
32
34
|
<div>
|
33
35
|
<Dropdown
|
36
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
34
37
|
options={options}
|
35
38
|
{...props}
|
36
39
|
>
|
@@ -1,7 +1,9 @@
|
|
1
|
-
import React from 'react'
|
1
|
+
import React, { useState } from 'react'
|
2
2
|
import { Dropdown } from '../..'
|
3
3
|
|
4
4
|
const DropdownWithCustomPadding = (props) => {
|
5
|
+
// eslint-disable-next-line no-unused-vars
|
6
|
+
const [selectedOption, setSelectedOption] = useState();
|
5
7
|
|
6
8
|
const options = [
|
7
9
|
{
|
@@ -31,6 +33,7 @@ const DropdownWithCustomPadding = (props) => {
|
|
31
33
|
return (
|
32
34
|
<div>
|
33
35
|
<Dropdown
|
36
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
34
37
|
options={options}
|
35
38
|
{...props}
|
36
39
|
>
|
@@ -3,13 +3,10 @@ examples:
|
|
3
3
|
|
4
4
|
react:
|
5
5
|
- dropdown_default: Default
|
6
|
-
- dropdown_with_label: With Label
|
7
6
|
- dropdown_with_custom_options: Custom Options
|
8
7
|
- dropdown_with_custom_display: Custom Display
|
9
8
|
- dropdown_with_custom_trigger: Custom Trigger
|
9
|
+
- dropdown_with_autocomplete: Autocomplete
|
10
|
+
- dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
|
10
11
|
- dropdown_with_custom_padding: Custom Padding for Dropdown Options
|
11
|
-
# - dropdown_with_autocomplete: Autocomplete
|
12
|
-
# - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
|
13
|
-
# - dropdown_with_external_control: useDropdown Hook
|
14
|
-
# - dropdown_with_hook: useDropdown Hook with Any Trigger
|
15
12
|
|
@@ -4,7 +4,4 @@ export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_op
|
|
4
4
|
export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
|
5
5
|
export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
|
6
6
|
export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
|
7
|
-
export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
|
8
|
-
export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
|
9
|
-
export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
|
10
|
-
export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
|
7
|
+
export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
|