playbook_ui 13.25.0.pre.alpha.barchartfix2766 → 13.26.0.pre.alpha.jasoncypretpatch12816

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) 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_button/_button_mixins.scss +1 -0
  23. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +49 -0
  24. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +3 -0
  25. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +2 -1
  26. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +14 -0
  27. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb +23 -0
  28. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx +29 -0
  29. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -0
  30. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  31. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +3 -1
  32. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -1
  33. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  34. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +92 -31
  35. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +60 -21
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +2 -20
  37. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
  38. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +42 -0
  39. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +7 -0
  40. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +1 -4
  41. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +0 -1
  42. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +1 -1
  43. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -1
  44. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +1 -4
  45. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
  46. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +1 -4
  47. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +59 -0
  48. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +72 -0
  49. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +39 -0
  50. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -0
  51. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -2
  52. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +5 -1
  53. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +200 -10
  54. data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +2 -2
  55. data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +4 -4
  56. data/app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss +18 -0
  57. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +17 -8
  58. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +25 -15
  59. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +96 -78
  60. data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx +41 -0
  61. data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts +2 -0
  62. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +9 -7
  63. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +3 -1
  64. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb +13 -0
  65. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx +26 -0
  66. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.html.erb → _loading_inline_default.html.erb} +2 -2
  67. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.jsx → _loading_inline_default.jsx} +2 -2
  68. data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +4 -2
  69. data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +2 -1
  70. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
  71. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +1 -0
  72. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js +14 -0
  73. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb +3 -0
  74. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +16 -0
  75. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md +1 -0
  76. data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
  77. data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +1 -0
  78. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +1 -1
  79. data/app/pb_kits/playbook/pb_radio/_radio.scss +35 -0
  80. data/app/pb_kits/playbook/pb_radio/_radio.tsx +3 -0
  81. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +4 -1
  82. data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +4 -1
  83. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb +26 -0
  84. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx +31 -0
  85. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +2 -1
  86. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
  87. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  88. data/app/pb_kits/playbook/pb_radio/radio.rb +5 -0
  89. data/app/pb_kits/playbook/pb_radio/radio.test.js +17 -0
  90. data/app/pb_kits/playbook/playbook-rails.js +3 -0
  91. data/dist/menu.yml +1 -1
  92. data/dist/playbook-rails.js +6 -6
  93. data/lib/playbook/version.rb +2 -2
  94. metadata +30 -5
  95. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
@@ -1,32 +1,38 @@
1
- import React, { useState, useRef, useEffect, ReactElement } from "react";
1
+ import React, { useState, useRef, useEffect } from "react";
2
2
  import classnames from "classnames";
3
3
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
4
4
  import { globalProps } from "../utilities/globalProps";
5
+ import { GenericObject } from "../types";
5
6
 
6
7
  import Body from "../pb_body/_body";
8
+ import Caption from "../pb_caption/_caption";
7
9
 
8
10
  import DropdownContainer from "./subcomponents/DropdownContainer";
11
+ import DropdownContext from "./context";
9
12
  import DropdownOption from "./subcomponents/DropdownOption";
10
13
  import DropdownTrigger from "./subcomponents/DropdownTrigger";
11
- import DropdownContext from "./context";
12
14
  import useDropdown from "./hooks/useDropdown";
13
15
 
14
16
  import {
15
17
  separateChildComponents,
16
18
  prepareSubcomponents,
17
- } from "./utilities/subComponentHelper";
18
- import { GenericObject } from "../types";
19
+ handleClickOutside,
20
+ } from "./utilities";
19
21
 
20
22
  type DropdownProps = {
21
23
  aria?: { [key: string]: string };
22
24
  autocomplete?: boolean;
25
+ children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
23
26
  className?: string;
27
+ dark?: boolean;
24
28
  data?: { [key: string]: string };
25
29
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
26
30
  id?: string;
27
- children?: React.ReactChild[] | React.ReactChild | ReactElement[];
28
- options: GenericObject;
31
+ isClosed?: boolean;
32
+ label?: string;
29
33
  onSelect?: (arg: GenericObject) => null;
34
+ options: GenericObject;
35
+ triggerRef?: any;
30
36
  };
31
37
 
32
38
  const Dropdown = (props: DropdownProps) => {
@@ -35,11 +41,15 @@ const Dropdown = (props: DropdownProps) => {
35
41
  autocomplete = false,
36
42
  children,
37
43
  className,
44
+ dark = false,
38
45
  data = {},
39
46
  htmlOptions = {},
40
47
  id,
41
- options,
48
+ isClosed = true,
49
+ label,
42
50
  onSelect,
51
+ options,
52
+ triggerRef
43
53
  } = props;
44
54
 
45
55
  const ariaProps = buildAriaProps(aria);
@@ -51,7 +61,7 @@ const Dropdown = (props: DropdownProps) => {
51
61
  className
52
62
  );
53
63
 
54
- const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown();
64
+ const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
55
65
 
56
66
  const [filterItem, setFilterItem] = useState("");
57
67
  const [selected, setSelected] = useState<GenericObject>({});
@@ -59,28 +69,38 @@ const Dropdown = (props: DropdownProps) => {
59
69
  const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
60
70
  const [hasContainerSubcomponent, setHasContainerSubcomponent] =
61
71
  useState(true);
62
-
63
72
  //state for keyboard events
64
73
  const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
65
74
 
66
75
  const dropdownRef = useRef(null);
67
76
  const inputRef = useRef(null);
77
+ const inputWrapperRef = useRef(null);
78
+ const dropdownContainerRef = useRef(null);
68
79
 
69
80
  const { trigger, container, otherChildren } =
70
81
  separateChildComponents(children);
71
82
 
72
- // useEffect to handle clicks outside the dropdown
73
83
  useEffect(() => {
74
- const handleClickOutside = (e: MouseEvent) => {
75
- if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
76
- setIsDropDownClosed(true);
77
- setFocusedOptionIndex(-1)
78
- setIsInputFocused(false);
84
+ // Set the parent element of the trigger to relative to allow for absolute positioning of the dropdown
85
+ //Only needed for when useDropdown hook used with external trigger
86
+ if (triggerRef?.current) {
87
+ const parentElement = triggerRef.current.parentNode;
88
+ if (parentElement) {
89
+ parentElement.style.position = 'relative';
79
90
  }
80
- };
81
- window.addEventListener("click", handleClickOutside);
91
+ }
92
+ // Handle clicks outside the dropdown
93
+ const handleClick = handleClickOutside({
94
+ inputWrapperRef,
95
+ dropdownContainerRef,
96
+ setIsDropDownClosed,
97
+ setFocusedOptionIndex,
98
+ setIsInputFocused,
99
+ });
100
+
101
+ window.addEventListener("click", handleClick);
82
102
  return () => {
83
- window.removeEventListener("click", handleClickOutside);
103
+ window.removeEventListener("click", handleClick);
84
104
  };
85
105
  }, []);
86
106
 
@@ -89,11 +109,16 @@ const Dropdown = (props: DropdownProps) => {
89
109
  setHasContainerSubcomponent(!!container);
90
110
  }, []);
91
111
 
112
+ // dropdown to toggle with external control
113
+ useEffect(()=> {
114
+ setIsDropDownClosed(isClosed)
115
+ },[isClosed])
92
116
 
93
117
  const filteredOptions = options?.filter((option: GenericObject) =>
94
118
  option.label.toLowerCase().includes(filterItem.toLowerCase())
95
119
  );
96
120
 
121
+ // For keyboard accessibility: Set focus within dropdown to selected item if it exists
97
122
  useEffect(() => {
98
123
  if (!isDropDownClosed) {
99
124
  let newIndex = 0;
@@ -107,6 +132,7 @@ const Dropdown = (props: DropdownProps) => {
107
132
  }
108
133
  }, [isDropDownClosed]);
109
134
 
135
+
110
136
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
111
137
  setFilterItem(e.target.value);
112
138
  setIsDropDownClosed(false);
@@ -116,7 +142,7 @@ const Dropdown = (props: DropdownProps) => {
116
142
  setSelected(selectedItem);
117
143
  setFilterItem("");
118
144
  setIsDropDownClosed(true);
119
- onSelect(selectedItem);
145
+ onSelect && onSelect(selectedItem);
120
146
  };
121
147
 
122
148
  const handleWrapperClick = () => {
@@ -126,7 +152,7 @@ const Dropdown = (props: DropdownProps) => {
126
152
 
127
153
  const handleBackspace = () => {
128
154
  setSelected({});
129
- onSelect(null);
155
+ onSelect && onSelect(null);
130
156
  setFocusedOptionIndex(-1);
131
157
  };
132
158
 
@@ -137,18 +163,22 @@ const Dropdown = (props: DropdownProps) => {
137
163
  trigger,
138
164
  container,
139
165
  otherChildren,
166
+ dark
140
167
  });
141
168
 
169
+
142
170
  return (
143
171
  <div {...ariaProps}
144
172
  {...dataProps}
145
173
  {...htmlProps}
146
174
  className={classes}
147
175
  id={id}
176
+ style={triggerRef ? { position: "absolute"} : { position: "relative"}}
148
177
  >
149
178
  <DropdownContext.Provider
150
179
  value={{
151
180
  autocomplete,
181
+ dropdownContainerRef,
152
182
  filteredOptions,
153
183
  filterItem,
154
184
  focusedOptionIndex,
@@ -157,6 +187,7 @@ const Dropdown = (props: DropdownProps) => {
157
187
  handleOptionClick,
158
188
  handleWrapperClick,
159
189
  inputRef,
190
+ inputWrapperRef,
160
191
  isDropDownClosed,
161
192
  isInputFocused,
162
193
  options,
@@ -166,8 +197,16 @@ const Dropdown = (props: DropdownProps) => {
166
197
  setIsInputFocused,
167
198
  setSelected,
168
199
  toggleDropdown,
200
+ triggerRef
169
201
  }}
170
202
  >
203
+ {label &&
204
+ <Caption
205
+ dark={dark}
206
+ marginBottom="xs"
207
+ text={label}
208
+ />
209
+ }
171
210
  <div className="dropdown_wrapper"
172
211
  onBlur={() => {
173
212
  // Debounce to delay the execution to prevent jumpiness in Focus state
@@ -204,7 +243,7 @@ const Dropdown = (props: DropdownProps) => {
204
243
  </div>
205
244
  </DropdownContext.Provider>
206
245
  </div>
207
- );
246
+ )
208
247
  };
209
248
 
210
249
  Dropdown.Option = DropdownOption;
@@ -1,31 +1,20 @@
1
- import React, { useState } from 'react'
1
+ import React 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();
7
5
 
8
6
  const options = [
9
7
  {
10
8
  label: "United States",
11
9
  value: "United States",
12
- areaCode: "+1",
13
- icon: "🇺🇸",
14
- id: "United-states"
15
10
  },
16
11
  {
17
12
  label: "Canada",
18
13
  value: "Canada",
19
- areaCode: "+1",
20
- icon: "🇨🇦",
21
- id: "canada"
22
14
  },
23
15
  {
24
16
  label: "Pakistan",
25
17
  value: "Pakistan",
26
- areaCode: "+92",
27
- icon: "🇵🇰",
28
- id: "pakistan"
29
18
  }
30
19
  ];
31
20
 
@@ -33,16 +22,9 @@ const [selectedOption, setSelectedOption] = useState();
33
22
  return (
34
23
  <div>
35
24
  <Dropdown
36
- onSelect={(selectedItem) => setSelectedOption(selectedItem)}
37
25
  options={options}
38
26
  {...props}
39
- >
40
- {options.map((option) => (
41
- <Dropdown.Option key={option.id}
42
- option={option}
43
- />
44
- ))}
45
- </Dropdown>
27
+ />
46
28
  </div>
47
29
  )
48
30
  }
@@ -0,0 +1 @@
1
+ The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.
@@ -0,0 +1,42 @@
1
+ import React from 'react'
2
+ import { Dropdown } from '../..'
3
+
4
+ const DropdownSubcomponentStructure = (props) => {
5
+
6
+
7
+ const options = [
8
+ {
9
+ label: "United States",
10
+ value: "United States",
11
+ },
12
+ {
13
+ label: "Canada",
14
+ value: "Canada",
15
+ },
16
+ {
17
+ label: "Pakistan",
18
+ value: "Pakistan",
19
+ }
20
+ ];
21
+
22
+
23
+ return (
24
+ <div>
25
+ <Dropdown
26
+ options={options}
27
+ {...props}
28
+ >
29
+ <Dropdown.Trigger/>
30
+ <Dropdown.Container>
31
+ {options.map((option) => (
32
+ <Dropdown.Option key={option.id}
33
+ option={option}
34
+ />
35
+ ))}
36
+ </Dropdown.Container>
37
+ </Dropdown>
38
+ </div>
39
+ )
40
+ }
41
+
42
+ export default DropdownSubcomponentStructure
@@ -0,0 +1,7 @@
1
+ The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
2
+
3
+ `Dropdown. Trigger`
4
+ `Dropdown.Container`
5
+ `Dropdown.Option`
6
+
7
+ See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props.
@@ -1,9 +1,7 @@
1
- import React, { useState } from 'react'
1
+ import React from 'react'
2
2
  import { Dropdown, User, Badge, FlexItem } from '../..'
3
3
 
4
4
  const DropdownWithAutocomplete = (props) => {
5
- // eslint-disable-next-line no-unused-vars
6
- const [selectedOption, setSelectedOption] = useState();
7
5
 
8
6
  const options = [
9
7
  {
@@ -44,7 +42,6 @@ const DropdownWithAutocomplete = (props) => {
44
42
  return (
45
43
  <div>
46
44
  <Dropdown autocomplete
47
- onSelect={(selectedItem) => setSelectedOption(selectedItem)}
48
45
  options={options}
49
46
  {...props}
50
47
  >
@@ -2,7 +2,6 @@ import React, { useState } from 'react'
2
2
  import { Dropdown, User, Badge, FlexItem, Avatar } from '../..'
3
3
 
4
4
  const DropdownWithAutocompleteAndCustomDisplay = (props) => {
5
- // eslint-disable-next-line no-unused-vars
6
5
  const [selectedOption, setSelectedOption] = useState();
7
6
 
8
7
  const options = [
@@ -81,7 +81,7 @@ const DropdownWithCustomDisplay = (props) => {
81
81
  />
82
82
  </FlexItem>
83
83
  <FlexItem>
84
- <Badge
84
+ <Badge dark
85
85
  rounded
86
86
  text={option.status}
87
87
  variant={`${
@@ -1,3 +1,5 @@
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.
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`.
@@ -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
  {
@@ -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
  >
@@ -1 +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 in the `Dropdown.Option`, the kit will render each option as text by default.
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.
@@ -1,9 +1,7 @@
1
- import React, { useState } from 'react'
1
+ import React 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();
7
5
 
8
6
  const options = [
9
7
  {
@@ -33,7 +31,6 @@ const [selectedOption, setSelectedOption] = useState();
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,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,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.
@@ -3,10 +3,14 @@ examples:
3
3
 
4
4
  react:
5
5
  - dropdown_default: Default
6
+ - dropdown_subcomponent_structure: Subcomponent Structure
7
+ - dropdown_with_label: With Label
6
8
  - dropdown_with_custom_options: Custom Options
7
9
  - dropdown_with_custom_display: Custom Display
8
10
  - dropdown_with_custom_trigger: Custom Trigger
9
- - dropdown_with_autocomplete: Autocomplete
10
- - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
11
11
  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
12
+ # - dropdown_with_autocomplete: Autocomplete
13
+ # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
14
+ # - dropdown_with_external_control: useDropdown Hook
15
+ # - dropdown_with_hook: useDropdown Hook with Any Trigger
12
16
 
@@ -4,4 +4,8 @@ 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'
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'