playbook_ui 14.5.0.pre.alpha.PBNTR568dropdowncleaning4044 → 14.5.0.pre.alpha.PBNTR595popoverwidthpropfilterpopoverprop4158

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  3. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +2 -0
  4. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -0
  5. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -1
  6. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
  7. data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.html.erb +41 -0
  8. data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.jsx +71 -0
  9. data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_rails.md +1 -0
  10. data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_react.md +1 -0
  11. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
  13. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  15. data/app/pb_kits/playbook/pb_filter/filter.rb +2 -0
  16. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +17 -0
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +93 -0
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +1 -0
  19. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -0
  20. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
  21. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  22. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
  23. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  24. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  25. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  26. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  27. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
  28. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
  29. data/app/pb_kits/playbook/pb_popover/_popover.tsx +5 -1
  30. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
  31. data/app/pb_kits/playbook/pb_popover/popover.rb +3 -1
  32. data/dist/chunks/{_typeahead-CT2ByCBK.js → _typeahead-BKndSDgc.js} +1 -1
  33. data/dist/chunks/_weekday_stacked-DBH_rF_4.js +45 -0
  34. data/dist/chunks/vendor.js +1 -1
  35. data/dist/playbook-doc.js +1 -1
  36. data/dist/playbook-rails-react-bindings.js +1 -1
  37. data/dist/playbook-rails.js +1 -1
  38. data/dist/playbook.css +1 -1
  39. data/lib/playbook/version.rb +1 -1
  40. metadata +13 -4
  41. data/dist/chunks/_weekday_stacked-BTS5z219.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 9cb0ea44d9446ba7cc273398bef4f9f09b5a76fad2113f6f96053ac07b8a5e66
4
- data.tar.gz: b6fde3a92aa4bf941013e82af30a68c7b0f53e13e102dc3c01cd4136f57328c3
3
+ metadata.gz: 3c69ef4f757b7b9151cfcaba9de63b00d96ffae1f4d025b641c8da490837f472
4
+ data.tar.gz: c97c0a78b71fe319d903c2dfe0fc9e58bd1d7fdcab51eaff4cfa622c9fd53129
5
5
  SHA512:
6
- metadata.gz: eac329d0bcbab107ae7231915f187416fd871962d444dc4172688e9946e6a588360b14c3c972aab664824bb69c69c9db4ba15704c0d80b64f22bf01833487082
7
- data.tar.gz: f4772c6c2f546659cb6c572c69985109297ac2b392ddb6eb92d4ae9ab313e11413f7e9395f93c90078725731a53ebf6ffc6520ffa99f6c81288b8d825caf1c58
6
+ metadata.gz: 2852e96631890324a8179f30761e7edb5d39757e56e0c28aae06c033c357cbec9bcc385f796e9f09fe8ab9720fb0890b54c18918dc822279e4546bf3f53fc2b3
7
+ data.tar.gz: 58315e2d91a473d953d152cda638dca0d9e5322dec8c799ed48048f6bf36a8e8a99ded832024ff5df39efcb12fd27eb4785b020b0a8c71eceef833a7d7125228
@@ -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.
@@ -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_custom_width_rails",
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 FilterCustomWidth = (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 FilterCustomWidth
@@ -0,0 +1 @@
1
+ Filter can leverage `popover_props` to set a custom width to the popover, without affecting the Filter size.
@@ -0,0 +1 @@
1
+ Filter can leverage `popoverProps` to set a custom width to the popover, without affecting the Filter size.
@@ -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
@@ -9,6 +9,7 @@ examples:
9
9
  - sort_only: Sort Only
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
+ - filter_custom_width: Custom Width for Popover Inside of Filter
12
13
  - filter_placement: Filter Placement
13
14
 
14
15
  react:
@@ -20,4 +21,6 @@ examples:
20
21
  - sort_only: Sort Only
21
22
  - filter_max_width: Max Width for Popover Inside of Filter
22
23
  - filter_max_height: Max Height for Popover Inside of Filter
24
+ - filter_custom_width: Custom Width for Popover Inside of Filter
23
25
  - filter_placement: Filter Placement
26
+
@@ -7,3 +7,4 @@ export { default as SortOnly } from './_sort_only.jsx'
7
7
  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
+ export { default as FilterCustomWidth } from './_filter_custom_width.jsx'
@@ -71,13 +71,13 @@
71
71
  <% end %>
72
72
 
73
73
  <% if object.template != "sort_only"%>
74
- <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
74
+ <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }.merge(object.popover_props)) do %>
75
75
  <%= content %>
76
76
  <% end %>
77
77
  <%end%>
78
78
 
79
79
  <% if object.template != "filter_only"%>
80
- <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
80
+ <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}.merge(object.popover_props)) do %>
81
81
  <%= pb_rails("list") do %>
82
82
  <% object.sort_menu.each do |item| %>
83
83
  <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
@@ -15,6 +15,8 @@ module Playbook
15
15
  prop :placement, type: Playbook::Props::Enum,
16
16
  values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
17
17
  default: "bottom-start"
18
+ prop :popover_props, type: Playbook::Props::HashProp,
19
+ default: {}
18
20
 
19
21
  def classname
20
22
  generate_classname("pb_filter_kit").rstrip
@@ -202,6 +202,23 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
202
202
  };
203
203
  }, []);
204
204
 
205
+ useEffect(() => {
206
+ if (id) {
207
+ // Attach the clear function to the window, scoped by the id
208
+ (window as any)[`clearMultiLevelSelect_${id}`] = () => {
209
+ const resetData = modifyRecursive(formattedData, false);
210
+ setFormattedData(resetData);
211
+ setReturnedArray([]);
212
+ setDefaultReturn([]);
213
+ setSingleSelectedItem({ id: [], value: "", item: [] });
214
+ onSelect([]);
215
+ };
216
+ return () => {
217
+ delete (window as any)[`clearMultiLevelSelect_${id}`];
218
+ };
219
+ }
220
+ }, [formattedData, id, onSelect]);
221
+
205
222
  // Iterate over tree, find item and set checked or unchecked
206
223
  const modifyValue = (
207
224
  id: string,
@@ -0,0 +1,93 @@
1
+ <% treeData = [{
2
+ label: "Power Home Remodeling",
3
+ value: "Power Home Remodeling",
4
+ id: "100",
5
+ expanded: true,
6
+ children: [
7
+ {
8
+ label: "People",
9
+ value: "People",
10
+ id: "101",
11
+ expanded: true,
12
+ children: [
13
+ {
14
+ label: "Talent Acquisition",
15
+ value: "Talent Acquisition",
16
+ id: "102",
17
+ },
18
+ {
19
+ label: "Business Affairs",
20
+ value: "Business Affairs",
21
+ id: "103",
22
+ children: [
23
+ {
24
+ label: "Initiatives",
25
+ value: "Initiatives",
26
+ id: "104",
27
+ },
28
+ {
29
+ label: "Learning & Development",
30
+ value: "Learning & Development",
31
+ id: "105",
32
+ },
33
+ ],
34
+ },
35
+ {
36
+ label: "People Experience",
37
+ value: "People Experience",
38
+ id: "106",
39
+ },
40
+ ],
41
+ },
42
+ {
43
+ label: "Contact Center",
44
+ value: "Contact Center",
45
+ id: "107",
46
+ children: [
47
+ {
48
+ label: "Appointment Management",
49
+ value: "Appointment Management",
50
+ id: "108",
51
+ },
52
+ {
53
+ label: "Customer Service",
54
+ value: "Customer Service",
55
+ id: "109",
56
+ },
57
+ {
58
+ label: "Energy",
59
+ value: "Energy",
60
+ id: "110",
61
+ },
62
+ ],
63
+ },
64
+ ],
65
+ }] %>
66
+
67
+ <%= pb_rails("multi_level_select", props: {
68
+ id: "multi-level-select-reset-example",
69
+ name: "my_array",
70
+ tree_data: treeData,
71
+ return_all_selected: true
72
+ }) %>
73
+
74
+ <%= pb_rails("button", props: { text: "Reset", margin_top: "lg", id:"multilevelselect-reset-button" }) %>
75
+
76
+
77
+ <script>
78
+ window.addEventListener('DOMContentLoaded', () => {
79
+ const exampleResetButton = document.querySelector("#multilevelselect-reset-button");
80
+
81
+ exampleResetButton.addEventListener("click", () => {
82
+ clearMultiLevelSelectById('multi-level-select-reset-example');
83
+ });
84
+ function clearMultiLevelSelectById(id) {
85
+ const clearFunction = window[`clearMultiLevelSelect_${id}`];
86
+ if (clearFunction) {
87
+ clearFunction();
88
+ } else {
89
+ console.warn(`No clear function found for MultiLevelSelect with id: ${id}`);
90
+ }
91
+ }
92
+ })
93
+ </script>
@@ -0,0 +1 @@
1
+ In order to clear the multilevelselect selection using an external trigger (like a reset button), the `clearMultiLevelSelect` function can be used. See the code snippet below to see this in action. The function is scoped by id so an id MUST be used on the multilevelselect kit and passed to the function as shown for it to work.
@@ -7,6 +7,7 @@ examples:
7
7
  - multi_level_select_selected_ids: Selected Ids
8
8
  - multi_level_select_with_form: With Form
9
9
  - multi_level_select_color: With Pills (Custom Color)
10
+ - multi_level_select_reset: Reset Selection
10
11
 
11
12
  react:
12
13
  - multi_level_select_default: Default