playbook_ui 7.0.1 → 7.1.0.pre.alpha1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (137) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +4 -3
  3. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +0 -1
  4. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -0
  5. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +3 -3
  6. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +82 -90
  7. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss +57 -0
  8. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss +27 -0
  9. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb +4 -2
  10. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb +17 -7
  11. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +32 -9
  12. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb +18 -7
  13. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +37 -9
  14. data/app/pb_kits/playbook/pb_button_toolbar/docs/example.yml +3 -7
  15. data/app/pb_kits/playbook/pb_button_toolbar/docs/index.js +0 -2
  16. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +1 -2
  17. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +1 -3
  18. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +3 -2
  19. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +34 -32
  20. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +1 -2
  21. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +1 -2
  22. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -0
  23. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +4 -0
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +4 -0
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +9 -9
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +8 -8
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +3 -1
  28. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +1 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +1 -0
  30. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
  31. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -2
  32. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb +8 -14
  33. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +122 -39
  34. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +33 -2
  35. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb +44 -9
  36. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb +14 -1
  37. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +45 -1
  38. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb +3 -2
  39. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +29 -15
  40. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +10 -0
  41. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb +21 -0
  42. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx +38 -0
  43. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb +2 -1
  44. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx +1 -2
  45. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -1
  46. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +1 -1
  48. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
  50. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
  51. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +7 -1
  52. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +18 -0
  53. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  54. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  55. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -3
  56. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +3 -3
  57. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +1 -0
  58. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +0 -1
  59. data/app/pb_kits/playbook/pb_popover/_popover.scss +6 -4
  60. data/app/pb_kits/playbook/pb_popover/index.js +3 -1
  61. data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +3 -0
  62. data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +168 -33
  63. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +3 -1
  64. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +10 -8
  65. data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -1
  66. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +14 -16
  67. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +6 -3
  68. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb +17 -1
  69. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +17 -1
  70. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +10 -3
  71. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +11 -1
  72. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +1 -1
  73. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb +34 -0
  74. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx +68 -0
  75. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.md +2 -0
  76. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb +61 -0
  77. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx +89 -0
  78. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.md +1 -0
  79. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb +34 -0
  80. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx +68 -0
  81. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.md +2 -0
  82. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb +43 -0
  83. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +80 -0
  84. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.md +1 -0
  85. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb +34 -0
  86. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx +63 -0
  87. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md +1 -0
  88. data/app/pb_kits/playbook/pb_table/docs/example.yml +12 -0
  89. data/app/pb_kits/playbook/pb_table/docs/index.js +6 -0
  90. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +5 -5
  91. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb +10 -0
  92. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +1 -0
  93. data/app/pb_kits/playbook/pb_toggle/toggle.rb +4 -1
  94. data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +24 -20
  95. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +19 -1
  96. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +8 -1
  97. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +21 -13
  98. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
  99. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb +1 -1
  100. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +25 -0
  101. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +0 -3
  102. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +8 -0
  103. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb +30 -0
  104. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md +11 -0
  105. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb +25 -0
  106. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +0 -3
  107. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md +1 -0
  108. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
  109. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +24 -1
  110. data/app/pb_kits/playbook/react_rails_kits.js +1 -0
  111. data/app/pb_kits/playbook/vendor.js +3 -0
  112. data/lib/playbook/version.rb +1 -1
  113. metadata +32 -28
  114. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb +0 -11
  115. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx +0 -29
  116. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb +0 -11
  117. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx +0 -34
  118. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +0 -4
  119. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +0 -13
  120. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +0 -1
  121. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +0 -4
  122. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +0 -13
  123. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx +0 -45
  124. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx +0 -27
  125. data/lib/generators/kit/USAGE +0 -5
  126. data/lib/generators/kit/kit_generator.rb +0 -95
  127. data/lib/generators/kit/templates/kit_example_rails.erb.tt +0 -1
  128. data/lib/generators/kit/templates/kit_example_react.erb.tt +0 -10
  129. data/lib/generators/kit/templates/kit_example_yml.erb.tt +0 -9
  130. data/lib/generators/kit/templates/kit_html.erb.tt +0 -7
  131. data/lib/generators/kit/templates/kit_js.erb.tt +0 -1
  132. data/lib/generators/kit/templates/kit_jsx.erb.tt +0 -68
  133. data/lib/generators/kit/templates/kit_ruby.erb.tt +0 -11
  134. data/lib/generators/kit/templates/kit_ruby_spec.erb.tt +0 -11
  135. data/lib/generators/kit/templates/kit_scss.erb +0 -3
  136. data/lib/tasks/pb_release.rake +0 -88
  137. data/lib/tasks/playbook_tasks.rake +0 -26
@@ -3,6 +3,7 @@
3
3
  import React from 'react'
4
4
  import Select from 'react-select'
5
5
  import AsyncSelect from 'react-select/async'
6
+ import { get } from 'lodash'
6
7
 
7
8
  import Control from './components/Control'
8
9
  import IndicatorsContainer from './components/IndicatorsContainer'
@@ -12,6 +13,8 @@ import Option from './components/Option'
12
13
  import Placeholder from './components/Placeholder'
13
14
  import ValueContainer from './components/ValueContainer'
14
15
 
16
+ import { noop } from '../utilities/props'
17
+
15
18
  /**
16
19
  * @typedef {object} Props
17
20
  * @prop {boolean} async - whether Typeahead should fetch data from
@@ -22,6 +25,8 @@ import ValueContainer from './components/ValueContainer'
22
25
  type Props = {
23
26
  async?: boolean,
24
27
  label?: string,
28
+ loadOptions?: noop | string,
29
+ name?: string,
25
30
  }
26
31
 
27
32
  /**
@@ -45,14 +50,27 @@ const Typeahead = (props: Props) => {
45
50
  },
46
51
  isClearable: true,
47
52
  isSearchable: true,
53
+ name,
48
54
  ...props,
49
55
  }
50
56
 
57
+ if (typeof(props.loadOptions) === 'string') selectProps.loadOptions = get(window, props.loadOptions)
58
+
51
59
  const Tag = props.async ? AsyncSelect : Select
52
60
 
61
+ const handleOnChange = (data, { action }) => {
62
+ if (action === 'clear') {
63
+ const multiValueClearEvent = new CustomEvent('pb-typeahead-kit-result-clear')
64
+ document.dispatchEvent(multiValueClearEvent)
65
+ }
66
+ }
67
+
53
68
  return (
54
69
  <div className="pb_typeahead_kit react-select">
55
- <Tag {...selectProps} />
70
+ <Tag
71
+ onChange={handleOnChange}
72
+ {...selectProps}
73
+ />
56
74
  </div>
57
75
  )
58
76
  }
@@ -19,11 +19,18 @@ const MultiValue = (props: Props) => {
19
19
  selectProps,
20
20
  } = props
21
21
 
22
+ const { imageUrl, label } = data
23
+
24
+ const handleOnMultiValueRemove = () => {
25
+ const multiValueRemoveEvent = new CustomEvent('pb-typeahead-kit-result-option-remove', { detail: data })
26
+ document.dispatchEvent(multiValueRemoveEvent)
27
+ }
28
+
22
29
  const handleOnClick = () => {
23
30
  if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(data)
31
+ handleOnMultiValueRemove()
24
32
  removeProps.onClick()
25
33
  }
26
- const { imageUrl, label } = data
27
34
 
28
35
  return (
29
36
  <components.MultiValueContainer
@@ -12,21 +12,29 @@ const Option = (props: any) => {
12
12
  imageUrl,
13
13
  label,
14
14
  } = props.data
15
+
16
+ const handleOptionClicked = () => {
17
+ const resultSelectedEvent = new CustomEvent('pb-typeahead-kit-result-option-select', { detail: props.data })
18
+ document.dispatchEvent(resultSelectedEvent)
19
+ }
20
+
15
21
  return (
16
22
  <components.Option {...props}>
17
- <Choose>
18
- <When condition={imageUrl}>
19
- <User
20
- align="left"
21
- avatarUrl={imageUrl}
22
- name={label}
23
- orientation="horizontal"
24
- />
25
- </When>
26
- <When condition={!imageUrl}>
27
- {label}
28
- </When>
29
- </Choose>
23
+ <div onClick={handleOptionClicked}>
24
+ <Choose>
25
+ <When condition={imageUrl}>
26
+ <User
27
+ align="left"
28
+ avatarUrl={imageUrl}
29
+ name={label}
30
+ orientation="horizontal"
31
+ />
32
+ </When>
33
+ <When condition={!imageUrl}>
34
+ {label}
35
+ </When>
36
+ </Choose>
37
+ </div>
30
38
  </components.Option>
31
39
  )
32
40
  }
@@ -25,7 +25,7 @@
25
25
 
26
26
  <%= javascript_tag defer: "defer" do %>
27
27
  document.addEventListener("pb-typeahead-kit-search", function(event) {
28
- if (!event.target.dataset.typeaheadExample) return;
28
+ if (!event.target.dataset || !event.target.dataset.typeaheadExample) return;
29
29
 
30
30
  fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
31
31
  .then(response => response.json())
@@ -18,7 +18,7 @@
18
18
 
19
19
  <%= javascript_tag defer: "defer" do %>
20
20
  document.addEventListener("pb-typeahead-kit-search", function(event) {
21
- if (!event.target.dataset.typeaheadExample2) return;
21
+ if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return;
22
22
 
23
23
  const fuzzyMatch = function(string, term) {
24
24
  const ratio = 0.5;
@@ -0,0 +1,25 @@
1
+ <%
2
+ options = [
3
+ { label: 'Windows', value: '#FFA500' },
4
+ { label: 'Siding', value: '#FF0000' },
5
+ { label: 'Doors', value: '#00FF00' },
6
+ { label: 'Roofs', value: '#0000FF' },
7
+ ]
8
+ %>
9
+
10
+ <%= pb_rails("typeahead", props: { options: options, label: "Colors", name: :foo, pills: true }) %>
11
+
12
+ <!-- This section is an example of the available JavaScript event hooks -->
13
+ <%= javascript_tag defer: "defer" do %>
14
+ document.addEventListener("pb-typeahead-kit-result-option-select", function(event) {
15
+ console.log('Option selected')
16
+ console.dir(event.detail)
17
+ })
18
+ document.addEventListener("pb-typeahead-kit-result-option-remove", function(event) {
19
+ console.log('Option removed')
20
+ console.dir(event.detail)
21
+ })
22
+ document.addEventListener("pb-typeahead-kit-result-clear", function() {
23
+ console.log('All options cleared')
24
+ })
25
+ <% end %>
@@ -10,12 +10,9 @@ const options = [
10
10
  { label: 'Roofs', value: '#0000FF' },
11
11
  ]
12
12
 
13
- import TypeaheadWithPillsSummary from './_typeahead_with_pills_summary'
14
-
15
13
  const TypeaheadWithPills = () => {
16
14
  return (
17
15
  <>
18
- <TypeaheadWithPillsSummary />
19
16
  <Typeahead
20
17
  isMulti
21
18
  label="Colors"
@@ -0,0 +1,8 @@
1
+ Typeahead kit is data-driven. The minimum default fields are `label` and `value`.
2
+
3
+ `{ label: "Foo", value: "bar" }`
4
+
5
+ #### Rails: Subscribing to JS Events
6
+ `pb-typeahead-kit-result-option-select` event to perform custom work when an option is clicked.
7
+ `pb-typeahead-kit-result-option-remove` event to perform custom work when a pill is clicked.
8
+ `pb-typeahead-kit-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.
@@ -0,0 +1,30 @@
1
+ <%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptions', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
2
+
3
+ <!-- This section is an example of how to provide load_options prop for using dynamic options -->
4
+ <%= javascript_tag defer: "defer" do %>
5
+ // Simple filter function, providing a list of results in the expected data format
6
+
7
+ const filterResults = function(results) {
8
+ return results.items.map(function(result) {
9
+ return {
10
+ label: result.login,
11
+ value: result.id,
12
+ }
13
+ })
14
+ }
15
+
16
+ /* Note: Make sure you assign this to window or a namespace within window
17
+ or it will not be accessible to the kit! */
18
+
19
+ window.asyncPillsPromiseOptions = function(inputValue) {
20
+ return new Promise(function(resolve) {
21
+ if (inputValue) {
22
+ fetch(`https://api.github.com/search/users?q=${inputValue}`)
23
+ .then(function(response) { return response.json() })
24
+ .then(function(results) { resolve(filterResults(results))})
25
+ } else {
26
+ resolve([])
27
+ }
28
+ })
29
+ }
30
+ <% end %>
@@ -0,0 +1,11 @@
1
+ #### Rails: Providing the `load_options` Promise
2
+
3
+ **Additional required props: ** `async: true`, `pills: true`
4
+
5
+ The prop `load_options`, when used in conjunction with `async: true` and `pills: true`, points to a JavaScript function located within the global window namespace. This function should return a `Promise` which resolves with the list of formatted options as described in prior examples above. This function is identical to the function provided to the React version of this kit. See the code example for more details.
6
+
7
+ #### React: `loadOptions`
8
+
9
+ **Additional required props: ** `async: true`
10
+
11
+ [As outlined in the react-select Async docs](https://react-select.com/async), `loadOptions` expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.
@@ -0,0 +1,25 @@
1
+ <%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptionsUsers', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
2
+
3
+ <%= javascript_tag defer: "defer" do %>
4
+ const filterUserResults = function(results) {
5
+ return results.items.map(function(result) {
6
+ return {
7
+ imageUrl: result.avatar_url,
8
+ label: result.login,
9
+ value: result.id,
10
+ }
11
+ })
12
+ }
13
+
14
+ window.asyncPillsPromiseOptionsUsers = function(inputValue) {
15
+ return new Promise(function(resolve) {
16
+ if (inputValue) {
17
+ fetch(`https://api.github.com/search/users?q=${inputValue}`)
18
+ .then(function(response) { return response.json() })
19
+ .then(function(results) { resolve(filterUserResults(results))})
20
+ } else {
21
+ resolve([])
22
+ }
23
+ })
24
+ }
25
+ <% end %>
@@ -8,8 +8,6 @@ import {
8
8
  User,
9
9
  } from '../..'
10
10
 
11
- import TypeaheadWithPillsAsyncSummary from './_typeahead_with_pills_async_summary'
12
-
13
11
  /**
14
12
  *
15
13
  * @const filterResults
@@ -65,7 +63,6 @@ const TypeaheadWithPillsAsyncUsers = () => {
65
63
 
66
64
  return (
67
65
  <>
68
- <TypeaheadWithPillsAsyncSummary />
69
66
  <If condition={users && users.length > 0}>
70
67
  <Caption
71
68
  marginBottom="xs"
@@ -0,0 +1 @@
1
+ If the data field `imageUrl` is present, FormPill will receive that field as a prop and display the image.
@@ -2,6 +2,9 @@ examples:
2
2
  rails:
3
3
  - typeahead_default: Default
4
4
  - typeahead_with_context_dark: With Context
5
+ - typeahead_with_pills: With Pills
6
+ - typeahead_with_pills_async: With Pills (Async Data)
7
+ - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
5
8
 
6
9
  react:
7
10
  - typeahead_default: Default
@@ -5,12 +5,19 @@ module Playbook
5
5
  class Typeahead
6
6
  include Playbook::Props
7
7
 
8
+ prop :async, type: Playbook::Props::Boolean,
9
+ default: false
8
10
  prop :label
11
+ prop :load_options
9
12
  prop :name
10
- prop :value
13
+ prop :options, type: Playbook::Props::HashArray, default: []
14
+ prop :pills, type: Playbook::Props::Boolean,
15
+ default: false
16
+
11
17
  prop :placeholder
12
18
  prop :search_term_minimum_length, default: 3
13
19
  prop :search_debounce_timeout, default: 250
20
+ prop :value
14
21
 
15
22
  partial "pb_typeahead/typeahead"
16
23
 
@@ -25,6 +32,22 @@ module Playbook
25
32
  pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
26
33
  )
27
34
  end
35
+
36
+ def typeahead_with_pills_options
37
+ base_options = {
38
+ isMulti: true,
39
+ label: label,
40
+ options: options,
41
+ placeholder: placeholder
42
+ }
43
+
44
+ base_options.merge!({
45
+ async: true,
46
+ loadOptions: load_options,
47
+ }) if async
48
+
49
+ base_options
50
+ end
28
51
  end
29
52
  end
30
53
  end
@@ -3,3 +3,4 @@ export { default as BarGraph } from './pb_bar_graph/_bar_graph.jsx'
3
3
  export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar.jsx'
4
4
  export { default as Legend } from './pb_legend/_legend.jsx'
5
5
  export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
6
+ export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'
@@ -18,6 +18,9 @@ PbPopover.start()
18
18
  import PbTooltip from './pb_tooltip'
19
19
  PbTooltip.start()
20
20
 
21
+ import PbFixedConfirmationToast from './pb_fixed_confirmation_toast'
22
+ PbFixedConfirmationToast.start()
23
+
21
24
  import PbTypeahead from './pb_typeahead'
22
25
  PbTypeahead.start()
23
26
 
@@ -1,4 +1,4 @@
1
1
  # frozen_string_literal: true
2
2
  module Playbook
3
- VERSION = "7.0.1"
3
+ VERSION = "7.1.0.pre.alpha1"
4
4
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 7.0.1
4
+ version: 7.1.0.pre.alpha1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2020-10-12 00:00:00.000000000 Z
12
+ date: 2020-10-09 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -515,15 +515,13 @@ files:
515
515
  - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.html.erb
516
516
  - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx
517
517
  - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss
518
+ - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss
519
+ - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss
518
520
  - app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb
519
521
  - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb
520
522
  - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx
521
523
  - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb
522
524
  - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx
523
- - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb
524
- - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx
525
- - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb
526
- - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx
527
525
  - app/pb_kits/playbook/pb_button_toolbar/docs/_description.md
528
526
  - app/pb_kits/playbook/pb_button_toolbar/docs/example.yml
529
527
  - app/pb_kits/playbook/pb_button_toolbar/docs/index.js
@@ -680,15 +678,11 @@ files:
680
678
  - app/pb_kits/playbook/pb_date_picker/_date_picker.scss
681
679
  - app/pb_kits/playbook/pb_date_picker/date_picker.rb
682
680
  - app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
683
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb
684
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx
685
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md
686
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb
687
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx
688
681
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
689
682
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
690
683
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
691
684
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
685
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
692
686
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
693
687
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
694
688
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
@@ -836,6 +830,8 @@ files:
836
830
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx
837
831
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
838
832
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
833
+ - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb
834
+ - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx
839
835
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb
840
836
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx
841
837
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb
@@ -848,6 +844,7 @@ files:
848
844
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml
849
845
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js
850
846
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb
847
+ - app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js
851
848
  - app/pb_kits/playbook/pb_flex/_flex.html.erb
852
849
  - app/pb_kits/playbook/pb_flex/_flex.jsx
853
850
  - app/pb_kits/playbook/pb_flex/_flex.scss
@@ -1506,12 +1503,18 @@ files:
1506
1503
  - app/pb_kits/playbook/pb_table/_table_row.html.erb
1507
1504
  - app/pb_kits/playbook/pb_table/_table_row.jsx
1508
1505
  - app/pb_kits/playbook/pb_table/docs/_description.md
1506
+ - app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
1507
+ - app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
1508
+ - app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
1509
1509
  - app/pb_kits/playbook/pb_table/docs/_table_container.html.erb
1510
1510
  - app/pb_kits/playbook/pb_table/docs/_table_container.jsx
1511
1511
  - app/pb_kits/playbook/pb_table/docs/_table_data_table.html.erb
1512
1512
  - app/pb_kits/playbook/pb_table/docs/_table_data_table.jsx
1513
1513
  - app/pb_kits/playbook/pb_table/docs/_table_disable_hover.html.erb
1514
1514
  - app/pb_kits/playbook/pb_table/docs/_table_disable_hover.jsx
1515
+ - app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb
1516
+ - app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx
1517
+ - app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.md
1515
1518
  - app/pb_kits/playbook/pb_table/docs/_table_lg.html.erb
1516
1519
  - app/pb_kits/playbook/pb_table/docs/_table_lg.jsx
1517
1520
  - app/pb_kits/playbook/pb_table/docs/_table_lg.md
@@ -1520,6 +1523,9 @@ files:
1520
1523
  - app/pb_kits/playbook/pb_table/docs/_table_md.md
1521
1524
  - app/pb_kits/playbook/pb_table/docs/_table_multiline.html.erb
1522
1525
  - app/pb_kits/playbook/pb_table/docs/_table_multiline.jsx
1526
+ - app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb
1527
+ - app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx
1528
+ - app/pb_kits/playbook/pb_table/docs/_table_one_action.md
1523
1529
  - app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb
1524
1530
  - app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx
1525
1531
  - app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb
@@ -1530,6 +1536,12 @@ files:
1530
1536
  - app/pb_kits/playbook/pb_table/docs/_table_sm.html.erb
1531
1537
  - app/pb_kits/playbook/pb_table/docs/_table_sm.jsx
1532
1538
  - app/pb_kits/playbook/pb_table/docs/_table_sm.md
1539
+ - app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb
1540
+ - app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx
1541
+ - app/pb_kits/playbook/pb_table/docs/_table_two_actions.md
1542
+ - app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb
1543
+ - app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx
1544
+ - app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md
1533
1545
  - app/pb_kits/playbook/pb_table/docs/example.yml
1534
1546
  - app/pb_kits/playbook/pb_table/docs/index.js
1535
1547
  - app/pb_kits/playbook/pb_table/index.js
@@ -1699,6 +1711,7 @@ files:
1699
1711
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx
1700
1712
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_name.html.erb
1701
1713
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
1714
+ - app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb
1702
1715
  - app/pb_kits/playbook/pb_toggle/docs/example.yml
1703
1716
  - app/pb_kits/playbook/pb_toggle/docs/index.js
1704
1717
  - app/pb_kits/playbook/pb_toggle/toggle.rb
@@ -1724,11 +1737,15 @@ files:
1724
1737
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
1725
1738
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
1726
1739
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb
1740
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
1727
1741
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
1742
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
1743
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
1728
1744
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx
1729
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx
1745
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md
1746
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb
1730
1747
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
1731
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx
1748
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md
1732
1749
  - app/pb_kits/playbook/pb_typeahead/docs/example.yml
1733
1750
  - app/pb_kits/playbook/pb_typeahead/docs/index.js
1734
1751
  - app/pb_kits/playbook/pb_typeahead/index.js
@@ -1819,23 +1836,10 @@ files:
1819
1836
  - app/pb_kits/playbook/vendor.js
1820
1837
  - fonts/fontawesome-min.js
1821
1838
  - fonts/regular-min.js
1822
- - lib/generators/kit/USAGE
1823
- - lib/generators/kit/kit_generator.rb
1824
- - lib/generators/kit/templates/kit_example_rails.erb.tt
1825
- - lib/generators/kit/templates/kit_example_react.erb.tt
1826
- - lib/generators/kit/templates/kit_example_yml.erb.tt
1827
- - lib/generators/kit/templates/kit_html.erb.tt
1828
- - lib/generators/kit/templates/kit_js.erb.tt
1829
- - lib/generators/kit/templates/kit_jsx.erb.tt
1830
- - lib/generators/kit/templates/kit_ruby.erb.tt
1831
- - lib/generators/kit/templates/kit_ruby_spec.erb.tt
1832
- - lib/generators/kit/templates/kit_scss.erb
1833
1839
  - lib/playbook.rb
1834
1840
  - lib/playbook/engine.rb
1835
1841
  - lib/playbook/version.rb
1836
1842
  - lib/playbook_ui.rb
1837
- - lib/tasks/pb_release.rake
1838
- - lib/tasks/playbook_tasks.rake
1839
1843
  homepage: http://playbook.powerapp.cloud
1840
1844
  licenses:
1841
1845
  - MIT
@@ -1851,9 +1855,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
1851
1855
  version: '0'
1852
1856
  required_rubygems_version: !ruby/object:Gem::Requirement
1853
1857
  requirements:
1854
- - - ">="
1858
+ - - ">"
1855
1859
  - !ruby/object:Gem::Version
1856
- version: '0'
1860
+ version: 1.3.1
1857
1861
  requirements: []
1858
1862
  rubygems_version: 3.1.4
1859
1863
  signing_key: