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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 753a6f2f7b01fdac359c30fa0690b8a8864bc1cfca6c6080612af234468de89a
4
- data.tar.gz: 9f82ae6b5501e21723c87914acd09d18fca85a2ae2c6600005f6f0edb5129c57
3
+ metadata.gz: b07b838aabd7b19f577118c1cbfb8de1d9c7c26b67f5bc697a74aac343904d3f
4
+ data.tar.gz: 59ac0f44d520597e6d321c7976a570fbfd091bc75658720e8c149cef39118e01
5
5
  SHA512:
6
- metadata.gz: 691c2efe2050ffd354f8f74bab421f572c11f1e6fe977a4347bc638af87f93003e1aaa7cba672fb0ab7bac2e8554187b9143cb5254f6586954f8af5295d81332
7
- data.tar.gz: 6523b43812ff33c699ccfc9c0383680fa78bbb58e68c7f68e7d069100160ba864d7ec50efc3539c838d92e748e5b5a31ceda22202d84103adc74c22cd1b4490a
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.
@@ -81,7 +81,7 @@ const DropdownWithCustomDisplay = (props) => {
81
81
  />
82
82
  </FlexItem>
83
83
  <FlexItem>
84
- <Badge dark
84
+ <Badge
85
85
  rounded
86
86
  text={option.status}
87
87
  variant={`${
@@ -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'