playbook_ui_docs 14.21.1 → 14.21.2.pre.alpha.PLAY2020sidebarfilterPOC8265
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_checkbox/docs/_checkbox_custom.html.erb +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom_rails.md +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.html.erb +22 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.md +5 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx +224 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_section_separator/docs/_description.md +3 -1
- data/dist/playbook-doc.js +1 -1
- metadata +6 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.jsx +0 -42
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.md +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 91366c949ee3596bd4a5440dfb9e7ac84300e9f91b77956e03db6c39d0548057
|
|
4
|
+
data.tar.gz: 51a789b320ccc6132af5e34a9e2c411c5edaad6b2c28b5ac1512f0f2a75697fa
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: '09a2d1d9391535c801812dce7fd559726bde49c09f6796f060d3f252ed9c2c1bbc2d9be059b4c9b1399e631b4d02d3b8e07585e05b719bc3ea803a1bfd9007ed'
|
|
7
|
+
data.tar.gz: 3eca25eeeff2be90d9e969bc544cb56ba2c4b3f7e8ce9361c3f3250d94135647c04d90cf0cb0d35a725edd60f254c4cf65ec107519ada7cd37642a5d7b1c0fe3
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
When using a custom checkbox wrapped in the Checkbox kit, hidden inputs are not automatically included and cannot be prop enabled. Manually add a hidden input before the checkbox if necessary to submit a value when the checkbox is unchecked (as is standard in Rails forms).
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
|
|
2
|
+
<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
|
|
3
|
+
<%=pb_rails("flex", props: { gap: "sm", orientation: "column"}) do %>
|
|
4
|
+
<%= pb_rails("checkbox" , props: {
|
|
5
|
+
text: "1. pb_rails(\"checkbox\") Checkbox from kit",
|
|
6
|
+
value: "checkbox-value",
|
|
7
|
+
name: "checkbox-name",
|
|
8
|
+
hidden_input: true
|
|
9
|
+
}) %>
|
|
10
|
+
<%= form.check_box :example_checkbox,
|
|
11
|
+
data: { field1: "value1", field2: "value2" },
|
|
12
|
+
props: { text: "2. form.check_box Checkbox from Form Builder" },
|
|
13
|
+
unchecked_value: "no",
|
|
14
|
+
id: "checkbox-id",
|
|
15
|
+
name: "checkbox-name",
|
|
16
|
+
class: "checkbox-class"
|
|
17
|
+
%>
|
|
18
|
+
<%= form.actions do |action| %>
|
|
19
|
+
<%= action.button props: { type: "submit", text: "Submit", variant: "primary" } %>
|
|
20
|
+
<% end %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The way to access hidden inputs for form submission depends on which version of the kit being used within the form context.
|
|
2
|
+
|
|
3
|
+
If using the Rails Checkbox version of the kit, set `hidden_input: true`. Inspect Checkbox #1 in the example above to see the hidden input in the DOM.
|
|
4
|
+
|
|
5
|
+
If using the Form Builder version of the kit (reference the [Form kit page](https://playbook.powerapp.cloud/kits/form) for more on these), the hidden input will appear if the input has a set `unchecked_value`. Inspect Checkbox #2 in the example above (and the two checkbox examples on the Form kit page) to see the hidden input in the DOM. See the [Rails check_box FormHelper docs](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-check_box) for more.
|
|
@@ -19,5 +19,4 @@ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
|
|
|
19
19
|
export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
|
|
20
20
|
export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
|
|
21
21
|
export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
|
|
22
|
-
export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
|
|
23
|
-
export { default as DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'
|
|
22
|
+
export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
|
|
3
|
+
import Filter from '../../pb_filter/_filter'
|
|
4
|
+
import Select from '../../pb_select/_select'
|
|
5
|
+
import TextInput from '../../pb_text_input/_text_input'
|
|
6
|
+
import useCollapsible from '../../pb_collapsible/useCollapsible'
|
|
7
|
+
import SectionSeparator from '../../pb_section_separator/_section_separator'
|
|
8
|
+
import Checkbox from '../../pb_checkbox/_checkbox'
|
|
9
|
+
import Flex from '../../pb_flex/_flex'
|
|
10
|
+
import Table from '../../pb_table/_table'
|
|
11
|
+
import Caption from '../../pb_caption/_caption'
|
|
12
|
+
import Icon from '../../pb_icon/_icon'
|
|
13
|
+
|
|
14
|
+
const people = [
|
|
15
|
+
{ name: 'Hera Syndulla', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
|
|
16
|
+
{ name: 'Kanan Jarrus', territory: 'USA', products: ['Siding', 'Roofing', 'Gutters'] },
|
|
17
|
+
{ name: 'C1-10P', territory: 'USA', products: ['Roofing'] },
|
|
18
|
+
{ name: 'Anakin Skywalker', territory: 'A galaxy far far away, like really far away...', products: ['Doors', 'Windows', 'Solar'] },
|
|
19
|
+
{ name: 'Leia Organa', territory: 'Canada', products: ['Windows', 'Doors'] },
|
|
20
|
+
{ name: 'Luke Skywalker', territory: 'Brazil', products: ['Solar', 'Roofing'] },
|
|
21
|
+
{ name: 'Padmé Amidala', territory: 'Philippines', products: ['Siding', 'Gutters'] },
|
|
22
|
+
{ name: 'Obi-Wan Kenobi', territory: 'USA', products: ['Windows', 'Siding'] },
|
|
23
|
+
{ name: 'Ahsoka Tano', territory: 'Canada', products: ['Insulation', 'Solar'] },
|
|
24
|
+
{ name: 'Boba Fett', territory: 'Brazil', products: ['Roofing', 'Gutters'] },
|
|
25
|
+
{ name: 'Mace Windu', territory: 'Philippines', products: ['Doors', 'Siding'] },
|
|
26
|
+
{ name: 'Grogu', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
|
|
27
|
+
{ name: 'Sabine Wren', territory: 'Canada', products: ['Solar', 'Doors'] },
|
|
28
|
+
{ name: 'C-3PO', territory: 'Brazil', products: ['Windows'] },
|
|
29
|
+
{ name: 'R2-D2', territory: 'Philippines', products: ['Doors', 'Gutters'] },
|
|
30
|
+
]
|
|
31
|
+
|
|
32
|
+
const FilterSidebar = (props) => {
|
|
33
|
+
const [name, setName] = useState('')
|
|
34
|
+
const [ territory, setTerritory ] = useState('')
|
|
35
|
+
const [ products, setProducts ] = useState({})
|
|
36
|
+
const handleUpdateName = ({ target }) => {
|
|
37
|
+
setName(target.value)
|
|
38
|
+
}
|
|
39
|
+
const handleUpdateTerritory = ({ target }) => {
|
|
40
|
+
setTerritory(target.value)
|
|
41
|
+
}
|
|
42
|
+
const handleCheckboxChange = ({ target }) => {
|
|
43
|
+
setProducts(prev => ({
|
|
44
|
+
...prev,
|
|
45
|
+
[target.name]: !prev[target.name],
|
|
46
|
+
}))
|
|
47
|
+
}
|
|
48
|
+
const [isCollapsed, setIsCollapsed] = useCollapsible(true)
|
|
49
|
+
const [isProductsCollapsed, setIsProductsCollapsed] = useCollapsible(true)
|
|
50
|
+
const options = [
|
|
51
|
+
{ value: 'USA' },
|
|
52
|
+
{ value: 'Canada' },
|
|
53
|
+
{ value: 'Brazil' },
|
|
54
|
+
{ value: 'Philippines' },
|
|
55
|
+
{ value: 'A galaxy far far away, like really far away...' },
|
|
56
|
+
]
|
|
57
|
+
|
|
58
|
+
const filteredPeople = people.filter((person) => {
|
|
59
|
+
const matchesName = person.name.toLowerCase().includes(name.toLowerCase())
|
|
60
|
+
|
|
61
|
+
const matchesTerritory = territory === '' ? true : person.territory === territory
|
|
62
|
+
|
|
63
|
+
const matchesProducts = Object.values(products).every((product) => !product) ? true : person.products.some(product => products[product])
|
|
64
|
+
|
|
65
|
+
return matchesName && matchesTerritory && matchesProducts
|
|
66
|
+
})
|
|
67
|
+
|
|
68
|
+
return (
|
|
69
|
+
<>
|
|
70
|
+
<Flex>
|
|
71
|
+
<Filter
|
|
72
|
+
isCollapsed={isCollapsed}
|
|
73
|
+
marginRight="xs"
|
|
74
|
+
onCollapse={() => setIsCollapsed(!isCollapsed)}
|
|
75
|
+
results={filteredPeople.length}
|
|
76
|
+
sortOptions={{
|
|
77
|
+
popularity: 'Popularity',
|
|
78
|
+
// eslint-disable-next-line
|
|
79
|
+
manager_title: 'Manager\'s Title',
|
|
80
|
+
// eslint-disable-next-line
|
|
81
|
+
manager_name: 'Manager\'s Name',
|
|
82
|
+
}}
|
|
83
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
|
84
|
+
variant="sidebar"
|
|
85
|
+
width="xs"
|
|
86
|
+
{...props}
|
|
87
|
+
>
|
|
88
|
+
<Filter.Section
|
|
89
|
+
collapsed={isCollapsed}
|
|
90
|
+
headerText="Full Name"
|
|
91
|
+
>
|
|
92
|
+
<TextInput
|
|
93
|
+
onChange={handleUpdateName}
|
|
94
|
+
placeholder="Enter name"
|
|
95
|
+
value={name}
|
|
96
|
+
{...props}
|
|
97
|
+
/>
|
|
98
|
+
</Filter.Section>
|
|
99
|
+
<SectionSeparator />
|
|
100
|
+
<Filter.Section
|
|
101
|
+
collapsed={isCollapsed}
|
|
102
|
+
collapsible
|
|
103
|
+
headerText="Territory"
|
|
104
|
+
>
|
|
105
|
+
<Select
|
|
106
|
+
blankSelection="Select One..."
|
|
107
|
+
name="location"
|
|
108
|
+
onChange={handleUpdateTerritory}
|
|
109
|
+
options={options}
|
|
110
|
+
{...props}
|
|
111
|
+
/>
|
|
112
|
+
</Filter.Section>
|
|
113
|
+
<SectionSeparator />
|
|
114
|
+
<Filter.Section
|
|
115
|
+
collapsed={isCollapsed}
|
|
116
|
+
collapsible
|
|
117
|
+
headerText="Products"
|
|
118
|
+
>
|
|
119
|
+
<div>
|
|
120
|
+
<Checkbox
|
|
121
|
+
marginBottom="sm"
|
|
122
|
+
name="Doors"
|
|
123
|
+
onChange={handleCheckboxChange}
|
|
124
|
+
text="Doors"
|
|
125
|
+
/>
|
|
126
|
+
</div>
|
|
127
|
+
<div>
|
|
128
|
+
<Checkbox
|
|
129
|
+
marginBottom="sm"
|
|
130
|
+
name="Windows"
|
|
131
|
+
onChange={handleCheckboxChange}
|
|
132
|
+
text="Windows"
|
|
133
|
+
/>
|
|
134
|
+
</div>
|
|
135
|
+
<div>
|
|
136
|
+
<Checkbox
|
|
137
|
+
marginBottom="sm"
|
|
138
|
+
name="Siding"
|
|
139
|
+
onChange={handleCheckboxChange}
|
|
140
|
+
text="Siding"
|
|
141
|
+
/>
|
|
142
|
+
</div>
|
|
143
|
+
{!isProductsCollapsed &&
|
|
144
|
+
<>
|
|
145
|
+
<div>
|
|
146
|
+
<Checkbox
|
|
147
|
+
checked={products["Roofing"]}
|
|
148
|
+
marginBottom="sm"
|
|
149
|
+
name="Roofing"
|
|
150
|
+
onChange={handleCheckboxChange}
|
|
151
|
+
text="Roofing"
|
|
152
|
+
/>
|
|
153
|
+
</div>
|
|
154
|
+
<div>
|
|
155
|
+
<Checkbox
|
|
156
|
+
checked={products["Gutters"]}
|
|
157
|
+
marginBottom="sm"
|
|
158
|
+
name="Gutters"
|
|
159
|
+
onChange={handleCheckboxChange}
|
|
160
|
+
text="Gutters"
|
|
161
|
+
/>
|
|
162
|
+
</div>
|
|
163
|
+
<div>
|
|
164
|
+
<Checkbox
|
|
165
|
+
checked={products["Solar"]}
|
|
166
|
+
marginBottom="sm"
|
|
167
|
+
name="Solar"
|
|
168
|
+
onChange={handleCheckboxChange}
|
|
169
|
+
text="Solar"
|
|
170
|
+
/>
|
|
171
|
+
</div>
|
|
172
|
+
<div>
|
|
173
|
+
<Checkbox
|
|
174
|
+
checked={products["Insulation"]}
|
|
175
|
+
marginBottom="sm"
|
|
176
|
+
name="Insulation"
|
|
177
|
+
onChange={handleCheckboxChange}
|
|
178
|
+
text="Insulation"
|
|
179
|
+
/>
|
|
180
|
+
</div>
|
|
181
|
+
</>
|
|
182
|
+
}
|
|
183
|
+
<div onClick={() => setIsProductsCollapsed(!isProductsCollapsed)}>
|
|
184
|
+
<Flex
|
|
185
|
+
cursor="pointer"
|
|
186
|
+
marginBottom="sm"
|
|
187
|
+
>
|
|
188
|
+
<Caption
|
|
189
|
+
color="link"
|
|
190
|
+
marginRight="xxs"
|
|
191
|
+
size="xs"
|
|
192
|
+
text={isProductsCollapsed ? "Show More" : "Show Less"}
|
|
193
|
+
/>
|
|
194
|
+
<Icon
|
|
195
|
+
icon={isProductsCollapsed ? "chevron-down" : "chevron-up"}
|
|
196
|
+
/>
|
|
197
|
+
</Flex>
|
|
198
|
+
</div>
|
|
199
|
+
</Filter.Section>
|
|
200
|
+
</Filter>
|
|
201
|
+
<Table
|
|
202
|
+
size="sm"
|
|
203
|
+
>
|
|
204
|
+
<thead>
|
|
205
|
+
<tr>
|
|
206
|
+
<th>{'Name'}</th>
|
|
207
|
+
<th>{'Territory'}</th>
|
|
208
|
+
<th>{'Products'}</th>
|
|
209
|
+
</tr>
|
|
210
|
+
</thead>
|
|
211
|
+
<tbody>
|
|
212
|
+
{filteredPeople.map((person) => (<tr key={person.name}>
|
|
213
|
+
<td>{ person.name }</td>
|
|
214
|
+
<td>{ person.territory }</td>
|
|
215
|
+
<td>{ person.products.join(", ") }</td>
|
|
216
|
+
</tr>))}
|
|
217
|
+
</tbody>
|
|
218
|
+
</Table>
|
|
219
|
+
</Flex>
|
|
220
|
+
</>
|
|
221
|
+
)
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
export default FilterSidebar
|
|
@@ -8,3 +8,4 @@ export { default as FilterMaxWidth } from './_filter_max_width.jsx'
|
|
|
8
8
|
export { default as FilterMaxHeight } from './_filter_max_height.jsx'
|
|
9
9
|
export { default as FilterPlacement } from './_filter_placement.jsx'
|
|
10
10
|
export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
|
|
11
|
+
export { default as FilterSidebar } from './_filter_sidebar.jsx'
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
<%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
|
|
102
102
|
<%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
|
|
103
103
|
<%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
|
104
|
-
<%= form.check_box :
|
|
104
|
+
<%= form.check_box :example_checkbox_validation, props: { text: "Example Checkbox Validation", label: true, required: true }, checked_value: "1", unchecked_value: "0" %>
|
|
105
105
|
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
|
|
106
106
|
<%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
|
|
107
107
|
<%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
|
|
1
|
+
Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
|
|
2
|
+
|
|
3
|
+
To ensure that the section separator is properly rendered, please be sure to use our global `width` prop to set width to 100%. [See here](https://playbook.powerapp.cloud/visual_guidelines/width) for more information on the global width prop.
|