playbook_ui 13.25.0 → 13.26.0.pre.alpha.PBNTR291Dropdownrailsv22840

Sign up to get free protection for your applications and to get access to all the features.
Files changed (130) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +14 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb +33 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +24 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +5 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -2
  8. data/app/pb_kits/playbook/pb_advanced_table/index.js +78 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +4 -2
  10. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +3 -2
  11. data/app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx +44 -0
  12. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +86 -21
  13. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +26 -3
  14. data/app/pb_kits/playbook/pb_avatar/avatar.rb +41 -0
  15. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +71 -0
  16. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +77 -0
  17. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +71 -0
  18. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +77 -0
  19. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +20 -0
  20. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +4 -0
  21. data/app/pb_kits/playbook/pb_avatar/docs/index.js +2 -0
  22. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +1 -1
  23. data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
  24. data/app/pb_kits/playbook/pb_button/_button.scss +1 -1
  25. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +49 -0
  26. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +3 -0
  27. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +2 -1
  28. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +14 -0
  29. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb +23 -0
  30. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx +29 -0
  31. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -0
  32. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  33. data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md +43 -0
  34. data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md +12 -0
  35. data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md +31 -0
  36. data/app/pb_kits/playbook/pb_currency/docs/example.yml +5 -0
  37. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +3 -1
  38. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -1
  39. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  40. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md +14 -0
  41. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md +9 -0
  42. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
  43. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +4 -2
  44. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +102 -35
  45. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +95 -26
  46. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
  47. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +4 -22
  48. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
  49. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +17 -0
  50. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +42 -0
  51. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +7 -0
  52. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +84 -0
  53. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md +1 -0
  54. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +101 -0
  55. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +1 -0
  56. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +60 -0
  57. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -4
  58. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +5 -0
  59. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +45 -0
  60. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +6 -9
  61. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -0
  62. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +17 -0
  63. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +48 -0
  64. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -0
  65. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +47 -0
  66. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -5
  67. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -0
  68. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +59 -0
  69. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +72 -0
  70. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +10 -0
  71. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +39 -0
  72. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -0
  73. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +16 -2
  74. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +7 -0
  75. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +26 -0
  76. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +20 -0
  77. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +200 -10
  78. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +21 -0
  79. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +19 -0
  80. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +27 -0
  81. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb +22 -0
  82. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +43 -0
  83. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +30 -0
  84. data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +2 -2
  85. data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +14 -9
  86. data/app/pb_kits/playbook/pb_dropdown/index.js +153 -0
  87. data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +77 -0
  88. data/app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss +18 -0
  89. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +22 -8
  90. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +60 -31
  91. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +130 -68
  92. data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx +41 -0
  93. data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts +2 -0
  94. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +9 -7
  95. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +3 -1
  96. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb +13 -0
  97. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx +26 -0
  98. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.html.erb → _loading_inline_default.html.erb} +2 -2
  99. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.jsx → _loading_inline_default.jsx} +2 -2
  100. data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +4 -2
  101. data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +2 -1
  102. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
  103. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +1 -0
  104. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js +14 -0
  105. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb +3 -0
  106. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +16 -0
  107. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md +1 -0
  108. data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
  109. data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +1 -0
  110. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +1 -1
  111. data/app/pb_kits/playbook/pb_radio/_radio.scss +35 -0
  112. data/app/pb_kits/playbook/pb_radio/_radio.tsx +3 -0
  113. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +4 -1
  114. data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +4 -1
  115. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb +26 -0
  116. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx +31 -0
  117. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +2 -1
  118. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
  119. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  120. data/app/pb_kits/playbook/pb_radio/radio.rb +5 -0
  121. data/app/pb_kits/playbook/pb_radio/radio.test.js +17 -0
  122. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +6 -2
  123. data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +11 -1
  124. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +1 -1
  125. data/app/pb_kits/playbook/playbook-rails.js +6 -0
  126. data/dist/menu.yml +1 -1
  127. data/dist/playbook-rails.js +6 -6
  128. data/lib/playbook/version.rb +2 -2
  129. metadata +65 -8
  130. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
@@ -0,0 +1,101 @@
1
+ import React, { useState } from 'react'
2
+ import { Dropdown, User, Badge, FlexItem, Avatar } from '../..'
3
+
4
+ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
5
+ const [selectedOption, setSelectedOption] = useState();
6
+
7
+ const options = [
8
+ {
9
+ label: "Jasper Furniss",
10
+ value: "Jasper Furniss",
11
+ territory: "PHL",
12
+ title: "Senior UX Engineer",
13
+ id: "jasper-furniss",
14
+ status: "Offline"
15
+ },
16
+ {
17
+ label: "Ramon Ruiz",
18
+ value: "Ramon Ruiz",
19
+ territory: "PHL",
20
+ title: "Senior UX Designer",
21
+ id: "ramon-ruiz",
22
+ status: "Away"
23
+ },
24
+ {
25
+ label: "Jason Cypret",
26
+ value: "Jason Cypret",
27
+ territory: "PHL",
28
+ title: "VP of User Experience",
29
+ id: "jason-cypret",
30
+ status: "Online"
31
+ },
32
+ {
33
+ label: "Courtney Long",
34
+ value: "Courtney Long",
35
+ territory: "PHL",
36
+ title: "UX Design Mentor",
37
+ id: "courtney-long",
38
+ status: "Online"
39
+ }
40
+ ];
41
+
42
+ const CustomDisplay = () => {
43
+ return (
44
+ <>
45
+ {
46
+ selectedOption && (
47
+ <Avatar
48
+ name={selectedOption.label}
49
+ size="xs"
50
+ />
51
+ )
52
+ }
53
+ </>
54
+ )
55
+ };
56
+
57
+ return (
58
+ <div>
59
+ <Dropdown autocomplete
60
+ onSelect={(selectedItem) => setSelectedOption(selectedItem)}
61
+ options={options}
62
+ {...props}
63
+ >
64
+ <Dropdown.Trigger customDisplay={<CustomDisplay/>} />
65
+ {options.map((option) => (
66
+ <Dropdown.Option key={option.id}
67
+ option={option}
68
+ >
69
+ <>
70
+ <FlexItem>
71
+ <User
72
+ align="left"
73
+ avatar
74
+ name={option.label}
75
+ orientation="horizontal"
76
+ territory={option.territory}
77
+ title={option.title}
78
+ />
79
+ </FlexItem>
80
+ <FlexItem>
81
+ <Badge
82
+ rounded
83
+ text={option.status}
84
+ variant={`${
85
+ option.status === "Offline"
86
+ ? "neutral"
87
+ : option.status === "Online"
88
+ ? "success"
89
+ : "warning"
90
+ }`}
91
+ />
92
+ </FlexItem>
93
+ </>
94
+ </Dropdown.Option>
95
+ ))}
96
+ </Dropdown>
97
+ </div>
98
+ )
99
+ }
100
+
101
+ export default DropdownWithAutocompleteAndCustomDisplay
@@ -0,0 +1 @@
1
+ `autocomplete` prop can also be used in conjunction with the `customDisplay` prop.
@@ -0,0 +1,60 @@
1
+ <%
2
+ options = [
3
+ {
4
+ label: "Jasper Furniss",
5
+ value: "Jasper Furniss",
6
+ territory: "PHL",
7
+ title: "Senior UX Engineer",
8
+ id: "jasper-furniss",
9
+ status: "Offline"
10
+ },
11
+ {
12
+ label: "Ramon Ruiz",
13
+ value: "Ramon Ruiz",
14
+ territory: "PHL",
15
+ title: "Senior UX Designer",
16
+ id: "ramon-ruiz",
17
+ status: "Away"
18
+ },
19
+ {
20
+ label: "Jason Cypret",
21
+ value: "Jason Cypret",
22
+ territory: "PHL",
23
+ title: "VP of User Experience",
24
+ id: "jason-cypret",
25
+ status: "Online"
26
+ },
27
+ {
28
+ label: "Courtney Long",
29
+ value: "Courtney Long",
30
+ territory: "PHL",
31
+ title: "UX Design Mentor",
32
+ id: "courtney-long",
33
+ status: "Online"
34
+ }
35
+ ]
36
+
37
+ %>
38
+
39
+ <%
40
+ custom_display = capture do
41
+ pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
42
+ end
43
+ %>
44
+
45
+
46
+ <%= pb_rails("dropdown", props: {options: options}) do %>
47
+ <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
48
+ <%= pb_rails("dropdown/dropdown_container") do %>
49
+ <% options.each do |option| %>
50
+ <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
51
+ <%= pb_rails("flex/flex_item") do %>
52
+ <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
53
+ <% end %>
54
+ <%= pb_rails("flex/flex_item") do %>
55
+ <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
56
+ <% end %>
57
+ <% end %>
58
+ <% end %>
59
+ <% end %>
60
+ <% end %>
@@ -17,7 +17,7 @@ const DropdownWithCustomDisplay = (props) => {
17
17
  label: "Ramon Ruiz",
18
18
  value: "Ramon Ruiz",
19
19
  territory: "PHL",
20
- title: "Senior UX Desinger",
20
+ title: "Senior UX Designer",
21
21
  id: "ramon-ruiz",
22
22
  status: "Away"
23
23
  },
@@ -39,7 +39,7 @@ const DropdownWithCustomDisplay = (props) => {
39
39
  }
40
40
  ];
41
41
 
42
- const customDisplay = () => {
42
+ const CustomDisplay = () => {
43
43
  return (
44
44
  <>
45
45
  {
@@ -62,7 +62,9 @@ const DropdownWithCustomDisplay = (props) => {
62
62
  options={options}
63
63
  {...props}
64
64
  >
65
- <Dropdown.Trigger customDisplay={customDisplay()}/>
65
+ <Dropdown.Trigger customDisplay={<CustomDisplay/>}
66
+ placeholder="Select a User"
67
+ />
66
68
  {options.map((option) => (
67
69
  <Dropdown.Option key={option.id}
68
70
  option={option}
@@ -79,7 +81,7 @@ const DropdownWithCustomDisplay = (props) => {
79
81
  />
80
82
  </FlexItem>
81
83
  <FlexItem>
82
- <Badge
84
+ <Badge dark
83
85
  rounded
84
86
  text={option.status}
85
87
  variant={`${
@@ -0,0 +1,5 @@
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
+
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`.
@@ -0,0 +1,45 @@
1
+ <%
2
+ options = [
3
+ {
4
+ label: "United States",
5
+ value: "United States",
6
+ areaCode: "+1",
7
+ icon: "🇺🇸",
8
+ id: "us"
9
+ },
10
+ {
11
+ label: "Canada",
12
+ value: "Canada",
13
+ areaCode: "+1",
14
+ icon: "🇨🇦",
15
+ id: "ca"
16
+ },
17
+ {
18
+ label: "Pakistan",
19
+ value: "Pakistan",
20
+ areaCode: "+92",
21
+ icon: "🇵🇰",
22
+ id: "pk"
23
+ }
24
+ ]
25
+
26
+ %>
27
+
28
+ <%= pb_rails("dropdown", props: {options: options}) do %>
29
+ <%= pb_rails("dropdown/dropdown_trigger") %>
30
+ <%= pb_rails("dropdown/dropdown_container") do %>
31
+ <% options.each do |option| %>
32
+ <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
33
+ <%= pb_rails("flex/flex_item") do %>
34
+ <%= pb_rails("flex") do %>
35
+ <%= pb_rails("icon", props: {icon: option[:icon]}) %>
36
+ <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
37
+ <% end %>
38
+ <% end %>
39
+ <%= pb_rails("flex/flex_item") do %>
40
+ <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
41
+ <% end %>
42
+ <% end %>
43
+ <% end %>
44
+ <% end %>
45
+ <% end %>
@@ -1,9 +1,7 @@
1
- import React, { useState } from 'react'
1
+ import React 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();
7
5
 
8
6
  const options = [
9
7
  {
@@ -14,11 +12,11 @@ const DropdownWithCustomOptions = (props) => {
14
12
  id: "United-states"
15
13
  },
16
14
  {
17
- label: "Ukraine",
18
- value: "Ukraine",
19
- areaCode: "+380",
20
- icon: "🇺🇦",
21
- id: "ukraine"
15
+ label: "Canada",
16
+ value: "Canada",
17
+ areaCode: "+1",
18
+ icon: "🇨🇦",
19
+ id: "canada"
22
20
  },
23
21
  {
24
22
  label: "Pakistan",
@@ -33,7 +31,6 @@ const DropdownWithCustomOptions = (props) => {
33
31
  return (
34
32
  <div>
35
33
  <Dropdown
36
- onSelect={(selectedItem) => setSelectedOption(selectedItem)}
37
34
  options={options}
38
35
  {...props}
39
36
  >
@@ -0,0 +1 @@
1
+ The Dropdown also allows for custom options that can be passed in as children to the `Dropdown.Option` subcomponent. If no children are passed to `Dropdown.Option`, the kit will render each option as text within a Body kit by default.
@@ -0,0 +1,17 @@
1
+ <%
2
+ options = [
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
+ ]
7
+
8
+ %>
9
+
10
+ <%= pb_rails("dropdown", props: {options: options}) do %>
11
+ <%= pb_rails("dropdown/dropdown_trigger") %>
12
+ <%= pb_rails("dropdown/dropdown_container") do %>
13
+ <% options.each do |option| %>
14
+ <%= pb_rails("dropdown/dropdown_option", props: {option: option, padding:"sm"}) %>
15
+ <% end %>
16
+ <% end %>
17
+ <% end %>
@@ -0,0 +1,48 @@
1
+ import React from 'react'
2
+ import { Dropdown } from '../..'
3
+
4
+ const DropdownWithCustomPadding = (props) => {
5
+
6
+ const options = [
7
+ {
8
+ label: "United States",
9
+ value: "United States",
10
+ areaCode: "+1",
11
+ icon: "🇺🇸",
12
+ id: "United-states"
13
+ },
14
+ {
15
+ label: "Canada",
16
+ value: "Canada",
17
+ areaCode: "+1",
18
+ icon: "🇨🇦",
19
+ id: "canada"
20
+ },
21
+ {
22
+ label: "Pakistan",
23
+ value: "Pakistan",
24
+ areaCode: "+92",
25
+ icon: "🇵🇰",
26
+ id: "pakistan"
27
+ }
28
+ ];
29
+
30
+
31
+ return (
32
+ <div>
33
+ <Dropdown
34
+ options={options}
35
+ {...props}
36
+ >
37
+ {options.map((option) => (
38
+ <Dropdown.Option key={option.id}
39
+ option={option}
40
+ padding="sm"
41
+ />
42
+ ))}
43
+ </Dropdown>
44
+ </div>
45
+ )
46
+ }
47
+
48
+ export default DropdownWithCustomPadding
@@ -0,0 +1 @@
1
+ By default, the padding on each option in the dropdown is set to `xs`. The `padding` Global Props however can be used to override this default. In this example, we are setting padding to `sm`.
@@ -0,0 +1,47 @@
1
+ <%
2
+ options = [
3
+ {
4
+ label: "United States",
5
+ value: "United States",
6
+ areaCode: "+1",
7
+ icon: "🇺🇸",
8
+ id: "us"
9
+ },
10
+ {
11
+ label: "Canada",
12
+ value: "Canada",
13
+ areaCode: "+1",
14
+ icon: "🇨🇦",
15
+ id: "ca"
16
+ },
17
+ {
18
+ label: "Pakistan",
19
+ value: "Pakistan",
20
+ areaCode: "+92",
21
+ icon: "🇵🇰",
22
+ id: "pk"
23
+ }
24
+ ]
25
+
26
+ %>
27
+
28
+ <%= pb_rails("dropdown", props: {options: options}) do %>
29
+ <%= pb_rails("dropdown/dropdown_trigger") do %>
30
+ <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
31
+ <% end %>
32
+ <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
33
+ <% options.each do |option| %>
34
+ <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
35
+ <%= pb_rails("flex/flex_item") do %>
36
+ <%= pb_rails("flex") do %>
37
+ <%= pb_rails("icon", props: {icon: option[:icon]}) %>
38
+ <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
39
+ <% end %>
40
+ <% end %>
41
+ <%= pb_rails("flex/flex_item") do %>
42
+ <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
43
+ <% end %>
44
+ <% end %>
45
+ <% end %>
46
+ <% end %>
47
+ <% end %>
@@ -14,11 +14,11 @@ const [selectedOption, setSelectedOption] = useState();
14
14
  id: "United-states"
15
15
  },
16
16
  {
17
- label: "Ukraine",
18
- value: "Ukraine",
19
- areaCode: "+380",
20
- icon: "🇺🇦",
21
- id: "ukraine"
17
+ label: "Canada",
18
+ value: "Canada",
19
+ areaCode: "+1",
20
+ icon: "🇨🇦",
21
+ id: "canada"
22
22
  },
23
23
  {
24
24
  label: "Pakistan",
@@ -0,0 +1 @@
1
+ The Dropdown can also be given a custom Trigger by passing children to the `Dropdown.Trigger` subcomponent as shown in this example. Here we are using the IconCircle kit.
@@ -0,0 +1,59 @@
1
+ import React from 'react'
2
+ import { Dropdown, useDropdown, Button } from '../../'
3
+
4
+ const DropdownWithExternalControl = (props) => {
5
+ const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
6
+
7
+ const options = [
8
+ {
9
+ label: "United States",
10
+ value: "United States",
11
+ areaCode: "+1",
12
+ icon: "🇺🇸",
13
+ id: "United-states"
14
+ },
15
+ {
16
+ label: "Canada",
17
+ value: "Canada",
18
+ areaCode: "+1",
19
+ icon: "🇨🇦",
20
+ id: "canada"
21
+ },
22
+ {
23
+ label: "Pakistan",
24
+ value: "Pakistan",
25
+ areaCode: "+92",
26
+ icon: "🇵🇰",
27
+ id: "pakistan"
28
+ }
29
+ ];
30
+
31
+ return (
32
+ <div>
33
+ <Button
34
+ data={{dropdown:'pb-dropdown-trigger'}}
35
+ marginBottom='sm'
36
+ onClick={() => setIsDropdownClosed(!isDropDownClosed)}
37
+ padding="none"
38
+ tabIndex={0}
39
+ variant="link"
40
+ >
41
+ {isDropDownClosed ? "Open Dropdown" : "Close Dropdown"}
42
+ </Button>
43
+
44
+ <Dropdown
45
+ isClosed={isDropDownClosed}
46
+ options={options}
47
+ {...props}
48
+ >
49
+ {options.map((option) => (
50
+ <Dropdown.Option key={option.id}
51
+ option={option}
52
+ />
53
+ ))}
54
+ </Dropdown>
55
+ </div>
56
+ )
57
+ }
58
+
59
+ export default DropdownWithExternalControl
@@ -0,0 +1,72 @@
1
+ import React, { useRef } from 'react'
2
+ import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex } from '../..'
3
+
4
+ const DropdownWithHook = (props) => {
5
+ const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
6
+ const buttonRef = useRef(null);
7
+
8
+ const options = [
9
+ {
10
+ label: "United States",
11
+ value: "United States",
12
+ areaCode: "+1",
13
+ icon: "🇺🇸",
14
+ id: "United-states"
15
+ },
16
+ {
17
+ label: "Canada",
18
+ value: "Canada",
19
+ areaCode: "+1",
20
+ icon: "🇨🇦",
21
+ id: "canada"
22
+ },
23
+ {
24
+ label: "Pakistan",
25
+ value: "Pakistan",
26
+ areaCode: "+92",
27
+ icon: "🇵🇰",
28
+ id: "pakistan"
29
+ }
30
+ ];
31
+
32
+ return (
33
+ <div>
34
+ <CircleIconButton
35
+ htmlOptions={{ref: buttonRef}}
36
+ icon={"flag"}
37
+ onClick={() => setIsDropdownClosed(!isDropDownClosed)}
38
+ variant="secondary"
39
+ />
40
+ <Dropdown
41
+ isClosed={isDropDownClosed}
42
+ options={options}
43
+ triggerRef={buttonRef}
44
+ {...props}
45
+ >
46
+ {options.map((option) => (
47
+ <Dropdown.Option key={option.id}
48
+ option={option}
49
+ >
50
+ <>
51
+ <FlexItem>
52
+ <Flex paddingRight='md'>
53
+ <Icon icon={option.icon}
54
+ paddingRight="xs"
55
+ />
56
+ <Body text={option.label} />
57
+ </Flex>
58
+ </FlexItem>
59
+ <FlexItem>
60
+ <Body color="light"
61
+ text={option.areaCode}
62
+ />
63
+ </FlexItem>
64
+ </>
65
+ </Dropdown.Option>
66
+ ))}
67
+ </Dropdown>
68
+ </div>
69
+ )
70
+ }
71
+
72
+ export default DropdownWithHook
@@ -0,0 +1,10 @@
1
+ <%
2
+ options = [
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
+ ]
7
+
8
+ %>
9
+
10
+ <%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>
@@ -0,0 +1,39 @@
1
+ import React from 'react'
2
+ import { Dropdown } from '../..'
3
+
4
+ const DropdownDefault = (props) => {
5
+
6
+ const options = [
7
+ {
8
+ label: "United States",
9
+ value: "United States",
10
+ },
11
+ {
12
+ label: "Canada",
13
+ value: "Canada",
14
+ },
15
+ {
16
+ label: "Pakistan",
17
+ value: "Pakistan",
18
+ }
19
+ ];
20
+
21
+
22
+ return (
23
+ <div>
24
+ <Dropdown
25
+ label="Select a Country"
26
+ options={options}
27
+ {...props}
28
+ >
29
+ {options.map((option) => (
30
+ <Dropdown.Option key={option.id}
31
+ option={option}
32
+ />
33
+ ))}
34
+ </Dropdown>
35
+ </div>
36
+ )
37
+ }
38
+
39
+ export default DropdownDefault
@@ -0,0 +1 @@
1
+ The optional `label` prop takes a string value that if present will render that string as the label for the Dropdown.
@@ -1,9 +1,23 @@
1
1
  examples:
2
-
3
-
2
+ rails:
3
+ - dropdown_default: Default
4
+ - dropdown_subcomponent_structure: Subcomponent Structure
5
+ - dropdown_with_label: With Label
6
+ - dropdown_with_custom_options: Custom Options
7
+ - dropdown_with_custom_display: Custom Display
8
+ - dropdown_with_custom_trigger: Custom Trigger
9
+ - dropdown_with_custom_padding: Custom Padding for Dropdown Options
10
+
4
11
  react:
5
12
  - dropdown_default: Default
13
+ - dropdown_subcomponent_structure: Subcomponent Structure
14
+ - dropdown_with_label: With Label
6
15
  - dropdown_with_custom_options: Custom Options
7
16
  - dropdown_with_custom_display: Custom Display
8
17
  - dropdown_with_custom_trigger: Custom Trigger
18
+ - dropdown_with_custom_padding: Custom Padding for Dropdown Options
19
+ # - dropdown_with_autocomplete: Autocomplete
20
+ # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
21
+ # - dropdown_with_external_control: useDropdown Hook
22
+ # - dropdown_with_hook: useDropdown Hook with Any Trigger
9
23
 
@@ -2,3 +2,10 @@ export { default as DropdownDefault } from './_dropdown_default.jsx'
2
2
  export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
3
3
  export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
4
4
  export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
5
+ export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
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'
11
+ export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'