RubyGems - playbook_ui - Versions diffs - 12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836 → 12.26.1.pre.alpha.play716popoverkitcloseonclickissue833 - Mend

playbook_ui 12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836 → 12.26.1.pre.alpha.play716popoverkitcloseonclickissue833

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 (20) hide show

data/lib/playbook/forms/builder.rb CHANGED Viewed

@@ -10,7 +10,6 @@ module Playbook
       require_relative "builder/form_field_builder"
       require_relative "builder/select_field"
       require_relative "builder/typeahead_field"
-      require_relative "builder/intl_telephone_field"
       prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
       prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))

data/lib/playbook/version.rb CHANGED Viewed

@@ -2,5 +2,5 @@
 module Playbook
   PREVIOUS_VERSION = "12.26.1"
-  VERSION = "12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836"
+  VERSION = "12.26.1.pre.alpha.play716popoverkitcloseonclickissue833"
 end

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836
+  version: 12.26.1.pre.alpha.play716popoverkitcloseonclickissue833
 platform: ruby
 authors:
 - Power UX
@@ -1588,10 +1588,6 @@ files:
 - app/pb_kits/playbook/pb_person_contact/person_contact.test.js
 - app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
 - app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
@@ -1604,8 +1600,6 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
 - app/pb_kits/playbook/pb_phone_number_input/docs/index.js
 - app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb
@@ -2417,7 +2411,6 @@ files:
 - app/pb_kits/playbook/utilities/flexbox_global_props/_justify_self.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_order.scss
 - app/pb_kits/playbook/utilities/globalProps.ts
-- app/pb_kits/playbook/utilities/object.ts
 - app/pb_kits/playbook/utilities/props.ts
 - app/pb_kits/playbook/utilities/test-utils.js
 - app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js
@@ -2456,7 +2449,6 @@ files:
 - lib/playbook/forms/builder/collection_select_field.rb
 - lib/playbook/forms/builder/date_picker_field.rb
 - lib/playbook/forms/builder/form_field_builder.rb
-- lib/playbook/forms/builder/intl_telephone_field.rb
 - lib/playbook/forms/builder/select_field.rb
 - lib/playbook/forms/builder/typeahead_field.rb
 - lib/playbook/justify_content.rb

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx DELETED Viewed

@@ -1,26 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { Body, PhoneNumberInput } from '../..'
-const PhoneNumberInputAccessInputElement = (props) => {
-    // 1. Create a ref - this accesses the kit's input element.
-    const ref = useRef()
-    // 2. Add any event listener to ref.current.inputNode() inside a useEffect hook.
-    useEffect(() => {
-        ref.current.inputNode().addEventListener("click", () => alert("Clicked!"))
-    })
-    // 3. Pass the ref to the ref prop.
-    return (
-        <>
-            <Body text="Click the input field below:" />
-            <PhoneNumberInput
-                id="access-input-element"
-                ref={ref}
-                {...props}
-            />
-        </>
-    )
-}
-export default PhoneNumberInputAccessInputElement

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md DELETED Viewed

@@ -1,3 +0,0 @@
-To access the kit's input element attributes or add event listeners, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.inputNode()` with your desired attribute or event listener inside a `useEffect` hook. `useEffect` is necessary because the `ref` will be initially `undefined`.
-`inputNode()` is a custom function inside the kit that returns the input DOM element and its attributes. For example, to get the `name` attribute, use `ref.current.inputNode().name`

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx DELETED Viewed

@@ -1,30 +0,0 @@
-import React, { useRef } from 'react'
-import { Button, PhoneNumberInput } from '../..'
-const PhoneNumberInputClearField = (props) => {
-    // 1. Create a ref - this accesses the kit's input element.
-    const ref = useRef()
-    // 2. Use clearField() to clear the field.
-    const handleClick = () => {
-        ref.current.clearField()
-    }
-    // 3. Pass the ref to the ref prop.
-    return (
-        <>
-            <PhoneNumberInput
-                id="clear-field"
-                ref={ref}
-                {...props}
-            />
-            <Button
-                onClick={handleClick}
-                text="Clear the Input Field"
-            />
-        </>
-    )
-}
-export default PhoneNumberInputClearField

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md DELETED Viewed

@@ -1,3 +0,0 @@
-To clear a number inside the input element, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.clearField()`.
-`clearField()` is a custom function inside the kit to clear numbers and the error message while still providing validation.

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

@@ -1,14 +0,0 @@
-<form id="example-form-validation" action="" method="get">
-    <%= 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>
-<% content_for(:pb_js) do %>
-    <%= javascript_tag do %>
-        document.addEventListener('DOMContentLoaded', function () {
-            document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
-                if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
-            })
-        })
-    <% end %>
-<% end %>

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

@@ -1,60 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Button, FixedConfirmationToast, PhoneNumberInput } from "../../";
-const PhoneNumberInputValidation = (props) => {
-    const [formErrors, setFormErrors] = useState("");
-    const [showFormErrors, setShowFormErrors] = useState(false);
-    const [phoneNumber, setPhoneNumber] = useState("");
-    const [countryCode, setCountryCode] = useState("af");
-    const handleOnValidate = (valid) => {
-        setFormErrors(
-            valid ? "" : "Please correct the fields below and try again."
-        );
-    };
-    const handleOnChange = ({ iso2, number }) => {
-        setCountryCode(iso2);
-        setPhoneNumber(number);
-    };
-    const handleOnSubmit = (e) => {
-        if (showFormErrors) e.preventDefault()
-    }
-    useEffect(() => {
-        setShowFormErrors(formErrors.length > 0);
-    }, [formErrors]);
-    return (
-        <form
-            action=""
-            method="get"
-            onSubmit={handleOnSubmit}
-        >
-            {showFormErrors && (
-                <FixedConfirmationToast
-                    marginBottom="md"
-                    status="error"
-                    text={formErrors}
-                />
-            )}
-            <PhoneNumberInput
-                error="Missing phone number."
-                id="validation"
-                initialCountry={countryCode}
-                onChange={handleOnChange}
-                onValidate={handleOnValidate}
-                required
-                value={phoneNumber}
-                {...props}
-            />
-            <Button
-                htmlType="submit"
-                text="Save Phone Number"
-            />
-        </form>
-    );
-};
-export default PhoneNumberInputValidation;

data/app/pb_kits/playbook/utilities/object.ts DELETED Viewed

@@ -1,3 +0,0 @@
-/* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
-export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1

data/lib/playbook/forms/builder/intl_telephone_field.rb DELETED Viewed

@@ -1,12 +0,0 @@
-# frozen_string_literal: true
-module Playbook
-  module Forms
-    class Builder
-      def intl_telephone(name, props: {})
-        props[:name] = name
-        @template.pb_rails("phone_number_input", props: props)
-      end
-    end
-  end
-end