playbook_ui 11.9.0.pre.alpha.fileupload1 → 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 (87) 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_checkbox/_checkbox.scss +10 -0
  13. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +2 -2
  14. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +5 -0
  15. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +8 -3
  16. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +41 -9
  17. data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js +1 -1
  18. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +4 -2
  19. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +20 -0
  20. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.html.erb +60 -0
  21. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +98 -0
  22. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.md +4 -0
  23. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb +1 -1
  24. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.html.erb +40 -0
  25. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +68 -0
  26. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md +4 -0
  27. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +6 -4
  28. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -0
  29. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +5 -28
  30. data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +0 -1
  31. data/app/pb_kits/playbook/pb_file_upload/docs/index.js +0 -1
  32. data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +3 -3
  33. data/app/pb_kits/playbook/pb_filter/_filter.scss +0 -2
  34. data/app/pb_kits/playbook/pb_filter/docs/_description.md +5 -1
  35. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +6 -6
  36. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +58 -45
  37. data/app/pb_kits/playbook/pb_filter/docs/{_filter_min_width.html.erb → _filter_max_width.html.erb} +3 -3
  38. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx +69 -0
  39. data/app/pb_kits/playbook/pb_filter/docs/{_filter_default.md → _filter_max_width.md} +1 -1
  40. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +4 -4
  41. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +60 -47
  42. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +2 -2
  43. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +31 -25
  44. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +2 -2
  45. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +31 -24
  46. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +2 -2
  47. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +30 -24
  48. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +1 -1
  49. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +2 -2
  50. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx +30 -25
  51. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -3
  52. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -2
  53. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +5 -0
  54. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +1 -0
  55. data/app/pb_kits/playbook/pb_legend/_legend.jsx +12 -2
  56. data/app/pb_kits/playbook/pb_legend/_legend.scss +7 -1
  57. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb +3 -0
  58. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +24 -0
  59. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.md +1 -0
  60. data/app/pb_kits/playbook/pb_legend/docs/example.yml +2 -0
  61. data/app/pb_kits/playbook/pb_legend/docs/index.js +1 -0
  62. data/app/pb_kits/playbook/pb_legend/legend.html.erb +1 -1
  63. data/app/pb_kits/playbook/pb_legend/legend.rb +9 -1
  64. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  65. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +59 -0
  66. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +1 -0
  67. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md +1 -0
  68. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +6 -0
  69. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +7 -0
  70. data/app/pb_kits/playbook/pb_pagination/pagination.rb +11 -0
  71. data/app/pb_kits/playbook/pb_radio/_radio.scss +1 -0
  72. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +6 -0
  73. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +0 -2
  74. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +1 -1
  75. data/app/pb_kits/playbook/pb_table/_table.jsx +5 -3
  76. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +4 -4
  77. data/app/pb_kits/playbook/pb_timeline/_timeline.scss +1 -2
  78. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb +23 -0
  79. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx +47 -0
  80. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md +1 -0
  81. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +37 -2
  82. data/app/pb_kits/playbook/tokens/_colors.scss +11 -1
  83. data/lib/playbook/version.rb +2 -2
  84. metadata +24 -7
  85. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +0 -51
  86. data/app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx +0 -62
  87. 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'
@@ -12,42 +12,26 @@ import Card from '../pb_card/_card'
12
12
  type FileUploadProps = {
13
13
  accept?: string[],
14
14
  className?: string,
15
- data?: {[key: string]: string | number},
15
+ data?: object,
16
16
  acceptedFilesDescription?: string,
17
- maxSize?: number,
18
17
  onFilesAccepted: Callback<File, File>,
19
- onFilesRejected: Callback<string, string>,
20
18
  }
21
19
 
22
- const getFormattedFileSize = (fileSize: number): string => {
23
- return `${fileSize / 1e+6} MB`
24
- }
25
-
26
- const FileUpload = (props: FileUploadProps): React.ReactElement => {
20
+ const FileUpload = (props: FileUploadProps) => {
27
21
  const {
28
22
  accept = null,
29
23
  acceptedFilesDescription = '',
30
24
  className,
31
25
  data = {},
32
- maxSize,
33
26
  onFilesAccepted = noop,
34
- onFilesRejected = noop,
35
27
  } = props
36
28
 
37
- const onDrop = useCallback((files) => {
38
- onFilesAccepted(files)
39
- }, [onFilesAccepted])
40
- const { getRootProps, getInputProps, isDragActive, rejectedFiles } = useDropzone({
29
+ const onDrop = useCallback((files) => onFilesAccepted(files), []);
30
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({
41
31
  accept,
42
- maxSize,
43
32
  onDrop,
44
33
  })
45
34
 
46
- const getMaxFileSizeText = () => `Max file size is ${getFormattedFileSize(maxSize)}.`
47
-
48
- const isFileTooLarge = maxSize && rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
49
- if (isFileTooLarge) onFilesRejected(`File size is too large! ${getMaxFileSizeText()}`)
50
-
51
35
  const acceptedFileTypes = () => {
52
36
  return accept.map((fileType) => {
53
37
  if (fileType.startsWith('image/')) {
@@ -60,13 +44,6 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
60
44
 
61
45
  const dataProps = buildDataProps(data)
62
46
 
63
- const getDescription = () => {
64
- let msg = ""
65
- accept === null ? msg += 'Choose a file or drag it here.' : msg += `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`
66
- if (maxSize) msg += ` ${getMaxFileSizeText()}`
67
- return msg
68
- }
69
-
70
47
  return (
71
48
  <div
72
49
  className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
@@ -79,7 +56,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
79
56
  {isDragActive ?
80
57
  <p>{'Drop the files here ...'}</p>
81
58
  :
82
- <p>{getDescription()}</p>
59
+ <p>{accept === null ? 'Choose a file or drag it here' : `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}`}</p>
83
60
  }
84
61
  </Body>
85
62
  </Card>
@@ -6,5 +6,4 @@ examples:
6
6
  - file_upload_default: Default List of files to upload
7
7
  - file_upload_accept: Accept only certain types of files
8
8
  - file_upload_custom_description: Add your one accepted files description
9
- - file_upload_max_size: Set a file size limit
10
9
 
@@ -1,4 +1,3 @@
1
1
  export { default as FileUploadDefault } from './_file_upload_default.jsx'
2
2
  export { default as FileUploadAccept } from './_file_upload_accept.jsx'
3
3
  export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
4
- export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
@@ -27,14 +27,14 @@ test('shows default drag text', () => {
27
27
  expect(kit).toHaveTextContent('Choose a file or drag it here')
28
28
  })
29
29
 
30
- test('displays max file size text', () => {
30
+ test('shows type-specific drag text', () => {
31
31
  render(
32
32
  <FileUpload
33
+ accept={['image/svg+xml']}
33
34
  data={{ testid: testid }}
34
- maxSize={1e+6}
35
35
  />
36
36
  )
37
37
 
38
38
  const kit = screen.getByTestId(testid)
39
- expect(kit).toHaveTextContent('Choose a file or drag it here. Max file size is 1 MB.')
39
+ expect(kit).toHaveTextContent('Choose a file or drag it here. The accepted file types are: svg+xml')
40
40
  })
@@ -73,7 +73,6 @@
73
73
  }
74
74
 
75
75
  .maskContainer::after {
76
- background-image: linear-gradient(to right, rgba($card_light,.3) , rgba($card_light,1));
77
76
  content: " ";
78
77
  height: 48px;
79
78
  padding-left: $space_xl;
@@ -82,7 +81,6 @@
82
81
  }
83
82
 
84
83
  .maskContainer::before {
85
- background-image: linear-gradient(to right, rgba($card_light,.3) , rgba($card_light,1));
86
84
  content: " ";
87
85
  height: 48px;
88
86
  padding-right: $space_sm;
@@ -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| %>