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

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