playbook_ui_docs 15.6.0.pre.rc.2 → 15.6.0.pre.rc.4

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 (18) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +1 -1
  3. data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +0 -1
  4. data/app/pb_kits/playbook/pb_background/docs/_background_light.md +1 -0
  5. data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -2
  6. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb +1 -1
  7. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx +42 -0
  8. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md +1 -0
  9. data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +1 -0
  10. data/app/pb_kits/playbook/pb_multiple_users/docs/index.js +1 -0
  11. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +34 -4
  12. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +16 -7
  13. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb +30 -0
  14. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx +37 -0
  15. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md +3 -0
  16. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  17. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +2 -1
  18. metadata +8 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 16b425eef095315e6baaed29bc403318dfbc836032286e17a4c18f362307166c
4
- data.tar.gz: 8904a9af39065b692ace5a34ae36c07e77e1941b0081a8ef1a15935c7ef4678a
3
+ metadata.gz: af6164834840e78ca16c3abffd2a09cd8a1ab0d3e2292936112ffcd09fdeffd0
4
+ data.tar.gz: 4ac210d71a4ed68c62ee2659d52310cc1a240ce6353bd0c66d41940bfb219e82
5
5
  SHA512:
6
- metadata.gz: d244ce9be6ea1b575c22739bf58ce048ebf3bbbf2dc0486095e17aff04efd5f9f5e207e1bc49a1400c0073d383458e2f809fe1bea9ca08d36a4145bb74c0e570
7
- data.tar.gz: 47aa68882a6447965f553a541016b0823cf6a4b7f088231706997b6ffeb91ee02c0f90a3ced6130f7cefb7182ef2c96f5e119141c957df71ce6e07c7db3b14d6
6
+ metadata.gz: cfc4928ca858266eebf6ffba85658563fbcb2af95a86e8f18be028b0115cd701410a49f05164d37dd08acdb102f01240b18bd03f49bb68145afcf10287e5f53d
7
+ data.tar.gz: 21e2130b2e580d01c225e00707dc26a6949fdf1d2a8b5a96c5ae4c5f8790079b7dc0e7765525efc1f6c66b2f39a165054b45899582aacf48782fac9f0ed2c0be
data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb CHANGED
@@ -1,3 +1,3 @@
1
- <%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
1
+ <%= pb_rails("background", props: { padding: "xl" }) do %>
2
2
 
3
3
  <% end %>
data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx CHANGED
@@ -3,7 +3,6 @@ import Background from '../../pb_background/_background'
3
3
 
4
4
  const BackgroundLight = (props) => (
5
5
  <Background
6
- backgroundColor="light"
7
6
  padding="xl"
8
7
  {...props}
9
8
  />
data/app/pb_kits/playbook/pb_background/docs/_background_light.md ADDED
@@ -0,0 +1 @@
1
+ By default, the Background kit sets background color to 'light' as seen here.
data/app/pb_kits/playbook/pb_background/docs/example.yml CHANGED
@@ -1,7 +1,7 @@
1
1
  examples:
2
2
 
3
3
  rails:
4
- - background_light: Light
4
+ - background_light: Default
5
5
  - background_white: White
6
6
  - background_gradient: Gradient
7
7
  - background_image: Image
@@ -11,7 +11,7 @@ examples:
11
11
  - background_size: Size
12
12
 
13
13
  react:
14
- - background_light: Light
14
+ - background_light: Default
15
15
  - background_white: White
16
16
  - background_gradient: Gradient
17
17
  - background_image: Image
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb CHANGED
@@ -8,4 +8,4 @@
8
8
  state: "PA",
9
9
  zipcode: "19382",
10
10
  territory: "PHL",
11
- }) %>
11
+ }) %>
data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx ADDED
@@ -0,0 +1,42 @@
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 ADDED
@@ -0,0 +1 @@
1
+ Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.
data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml CHANGED
@@ -10,6 +10,7 @@ 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
13
14
 
14
15
  swift:
15
16
  - multiple_users_default_swift: Default
data/app/pb_kits/playbook/pb_multiple_users/docs/index.js CHANGED
@@ -1,3 +1,4 @@
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_phone_number_input/docs/_phone_number_input_validation.html.erb CHANGED
@@ -1,12 +1,42 @@
1
1
  <form id="example-form-validation" action="" method="get">
2
- <%= pb_rails("phone_number_input", props: { error: "Missing phone number", id: "validation", initial_country: "af", value: "", required: true }) %>
2
+ <%= pb_rails("phone_number_input", props: {
3
+ id: "validation",
4
+ initial_country: "af",
5
+ value: "",
6
+ required: true
7
+ }) %>
3
8
  <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
4
9
  </form>
5
10
 
6
11
  <%= javascript_tag do %>
7
12
  document.addEventListener('DOMContentLoaded', function () {
8
- document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
9
- if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
10
- })
13
+ const form = document.querySelector('#example-form-validation');
14
+
15
+ // Wait for React component to mount
16
+ function waitForComponent() {
17
+ const phoneInput = form.querySelector('#validation');
18
+
19
+ if (!phoneInput) {
20
+ setTimeout(waitForComponent, 100);
21
+ return;
22
+ }
23
+
24
+ // Wait for intl-tel-input to initialize, then focus and blur to trigger validation
25
+ setTimeout(function() {
26
+ phoneInput.focus({ preventScroll: true });
27
+ setTimeout(function() {
28
+ phoneInput.blur();
29
+ }, 100);
30
+ }, 500);
31
+ }
32
+
33
+ waitForComponent();
34
+
35
+ // Prevent form submission if there are validation errors
36
+ form.addEventListener('submit', function (e) {
37
+ if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) {
38
+ e.preventDefault();
39
+ }
40
+ });
11
41
  })
12
42
  <% end %>
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx CHANGED
@@ -10,8 +10,19 @@ const PhoneNumberInputValidation = (props) => {
10
10
  const [showFormErrors, setShowFormErrors] = useState(false);
11
11
  const [phoneNumber, setPhoneNumber] = useState("");
12
12
  const [countryCode, setCountryCode] = useState("af");
13
+ const [isValid, setIsValid] = useState(false);
14
+ const [hasInteracted, setHasInteracted] = useState(false);
15
+
16
+ // Start with initial error - will be cleared on blur if valid
17
+ const initialError = (
18
+ <>
19
+ <Icon icon="warning" /> Missing phone number.
20
+ </>
21
+ );
13
22
 
14
23
  const handleOnValidate = (valid) => {
24
+ setIsValid(valid);
25
+ setHasInteracted(true);
15
26
  setFormErrors(
16
27
  valid ? "" : "Please correct the fields below and try again."
17
28
  );
@@ -23,18 +34,16 @@ const PhoneNumberInputValidation = (props) => {
23
34
  };
24
35
 
25
36
  const handleOnSubmit = (e) => {
26
- if (showFormErrors) e.preventDefault()
37
+ if (!isValid) e.preventDefault()
27
38
  }
28
39
 
29
40
  useEffect(() => {
30
41
  setShowFormErrors(formErrors.length > 0);
31
42
  }, [formErrors]);
32
43
 
33
- const error = (
34
- <>
35
- <Icon icon="warning" /> Missing phone number.
36
- </>
37
- )
44
+ // Only show error prop initially, or if invalid after interaction
45
+ // Clear error prop once valid (component handles validation on blur)
46
+ const shouldShowError = !hasInteracted || (hasInteracted && !isValid);
38
47
 
39
48
  return (
40
49
  <form
@@ -50,7 +59,7 @@ const PhoneNumberInputValidation = (props) => {
50
59
  />
51
60
  )}
52
61
  <PhoneNumberInput
53
- error={error}
62
+ error={shouldShowError ? initialError : undefined}
54
63
  id="validation"
55
64
  initialCountry={countryCode}
56
65
  onChange={handleOnChange}
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.6.0.pre.rc.2
4
+ version: 15.6.0.pre.rc.4
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-01 00:00:00.000000000 Z
12
+ date: 2025-12-04 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -220,6 +220,7 @@ files:
220
220
  - app/pb_kits/playbook/pb_background/docs/_background_image.md
221
221
  - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
222
222
  - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
223
+ - app/pb_kits/playbook/pb_background/docs/_background_light.md
223
224
  - app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
224
225
  - app/pb_kits/playbook/pb_background/docs/_background_overlay.md
225
226
  - app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
@@ -1526,6 +1527,8 @@ files:
1526
1527
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
1527
1528
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
1528
1529
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md
1530
+ - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx
1531
+ - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md
1529
1532
  - app/pb_kits/playbook/pb_multiple_users/docs/example.yml
1530
1533
  - app/pb_kits/playbook/pb_multiple_users/docs/index.js
1531
1534
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_description.md
@@ -2576,6 +2579,9 @@ files:
2576
2579
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md
2577
2580
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb
2578
2581
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx
2582
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb
2583
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx
2584
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md
2579
2585
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb
2580
2586
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
2581
2587
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb