playbook_ui 14.5.0 → 14.6.0.pre.alpha.PBNTR5554217
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +25 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +72 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/index.js +60 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -9
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +1 -9
- data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
- data/app/pb_kits/playbook/pb_currency/_currency.tsx +16 -6
- data/app/pb_kits/playbook/pb_currency/currency.rb +38 -11
- data/app/pb_kits/playbook/pb_currency/currency.test.js +35 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +7 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +18 -0
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +84 -3
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +28 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +9 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +33 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +34 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +10 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -1
- data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +71 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +2 -0
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
- data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +7 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +39 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
- data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_form/form.rb +2 -0
- data/app/pb_kits/playbook/pb_form/formHelper.js +27 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +9 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +19 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +27 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +211 -227
- data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +5 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +93 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +105 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +106 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +149 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +86 -18
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +15 -6
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss +849 -931
- data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts +4 -1
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -2
- data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_popover/popover.rb +3 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +4 -1
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +3 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -1
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
- data/dist/chunks/_typeahead-BhHnXJjy.js +22 -0
- data/dist/chunks/_weekday_stacked-C2icYweq.js +45 -0
- data/dist/chunks/{lib-CEpcaI8y.js → lib-D-mTv-kp.js} +1 -1
- data/dist/chunks/{pb_form_validation-D9zkwt2b.js → pb_form_validation-BkWGwJsl.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/kit_base.rb +21 -1
- data/lib/playbook/pb_doc_helper.rb +5 -5
- data/lib/playbook/pb_forms_helper.rb +3 -1
- data/lib/playbook/version.rb +2 -2
- metadata +40 -9
- data/dist/chunks/_typeahead-BYw0HEgO.js +0 -22
- data/dist/chunks/_weekday_stacked-DumiyWjh.js +0 -45
@@ -69,15 +69,21 @@
|
|
69
69
|
padding-bottom: $space_xs;
|
70
70
|
cursor: pointer;
|
71
71
|
&:hover {
|
72
|
-
background-color: $
|
72
|
+
background-color: $bg_light;
|
73
73
|
}
|
74
74
|
|
75
75
|
&[class*="_focused"] {
|
76
|
-
background-color: $
|
76
|
+
background-color: $bg_light;
|
77
77
|
}
|
78
78
|
|
79
79
|
&[class*="_list"] {
|
80
80
|
border-bottom: 1px solid $border_light;
|
81
|
+
|
82
|
+
&:hover, &:focus {
|
83
|
+
.pb_body_kit {
|
84
|
+
color: $primary;
|
85
|
+
}
|
86
|
+
}
|
81
87
|
}
|
82
88
|
&[class*="selected"] {
|
83
89
|
background-color: $primary;
|
@@ -87,7 +93,7 @@
|
|
87
93
|
color: $white !important;
|
88
94
|
}
|
89
95
|
&:hover {
|
90
|
-
background-color: $
|
96
|
+
background-color: $product_1_background !important;
|
91
97
|
}
|
92
98
|
}
|
93
99
|
}
|
@@ -125,6 +131,81 @@
|
|
125
131
|
}
|
126
132
|
}
|
127
133
|
|
134
|
+
&.separators_hidden {
|
135
|
+
.dropdown_wrapper {
|
136
|
+
.pb_dropdown_container {
|
137
|
+
|
138
|
+
[class*="pb_dropdown_option"] {
|
139
|
+
border: none;
|
140
|
+
}
|
141
|
+
}
|
142
|
+
}
|
143
|
+
}
|
144
|
+
|
145
|
+
&.subtle {
|
146
|
+
.dropdown_wrapper {
|
147
|
+
.pb_dropdown_container {
|
148
|
+
|
149
|
+
[class*="pb_dropdown_option"]:first-child {
|
150
|
+
margin-top: $space_xs;
|
151
|
+
}
|
152
|
+
|
153
|
+
[class*="pb_dropdown_option"]:last-child {
|
154
|
+
margin-bottom: $space_xs;
|
155
|
+
}
|
156
|
+
|
157
|
+
[class*="pb_dropdown_option"] {
|
158
|
+
margin: $space_xs;
|
159
|
+
padding: $space_xs;
|
160
|
+
border-radius: $border_radius_md;
|
161
|
+
border-bottom: none;
|
162
|
+
position: relative;
|
163
|
+
|
164
|
+
&::after {
|
165
|
+
content: "";
|
166
|
+
position: absolute;
|
167
|
+
left: -$space_xs;
|
168
|
+
right: -$space_xs;
|
169
|
+
bottom: -4.5px;
|
170
|
+
height: 1px;
|
171
|
+
background: $border_light;
|
172
|
+
}
|
173
|
+
}
|
174
|
+
|
175
|
+
[class*="pb_dropdown_option"]:last-child::after {
|
176
|
+
display: none;
|
177
|
+
}
|
178
|
+
}
|
179
|
+
}
|
180
|
+
|
181
|
+
&.separators_hidden {
|
182
|
+
.dropdown_wrapper {
|
183
|
+
.pb_dropdown_container {
|
184
|
+
[class*="pb_dropdown_option"]:first-child {
|
185
|
+
margin-top: $space_xs;
|
186
|
+
}
|
187
|
+
|
188
|
+
[class*="pb_dropdown_option"]:last-child {
|
189
|
+
margin-bottom: $space_xs;
|
190
|
+
}
|
191
|
+
|
192
|
+
[class*="pb_dropdown_option"] {
|
193
|
+
padding: $space_xxs $space_xs;
|
194
|
+
margin: $space_xxs $space_xs;
|
195
|
+
|
196
|
+
&::after {
|
197
|
+
height: 0px;
|
198
|
+
}
|
199
|
+
|
200
|
+
&[class*="selected"] {
|
201
|
+
border-bottom: none;
|
202
|
+
}
|
203
|
+
}
|
204
|
+
}
|
205
|
+
}
|
206
|
+
}
|
207
|
+
}
|
208
|
+
|
128
209
|
&.dark {
|
129
210
|
.dropdown_wrapper {
|
130
211
|
[class*="dropdown_trigger_wrapper"] {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useState, useRef, useEffect } from "react";
|
1
|
+
import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } 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";
|
@@ -35,10 +35,19 @@ type DropdownProps = {
|
|
35
35
|
label?: string;
|
36
36
|
onSelect?: (arg: GenericObject) => null;
|
37
37
|
options: GenericObject;
|
38
|
+
separators: boolean;
|
38
39
|
triggerRef?: any;
|
40
|
+
variant?: "default" | "subtle";
|
39
41
|
};
|
40
42
|
|
41
|
-
|
43
|
+
interface DropdownComponent
|
44
|
+
extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>> {
|
45
|
+
Option: typeof DropdownOption;
|
46
|
+
Trigger: typeof DropdownTrigger;
|
47
|
+
Container: typeof DropdownContainer;
|
48
|
+
}
|
49
|
+
|
50
|
+
const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
|
42
51
|
const {
|
43
52
|
aria = {},
|
44
53
|
autocomplete = false,
|
@@ -55,15 +64,20 @@ const Dropdown = (props: DropdownProps) => {
|
|
55
64
|
label,
|
56
65
|
onSelect,
|
57
66
|
options,
|
58
|
-
|
67
|
+
separators = true,
|
68
|
+
triggerRef,
|
69
|
+
variant = "default",
|
59
70
|
} = props;
|
60
71
|
|
61
72
|
const ariaProps = buildAriaProps(aria);
|
62
73
|
const dataProps = buildDataProps(data);
|
63
74
|
const htmlProps = buildHtmlProps(htmlOptions);
|
75
|
+
const separatorsClass = separators ? '' : 'separators_hidden'
|
64
76
|
const classes = classnames(
|
65
77
|
buildCss("pb_dropdown"),
|
66
78
|
globalProps(props),
|
79
|
+
variant,
|
80
|
+
separatorsClass,
|
67
81
|
className
|
68
82
|
);
|
69
83
|
|
@@ -125,7 +139,7 @@ const Dropdown = (props: DropdownProps) => {
|
|
125
139
|
const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
|
126
140
|
const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
|
127
141
|
return String(label).toLowerCase().includes(filterItem.toLowerCase());
|
128
|
-
});
|
142
|
+
});
|
129
143
|
|
130
144
|
// For keyboard accessibility: Set focus within dropdown to selected item if it exists
|
131
145
|
useEffect(() => {
|
@@ -175,6 +189,14 @@ const Dropdown = (props: DropdownProps) => {
|
|
175
189
|
dark
|
176
190
|
});
|
177
191
|
|
192
|
+
useImperativeHandle(ref, () => ({
|
193
|
+
clearSelected: () => {
|
194
|
+
setSelected({});
|
195
|
+
setFilterItem("");
|
196
|
+
setIsDropDownClosed(true);
|
197
|
+
onSelect && onSelect(null);
|
198
|
+
},
|
199
|
+
}));
|
178
200
|
|
179
201
|
return (
|
180
202
|
<div {...ariaProps}
|
@@ -258,8 +280,9 @@ const Dropdown = (props: DropdownProps) => {
|
|
258
280
|
</DropdownContext.Provider>
|
259
281
|
</div>
|
260
282
|
)
|
261
|
-
}
|
283
|
+
}) as DropdownComponent
|
262
284
|
|
285
|
+
Dropdown.displayName = "Dropdown";
|
263
286
|
Dropdown.Option = DropdownOption;
|
264
287
|
Dropdown.Trigger = DropdownTrigger;
|
265
288
|
Dropdown.Container = DropdownContainer;
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import React, { useRef } from 'react'
|
2
|
+
import { Button, Dropdown } from 'playbook-ui'
|
3
|
+
|
4
|
+
const options = [
|
5
|
+
{
|
6
|
+
label: "United States",
|
7
|
+
value: "United States",
|
8
|
+
},
|
9
|
+
{
|
10
|
+
label: "Canada",
|
11
|
+
value: "Canada",
|
12
|
+
},
|
13
|
+
{
|
14
|
+
label: "Pakistan",
|
15
|
+
value: "Pakistan",
|
16
|
+
}
|
17
|
+
]
|
18
|
+
|
19
|
+
const DropdownClearSelection = (props) => {
|
20
|
+
const dropdownRef = useRef(null)
|
21
|
+
|
22
|
+
const handleReset = () => {
|
23
|
+
if (dropdownRef.current) {
|
24
|
+
dropdownRef.current.clearSelected()
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
return (
|
29
|
+
<>
|
30
|
+
<Dropdown
|
31
|
+
defaultValue={options[2]}
|
32
|
+
options={options}
|
33
|
+
ref={dropdownRef}
|
34
|
+
{...props}
|
35
|
+
/>
|
36
|
+
<Button
|
37
|
+
marginTop="md"
|
38
|
+
onClick={handleReset}
|
39
|
+
text="Reset"
|
40
|
+
/>
|
41
|
+
</>
|
42
|
+
)
|
43
|
+
}
|
44
|
+
|
45
|
+
export default DropdownClearSelection
|
@@ -0,0 +1 @@
|
|
1
|
+
To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.
|
@@ -0,0 +1,9 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{ label: 'United States', value: 'United States', 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, separators: false}) %>
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Dropdown } from 'playbook-ui'
|
3
|
+
|
4
|
+
const DropdownSeparatorsHidden = (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
|
+
options={options}
|
26
|
+
separators={false}
|
27
|
+
{...props}
|
28
|
+
/>
|
29
|
+
</div>
|
30
|
+
)
|
31
|
+
}
|
32
|
+
|
33
|
+
export default DropdownSeparatorsHidden
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{ label: 'United States', value: 'United States', id: 'us' },
|
4
|
+
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' },
|
6
|
+
]
|
7
|
+
|
8
|
+
%>
|
9
|
+
|
10
|
+
<%= pb_rails("dropdown", props: { options: options, variant: "subtle", separators: false }) %>
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Dropdown } from 'playbook-ui'
|
3
|
+
|
4
|
+
const DropdownSubtleVariant = (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
|
+
<>
|
24
|
+
<Dropdown
|
25
|
+
options={options}
|
26
|
+
separators={false}
|
27
|
+
variant="subtle"
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
</>
|
31
|
+
)
|
32
|
+
}
|
33
|
+
|
34
|
+
export default DropdownSubtleVariant
|
@@ -0,0 +1 @@
|
|
1
|
+
For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.
|
@@ -1,6 +1,7 @@
|
|
1
1
|
examples:
|
2
2
|
rails:
|
3
3
|
- dropdown_default: Default
|
4
|
+
- dropdown_subtle_variant: Subtle Variant
|
4
5
|
- dropdown_subcomponent_structure_rails: Subcomponent Structure
|
5
6
|
- dropdown_with_label: With Label
|
6
7
|
- dropdown_with_custom_options_rails: Custom Options
|
@@ -10,9 +11,11 @@ examples:
|
|
10
11
|
- dropdown_error: Dropdown with Error
|
11
12
|
- dropdown_default_value: Default Value
|
12
13
|
- dropdown_blank_selection: Blank Selection
|
14
|
+
- dropdown_separators_hidden: Separators Hidden
|
13
15
|
|
14
16
|
react:
|
15
17
|
- dropdown_default: Default
|
18
|
+
- dropdown_subtle_variant: Subtle Variant
|
16
19
|
- dropdown_subcomponent_structure: Subcomponent Structure
|
17
20
|
- dropdown_with_label: With Label
|
18
21
|
- dropdown_with_custom_options: Custom Options
|
@@ -22,6 +25,8 @@ examples:
|
|
22
25
|
- dropdown_error: Dropdown with Error
|
23
26
|
- dropdown_default_value: Default Value
|
24
27
|
- dropdown_blank_selection: Blank Selection
|
28
|
+
- dropdown_clear_selection: Clear Selection
|
29
|
+
- dropdown_separators_hidden: Separators Hidden
|
25
30
|
# - dropdown_with_autocomplete: Autocomplete
|
26
31
|
# - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
|
27
32
|
# - dropdown_with_external_control: useDropdown Hook
|
@@ -12,3 +12,6 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
|
|
12
12
|
export { default as DropdownError } from './_dropdown_error.jsx'
|
13
13
|
export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
|
14
14
|
export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
|
15
|
+
export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
|
16
|
+
export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
|
17
|
+
export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
|
@@ -13,13 +13,18 @@ module Playbook
|
|
13
13
|
prop :default_value
|
14
14
|
prop :blank_selection, type: Playbook::Props::String,
|
15
15
|
default: ""
|
16
|
+
prop :variant, type: Playbook::Props::Enum,
|
17
|
+
values: %w[default subtle],
|
18
|
+
default: "default"
|
19
|
+
prop :separators, type: Playbook::Props::Boolean,
|
20
|
+
default: true
|
16
21
|
|
17
22
|
def data
|
18
23
|
Hash(prop(:data)).merge(pb_dropdown: true)
|
19
24
|
end
|
20
25
|
|
21
26
|
def classname
|
22
|
-
generate_classname("pb_dropdown")
|
27
|
+
generate_classname("pb_dropdown", variant, separators_class, separator: " ")
|
23
28
|
end
|
24
29
|
|
25
30
|
private
|
@@ -32,6 +37,10 @@ module Playbook
|
|
32
37
|
default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
|
33
38
|
end
|
34
39
|
|
40
|
+
def separators_class
|
41
|
+
separators ? "" : "separators_hidden"
|
42
|
+
end
|
43
|
+
|
35
44
|
def options_with_blank
|
36
45
|
blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
|
37
46
|
end
|
@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
73
73
|
!autocomplete && "select_only"
|
74
74
|
);
|
75
75
|
|
76
|
-
const customDisplayPlaceholder = selected
|
76
|
+
const customDisplayPlaceholder = selected?.label ? (
|
77
77
|
<b>{selected.label}</b>
|
78
78
|
) : autocomplete ? (
|
79
79
|
""
|
@@ -83,7 +83,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
83
83
|
"Select..."
|
84
84
|
);
|
85
85
|
|
86
|
-
const defaultDisplayPlaceholder = selected
|
86
|
+
const defaultDisplayPlaceholder = selected?.label
|
87
87
|
? selected.label
|
88
88
|
: autocomplete
|
89
89
|
? ""
|
@@ -34,6 +34,7 @@ const FilterDouble = ({
|
|
34
34
|
maxHeight,
|
35
35
|
minWidth,
|
36
36
|
placement,
|
37
|
+
popoverProps,
|
37
38
|
...bgProps
|
38
39
|
}: FilterDoubleProps): React.ReactElement => (
|
39
40
|
<FilterBackground
|
@@ -49,6 +50,7 @@ const FilterDouble = ({
|
|
49
50
|
maxHeight={maxHeight}
|
50
51
|
minWidth={minWidth}
|
51
52
|
placement={placement}
|
53
|
+
popoverProps={popoverProps}
|
52
54
|
>
|
53
55
|
{children}
|
54
56
|
</FiltersPopover>
|
@@ -33,6 +33,7 @@ const FilterSingle = ({
|
|
33
33
|
maxHeight,
|
34
34
|
minWidth,
|
35
35
|
placement,
|
36
|
+
popoverProps,
|
36
37
|
...bgProps
|
37
38
|
}: FilterSingleProps): React.ReactElement => {
|
38
39
|
return (
|
@@ -52,6 +53,7 @@ const FilterSingle = ({
|
|
52
53
|
maxHeight={maxHeight}
|
53
54
|
minWidth={minWidth}
|
54
55
|
placement={placement}
|
56
|
+
popoverProps={popoverProps}
|
55
57
|
>
|
56
58
|
{children}
|
57
59
|
</FiltersPopover>
|
@@ -2,6 +2,7 @@ import React, { ReactNode, useState } from 'react'
|
|
2
2
|
|
3
3
|
import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
|
4
4
|
import PbReactPopover from '../../pb_popover/_popover'
|
5
|
+
import { GenericObject } from '../../types'
|
5
6
|
|
6
7
|
type FiltersPopoverProps = {
|
7
8
|
children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) => ReactNode),
|
@@ -9,8 +10,9 @@ type FiltersPopoverProps = {
|
|
9
10
|
maxHeight?: string,
|
10
11
|
minWidth?: string,
|
11
12
|
placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
|
13
|
+
popoverProps?: GenericObject,
|
12
14
|
}
|
13
|
-
const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
|
15
|
+
const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start", popoverProps }: FiltersPopoverProps): React.ReactElement => {
|
14
16
|
const [hide, updateHide] = useState(true)
|
15
17
|
const toggle = () => updateHide(!hide)
|
16
18
|
|
@@ -33,6 +35,7 @@ const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bott
|
|
33
35
|
reference={filterButton}
|
34
36
|
shouldClosePopover={updateHide}
|
35
37
|
show={!hide}
|
38
|
+
{...popoverProps}
|
36
39
|
>
|
37
40
|
<div className="pb-form">
|
38
41
|
{typeof children === 'function'
|
@@ -13,6 +13,7 @@ type ResultsCountProps = {
|
|
13
13
|
const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
|
14
14
|
|
15
15
|
const resultTitle = () => {
|
16
|
+
if (results == null) return null
|
16
17
|
return (
|
17
18
|
<TitleCount
|
18
19
|
align="center"
|
@@ -24,6 +25,7 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
|
|
24
25
|
}
|
25
26
|
|
26
27
|
const justResults = () => {
|
28
|
+
if (results == null) return null
|
27
29
|
return (
|
28
30
|
<Caption
|
29
31
|
className="filter-results"
|
@@ -35,13 +37,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
|
|
35
37
|
}
|
36
38
|
|
37
39
|
const displayResultsCount = () => {
|
38
|
-
if (results && title) {
|
40
|
+
if (results != null && results >=0 && title) {
|
39
41
|
return (
|
40
42
|
<>
|
41
43
|
{resultTitle()}
|
42
44
|
</>
|
43
45
|
)
|
44
|
-
} else if (results) {
|
46
|
+
} else if (results !=null && results >=0 ) {
|
45
47
|
return (
|
46
48
|
<>
|
47
49
|
{justResults()}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
<%=
|
2
|
+
pb_rails("filter", props: {
|
3
|
+
id: "filter_popover_props",
|
4
|
+
position: "top",
|
5
|
+
filters: [
|
6
|
+
{ name: "name", value: "John Wick" },
|
7
|
+
{ name: "city", value: "San Francisco"}
|
8
|
+
],
|
9
|
+
sort_menu: [
|
10
|
+
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
11
|
+
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
12
|
+
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
13
|
+
],
|
14
|
+
template: "default",
|
15
|
+
results: 1,
|
16
|
+
popover_props: { width: "250px" },
|
17
|
+
}) do
|
18
|
+
%>
|
19
|
+
<%
|
20
|
+
example_collection = [
|
21
|
+
OpenStruct.new(name: "USA", value: 1),
|
22
|
+
OpenStruct.new(name: "Canada", value: 2),
|
23
|
+
OpenStruct.new(name: "Brazil", value: 3),
|
24
|
+
OpenStruct.new(name: "Philippines", value: 4),
|
25
|
+
OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
|
26
|
+
]
|
27
|
+
%>
|
28
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
29
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
30
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
|
31
|
+
|
32
|
+
<%= form.actions do |action| %>
|
33
|
+
<%= action.submit props: {
|
34
|
+
text: "Apply",
|
35
|
+
data: {
|
36
|
+
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
37
|
+
},}%>
|
38
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
@@ -0,0 +1,71 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
|
3
|
+
|
4
|
+
const FilterPopoverProps = (props) => {
|
5
|
+
const options = [
|
6
|
+
{ value: 'USA' },
|
7
|
+
{ value: 'Canada' },
|
8
|
+
{ value: 'Brazil' },
|
9
|
+
{ value: 'Philippines' },
|
10
|
+
{ value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
|
11
|
+
]
|
12
|
+
|
13
|
+
const popoverProps = {
|
14
|
+
width: "250px"
|
15
|
+
}
|
16
|
+
|
17
|
+
return (
|
18
|
+
<Filter
|
19
|
+
{...props}
|
20
|
+
double
|
21
|
+
filters={{
|
22
|
+
'Full Name': 'John Wick',
|
23
|
+
'City': 'San Francisco',
|
24
|
+
}}
|
25
|
+
popoverProps={popoverProps}
|
26
|
+
results={1}
|
27
|
+
sortOptions={{
|
28
|
+
popularity: 'Popularity',
|
29
|
+
// eslint-disable-next-line
|
30
|
+
manager_title: 'Manager\'s Title',
|
31
|
+
// eslint-disable-next-line
|
32
|
+
manager_name: 'Manager\'s Name',
|
33
|
+
}}
|
34
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
35
|
+
>
|
36
|
+
{({ closePopover }) => (
|
37
|
+
<form>
|
38
|
+
<TextInput
|
39
|
+
label="Example Text Field"
|
40
|
+
placeholder="Enter Text"
|
41
|
+
{...props}
|
42
|
+
/>
|
43
|
+
<Select
|
44
|
+
blankSelection="Select One..."
|
45
|
+
label="Example Collection Select"
|
46
|
+
name="Collection Select"
|
47
|
+
options={options}
|
48
|
+
{...props}
|
49
|
+
/>
|
50
|
+
<Flex
|
51
|
+
spacing="between"
|
52
|
+
{...props}
|
53
|
+
>
|
54
|
+
<Button
|
55
|
+
onClick={closePopover}
|
56
|
+
text="Apply"
|
57
|
+
{...props}
|
58
|
+
/>
|
59
|
+
<Button
|
60
|
+
text="Clear"
|
61
|
+
variant="secondary"
|
62
|
+
{...props}
|
63
|
+
/>
|
64
|
+
</Flex>
|
65
|
+
</form>
|
66
|
+
)}
|
67
|
+
</Filter>
|
68
|
+
)
|
69
|
+
}
|
70
|
+
|
71
|
+
export default FilterPopoverProps
|
@@ -0,0 +1 @@
|
|
1
|
+
This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popover_props` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover).
|
@@ -0,0 +1 @@
|
|
1
|
+
This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover/react) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popoverProps` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover/react).
|
@@ -10,6 +10,7 @@ examples:
|
|
10
10
|
- filter_max_width: Max Width for Popover Inside of Filter
|
11
11
|
- filter_max_height: Max Height for Popover Inside of Filter
|
12
12
|
- filter_placement: Filter Placement
|
13
|
+
- filter_popover_props: Popover Props
|
13
14
|
|
14
15
|
react:
|
15
16
|
- filter_default: Default
|
@@ -21,3 +22,5 @@ examples:
|
|
21
22
|
- filter_max_width: Max Width for Popover Inside of Filter
|
22
23
|
- filter_max_height: Max Height for Popover Inside of Filter
|
23
24
|
- filter_placement: Filter Placement
|
25
|
+
- filter_popover_props: Popover Props
|
26
|
+
|