playbook_ui_docs 16.11.0.pre.alpha.iconkithardensvgsourceloading17727 → 16.11.0.pre.alpha.typeaheadsmartreset17862
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_grouped_options.html.erb +67 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.jsx +95 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_playground.json +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_playground.overrides.json +3 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +7 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +11 -1
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 907ecfedd423fc2202b824bb4ed575dc314d027c6eeb73e91101a5cba7d9013d
|
|
4
|
+
data.tar.gz: 615ee556361bc66633e57dc087ec159f828dd48eb5cb6d0eead39eeecfbbce69
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 695382c0ad5e0dc09ba6fd40809e07d78d0a6b955a0271abea196c51d260fb088d8ef5310a32ce4c53fd318b4b21c02d980aaac6f7d7e306820927e8a4d35e50
|
|
7
|
+
data.tar.gz: 6e7f9aa7b309c4ef093c96a66b5aa4957c957f1efafc867e8d9de497b6eb3344451c11424249cd7389ed57416f35f945dece3d638213c8b320932c15c66a0002
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<%
|
|
2
|
+
sections = [
|
|
3
|
+
{
|
|
4
|
+
title: "Profile",
|
|
5
|
+
items: [
|
|
6
|
+
{ label: "View Profile", value: "profile", id: "profile" },
|
|
7
|
+
{ label: "Account Settings", value: "settings", id: "settings" },
|
|
8
|
+
],
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
title: "Workspace",
|
|
12
|
+
items: [
|
|
13
|
+
{ label: "Projects", value: "projects", id: "projects" },
|
|
14
|
+
{ label: "Billing", value: "billing", id: "billing" },
|
|
15
|
+
],
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
title: "Support",
|
|
19
|
+
items: [
|
|
20
|
+
{ label: "Help Center", value: "help", id: "help" },
|
|
21
|
+
{ label: "Contact Support", value: "contact", id: "contact" },
|
|
22
|
+
],
|
|
23
|
+
},
|
|
24
|
+
]
|
|
25
|
+
|
|
26
|
+
options = sections.flat_map { |section| section[:items] }
|
|
27
|
+
%>
|
|
28
|
+
|
|
29
|
+
<%= pb_rails("dropdown", props: { label: "Grouped Options", margin_bottom: "md", options: options }) do %>
|
|
30
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
31
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
32
|
+
<% sections.each do |section| %>
|
|
33
|
+
|
|
34
|
+
<%= pb_rails("caption", props: {
|
|
35
|
+
text: section[:title],
|
|
36
|
+
color: "light",
|
|
37
|
+
padding_x: "xs",
|
|
38
|
+
padding_y: "xs"
|
|
39
|
+
}) %>
|
|
40
|
+
|
|
41
|
+
<%= pb_rails("section_separator") %>
|
|
42
|
+
|
|
43
|
+
<% section[:items].each do |option| %>
|
|
44
|
+
<%= pb_rails("dropdown/dropdown_option", props: { option: option }) %>
|
|
45
|
+
<% end %>
|
|
46
|
+
|
|
47
|
+
<% end %>
|
|
48
|
+
<% end %>
|
|
49
|
+
<% end %>
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
<%= pb_rails("dropdown", props: { label: "Grouped Options Minimalist", options: options, separators: false }) do %>
|
|
53
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
54
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
55
|
+
<% sections.each do |section| %>
|
|
56
|
+
|
|
57
|
+
<%= pb_rails("section_separator", props: { padding_y: "xs" }) do %>
|
|
58
|
+
<%= pb_rails("caption", props: { text: section[:title], padding_x: "xs" }) %>
|
|
59
|
+
<% end %>
|
|
60
|
+
|
|
61
|
+
<% section[:items].each do |option| %>
|
|
62
|
+
<%= pb_rails("dropdown/dropdown_option", props: { option: option }) %>
|
|
63
|
+
<% end %>
|
|
64
|
+
|
|
65
|
+
<% end %>
|
|
66
|
+
<% end %>
|
|
67
|
+
<% end %>
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Dropdown from '../_dropdown'
|
|
3
|
+
import Caption from '../../pb_caption/_caption'
|
|
4
|
+
import SectionSeparator from '../../pb_section_separator/_section_separator'
|
|
5
|
+
|
|
6
|
+
const DropdownGroupedOptions = (props) => {
|
|
7
|
+
|
|
8
|
+
const sections = [
|
|
9
|
+
{
|
|
10
|
+
title: "Profile",
|
|
11
|
+
items: [
|
|
12
|
+
{ label: "View Profile", value: "profile", id: "profile" },
|
|
13
|
+
{ label: "Account Settings", value: "settings", id: "settings" },
|
|
14
|
+
],
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
title: "Workspace",
|
|
18
|
+
items: [
|
|
19
|
+
{ label: "Projects", value: "projects", id: "projects" },
|
|
20
|
+
{ label: "Billing", value: "billing", id: "billing" },
|
|
21
|
+
],
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
title: "Support",
|
|
25
|
+
items: [
|
|
26
|
+
{ label: "Help Center", value: "help", id: "help" },
|
|
27
|
+
{ label: "Contact Support", value: "support", id: "support" },
|
|
28
|
+
],
|
|
29
|
+
},
|
|
30
|
+
]
|
|
31
|
+
const options = sections.flatMap((section) => section.items)
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<div>
|
|
35
|
+
<Dropdown
|
|
36
|
+
label="Grouped Options"
|
|
37
|
+
marginBottom="md"
|
|
38
|
+
options={options}
|
|
39
|
+
{...props}
|
|
40
|
+
>
|
|
41
|
+
<Dropdown.Trigger />
|
|
42
|
+
<Dropdown.Container>
|
|
43
|
+
{sections.map((section) => (
|
|
44
|
+
<React.Fragment key={section.title}>
|
|
45
|
+
<Caption
|
|
46
|
+
color="light"
|
|
47
|
+
padding="xs"
|
|
48
|
+
>
|
|
49
|
+
{section.title}
|
|
50
|
+
</Caption>
|
|
51
|
+
<SectionSeparator />
|
|
52
|
+
|
|
53
|
+
{section.items.map((option) => (
|
|
54
|
+
<Dropdown.Option
|
|
55
|
+
key={option.id}
|
|
56
|
+
option={option}
|
|
57
|
+
/>
|
|
58
|
+
))}
|
|
59
|
+
</React.Fragment>
|
|
60
|
+
))}
|
|
61
|
+
</Dropdown.Container>
|
|
62
|
+
</Dropdown>
|
|
63
|
+
<Dropdown
|
|
64
|
+
label="Grouped Options Minimalist"
|
|
65
|
+
options={options}
|
|
66
|
+
separators={false}
|
|
67
|
+
{...props}
|
|
68
|
+
>
|
|
69
|
+
<Dropdown.Trigger />
|
|
70
|
+
<Dropdown.Container>
|
|
71
|
+
{sections.map((section) => (
|
|
72
|
+
<React.Fragment key={section.title}>
|
|
73
|
+
<SectionSeparator
|
|
74
|
+
paddingY="xs"
|
|
75
|
+
>
|
|
76
|
+
<Caption paddingX="xs">
|
|
77
|
+
{section.title}
|
|
78
|
+
</Caption>
|
|
79
|
+
</SectionSeparator>
|
|
80
|
+
|
|
81
|
+
{section.items.map((option) => (
|
|
82
|
+
<Dropdown.Option
|
|
83
|
+
key={option.id}
|
|
84
|
+
option={option}
|
|
85
|
+
/>
|
|
86
|
+
))}
|
|
87
|
+
</React.Fragment>
|
|
88
|
+
))}
|
|
89
|
+
</Dropdown.Container>
|
|
90
|
+
</Dropdown>
|
|
91
|
+
</div>
|
|
92
|
+
)
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
export default DropdownGroupedOptions
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Customize the Dropdown Container to organize options into distinct, labeled sections.
|
|
@@ -36,6 +36,7 @@ examples:
|
|
|
36
36
|
- dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
|
|
37
37
|
- dropdown_required_indicator: Required Indicator
|
|
38
38
|
- dropdown_disabled: Disabled Input
|
|
39
|
+
- dropdown_grouped_options: Grouped Options
|
|
39
40
|
- dropdown_custom_event_type: Custom Event Type
|
|
40
41
|
|
|
41
42
|
react:
|
|
@@ -77,3 +78,4 @@ examples:
|
|
|
77
78
|
- dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
|
|
78
79
|
- dropdown_required_indicator: Required Indicator
|
|
79
80
|
- dropdown_disabled: Disabled Input
|
|
81
|
+
- dropdown_grouped_options: Grouped Options
|
|
@@ -36,3 +36,4 @@ export { default as DropdownRequiredIndicator } from "./_dropdown_required_indic
|
|
|
36
36
|
export { default as DropdownDisabledOption } from "./_dropdown_disabled_option.jsx";
|
|
37
37
|
export { default as DropdownCustomDisplayDisabledOption } from "./_dropdown_custom_display_disabled_option.jsx";
|
|
38
38
|
export { default as DropdownDisabled } from "./_dropdown_disabled.jsx";
|
|
39
|
+
export { default as DropdownGroupedOptions } from "./_dropdown_grouped_options.jsx";
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Products", name: :foo, pills: true }) %>
|
|
11
11
|
|
|
12
12
|
<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
|
|
13
|
+
<%= pb_rails("button", props: {id: "set-pills", text: "Restore Default Options", variant: "secondary"}) %>
|
|
13
14
|
|
|
14
15
|
<!-- This section is an example of the available JavaScript event hooks -->
|
|
15
16
|
<%= javascript_tag defer: "defer" do %>
|
|
@@ -28,4 +29,10 @@
|
|
|
28
29
|
document.querySelector('#clear-pills').addEventListener('click', function() {
|
|
29
30
|
document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
|
|
30
31
|
})
|
|
32
|
+
|
|
33
|
+
document.querySelector('#set-pills').addEventListener('click', function() {
|
|
34
|
+
document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:set', {
|
|
35
|
+
detail: [{ label: 'Windows', value: '#FFA500' }]
|
|
36
|
+
}))
|
|
37
|
+
})
|
|
31
38
|
<% end %>
|
|
@@ -8,6 +8,8 @@ You can also pass `default_options` which will populate the initial pill selecti
|
|
|
8
8
|
|
|
9
9
|
`default_options: [{ label: 'Windows', value: '#FFA500' }]`
|
|
10
10
|
|
|
11
|
+
When present, the kit root is stamped with `data-default-value` (JSON of those initial options) for restore-after-clear via `:set`.
|
|
12
|
+
|
|
11
13
|
#### Rails: Subscribing to JS Events
|
|
12
14
|
|
|
13
15
|
JavaScript events are triggered based on actions you take within the kit such as selection, removal and clearing.
|
|
@@ -21,4 +23,12 @@ This kit utilizes a default `id` prop named `react-select-input`. It is **highly
|
|
|
21
23
|
|
|
22
24
|
The same rule regarding the `id` prop applies to publishing JS events. The examples below will use the unique `id` prop named `typeahead-pills-example1`:
|
|
23
25
|
|
|
24
|
-
`pb-typeahead-kit-typeahead-pills-example1:clear` event to clear all options.
|
|
26
|
+
`pb-typeahead-kit-typeahead-pills-example1:clear` event to clear all options.
|
|
27
|
+
|
|
28
|
+
`pb-typeahead-kit-typeahead-pills-example1:set` event to set options. Pass `detail` as `[{ label, value }, ...]` (or a single object for single-select):
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:set', {
|
|
32
|
+
detail: [{ label: 'Windows', value: '#FFA500' }]
|
|
33
|
+
}))
|
|
34
|
+
```
|
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.11.0.pre.alpha.
|
|
4
|
+
version: 16.11.0.pre.alpha.typeaheadsmartreset17862
|
|
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-07-
|
|
12
|
+
date: 2026-07-22 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -968,6 +968,9 @@ files:
|
|
|
968
968
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.md
|
|
969
969
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb
|
|
970
970
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx
|
|
971
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.html.erb
|
|
972
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.jsx
|
|
973
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.md
|
|
971
974
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx
|
|
972
975
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md
|
|
973
976
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx
|