playbook_ui_docs 15.5.0.pre.alpha.play265012854 → 15.5.0.pre.alpha.revert5553typeaheadfix12763

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 052c6710f6a8cc40ce1f4fd6b78c60bdb1240c219f628a5845a5f0803b800c6d
-  data.tar.gz: 4a7ba66407b858d9c1b7f6d7bda584d7f7ea7b2bc4ae92ff96b32888afd548d7
+  metadata.gz: 2accdc5d1717afbf469975a20877c07369cf5edf7532dd2596d31a102eedd322
+  data.tar.gz: 59334871af39998f1a402ddd2d37ca0dfe9960a0012077a215000473a092227a
 SHA512:
-  metadata.gz: f11973a9b4e903c89b5b3a9eb1dd6a19a0feae60ecf9850cc551abbee35c528415b02228096163ac97814115ffc1522e33dc512801df5ebadba14becdfa7ae4c
-  data.tar.gz: e247b82c567b82f1b64106c987b30507ee14918edf81b6ee2df6681e1419c004ff7e9308c8cb825d08df052b0a4842528c46862b0b5d816587879f611ab568b9
+  metadata.gz: 600dd8aaa3a5c2be79065a80a4d321b6c04a38e2755836d0b3b8b7c14501f03147ac57a77b9453a58e8dbeef1949bfb51250991be4607902c78180abd257ad7f
+  data.tar.gz: d79137791dac164368dd0b1b9717d05cbde2f77ff11a778097771b2131361e2f74f5227be59667ebb217a61d4a584960170c20b3755ee74728aa531d3f2f7740

data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("background", props: { padding: "xl" }) do %>
+<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
 
 <% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -3,6 +3,7 @@ import Background from '../../pb_background/_background'
 
 const BackgroundLight = (props) => (
   <Background
+      backgroundColor="light"
       padding="xl"
       {...props}
   />

data/app/pb_kits/playbook/pb_background/docs/example.yml

@@ -1,7 +1,7 @@
 examples:
 
   rails:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
@@ -11,7 +11,7 @@ examples:
   - background_size: Size
 
   react:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,24 +1,3 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "unitedKingdom",
-      id: "gb"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ]
-%>
-
-
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
@@ -31,16 +10,6 @@
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
-        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
-        <%= pb_rails("typeahead", props: {
-        id: "typeahead-default",
-        placeholder: "Select one...",
-        options: options,
-        name: :foo,
-        margin_top: "sm",
-        is_multi: false
-      })
-%>
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -1,42 +1,12 @@
 <form id="example-form-validation" action="" method="get">
-    <%= pb_rails("phone_number_input", props: { 
-        id: "validation", 
-        initial_country: "af", 
-        value: "", 
-        required: true 
-    }) %>
+    <%= pb_rails("phone_number_input", props: { error: "Missing phone number", id: "validation", initial_country: "af", value: "", required: true }) %>
     <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
 </form>
 
 <%= javascript_tag do %>
     document.addEventListener('DOMContentLoaded', function () {
-        const form = document.querySelector('#example-form-validation');
-        
-        // Wait for React component to mount
-        function waitForComponent() {
-            const phoneInput = form.querySelector('#validation');
-            
-            if (!phoneInput) {
-                setTimeout(waitForComponent, 100);
-                return;
-            }
-            
-            // Wait for intl-tel-input to initialize, then focus and blur to trigger validation
-            setTimeout(function() {
-                phoneInput.focus({ preventScroll: true });
-                setTimeout(function() {
-                    phoneInput.blur();
-                }, 100);
-            }, 500);
-        }
-        
-        waitForComponent();
-        
-        // Prevent form submission if there are validation errors
-        form.addEventListener('submit', function (e) {
-            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) {
-                e.preventDefault();
-            }
-        });
+        document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
+            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
+        })
     })
 <% end %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -10,19 +10,8 @@ const PhoneNumberInputValidation = (props) => {
     const [showFormErrors, setShowFormErrors] = useState(false);
     const [phoneNumber, setPhoneNumber] = useState("");
     const [countryCode, setCountryCode] = useState("af");
-    const [isValid, setIsValid] = useState(false);
-    const [hasInteracted, setHasInteracted] = useState(false);
-
-    // Start with initial error - will be cleared on blur if valid
-    const initialError = (
-        <>
-            <Icon icon="warning" /> Missing phone number.
-        </>
-    );
 
     const handleOnValidate = (valid) => {
-        setIsValid(valid);
-        setHasInteracted(true);
         setFormErrors(
             valid ? "" : "Please correct the fields below and try again."
         );
@@ -34,16 +23,18 @@ const PhoneNumberInputValidation = (props) => {
     };
     
     const handleOnSubmit = (e) => {
-        if (!isValid) e.preventDefault()
+        if (showFormErrors) e.preventDefault()
     }
 
     useEffect(() => {
         setShowFormErrors(formErrors.length > 0);
     }, [formErrors]);
 
-    // Only show error prop initially, or if invalid after interaction
-    // Clear error prop once valid (component handles validation on blur)
-    const shouldShowError = !hasInteracted || (hasInteracted && !isValid);
+    const error = (
+        <>
+            <Icon icon="warning" /> Missing phone number.
+        </>
+    )
 
     return (
         <form
@@ -59,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
                 />
             )}
             <PhoneNumberInput
-                error={shouldShowError ? initialError : undefined}
+                error={error}
                 id="validation"
                 initialCountry={countryCode}
                 onChange={handleOnChange}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 15.5.0.pre.alpha.play265012854
+  version: 15.5.0.pre.alpha.revert5553typeaheadfix12763
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-12-05 00:00:00.000000000 Z
+date: 2025-12-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -220,7 +220,6 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_image.md
 - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_light.md
 - app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_overlay.md
 - app/pb_kits/playbook/pb_background/docs/_background_size.html.erb

data/app/pb_kits/playbook/pb_background/docs/_background_light.md

@@ -1 +0,0 @@
-By default, the Background kit sets background color to 'light' as seen here.