playbook_ui 11.9.0 → 11.10.0.pre.alpha.pagination1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/data/menu.yml +1 -0
  4. data/app/pb_kits/playbook/pb_background/_background.tsx +1 -1
  5. data/app/pb_kits/playbook/pb_background/background.rb +5 -0
  6. data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx +1 -1
  7. data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.html.erb +11 -0
  8. data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx +44 -0
  9. data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.md +1 -0
  10. data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -0
  11. data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
  12. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +5 -0
  13. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +8 -3
  14. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +41 -9
  15. data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js +1 -1
  16. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +4 -2
  17. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +20 -0
  18. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.html.erb +60 -0
  19. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +98 -0
  20. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.md +4 -0
  21. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb +1 -1
  22. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.html.erb +40 -0
  23. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +68 -0
  24. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md +4 -0
  25. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +6 -4
  26. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -0
  27. data/app/pb_kits/playbook/pb_filter/docs/_description.md +5 -1
  28. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +6 -6
  29. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +58 -45
  30. data/app/pb_kits/playbook/pb_filter/docs/{_filter_min_width.html.erb → _filter_max_width.html.erb} +3 -3
  31. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx +69 -0
  32. data/app/pb_kits/playbook/pb_filter/docs/{_filter_default.md → _filter_max_width.md} +1 -1
  33. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +4 -4
  34. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +60 -47
  35. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +2 -2
  36. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +31 -25
  37. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +2 -2
  38. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +31 -24
  39. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +2 -2
  40. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +30 -24
  41. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +1 -1
  42. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +2 -2
  43. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx +30 -25
  44. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -3
  45. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -2
  46. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +5 -0
  47. data/app/pb_kits/playbook/pb_legend/_legend.jsx +12 -2
  48. data/app/pb_kits/playbook/pb_legend/_legend.scss +7 -1
  49. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb +3 -0
  50. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +24 -0
  51. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.md +1 -0
  52. data/app/pb_kits/playbook/pb_legend/docs/example.yml +2 -0
  53. data/app/pb_kits/playbook/pb_legend/docs/index.js +1 -0
  54. data/app/pb_kits/playbook/pb_legend/legend.html.erb +1 -1
  55. data/app/pb_kits/playbook/pb_legend/legend.rb +9 -1
  56. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +59 -0
  57. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +1 -0
  58. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md +1 -0
  59. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +6 -0
  60. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +7 -0
  61. data/app/pb_kits/playbook/pb_pagination/pagination.rb +11 -0
  62. data/app/pb_kits/playbook/pb_radio/_radio.scss +1 -0
  63. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +0 -2
  64. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +37 -2
  65. data/app/pb_kits/playbook/tokens/_colors.scss +11 -1
  66. data/lib/playbook/version.rb +2 -2
  67. metadata +25 -8
  68. data/app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx +0 -62
  69. data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx +0 -57
@@ -0,0 +1,68 @@
1
+ import React from 'react'
2
+ import { Collapsible } from '../..'
3
+
4
+ const CollapsibleSize = () => (
5
+ <div>
6
+ <Collapsible
7
+ iconSize="xs"
8
+ marginBottom="xs"
9
+ >
10
+ <Collapsible.Main>
11
+ <div>{'Extra Small Section'}</div>
12
+ </Collapsible.Main>
13
+ <Collapsible.Content>
14
+ <div>
15
+ {
16
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
17
+ }
18
+ </div>
19
+ </Collapsible.Content>
20
+ </Collapsible>
21
+ <Collapsible
22
+ iconSize="sm"
23
+ marginBottom="xs"
24
+ >
25
+ <Collapsible.Main>
26
+ <div>{'Small Section'}</div>
27
+ </Collapsible.Main>
28
+ <Collapsible.Content>
29
+ <div>
30
+ {
31
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
32
+ }
33
+ </div>
34
+ </Collapsible.Content>
35
+ </Collapsible>
36
+ <Collapsible
37
+ marginBottom="xs"
38
+ >
39
+ <Collapsible.Main>
40
+ <div>{'Default Section'}</div>
41
+ </Collapsible.Main>
42
+ <Collapsible.Content>
43
+ <div>
44
+ {
45
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
46
+ }
47
+ </div>
48
+ </Collapsible.Content>
49
+ </Collapsible>
50
+ <Collapsible
51
+ iconSize="lg"
52
+ marginBottom="xs"
53
+ >
54
+ <Collapsible.Main>
55
+ <div>{'Large Section'}</div>
56
+ </Collapsible.Main>
57
+ <Collapsible.Content>
58
+ <div>
59
+ {
60
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
61
+ }
62
+ </div>
63
+ </Collapsible.Content>
64
+ </Collapsible>
65
+ </div>
66
+ )
67
+
68
+ export default CollapsibleSize
@@ -0,0 +1,4 @@
1
+ ##### Prop
2
+ This kit uses `icon` sizes. If you don't give it a size, it will default to medium. You can be replaced with the sizes below:
3
+
4
+ * `lg` `xs` `sm` `1x` `2x` `3x` `4x` `5x` `6x` `7x` `8x` `9x` `10x`
@@ -1,9 +1,11 @@
1
1
  examples:
2
2
 
3
3
  rails:
4
- - collapsible_default: Light
4
+ - collapsible_default: Default
5
+ - collapsible_size: Size
6
+ - collapsible_color: Color
5
7
 
6
8
  react:
7
- - collapsible_default: Light
8
-
9
-
9
+ - collapsible_default: Default
10
+ - collapsible_size: Size
11
+ - collapsible_color: Color
@@ -1 +1,3 @@
1
1
  export { default as CollapsibleDefault } from './_collapsible_default.jsx'
2
+ export { default as CollapsibleSize } from './_collapsible_size.jsx'
3
+ export { default as CollapsibleColor } from './_collapsible_color.jsx'
@@ -1,3 +1,7 @@
1
- **Note**
2
1
  This kit can be implemented in a variety of ways.
3
2
  To see examples of how to implement this kit in production visit the **/dev_docs/search** page in production.
3
+
4
+ **Note**
5
+ All React examples are wrapped in a <code>{closePopover}</code> method to ensure the popover closes on click of "Apply".
6
+
7
+ The `min_width` prop for the popover inside of filter is used in all the examples and is set to 360px. That is the `min_width` prop we recommend using as it is the same pixel value as our `max_width` `sm` global prop.
@@ -1,6 +1,6 @@
1
1
  <%=
2
2
  pb_rails("filter", props: {
3
- min_width: "375px",
3
+ min_width: "360px",
4
4
  id: "1",
5
5
  filters: [
6
6
  { name: "name", value: "John Wick" },
@@ -21,12 +21,12 @@
21
21
  OpenStruct.new(name: "Canada", value: 2),
22
22
  OpenStruct.new(name: "Brazil", value: 3),
23
23
  OpenStruct.new(name: "Philippines", value: 4),
24
- OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
24
+ OpenStruct.new(name: "A galaxy far far away...", value: 5)
25
25
  ]
26
26
  %>
27
27
  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
28
28
  <%= form.text_field :example_text_field, props: { label: true } %>
29
- <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
29
+ <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
30
30
 
31
31
  <%= form.actions do |action| %>
32
32
  <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
@@ -40,7 +40,7 @@
40
40
 
41
41
  <%=
42
42
  pb_rails("filter", props: {
43
- min_width: "375px",
43
+ min_width: "360px",
44
44
  id: "def2",
45
45
  sort_menu: [
46
46
  { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
@@ -57,12 +57,12 @@
57
57
  OpenStruct.new(name: "Canada", value: 2),
58
58
  OpenStruct.new(name: "Brazil", value: 3),
59
59
  OpenStruct.new(name: "Philippines", value: 4),
60
- OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
60
+ OpenStruct.new(name: "A galaxy far far away...", value: 5)
61
61
  ]
62
62
  %>
63
63
  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
64
64
  <%= form.text_field :example_text_field, props: { label: true } %>
65
- <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
65
+ <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
66
66
 
67
67
  <%= form.actions do |action| %>
68
68
  <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
@@ -35,34 +35,41 @@ const FilterDefault = (props) => {
35
35
  sortValue={[{ name: 'popularity', dir: 'desc' }]}
36
36
  {...props}
37
37
  >
38
- <TextInput
39
- label="Full Name"
40
- placeholder="Enter name"
41
- {...props}
42
- />
38
+ {({ closePopover }) => (
39
+ <form>
43
40
 
44
- <Select
45
- blankSelection="Select One..."
46
- label="Territory"
47
- maxWidth="sm"
48
- name="location"
49
- options={options}
50
- {...props}
51
- />
52
- <Flex
53
- spacing="between"
54
- {...props}
55
- >
56
- <Button
57
- text="Apply"
41
+ <TextInput
42
+ label="Full Name"
43
+ placeholder="Enter name"
58
44
  {...props}
59
45
  />
60
- <Button
61
- text="Clear"
62
- variant="secondary"
46
+
47
+ <Select
48
+ blankSelection="Select One..."
49
+ label="Territory"
50
+ maxWidth="sm"
51
+ name="location"
52
+ options={options}
63
53
  {...props}
64
54
  />
65
- </Flex>
55
+ <Flex
56
+ spacing="between"
57
+ {...props}
58
+ >
59
+ <Button
60
+ onClick={closePopover}
61
+ text="Apply"
62
+ {...props}
63
+ />
64
+ <Button
65
+ text="Clear"
66
+ variant="secondary"
67
+ {...props}
68
+ />
69
+ </Flex>
70
+ </form>
71
+ )}
72
+
66
73
  </Filter>
67
74
 
68
75
  <br />
@@ -82,33 +89,39 @@ const FilterDefault = (props) => {
82
89
  sortValue={[{ name: 'popularity', dir: 'desc' }]}
83
90
  {...props}
84
91
  >
85
- <TextInput
86
- label="Example Text Field"
87
- placeholder="Enter Text"
88
- {...props}
89
- />
92
+ {({ closePopover }) => (
93
+ <form>
90
94
 
91
- <Select
92
- blankSelection="Select One..."
93
- label="Example Collection Select"
94
- name="Collection Select"
95
- options={options}
96
- {...props}
97
- />
98
- <Flex
99
- spacing="between"
100
- {...props}
101
- >
102
- <Button
103
- text="Apply"
95
+ <TextInput
96
+ label="Example Text Field"
97
+ placeholder="Enter Text"
104
98
  {...props}
105
99
  />
106
- <Button
107
- text="Clear"
108
- variant="secondary"
100
+
101
+ <Select
102
+ blankSelection="Select One..."
103
+ label="Example Collection Select"
104
+ name="Collection Select"
105
+ options={options}
109
106
  {...props}
110
107
  />
111
- </Flex>
108
+ <Flex
109
+ spacing="between"
110
+ {...props}
111
+ >
112
+ <Button
113
+ onClick={closePopover}
114
+ text="Apply"
115
+ {...props}
116
+ />
117
+ <Button
118
+ text="Clear"
119
+ variant="secondary"
120
+ {...props}
121
+ />
122
+ </Flex>
123
+ </form>
124
+ )}
112
125
  </Filter>
113
126
  </>
114
127
  )
@@ -1,6 +1,6 @@
1
1
  <%=
2
2
  pb_rails("filter", props: {
3
- min_width: "375px",
3
+ min_width: "360px",
4
4
  id: "25",
5
5
  position: "top",
6
6
  filters: [
@@ -22,12 +22,12 @@
22
22
  OpenStruct.new(name: "Canada", value: 2),
23
23
  OpenStruct.new(name: "Brazil", value: 3),
24
24
  OpenStruct.new(name: "Philippines", value: 4),
25
- OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
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
26
  ]
27
27
  %>
28
28
  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
29
29
  <%= form.text_field :example_text_field, props: { label: true } %>
30
- <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
30
+ <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
31
31
 
32
32
  <%= form.actions do |action| %>
33
33
  <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
@@ -0,0 +1,69 @@
1
+ import React from 'react'
2
+ import { Button, Filter, Flex, Select } from '../../'
3
+
4
+ const FilterMaxWidth = (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
+ return (
13
+ <Filter
14
+ {...props}
15
+ double
16
+ filters={{
17
+ 'Full Name': 'John Wick',
18
+ 'City': 'San Francisco',
19
+ }}
20
+ minWidth="360px"
21
+ results={1}
22
+ sortOptions={{
23
+ popularity: 'Popularity',
24
+ // eslint-disable-next-line
25
+ manager_title: 'Manager\'s Title',
26
+ // eslint-disable-next-line
27
+ manager_name: 'Manager\'s Name',
28
+ }}
29
+ sortValue={[{ name: 'popularity', dir: 'desc' }]}
30
+ >
31
+ {({ closePopover }) => (
32
+ <form>
33
+
34
+ <Select
35
+ blankSelection="Select One..."
36
+ label="Territory"
37
+ maxWidth="sm"
38
+ name="location"
39
+ options={options}
40
+ />
41
+ <Button
42
+ text="Apply"
43
+ />
44
+
45
+ <Select
46
+ blankSelection="Select One..."
47
+ label="Territory"
48
+ name="location"
49
+ options={options}
50
+ />
51
+ <Flex
52
+ spacing="between"
53
+ >
54
+ <Button
55
+ onClick={closePopover}
56
+ text="Apply"
57
+ />
58
+ <Button
59
+ text="Clear"
60
+ variant="secondary"
61
+ />
62
+ </Flex>
63
+ </form>
64
+ )}
65
+ </Filter>
66
+ )
67
+ }
68
+
69
+ export default FilterMaxWidth
@@ -1 +1 @@
1
- Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
1
+ Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
@@ -1,6 +1,6 @@
1
1
  <%=
2
2
  pb_rails("filter", props: {
3
- min_width: "375px",
3
+ min_width: "360px",
4
4
  id: "3",
5
5
  background: false,
6
6
  filters: [
@@ -22,7 +22,7 @@
22
22
  OpenStruct.new(name: "Canada", value: 2),
23
23
  OpenStruct.new(name: "Brazil", value: 3),
24
24
  OpenStruct.new(name: "Philippines", value: 4),
25
- OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
25
+ OpenStruct.new(name: "A galaxy far far away...", value: 5)
26
26
  ]
27
27
  %>
28
28
 
@@ -41,7 +41,7 @@
41
41
 
42
42
  <%=
43
43
  pb_rails("filter", props: {
44
- min_width: "375px",
44
+ min_width: "360px",
45
45
  id: "4",
46
46
  background: false,
47
47
  filters: [
@@ -62,7 +62,7 @@
62
62
  OpenStruct.new(name: "Canada", value: 2),
63
63
  OpenStruct.new(name: "Brazil", value: 3),
64
64
  OpenStruct.new(name: "Philippines", value: 4),
65
- OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
65
+ OpenStruct.new(name: "A galaxy far far away...", value: 5)
66
66
  ]
67
67
  %>
68
68
  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
@@ -7,7 +7,7 @@ const FilterNoBackground = (props) => {
7
7
  { value: 'Canada' },
8
8
  { value: 'Brazil' },
9
9
  { value: 'Philippines' },
10
- { value: 'A galaxy far far away, like really far away...' },
10
+ { value: 'A galaxy far far away...' },
11
11
  ]
12
12
  return (
13
13
  <>
@@ -17,7 +17,7 @@ const FilterNoBackground = (props) => {
17
17
  'Full Name': 'John Wick',
18
18
  'City': 'Las Vegas',
19
19
  }}
20
- minWidth="375px"
20
+ minWidth="360px"
21
21
  results={3}
22
22
  sortOptions={{
23
23
  popularity: 'Popularity',
@@ -29,33 +29,40 @@ const FilterNoBackground = (props) => {
29
29
  sortValue={[{ name: 'popularity', dir: 'desc' }]}
30
30
  {...props}
31
31
  >
32
- <TextInput
33
- label="Full Name"
34
- placeholder="Enter name"
35
- {...props}
36
- />
32
+ {({ closePopover }) => (
33
+ <form>
37
34
 
38
- <Select
39
- blankSelection="Select One..."
40
- label="Territory"
41
- name="location"
42
- options={options}
43
- {...props}
44
- />
45
- <Flex
46
- spacing="between"
47
- {...props}
48
- >
49
- <Button
50
- text="Apply"
35
+ <TextInput
36
+ label="Full Name"
37
+ placeholder="Enter name"
51
38
  {...props}
52
39
  />
53
- <Button
54
- text="Clear"
55
- variant="secondary"
40
+
41
+ <Select
42
+ blankSelection="Select One..."
43
+ label="Territory"
44
+ name="location"
45
+ options={options}
56
46
  {...props}
57
47
  />
58
- </Flex>
48
+ <Flex
49
+ spacing="between"
50
+ {...props}
51
+ >
52
+ <Button
53
+ onClick={closePopover}
54
+ text="Apply"
55
+ {...props}
56
+ />
57
+ <Button
58
+ text="Clear"
59
+ variant="secondary"
60
+ {...props}
61
+ />
62
+ </Flex>
63
+ </form>
64
+ )}
65
+
59
66
  </Filter>
60
67
 
61
68
  <Filter
@@ -65,7 +72,7 @@ const FilterNoBackground = (props) => {
65
72
  'Full Name': 'John Wick',
66
73
  'City': 'Las Vegas',
67
74
  }}
68
- minWidth="375px"
75
+ minWidth="360px"
69
76
  results={3}
70
77
  sortOptions={{
71
78
  popularity: 'Popularity',
@@ -77,33 +84,39 @@ const FilterNoBackground = (props) => {
77
84
  sortValue={[{ name: 'popularity', dir: 'desc' }]}
78
85
  {...props}
79
86
  >
80
- <TextInput
81
- label="Full Name"
82
- placeholder="Enter name"
83
- {...props}
84
- />
87
+ {({ closePopover }) => (
88
+ <form>
85
89
 
86
- <Select
87
- blankSelection="Select One..."
88
- label="Territory"
89
- name="location"
90
- options={options}
91
- {...props}
92
- />
93
- <Flex
94
- spacing="between"
95
- {...props}
96
- >
97
- <Button
98
- text="Apply"
90
+ <TextInput
91
+ label="Full Name"
92
+ placeholder="Enter name"
99
93
  {...props}
100
94
  />
101
- <Button
102
- text="Clear"
103
- variant="secondary"
95
+
96
+ <Select
97
+ blankSelection="Select One..."
98
+ label="Territory"
99
+ name="location"
100
+ options={options}
104
101
  {...props}
105
102
  />
106
- </Flex>
103
+ <Flex
104
+ spacing="between"
105
+ {...props}
106
+ >
107
+ <Button
108
+ onClick={closePopover}
109
+ text="Apply"
110
+ {...props}
111
+ />
112
+ <Button
113
+ text="Clear"
114
+ variant="secondary"
115
+ {...props}
116
+ />
117
+ </Flex>
118
+ </form>
119
+ )}
107
120
  </Filter>
108
121
  </>
109
122
  )
@@ -1,6 +1,6 @@
1
1
  <%=
2
2
  pb_rails("filter", props: {
3
- min_width: "375px",
3
+ min_width: "360px",
4
4
  id: "nosort",
5
5
  filters: [
6
6
  { name: "name", value: "John Wick" }
@@ -15,7 +15,7 @@
15
15
  OpenStruct.new(name: "Canada", value: 2),
16
16
  OpenStruct.new(name: "Brazil", value: 3),
17
17
  OpenStruct.new(name: "Philippines", value: 4),
18
- OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
18
+ OpenStruct.new(name: "A galaxy far far away...", value: 5)
19
19
  ]
20
20
  %>
21
21
 
@@ -7,45 +7,51 @@ const FilterNoSort = (props) => {
7
7
  { value: 'Canada' },
8
8
  { value: 'Brazil' },
9
9
  { value: 'Philippines' },
10
- { value: 'A galaxy far far away, like really far away...' },
10
+ { value: 'A galaxy far far away...' },
11
11
  ]
12
12
  return (
13
13
  <Filter
14
14
  filters={{
15
15
  'Full Name': 'John Wick',
16
16
  }}
17
- minWidth="375px"
17
+ minWidth="360px"
18
18
  results={546}
19
19
  sortValue={[{ name: 'popularity', dir: 'desc' }]}
20
20
  {...props}
21
21
  >
22
- <TextInput
23
- label="Full Name"
24
- placeholder="Enter name"
25
- {...props}
26
- />
27
-
28
- <Select
29
- blankSelection="Select One..."
30
- label="Territory"
31
- name="location"
32
- options={options}
33
- {...props}
34
- />
35
- <Flex
36
- spacing="between"
37
- {...props}
38
- >
39
- <Button
40
- text="Apply"
22
+ {({ closePopover }) => (
23
+ <form>
24
+ <TextInput
25
+ label="Full Name"
26
+ placeholder="Enter name"
41
27
  {...props}
42
28
  />
43
- <Button
44
- text="Clear"
45
- variant="secondary"
29
+
30
+ <Select
31
+ blankSelection="Select One..."
32
+ label="Territory"
33
+ name="location"
34
+ options={options}
46
35
  {...props}
47
36
  />
48
- </Flex>
37
+ <Flex
38
+ spacing="between"
39
+ {...props}
40
+ >
41
+ <Button
42
+ onClick={closePopover}
43
+ text="Apply"
44
+ {...props}
45
+ />
46
+ <Button
47
+ text="Clear"
48
+ variant="secondary"
49
+ {...props}
50
+ />
51
+ </Flex>
52
+ </form>
53
+ )}
54
+
49
55
  </Filter>
50
56
  )
51
57
  }