playbook_ui_docs 15.5.0.pre.alpha.play2663multiuserkitaddtooltipsupport12718 → 15.5.0.pre.alpha.play250212696

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +0 -1
  3. data/app/pb_kits/playbook/pb_multiple_users/docs/index.js +0 -1
  4. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb +30 -0
  5. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx +37 -0
  6. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md +3 -0
  7. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  8. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +2 -1
  9. metadata +5 -4
  10. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx +0 -42
  11. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 607d0711ee5fa6ccaf10076fe3445b0a076df848c2818426f058217d7a8db612
4
- data.tar.gz: 2df3fc5155919b1e74d71468c2b0dd7b1638ec307e5a9b5879935fb7ebee838e
3
+ metadata.gz: 927da234d9bf2456654442761915e54019d24209d7b303aca00ddf83c65845d9
4
+ data.tar.gz: 3f994098a5aeb2f553b88b17c1d6d1ba6c6d66e27bddbb3cd831a31fea394c1c
5
5
  SHA512:
6
- metadata.gz: d7a7249f62d9d93ce6657ad71bdf806fd58157da34693134aec29e829375656c6d3216b92b1a381b32941d49eb37135fe543df387cc77f4f6d4e32e1c2c6eb3c
7
- data.tar.gz: aeded647d2ccdf8dd258b6746c1f5380b1cd355d4543c36f0eb49e06e387c420769b563a338c4a027fb49727ff28e42d91c5ac4761ae82e502b3c1e9430697be
6
+ metadata.gz: 3c309c5cfd18b92c8ecf0359aa370f0eb894a9be7ef3ea960017bb6a1656e069e6e14b8d3517290225790a5a132366392ea1f7c3b9d601e963a33743b1bb304e
7
+ data.tar.gz: a684def3a82d9266b73d2ac44aa936ee69048dc864b00587e3b1d7623d78525db455cdfac8c5c47c3bca5f711d0b999f29c37a857cd8ea93e1bf7820ab394b76
data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml CHANGED
@@ -10,7 +10,6 @@ examples:
10
10
  - multiple_users_default: Default
11
11
  - multiple_users_reverse: Reverse
12
12
  - multiple_users_size: Size
13
- - multiple_users_with_tooltip: With Tooltip
14
13
 
15
14
  swift:
16
15
  - multiple_users_default_swift: Default
data/app/pb_kits/playbook/pb_multiple_users/docs/index.js CHANGED
@@ -1,4 +1,3 @@
1
1
  export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
2
2
  export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
3
3
  export { default as MultipleUsersSize } from './_multiple_users_size.jsx'
4
- export { default as MultipleUsersWithTooltip } from './_multiple_users_with_tooltip.jsx'
data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb ADDED
@@ -0,0 +1,30 @@
1
+ <%
2
+ options = [
3
+ { label: 'Orange', value: '#FFA500' },
4
+ { label: 'Red', value: '#FF0000' },
5
+ { label: 'Green', value: '#00FF00' },
6
+ { label: 'Blue', value: '#0000FF' },
7
+ { label: 'Yellow', value: '#FFFF00' },
8
+ { label: 'Purple', value: '#800080' },
9
+ { label: 'Cyan', value: '#00FFFF' },
10
+ { label: 'Magenta', value: '#FF00FF' }
11
+ ]
12
+ %>
13
+
14
+ <%= pb_rails("typeahead", props: {
15
+ id: "typeahead-input-display-none",
16
+ label: "With Input Display None",
17
+ options: options,
18
+ name: :foo,
19
+ input_display: "none",
20
+ })
21
+ %>
22
+ <br/>
23
+ <%= pb_rails("typeahead", props: {
24
+ id: "typeahead-input-display-pills",
25
+ label: "With Input Display Pills (Default)",
26
+ options: options,
27
+ name: :foo,
28
+ pills: true,
29
+ })
30
+ %>
data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx ADDED
@@ -0,0 +1,37 @@
1
+ import React from 'react'
2
+
3
+ import Typeahead from '../_typeahead'
4
+
5
+ const options = [
6
+ { label: 'Orange', value: '#FFA500' },
7
+ { label: 'Red', value: '#FF0000' },
8
+ { label: 'Green', value: '#00FF00' },
9
+ { label: 'Blue', value: '#0000FF' },
10
+ { label: 'Yellow', value: '#FFFF00' },
11
+ { label: 'Purple', value: '#800080' },
12
+ { label: 'Cyan', value: '#00FFFF' },
13
+ { label: 'Magenta', value: '#FF00FF' }
14
+ ]
15
+
16
+ const TypeaheadInputDisplay = (props) => {
17
+ return (
18
+ <>
19
+ <Typeahead
20
+ inputDisplay="none"
21
+ isMulti
22
+ label="With Input Display None"
23
+ options={options}
24
+ {...props}
25
+ />
26
+ <br/>
27
+ <Typeahead
28
+ isMulti
29
+ label="With Input Display Pills (Default)"
30
+ options={options}
31
+ {...props}
32
+ />
33
+ </>
34
+ )
35
+ }
36
+
37
+ export default TypeaheadInputDisplay
data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md ADDED
@@ -0,0 +1,3 @@
1
+ Use the `inputDisplay`/`input_display` prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default.
2
+
3
+ **NOTE**: `inputDisplay`/`input_display` should only be used with typeaheads that allow multi selection.
data/app/pb_kits/playbook/pb_typeahead/docs/example.yml CHANGED
@@ -5,6 +5,7 @@ examples:
5
5
  - typeahead_default_options: With Default Options
6
6
  - typeahead_with_context: With Context
7
7
  - typeahead_with_pills: With Pills
8
+ - typeahead_input_display: Input Display
8
9
  - typeahead_without_pills: Without Pills (Single Select)
9
10
  - typeahead_with_pills_async: With Pills (Async Data)
10
11
  - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
@@ -26,6 +27,7 @@ examples:
26
27
  - typeahead_react_hook: React Hook
27
28
  - typeahead_with_highlight: With Highlight
28
29
  - typeahead_with_pills: With Pills
30
+ - typeahead_input_display: Input Display
29
31
  - typeahead_with_pills_async: With Pills (Async Data)
30
32
  - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
31
33
  - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)
data/app/pb_kits/playbook/pb_typeahead/docs/index.js CHANGED
@@ -17,4 +17,5 @@ export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
17
17
  export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
18
18
  export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
19
19
  export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
20
- export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
20
+ export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
21
+ export { default as TypeaheadInputDisplay } from './_typeahead_input_display.jsx'
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 15.5.0.pre.alpha.play2663multiuserkitaddtooltipsupport12718
4
+ version: 15.5.0.pre.alpha.play250212696
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: 2025-12-02 00:00:00.000000000 Z
12
+ date: 2025-12-01 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -1526,8 +1526,6 @@ files:
1526
1526
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
1527
1527
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
1528
1528
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md
1529
- - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx
1530
- - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md
1531
1529
  - app/pb_kits/playbook/pb_multiple_users/docs/example.yml
1532
1530
  - app/pb_kits/playbook/pb_multiple_users/docs/index.js
1533
1531
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_description.md
@@ -2578,6 +2576,9 @@ files:
2578
2576
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md
2579
2577
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb
2580
2578
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx
2579
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb
2580
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx
2581
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md
2581
2582
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb
2582
2583
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
2583
2584
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx DELETED
@@ -1,42 +0,0 @@
1
- import React from 'react'
2
- import MultipleUsers from '../../pb_multiple_users/_multiple_users'
3
-
4
- const MultipleUsersWithTooltip = (props) => {
5
- return (
6
- <div>
7
- <MultipleUsers
8
- users={[
9
- {
10
- name: 'Patrick Welch',
11
- imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
12
- tooltip: "Patrick Welch - Online"
13
- },
14
- {
15
- name: 'Lucille Sanchez',
16
- imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
17
- tooltip: "Lucille Sanchez - Offline"
18
- },
19
- {
20
- name: 'Beverly Reyes',
21
- imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
22
- tooltip: "Beverly Reyes - Online"
23
- },
24
- {
25
- name: 'Keith Craig',
26
- imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
27
- tooltip: "Keith Craig - Away"
28
- },
29
- {
30
- name: 'Alicia Cooper',
31
- imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
32
- tooltip: "Alicia Cooper - Busy"
33
- },
34
- ]}
35
- withTooltip
36
- {...props}
37
- />
38
- </div>
39
- )
40
- }
41
- ``
42
- export default MultipleUsersWithTooltip
data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md DELETED
@@ -1 +0,0 @@
1
- Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.