playbook_ui 14.21.2.pre.alpha.PLAY2112tablestylingwithonecell8417 → 14.21.2.pre.alpha.PLAY2179playbookiconsupdate8389
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_advanced_table/Hooks/useTableState.ts +3 -25
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md +3 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +4 -7
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +3 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +3 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +4 -7
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -7
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +10 -19
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +10 -19
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +11 -20
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +8 -8
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +14 -23
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +3 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +3 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +3 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +3 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +8 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +2 -2
- data/app/pb_kits/playbook/pb_table/index.ts +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +0 -11
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +0 -4
- data/dist/chunks/{_typeahead-B80UsDrG.js → _typeahead-BXD634Vm.js} +1 -1
- data/dist/chunks/{_weekday_stacked-D1bqIne1.js → _weekday_stacked--dPf0i--.js} +2 -2
- data/dist/chunks/{lib-CTkMyvfQ.js → lib-9VvC3Rp0.js} +1 -1
- data/dist/chunks/{pb_form_validation-BVF3TmcL.js → pb_form_validation-CbyL4Bqa.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +6 -14
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.html.erb +0 -52
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.jsx +0 -99
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.html.erb +0 -28
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +0 -47
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +0 -1
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.21.2.pre.alpha.
|
4
|
+
version: 14.21.2.pre.alpha.PLAY2179playbookiconsupdate8389
|
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: 2025-06-
|
12
|
+
date: 2025-06-13 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1389,10 +1389,6 @@ files:
|
|
1389
1389
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
|
1390
1390
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb
|
1391
1391
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md
|
1392
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.html.erb
|
1393
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.jsx
|
1394
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md
|
1395
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md
|
1396
1392
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx
|
1397
1393
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md
|
1398
1394
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb
|
@@ -1400,10 +1396,6 @@ files:
|
|
1400
1396
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb
|
1401
1397
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
|
1402
1398
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md
|
1403
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.html.erb
|
1404
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx
|
1405
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md
|
1406
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md
|
1407
1399
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
|
1408
1400
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md
|
1409
1401
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb
|
@@ -3632,11 +3624,11 @@ files:
|
|
3632
3624
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3633
3625
|
- app/pb_kits/playbook/utilities/text.ts
|
3634
3626
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3635
|
-
- dist/chunks/_typeahead-
|
3636
|
-
- dist/chunks/_weekday_stacked
|
3627
|
+
- dist/chunks/_typeahead-BXD634Vm.js
|
3628
|
+
- dist/chunks/_weekday_stacked--dPf0i--.js
|
3637
3629
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3638
|
-
- dist/chunks/lib-
|
3639
|
-
- dist/chunks/pb_form_validation-
|
3630
|
+
- dist/chunks/lib-9VvC3Rp0.js
|
3631
|
+
- dist/chunks/pb_form_validation-CbyL4Bqa.js
|
3640
3632
|
- dist/chunks/vendor.js
|
3641
3633
|
- dist/menu.yml
|
3642
3634
|
- dist/playbook-doc.js
|
@@ -1,52 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
options = [
|
3
|
-
{ label: "Item 1", value: "item-1", id: "1" },
|
4
|
-
{ label: "Item 2", value: "item-2", id: "2" },
|
5
|
-
{ label: "Item 3", value: "item-3", id: "3" }
|
6
|
-
]
|
7
|
-
%>
|
8
|
-
|
9
|
-
<%= pb_rails("dropdown", props: { label: "Multiple Icons", options: options }) do %>
|
10
|
-
<%= pb_rails("dropdown/dropdown_trigger") %>
|
11
|
-
<%= pb_rails("dropdown/dropdown_container") do %>
|
12
|
-
<% options.each do |option| %>
|
13
|
-
<%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
|
14
|
-
<%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
|
15
|
-
<%= pb_rails("flex") do %>
|
16
|
-
<%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
|
17
|
-
<%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
|
18
|
-
<% end %>
|
19
|
-
<%= pb_rails("icon", props: { icon: "check" }) %>
|
20
|
-
<% end %>
|
21
|
-
<% end %>
|
22
|
-
<% end %>
|
23
|
-
<% end %>
|
24
|
-
<% end %>
|
25
|
-
|
26
|
-
<%= pb_rails("dropdown", props: { label: "Icon on Left", options: options, padding_y: "md" }) do %>
|
27
|
-
<%= pb_rails("dropdown/dropdown_trigger") %>
|
28
|
-
<%= pb_rails("dropdown/dropdown_container") do %>
|
29
|
-
<% options.each do |option| %>
|
30
|
-
<%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
|
31
|
-
<%= pb_rails("flex", props: { align: "center" }) do %>
|
32
|
-
<%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
|
33
|
-
<%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
|
34
|
-
<% end %>
|
35
|
-
<% end %>
|
36
|
-
<% end %>
|
37
|
-
<% end %>
|
38
|
-
<% end %>
|
39
|
-
|
40
|
-
<%= pb_rails("dropdown", props: { label: "Icon on Right", options: options }) do %>
|
41
|
-
<%= pb_rails("dropdown/dropdown_trigger") %>
|
42
|
-
<%= pb_rails("dropdown/dropdown_container") do %>
|
43
|
-
<% options.each do |option| %>
|
44
|
-
<%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
|
45
|
-
<%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
|
46
|
-
<%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
|
47
|
-
<%= pb_rails("icon", props: { icon: "check" }) %>
|
48
|
-
<% end %>
|
49
|
-
<% end %>
|
50
|
-
<% end %>
|
51
|
-
<% end %>
|
52
|
-
<% end %>
|
@@ -1,99 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import Dropdown from '../_dropdown'
|
3
|
-
|
4
|
-
import Body from '../../pb_body/_body'
|
5
|
-
import Flex from '../../pb_flex/_flex'
|
6
|
-
import Icon from '../../pb_icon/_icon'
|
7
|
-
|
8
|
-
const DropdownCustomIconOptions = (props) => {
|
9
|
-
|
10
|
-
const options = [
|
11
|
-
{ label: "Item 1", value: "item-1", id: "1" },
|
12
|
-
{ label: "Item 2", value: "item-2", id: "2" },
|
13
|
-
{ label: "Item 3", value: "item-3", id: "3" },
|
14
|
-
]
|
15
|
-
|
16
|
-
|
17
|
-
return (
|
18
|
-
<div>
|
19
|
-
<Dropdown label="Multiple Icons"
|
20
|
-
options={options}
|
21
|
-
{...props}
|
22
|
-
>
|
23
|
-
{options.map((option) => (
|
24
|
-
<Dropdown.Option key={option.id}
|
25
|
-
option={option}
|
26
|
-
>
|
27
|
-
<Flex align="center"
|
28
|
-
justify="between"
|
29
|
-
>
|
30
|
-
<Flex align="center">
|
31
|
-
<Icon icon="calendar"
|
32
|
-
paddingRight="xs"
|
33
|
-
{...props}
|
34
|
-
/>
|
35
|
-
<Body color="default"
|
36
|
-
text={option.label}
|
37
|
-
{...props}
|
38
|
-
/>
|
39
|
-
</Flex>
|
40
|
-
<Icon icon="check"
|
41
|
-
{...props}
|
42
|
-
/>
|
43
|
-
</Flex>
|
44
|
-
</Dropdown.Option>
|
45
|
-
))}
|
46
|
-
</Dropdown>
|
47
|
-
|
48
|
-
<Dropdown label="Icon on Left"
|
49
|
-
options={options}
|
50
|
-
paddingY="md"
|
51
|
-
{...props}
|
52
|
-
>
|
53
|
-
{options.map((option) => (
|
54
|
-
<Dropdown.Option key={option.id}
|
55
|
-
option={option}
|
56
|
-
>
|
57
|
-
<Flex align="center">
|
58
|
-
<Icon icon="calendar"
|
59
|
-
paddingRight="xs"
|
60
|
-
{...props}
|
61
|
-
/>
|
62
|
-
<Body color="default"
|
63
|
-
text={option.label}
|
64
|
-
{...props}
|
65
|
-
/>
|
66
|
-
</Flex>
|
67
|
-
</Dropdown.Option>
|
68
|
-
))}
|
69
|
-
</Dropdown>
|
70
|
-
|
71
|
-
<Dropdown label="Icon on Right"
|
72
|
-
options={options}
|
73
|
-
{...props}
|
74
|
-
>
|
75
|
-
{options.map((option) => (
|
76
|
-
<Dropdown.Option key={option.id}
|
77
|
-
option={option}
|
78
|
-
>
|
79
|
-
<Flex align="center"
|
80
|
-
justify="between"
|
81
|
-
>
|
82
|
-
<Flex align="center">
|
83
|
-
<Body color="default"
|
84
|
-
text={option.label}
|
85
|
-
{...props}
|
86
|
-
/>
|
87
|
-
</Flex>
|
88
|
-
<Icon icon="check"
|
89
|
-
{...props}
|
90
|
-
/>
|
91
|
-
</Flex>
|
92
|
-
</Dropdown.Option>
|
93
|
-
))}
|
94
|
-
</Dropdown>
|
95
|
-
</div>
|
96
|
-
)
|
97
|
-
}
|
98
|
-
|
99
|
-
export default DropdownCustomIconOptions
|
@@ -1 +0,0 @@
|
|
1
|
-
Use the `dropdown/dropdown_option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text.
|
@@ -1 +0,0 @@
|
|
1
|
-
Use the `Dropdown.Option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text.
|
@@ -1,28 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
options = [
|
3
|
-
{ label: "Item 1", value: "item-1", id: "1" },
|
4
|
-
{ label: "Item 2", value: "item-2", id: "2" },
|
5
|
-
{ label: "Item 3", value: "item-3", id: "3" }
|
6
|
-
]
|
7
|
-
|
8
|
-
selected_value = params[:selected_value]
|
9
|
-
%>
|
10
|
-
|
11
|
-
<%= pb_rails("dropdown", props: { label: "Choose Item", options: options }) do %>
|
12
|
-
<%= pb_rails("dropdown/dropdown_trigger") %>
|
13
|
-
<%= pb_rails("dropdown/dropdown_container") do %>
|
14
|
-
<% options.each do |option| %>
|
15
|
-
<% checked = (option[:value] == selected_value) %>
|
16
|
-
<%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
|
17
|
-
<%= pb_rails("flex", props: { align: "center" }) do %>
|
18
|
-
<%= pb_rails("radio", props: {
|
19
|
-
text: option[:label],
|
20
|
-
name: "dropdown_radio",
|
21
|
-
value: option[:value],
|
22
|
-
checked: checked,
|
23
|
-
}) %>
|
24
|
-
<% end %>
|
25
|
-
<% end %>
|
26
|
-
<% end %>
|
27
|
-
<% end %>
|
28
|
-
<% end %>
|
@@ -1,47 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react'
|
2
|
-
import Dropdown from '../_dropdown'
|
3
|
-
|
4
|
-
import Body from '../../pb_body/_body'
|
5
|
-
import Flex from '../../pb_flex/_flex'
|
6
|
-
import Radio from '../../pb_radio/_radio'
|
7
|
-
|
8
|
-
const DropdownCustomRadioOptions = (props) => {
|
9
|
-
const [selectedValue, setSelectedValue] = useState(null)
|
10
|
-
|
11
|
-
const options = [
|
12
|
-
{ label: "Item 1", value: "item-1", id: "1" },
|
13
|
-
{ label: "Item 2", value: "item-2", id: "2" },
|
14
|
-
{ label: "Item 3", value: "item-3", id: "3" },
|
15
|
-
]
|
16
|
-
|
17
|
-
|
18
|
-
return (
|
19
|
-
<div>
|
20
|
-
<Dropdown
|
21
|
-
label="Select Item"
|
22
|
-
onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
|
23
|
-
options={options}
|
24
|
-
{...props}
|
25
|
-
>
|
26
|
-
{options.map((option) => {
|
27
|
-
return (
|
28
|
-
<Dropdown.Option key={option.id}
|
29
|
-
option={option}
|
30
|
-
>
|
31
|
-
<Flex align="center">
|
32
|
-
<Radio
|
33
|
-
checked={selectedValue === option.value}
|
34
|
-
name="dropdown_radio"
|
35
|
-
value={option.value}
|
36
|
-
/>
|
37
|
-
<Body text={option.label} />
|
38
|
-
</Flex>
|
39
|
-
</Dropdown.Option>
|
40
|
-
)
|
41
|
-
})}
|
42
|
-
</Dropdown>
|
43
|
-
</div>
|
44
|
-
)
|
45
|
-
}
|
46
|
-
|
47
|
-
export default DropdownCustomRadioOptions
|
@@ -1 +0,0 @@
|
|
1
|
-
Radio inputs can be used inside `dropdown/dropdown_option` for a custom layout that mimics form-like selection within a dropdown.
|
@@ -1 +0,0 @@
|
|
1
|
-
Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.
|