playbook_ui_docs 16.1.0.pre.alpha.HFH3979Applydepwarningfixtoplaybook13820 → 16.1.0.pre.alpha.PLAY2744dropdownquickpickpt113851
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_blank_selection_rails.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb +52 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx +72 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx +33 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md +8 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md +8 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb +9 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx +33 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +4 -1
- metadata +14 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b942a4975518f7b174fe75f98021690ce181d0a89ac5338903cc0e3a9b147bf7
|
|
4
|
+
data.tar.gz: bf4e2117d812d3d9842b876c8d9ee403522ecf3ab50ec05a4622587dee83e3e6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 61582c795df91633ccee14ca44ce83ee0a8b1a461486f92e843302638a77053482e6daf76a6e4b7ff7e4c47c88b3039d31ded1b47b42462e7ca2a1623ca8a63d
|
|
7
|
+
data.tar.gz: bcfe0ce40ddbba8c9bd899e64751d1b01bceb0b5ce8f8797af7ef8f36c3c19f159562791551935f3480dd427439efc20cff93af2d2340d7233fadb4e1a9a6c08
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
The `blank_selection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
|
|
2
|
+
|
|
3
|
+
The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
The `blankSelection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
|
|
2
|
+
|
|
3
|
+
The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
|
6
|
+
]
|
|
7
|
+
%>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("dropdown", props: {
|
|
10
|
+
id: "date-range-quickpick-reset-closeable",
|
|
11
|
+
label: "Quick Pick",
|
|
12
|
+
variant: "quickpick",
|
|
13
|
+
clearable: false
|
|
14
|
+
}) %>
|
|
15
|
+
|
|
16
|
+
<%= pb_rails("button", props: {
|
|
17
|
+
margin_y: "md",
|
|
18
|
+
text: "Reset",
|
|
19
|
+
html_options: {
|
|
20
|
+
onclick: "handleReset()"
|
|
21
|
+
}
|
|
22
|
+
}) %>
|
|
23
|
+
|
|
24
|
+
<%= pb_rails("dropdown", props: {
|
|
25
|
+
id: "closeable-default",
|
|
26
|
+
options: options,
|
|
27
|
+
clearable: false,
|
|
28
|
+
default_value: options.last,
|
|
29
|
+
margin_bottom: "md",
|
|
30
|
+
label: "Default"
|
|
31
|
+
}) %>
|
|
32
|
+
|
|
33
|
+
<%= pb_rails("dropdown", props: {
|
|
34
|
+
id: "closeable-subtle",
|
|
35
|
+
options: options,
|
|
36
|
+
clearable: false,
|
|
37
|
+
default_value: options.second,
|
|
38
|
+
variant: "subtle",
|
|
39
|
+
separators: false,
|
|
40
|
+
label: "Subtle"
|
|
41
|
+
}) %>
|
|
42
|
+
|
|
43
|
+
<script>
|
|
44
|
+
function handleReset() {
|
|
45
|
+
const dropdown = document.querySelector("#date-range-quickpick-reset-closeable[data-pb-dropdown]");
|
|
46
|
+
const instance = dropdown?._pbDropdownInstance;
|
|
47
|
+
|
|
48
|
+
if (instance) {
|
|
49
|
+
instance.clearSelection();
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
</script>
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React, { useRef } from 'react'
|
|
2
|
+
|
|
3
|
+
import Button from '../../pb_button/_button'
|
|
4
|
+
import Dropdown from '../../pb_dropdown/_dropdown'
|
|
5
|
+
|
|
6
|
+
const DropdownWithClearable = (props) => {
|
|
7
|
+
const dropdownRef = useRef(null)
|
|
8
|
+
|
|
9
|
+
const options = [
|
|
10
|
+
{
|
|
11
|
+
label: "United States",
|
|
12
|
+
value: "unitedStates",
|
|
13
|
+
id: "us"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
label: "Canada",
|
|
17
|
+
value: "canada",
|
|
18
|
+
id: "ca"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
label: "Pakistan",
|
|
22
|
+
value: "pakistan",
|
|
23
|
+
id: "pk"
|
|
24
|
+
}
|
|
25
|
+
]
|
|
26
|
+
|
|
27
|
+
const handleReset = () => {
|
|
28
|
+
if (dropdownRef.current) {
|
|
29
|
+
dropdownRef.current.clearSelected()
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<>
|
|
35
|
+
<Dropdown
|
|
36
|
+
clearable={false}
|
|
37
|
+
label="Quick Pick"
|
|
38
|
+
onSelect={() => {}}
|
|
39
|
+
ref={dropdownRef}
|
|
40
|
+
variant="quickpick"
|
|
41
|
+
{...props}
|
|
42
|
+
/>
|
|
43
|
+
<Button
|
|
44
|
+
marginY="md"
|
|
45
|
+
onClick={handleReset}
|
|
46
|
+
text="Reset"
|
|
47
|
+
/>
|
|
48
|
+
|
|
49
|
+
<Dropdown
|
|
50
|
+
clearable={false}
|
|
51
|
+
defaultValue={options[options.length - 1]}
|
|
52
|
+
label="Default"
|
|
53
|
+
marginBottom="md"
|
|
54
|
+
options={options}
|
|
55
|
+
variant="default"
|
|
56
|
+
{...props}
|
|
57
|
+
/>
|
|
58
|
+
|
|
59
|
+
<Dropdown
|
|
60
|
+
clearable={false}
|
|
61
|
+
defaultValue={options[1]}
|
|
62
|
+
label="Subtle"
|
|
63
|
+
options={options}
|
|
64
|
+
separators={false}
|
|
65
|
+
variant="subtle"
|
|
66
|
+
{...props}
|
|
67
|
+
/>
|
|
68
|
+
</>
|
|
69
|
+
)
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export default DropdownWithClearable
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The `clearable` prop controls whether the clear (X) button appears in the dropdown. When set to `false`, the clear button is hidden.
|
|
2
|
+
|
|
3
|
+
This is useful in two scenarios:
|
|
4
|
+
1. When you have a separate "Reset" or "Defaults" button that handles clearing the selection (as shown in the Quick Pick example)
|
|
5
|
+
2. When you don't want to provide any way to clear the selection (as shown in the Default and Subtle examples)
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Dropdown from '../../pb_dropdown/_dropdown'
|
|
3
|
+
|
|
4
|
+
const DropdownWithConstrainHeight = (props) => {
|
|
5
|
+
// Create a long list of options to demonstrate height constraint
|
|
6
|
+
const options = Array.from({ length: 30 }, (_, i) => ({
|
|
7
|
+
label: `Option ${i + 1}`,
|
|
8
|
+
value: `option_${i + 1}`,
|
|
9
|
+
id: `opt_${i + 1}`
|
|
10
|
+
}))
|
|
11
|
+
|
|
12
|
+
return (
|
|
13
|
+
<>
|
|
14
|
+
<Dropdown
|
|
15
|
+
data={{ testid: "dropdown-no-constrain" }}
|
|
16
|
+
label="Without Constrain Height (Default)"
|
|
17
|
+
marginBottom="md"
|
|
18
|
+
options={options}
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
<Dropdown
|
|
23
|
+
constrainHeight
|
|
24
|
+
data={{ testid: "dropdown-constrain" }}
|
|
25
|
+
label="With Constrain Height"
|
|
26
|
+
options={options}
|
|
27
|
+
{...props}
|
|
28
|
+
/>
|
|
29
|
+
</>
|
|
30
|
+
)
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export default DropdownWithConstrainHeight
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<%
|
|
2
|
+
# Create a long list of options to demonstrate height constraint
|
|
3
|
+
options = (1..30).map do |i|
|
|
4
|
+
{ label: "Option #{i}", value: "option_#{i}", id: "opt_#{i}" }
|
|
5
|
+
end
|
|
6
|
+
%>
|
|
7
|
+
|
|
8
|
+
<%= pb_rails("dropdown", props: {
|
|
9
|
+
id: "dropdown-no-constrain",
|
|
10
|
+
options: options,
|
|
11
|
+
label: "Without Constrain Height (Default)",
|
|
12
|
+
margin_bottom: "md"
|
|
13
|
+
}) %>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("dropdown", props: {
|
|
16
|
+
id: "dropdown-constrain",
|
|
17
|
+
options: options,
|
|
18
|
+
constrain_height: true,
|
|
19
|
+
label: "With Constrain Height"
|
|
20
|
+
}) %>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
The `constrain_height` prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
|
|
2
|
+
|
|
3
|
+
When `constrain_height` is `true`, the dropdown will:
|
|
4
|
+
- Have a maximum height of 18em
|
|
5
|
+
- Show a scrollbar when content exceeds the max height
|
|
6
|
+
- Prevent the dropdown from extending beyond the viewport
|
|
7
|
+
|
|
8
|
+
This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
The `constrainHeight` prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
|
|
2
|
+
|
|
3
|
+
When `constrainHeight` is `true`, the dropdown will:
|
|
4
|
+
- Have a maximum height of 18em
|
|
5
|
+
- Show a scrollbar when content exceeds the max height
|
|
6
|
+
- Prevent the dropdown from extending beyond the viewport
|
|
7
|
+
|
|
8
|
+
This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
|
6
|
+
]
|
|
7
|
+
%>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("dropdown", props: { options: options, placeholder: "Choose a country" }) %>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Dropdown from '../../pb_dropdown/_dropdown'
|
|
3
|
+
|
|
4
|
+
const DropdownWithPlaceholder = (props) => {
|
|
5
|
+
|
|
6
|
+
const options = [
|
|
7
|
+
{
|
|
8
|
+
label: "United States",
|
|
9
|
+
value: "unitedStates",
|
|
10
|
+
id: "us"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
label: "Canada",
|
|
14
|
+
value: "canada",
|
|
15
|
+
id: "ca"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: "Pakistan",
|
|
19
|
+
value: "pakistan",
|
|
20
|
+
id: "pk"
|
|
21
|
+
}
|
|
22
|
+
];
|
|
23
|
+
|
|
24
|
+
return (
|
|
25
|
+
<Dropdown
|
|
26
|
+
options={options}
|
|
27
|
+
placeholder="Choose a country"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
)
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export default DropdownWithPlaceholder
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
The `placeholder` prop allows you to customize the placeholder text that appears when no option is selected in the dropdown.
|
|
2
|
+
|
|
3
|
+
The placeholder prop works with all dropdown variants (`default`, `subtle`, and `quickpick`). When no option is selected, the placeholder text is displayed. When an option is selected, the placeholder is replaced by the selected option's label. The default placeholder text is "Select..." if no placeholder is provided.
|
|
@@ -21,7 +21,10 @@ examples:
|
|
|
21
21
|
- dropdown_default_value: Default Value
|
|
22
22
|
- dropdown_multi_select_with_default: Multi Select Default Value
|
|
23
23
|
- dropdown_blank_selection: Blank Selection
|
|
24
|
+
- dropdown_with_placeholder: Placeholder
|
|
24
25
|
- dropdown_separators_hidden: Separators Hidden
|
|
26
|
+
- dropdown_with_clearable: Clearable
|
|
27
|
+
- dropdown_with_constrain_height_rails: Constrain Height
|
|
25
28
|
- dropdown_quickpick_rails: Quick Pick Variant
|
|
26
29
|
- dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
|
|
27
30
|
- dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
|
|
@@ -52,7 +55,10 @@ examples:
|
|
|
52
55
|
- dropdown_default_value: Default Value
|
|
53
56
|
- dropdown_multi_select_with_default: Multi Select Default Value
|
|
54
57
|
- dropdown_blank_selection: Blank Selection
|
|
58
|
+
- dropdown_with_placeholder: Placeholder
|
|
55
59
|
- dropdown_clear_selection: Clear Selection
|
|
60
|
+
- dropdown_with_clearable: Clearable
|
|
61
|
+
- dropdown_with_constrain_height: Constrain Height
|
|
56
62
|
- dropdown_separators_hidden: Separators Hidden
|
|
57
63
|
- dropdown_with_external_control: useDropdown Hook
|
|
58
64
|
- dropdown_quickpick: Quick Pick Variant
|
|
@@ -11,6 +11,7 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
|
|
|
11
11
|
export { default as DropdownError } from './_dropdown_error.jsx'
|
|
12
12
|
export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
|
|
13
13
|
export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
|
|
14
|
+
export { default as DropdownWithPlaceholder } from './_dropdown_with_placeholder.jsx'
|
|
14
15
|
export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
|
|
15
16
|
export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
|
|
16
17
|
export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
|
|
@@ -27,4 +28,6 @@ export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
|
|
|
27
28
|
export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
|
|
28
29
|
export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
|
|
29
30
|
export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
|
|
30
|
-
export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
|
|
31
|
+
export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
|
|
32
|
+
export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'
|
|
33
|
+
export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 16.1.0.pre.alpha.
|
|
4
|
+
version: 16.1.0.pre.alpha.PLAY2744dropdownquickpickpt113851
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2026-01-
|
|
12
|
+
date: 2026-01-27 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -840,6 +840,8 @@ files:
|
|
|
840
840
|
- app/pb_kits/playbook/pb_draggable/docs/index.js
|
|
841
841
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
|
|
842
842
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
|
|
843
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md
|
|
844
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md
|
|
843
845
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
|
|
844
846
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
|
|
845
847
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
|
|
@@ -901,6 +903,13 @@ files:
|
|
|
901
903
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
|
|
902
904
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
|
|
903
905
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
|
|
906
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb
|
|
907
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx
|
|
908
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md
|
|
909
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx
|
|
910
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb
|
|
911
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md
|
|
912
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md
|
|
904
913
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx
|
|
905
914
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md
|
|
906
915
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
|
|
@@ -931,6 +940,9 @@ files:
|
|
|
931
940
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
|
|
932
941
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
|
|
933
942
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
|
|
943
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb
|
|
944
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx
|
|
945
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md
|
|
934
946
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx
|
|
935
947
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md
|
|
936
948
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb
|