playbook_ui 14.5.0.pre.alpha.javascriptassets3939 → 14.5.0.pre.alpha.play1549upgradereactmodal4130

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/index.js +60 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -9
  4. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +1 -9
  5. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +20 -4
  6. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
  7. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  8. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +1 -0
  9. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -0
  10. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  11. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  12. data/app/pb_kits/playbook/pb_enhanced_element/{element_observer.js → element_observer.ts} +27 -19
  13. data/app/pb_kits/playbook/pb_enhanced_element/{index.js → index.ts} +22 -15
  14. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
  15. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +9 -1
  17. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +19 -0
  18. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +27 -0
  19. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
  20. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
  21. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  22. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +211 -227
  23. data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +5 -0
  24. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
  25. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +93 -0
  26. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +1 -0
  27. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +105 -0
  28. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +1 -0
  29. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +106 -0
  30. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +1 -0
  31. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +4 -0
  32. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
  33. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +149 -0
  34. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
  35. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  36. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
  37. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  38. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  39. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  40. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  41. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
  42. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
  43. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +4 -1
  44. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +3 -1
  45. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -1
  46. data/dist/chunks/_typeahead-C9g4qCcE.js +22 -0
  47. data/dist/chunks/_weekday_stacked-DQN7SPcO.js +45 -0
  48. data/dist/chunks/lib-CEpcaI8y.js +29 -0
  49. data/dist/chunks/{pb_form_validation-8H8TD40J.js → pb_form_validation-D9zkwt2b.js} +1 -1
  50. data/dist/chunks/vendor.js +1 -45
  51. data/dist/playbook-doc.js +1 -1
  52. data/dist/playbook-rails-react-bindings.js +1 -1
  53. data/dist/playbook-rails.js +1 -1
  54. data/dist/playbook.css +1 -1
  55. data/lib/playbook/pb_doc_helper.rb +5 -5
  56. data/lib/playbook/version.rb +1 -1
  57. metadata +23 -11
  58. data/dist/chunks/_typeahead-DPGG9h5l.js +0 -65
  59. data/dist/chunks/index-CaXZ6mCT.js +0 -1
  60. data/dist/chunks/index-DfoYI7sS.js +0 -1
  61. data/dist/chunks/lib-ByFv-sq8.js +0 -45
  62. data/dist/mark.js +0 -1
  63. data/dist/playbook-rails-friendly.js +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c2ca4e8e8c3df9cdee7d02f68c3a611611053345876eb602efcdb91a16b4b076
4
- data.tar.gz: fb337ad2f116c3f991969c8e59c06ba697828ae5af32cde1c01cb49bf06b6ee6
3
+ metadata.gz: 3b8a672af22a9302b6752bc50a7f480de55857b1b401f331acac9ec60e6e7f21
4
+ data.tar.gz: 23084a1367cd91f2ad2e5ccdf968694689451fc57ab9c5400158376760ef3731
5
5
  SHA512:
6
- metadata.gz: c833f8f4d32140a79a374f9d2b2b642fff7341defb6fc781122288238ba851c62281797eb4307ad9859c3a5004fd756c37e25dea8aa73434ac0dc6952b345fe9
7
- data.tar.gz: 468fdf29ec022656bedceb21a0f7e165aee5de1d469ebd541e09a0587a642f91dbee263fe8c7932b5cd06fa9cac6f73efd4852edeab71757d93f1ffd561638f2
6
+ metadata.gz: 4d17a50894a07d422cd6fc0f39f4f48a744806860a994cfd651942a0bdba1528ec7afeb3c5e7ff5298c4c720fd0b4215f3f220a4d873a0bbe8705136c2942890
7
+ data.tar.gz: 9ba7f171d87b4f0d37ec3cc39da147ddad9e3d21062c1d78cd74f692a49bf306379dc21b6e71d98692bfa580b164d8ffe2d90bc67e66bfa9feefc0eedb99a672
@@ -13,9 +13,20 @@ export default class PbAdvancedTable extends PbEnhancedElement {
13
13
  get target() {
14
14
  return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
15
15
  }
16
+
17
+ static expandedRows = new Set()
18
+ static isCollapsing = false
16
19
 
17
20
  connect() {
18
21
  this.element.addEventListener('click', () => {
22
+ if (!PbAdvancedTable.isCollapsing) {
23
+ const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
24
+ if (!isExpanded) {
25
+ PbAdvancedTable.expandedRows.add(this.element.id)
26
+ } else {
27
+ PbAdvancedTable.expandedRows.delete(this.element.id)
28
+ }
29
+ }
19
30
  this.toggleElement(this.target)
20
31
  })
21
32
  }
@@ -75,4 +86,53 @@ export default class PbAdvancedTable extends PbEnhancedElement {
75
86
  this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
76
87
  this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
77
88
  }
89
+
90
+ static handleToggleAllHeaders(element) {
91
+ const table = element.closest('.pb_table')
92
+ const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
93
+
94
+ const expandedRows = Array.from(firstLevelButtons).filter(button =>
95
+ button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
96
+ )
97
+
98
+ if (expandedRows.length === firstLevelButtons.length) {
99
+ expandedRows.forEach(button => {
100
+ button.click()
101
+ })
102
+ this.expandedRows.clear()
103
+ } else {
104
+ firstLevelButtons.forEach(button => {
105
+ if (!this.expandedRows.has(button.id)) {
106
+ button.click()
107
+ }
108
+ })
109
+ }
110
+ }
111
+ static handleToggleAllSubRows(element, rowDepth) {
112
+ const parentElement = element.closest(".toggle-content")
113
+ const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
114
+
115
+ const expandedSubRows = Array.from(subrowButtons).filter(button =>
116
+ button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
117
+ )
118
+
119
+ if (expandedSubRows.length === subrowButtons.length) {
120
+ expandedSubRows.forEach(button => {
121
+ button.click()
122
+ })
123
+ } else {
124
+ subrowButtons.forEach(button => {
125
+ if (!this.expandedRows.has(button.id)) {
126
+ button.click()
127
+ }
128
+ })
129
+ }
130
+ }
131
+ }
132
+
133
+ window.expandAllRows = (element) => {
134
+ PbAdvancedTable.handleToggleAllHeaders(element)
78
135
  }
136
+ window.expandAllSubRows = (element, rowDepth) => {
137
+ PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
138
+ }
@@ -13,12 +13,4 @@
13
13
  <% end %>
14
14
  <% end %>
15
15
  <% end %>
16
- <% end %>
17
-
18
- <script type="text/javascript">
19
- var expandAllRows = (element) => {
20
- element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
21
- button.dispatchEvent(new Event('click'));
22
- });
23
- };
24
- </script>
16
+ <% end %>
@@ -23,12 +23,4 @@
23
23
  <% end %>
24
24
  <% end %>
25
25
  <% end %>
26
- <% end %>
27
-
28
- <script type="text/javascript">
29
- var expandAllSubRows = (element, rowDepth) => {
30
- element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
31
- button.dispatchEvent(new Event('click'));
32
- });
33
- };
34
- </script>
26
+ <% end %>
@@ -1,4 +1,4 @@
1
- import React, { useState, useRef, useEffect } from "react";
1
+ import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
2
2
  import classnames from "classnames";
3
3
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
4
4
  import { globalProps } from "../utilities/globalProps";
@@ -38,7 +38,14 @@ type DropdownProps = {
38
38
  triggerRef?: any;
39
39
  };
40
40
 
41
- const Dropdown = (props: DropdownProps) => {
41
+ interface DropdownComponent
42
+ extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>> {
43
+ Option: typeof DropdownOption;
44
+ Trigger: typeof DropdownTrigger;
45
+ Container: typeof DropdownContainer;
46
+ }
47
+
48
+ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
42
49
  const {
43
50
  aria = {},
44
51
  autocomplete = false,
@@ -125,7 +132,7 @@ const Dropdown = (props: DropdownProps) => {
125
132
  const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
126
133
  const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
127
134
  return String(label).toLowerCase().includes(filterItem.toLowerCase());
128
- });
135
+ });
129
136
 
130
137
  // For keyboard accessibility: Set focus within dropdown to selected item if it exists
131
138
  useEffect(() => {
@@ -175,6 +182,14 @@ const Dropdown = (props: DropdownProps) => {
175
182
  dark
176
183
  });
177
184
 
185
+ useImperativeHandle(ref, () => ({
186
+ clearSelected: () => {
187
+ setSelected({});
188
+ setFilterItem("");
189
+ setIsDropDownClosed(true);
190
+ onSelect && onSelect(null);
191
+ },
192
+ }));
178
193
 
179
194
  return (
180
195
  <div {...ariaProps}
@@ -258,8 +273,9 @@ const Dropdown = (props: DropdownProps) => {
258
273
  </DropdownContext.Provider>
259
274
  </div>
260
275
  )
261
- };
276
+ }) as DropdownComponent
262
277
 
278
+ Dropdown.displayName = "Dropdown";
263
279
  Dropdown.Option = DropdownOption;
264
280
  Dropdown.Trigger = DropdownTrigger;
265
281
  Dropdown.Container = DropdownContainer;
@@ -0,0 +1,45 @@
1
+ import React, { useRef } from 'react'
2
+ import { Button, Dropdown } from 'playbook-ui'
3
+
4
+ const options = [
5
+ {
6
+ label: "United States",
7
+ value: "United States",
8
+ },
9
+ {
10
+ label: "Canada",
11
+ value: "Canada",
12
+ },
13
+ {
14
+ label: "Pakistan",
15
+ value: "Pakistan",
16
+ }
17
+ ]
18
+
19
+ const DropdownClearSelection = (props) => {
20
+ const dropdownRef = useRef(null)
21
+
22
+ const handleReset = () => {
23
+ if (dropdownRef.current) {
24
+ dropdownRef.current.clearSelected()
25
+ }
26
+ }
27
+
28
+ return (
29
+ <>
30
+ <Dropdown
31
+ defaultValue={options[2]}
32
+ options={options}
33
+ ref={dropdownRef}
34
+ {...props}
35
+ />
36
+ <Button
37
+ marginTop="md"
38
+ onClick={handleReset}
39
+ text="Reset"
40
+ />
41
+ </>
42
+ )
43
+ }
44
+
45
+ export default DropdownClearSelection
@@ -0,0 +1 @@
1
+ To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.
@@ -22,6 +22,7 @@ examples:
22
22
  - dropdown_error: Dropdown with Error
23
23
  - dropdown_default_value: Default Value
24
24
  - dropdown_blank_selection: Blank Selection
25
+ - dropdown_clear_selection: Clear Selection
25
26
  # - dropdown_with_autocomplete: Autocomplete
26
27
  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
27
28
  # - dropdown_with_external_control: useDropdown Hook
@@ -12,3 +12,4 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
12
12
  export { default as DropdownError } from './_dropdown_error.jsx'
13
13
  export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
14
14
  export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
15
+ export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
@@ -62,7 +62,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
62
62
  const focusedClass = isFocused && "focused";
63
63
 
64
64
  const selectedClass = `${
65
- selected.label === option.label
65
+ selected?.label === option.label
66
66
  ? "selected"
67
67
  : "list"
68
68
  }`;
@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
73
73
  !autocomplete && "select_only"
74
74
  );
75
75
 
76
- const customDisplayPlaceholder = selected.label ? (
76
+ const customDisplayPlaceholder = selected?.label ? (
77
77
  <b>{selected.label}</b>
78
78
  ) : autocomplete ? (
79
79
  ""
@@ -83,7 +83,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
83
83
  "Select..."
84
84
  );
85
85
 
86
- const defaultDisplayPlaceholder = selected.label
86
+ const defaultDisplayPlaceholder = selected?.label
87
87
  ? selected.label
88
88
  : autocomplete
89
89
  ? ""
@@ -1,34 +1,47 @@
1
+ // eslint-disable-next-line
2
+ // @ts-nocheck
3
+ import PbEnhancedElement from "./index"
4
+
1
5
  export default class ElementObserver {
2
- constructor(matchDelegate, target = document) {
6
+ matchDelegate: PbEnhancedElement
7
+ target: Document
8
+ _mutationObserver: MutationObserver
9
+
10
+ constructor(matchDelegate: PbEnhancedElement, target = document) {
3
11
  this.matchDelegate = matchDelegate
4
12
  this.target = target
5
13
  }
6
14
 
7
- start() {
15
+ get mutationObserver(): MutationObserver {
16
+ return this._mutationObserver =
17
+ this._mutationObserver || new MutationObserver((mutationList) => this.processMutationList(mutationList))
18
+ }
19
+
20
+ start(): void {
8
21
  this.mutationObserver.observe(this.target, { attributes: true, childList: true, subtree: true })
9
22
  this.catchup()
10
23
  }
11
24
 
12
- stop() {
25
+ stop(): void {
13
26
  this.mutationObserverdisconnect()
14
27
  }
15
28
 
16
- catchup() {
17
- this.handleAdditions(this.matchDelegate.matches(this.target))
29
+ catchup(): void {
30
+ this.handleAdditions(this.matchDelegate.matches(this.target as unknown as Element))
18
31
  }
19
32
 
20
- processMutationList(mutationList) {
33
+ processMutationList(mutationList: Array<MutationRecord>): void {
21
34
  for (const mutation of mutationList) {
22
35
  if (mutation.type == 'attributes') {
23
- this.processAttributeChange(mutation.target)
36
+ this.processAttributeChange(mutation.target as Element)
24
37
  } else if (mutation.type == 'childList') {
25
- this.processRemovedNodes(Array.from(mutation.removedNodes))
26
- this.processAddedNodes(Array.from(mutation.addedNodes))
38
+ this.processRemovedNodes(Array.from(mutation.removedNodes) as Array<Element>)
39
+ this.processAddedNodes(Array.from(mutation.addedNodes) as Array<Element>)
27
40
  }
28
41
  }
29
42
  }
30
43
 
31
- processAttributeChange(node) {
44
+ processAttributeChange(node: Element): void | Array<Element> {
32
45
  if (node.nodeType !== Node.ELEMENT_NODE) return
33
46
 
34
47
  const matches = this.matchDelegate.matches(node)
@@ -38,30 +51,25 @@ export default class ElementObserver {
38
51
  this.handleAdditions(matches)
39
52
  }
40
53
 
41
- processRemovedNodes(nodes) {
54
+ processRemovedNodes(nodes: Array<Element>): void {
42
55
  for (const node of nodes) {
43
56
  if (node.nodeType !== Node.ELEMENT_NODE) continue
44
57
  this.handleRemovals(this.matchDelegate.matches(node))
45
58
  }
46
59
  }
47
60
 
48
- processAddedNodes(nodes) {
61
+ processAddedNodes(nodes: Array<Element>): void {
49
62
  for (const node of nodes) {
50
63
  if (node.nodeType !== Node.ELEMENT_NODE) continue
51
64
  this.handleAdditions(this.matchDelegate.matches(node))
52
65
  }
53
66
  }
54
67
 
55
- handleRemovals(elements) {
68
+ handleRemovals(elements: Array<Element>): void {
56
69
  for (const element of elements) this.matchDelegate.removeMatch(element)
57
70
  }
58
71
 
59
- handleAdditions(elements) {
72
+ handleAdditions(elements: Array<Element>): void {
60
73
  for (const element of elements) this.matchDelegate.addMatch(element)
61
74
  }
62
-
63
- get mutationObserver() {
64
- return this._mutationObserver =
65
- this._mutationObserver || new MutationObserver((mutationList) => this.processMutationList(mutationList))
66
- }
67
75
  }
@@ -1,21 +1,31 @@
1
- import ElementObserver from './element_observer.js'
1
+ // eslint-disable-next-line
2
+ // @ts-nocheck
3
+ import ElementObserver from './element_observer'
2
4
 
3
5
  export default class PbEnhancedElement {
4
- static get elements() {
6
+ static _elements: Map<Element, PbEnhancedElement>
7
+ static _observer: ElementObserver
8
+ element: Element
9
+
10
+ constructor(element?: Element) {
11
+ this.element = element
12
+ }
13
+
14
+ static get elements(): Map<Element, PbEnhancedElement> {
5
15
  return this._elements = (this._elements || new Map)
6
16
  }
7
17
 
8
- static get observer() {
18
+ static get observer(): ElementObserver {
9
19
  return this._observer = (this._observer || new ElementObserver(this))
10
20
  }
11
21
 
12
- static get selector() {
22
+ static get selector(): string {
13
23
  // eslint-disable-next-line no-console
14
24
  console.warn('Define a static property for selector or redefine the matches function in a subclass.', this)
15
25
  return null
16
26
  }
17
27
 
18
- static matches(node) {
28
+ static matches(node: Element): Array<Element> {
19
29
  if (!this.selector) return []
20
30
 
21
31
  const matches = []
@@ -25,7 +35,7 @@ export default class PbEnhancedElement {
25
35
  return (matches)
26
36
  }
27
37
 
28
- static addMatch(element) {
38
+ static addMatch(element: Element): void {
29
39
  if (element._pbEnhanced || this.elements.has(element)) return
30
40
 
31
41
  const enhansedElement = new this(element)
@@ -34,7 +44,7 @@ export default class PbEnhancedElement {
34
44
  element._pbEnhanced = enhansedElement
35
45
  }
36
46
 
37
- static removeMatch(element) {
47
+ static removeMatch(element: Element): void {
38
48
  if (!this.elements.has(element)) return
39
49
 
40
50
  const enhansedElement = this.elements.get(element)
@@ -42,22 +52,19 @@ export default class PbEnhancedElement {
42
52
  this.elements.delete(element)
43
53
  }
44
54
 
45
- static start() {
55
+ static start(): void {
46
56
  this.observer.start()
47
57
  }
48
58
 
49
- static stop() {
59
+ static stop(): void {
50
60
  this.mutationObserver.stop()
51
61
  }
52
62
 
53
- constructor(element) {
54
- this.element = element
55
- }
56
-
57
- connect() {
63
+ connect(): void {
58
64
  // eslint-disable-next-line no-console
59
65
  console.warn('Redefine the connect function in a subclass.', this)
60
66
  }
61
67
 
62
- disconnect() { }
68
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
69
+ disconnect(): void {}
63
70
  }
@@ -13,6 +13,7 @@ type ResultsCountProps = {
13
13
  const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
14
14
 
15
15
  const resultTitle = () => {
16
+ if (results == null) return null
16
17
  return (
17
18
  <TitleCount
18
19
  align="center"
@@ -24,6 +25,7 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
24
25
  }
25
26
 
26
27
  const justResults = () => {
28
+ if (results == null) return null
27
29
  return (
28
30
  <Caption
29
31
  className="filter-results"
@@ -35,13 +37,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
35
37
  }
36
38
 
37
39
  const displayResultsCount = () => {
38
- if (results && title) {
40
+ if (results != null && results >=0 && title) {
39
41
  return (
40
42
  <>
41
43
  {resultTitle()}
42
44
  </>
43
45
  )
44
- } else if (results) {
46
+ } else if (results !=null && results >=0 ) {
45
47
  return (
46
48
  <>
47
49
  {justResults()}
@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
78
78
  double
79
79
  minWidth="375px"
80
80
  onSortChange={SortingChangeCallback}
81
- results={1}
81
+ results={0}
82
82
  sortOptions={{
83
83
  popularity: 'Popularity',
84
84
  // eslint-disable-next-line
@@ -47,9 +47,13 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
47
47
 
48
48
  const iconClass = icon ? "_icon" : ""
49
49
  const closeIconSize = size === "small" ? "xs" : "sm"
50
+
51
+ const filteredProps: FormPillProps = {...props}
52
+ delete filteredProps.truncate
53
+
50
54
  const css = classnames(
51
55
  `pb_form_pill_kit_${color}${iconClass}`,
52
- globalProps(props),
56
+ globalProps(filteredProps),
53
57
  className,
54
58
  size === 'small' ? 'small' : null,
55
59
  textTransform,
@@ -77,6 +81,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
77
81
  className="pb_form_pill_text"
78
82
  size={4}
79
83
  text={name}
84
+ truncate={props.truncate}
80
85
  />
81
86
  </>
82
87
  )}
@@ -92,6 +97,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
92
97
  className="pb_form_pill_text"
93
98
  size={4}
94
99
  text={name}
100
+ truncate={props.truncate}
95
101
  />
96
102
  <Icon
97
103
  className="pb_form_pill_icon"
@@ -111,6 +117,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
111
117
  className="pb_form_pill_tag"
112
118
  size={4}
113
119
  text={text}
120
+ truncate={props.truncate}
114
121
  />
115
122
  </>
116
123
  )}
@@ -119,6 +126,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
119
126
  className="pb_form_pill_tag"
120
127
  size={4}
121
128
  text={text}
129
+ truncate={props.truncate}
122
130
  />
123
131
  )}
124
132
  <div
@@ -0,0 +1,19 @@
1
+ <%
2
+ names = [
3
+ { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
4
+ { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
5
+ { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
6
+ { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
7
+ { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
8
+ ]
9
+ %>
10
+
11
+ <%= pb_rails("typeahead", props: {
12
+ html_options: { style: { maxWidth: "240px" }},
13
+ id: "typeahead-form-pill",
14
+ is_multi: true,
15
+ options: names,
16
+ label: "Names",
17
+ pills: true,
18
+ truncate: 1,
19
+ }) %>
@@ -0,0 +1,27 @@
1
+ import React from 'react'
2
+ import Typeahead from '../../pb_typeahead/_typeahead'
3
+
4
+ const names = [
5
+ { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
6
+ { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
7
+ { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
8
+ { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
9
+ { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
10
+ ]
11
+
12
+ const FormPillTruncatedText = (props) => {
13
+ return (
14
+ <>
15
+ <Typeahead
16
+ htmlOptions={{ style: { maxWidth: "240px" }}}
17
+ isMulti
18
+ label="Names"
19
+ options={names}
20
+ truncate={1}
21
+ {...props}
22
+ />
23
+ </>
24
+ )
25
+ }
26
+
27
+ export default FormPillTruncatedText
@@ -0,0 +1 @@
1
+ For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
@@ -3,6 +3,7 @@ examples:
3
3
  rails:
4
4
  - form_pill_user: Form Pill User
5
5
  - form_pill_size: Form Pill Size
6
+ - form_pill_truncated_text: Truncated Text
6
7
  - form_pill_tag: Form Pill Tag
7
8
  - form_pill_example: Example
8
9
  - form_pill_icon: Form Pill Icon
@@ -11,6 +12,7 @@ examples:
11
12
  react:
12
13
  - form_pill_user: Form Pill User
13
14
  - form_pill_size: Form Pill Size
15
+ - form_pill_truncated_text: Truncated Text
14
16
  - form_pill_tag: Form Pill Tag
15
17
  - form_pill_example: Example
16
18
  - form_pill_icon: Form Pill Icon
@@ -4,3 +4,4 @@ export { default as FormPillTag } from './_form_pill_tag.jsx'
4
4
  export { default as FormPillExample } from './_form_pill_example.jsx'
5
5
  export { default as FormPillIcon } from './_form_pill_icon.jsx'
6
6
  export { default as FormPillColors } from './_form_pill_colors.jsx'
7
+ export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'