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.
Files changed (112) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +25 -7
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +72 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +5 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/index.js +60 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -9
  9. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +1 -9
  10. data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
  11. data/app/pb_kits/playbook/pb_currency/_currency.tsx +16 -6
  12. data/app/pb_kits/playbook/pb_currency/currency.rb +38 -11
  13. data/app/pb_kits/playbook/pb_currency/currency.test.js +35 -0
  14. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +7 -0
  15. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +18 -0
  16. data/app/pb_kits/playbook/pb_currency/docs/example.yml +3 -1
  17. data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
  18. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
  19. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
  20. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
  21. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +84 -3
  22. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +28 -5
  23. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
  24. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  25. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +9 -0
  26. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +33 -0
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +10 -0
  28. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +34 -0
  29. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -0
  30. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +5 -0
  31. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -0
  32. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +10 -1
  33. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  34. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  35. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +2 -0
  36. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -0
  37. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -1
  38. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
  39. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  40. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb +41 -0
  41. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +71 -0
  42. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md +1 -0
  43. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md +1 -0
  44. data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
  45. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  46. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  47. data/app/pb_kits/playbook/pb_filter/filter.rb +2 -0
  48. data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
  49. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
  50. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
  51. data/app/pb_kits/playbook/pb_flex/flex_item.rb +7 -2
  52. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +39 -0
  53. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
  54. data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
  55. data/app/pb_kits/playbook/pb_form/form.rb +2 -0
  56. data/app/pb_kits/playbook/pb_form/formHelper.js +27 -0
  57. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +9 -1
  58. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +19 -0
  59. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +27 -0
  60. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
  61. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
  62. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  63. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +211 -227
  64. data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +5 -0
  65. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
  66. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +93 -0
  67. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +1 -0
  68. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +105 -0
  69. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +1 -0
  70. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +106 -0
  71. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +1 -0
  72. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +4 -0
  73. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
  74. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +149 -0
  75. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
  76. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  77. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
  78. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  79. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  80. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  81. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  82. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
  83. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
  84. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +86 -18
  85. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +15 -6
  86. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
  87. data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss +849 -931
  88. data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts +4 -1
  89. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -2
  90. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
  91. data/app/pb_kits/playbook/pb_popover/popover.rb +3 -1
  92. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +4 -1
  93. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +3 -1
  94. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -1
  95. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
  96. data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
  97. data/dist/chunks/_typeahead-BhHnXJjy.js +22 -0
  98. data/dist/chunks/_weekday_stacked-C2icYweq.js +45 -0
  99. data/dist/chunks/{lib-CEpcaI8y.js → lib-D-mTv-kp.js} +1 -1
  100. data/dist/chunks/{pb_form_validation-D9zkwt2b.js → pb_form_validation-BkWGwJsl.js} +1 -1
  101. data/dist/chunks/vendor.js +1 -1
  102. data/dist/playbook-doc.js +1 -1
  103. data/dist/playbook-rails-react-bindings.js +1 -1
  104. data/dist/playbook-rails.js +1 -1
  105. data/dist/playbook.css +1 -1
  106. data/lib/playbook/kit_base.rb +21 -1
  107. data/lib/playbook/pb_doc_helper.rb +5 -5
  108. data/lib/playbook/pb_forms_helper.rb +3 -1
  109. data/lib/playbook/version.rb +2 -2
  110. metadata +40 -9
  111. data/dist/chunks/_typeahead-BYw0HEgO.js +0 -22
  112. 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: $border_light;
72
+ background-color: $bg_light;
73
73
  }
74
74
 
75
75
  &[class*="_focused"] {
76
- background-color: $border_light;
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: $primary !important;
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
- const Dropdown = (props: DropdownProps) => {
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
- triggerRef
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
@@ -62,7 +62,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
62
62
  const focusedClass = isFocused && "focused";
63
63
 
64
64
  const selectedClass = `${
65
- selected.label === option.label
65
+ selected?.label === option.label
66
66
  ? "selected"
67
67
  : "list"
68
68
  }`;
@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
73
73
  !autocomplete && "select_only"
74
74
  );
75
75
 
76
- const customDisplayPlaceholder = selected.label ? (
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.label
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()}
@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
78
78
  double
79
79
  minWidth="375px"
80
80
  onSortChange={SortingChangeCallback}
81
- results={1}
81
+ results={0}
82
82
  sortOptions={{
83
83
  popularity: 'Popularity',
84
84
  // eslint-disable-next-line
@@ -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
+