playbook_ui 14.11.1.pre.alpha.PLAY1720phonenumberinputformatAsYouType5377 → 14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5339

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f652f813944aec48c8bc973298758ac7c9cd498e72bdbe76c35d4153f23de637
-  data.tar.gz: aeb06568f624527493457b48c19964e1ce23add8a44dfc90f6453a4757e01063
+  metadata.gz: 9dca52c6de9bc88a8b2ce69d53315b7f3159f80097baff34f327cf5598142a80
+  data.tar.gz: e9920a4f8ff2773183bd2ae356900e72d93b346e83e4fac415b419f3bafd2372
 SHA512:
-  metadata.gz: c730aad6b384918b56a6695814c71016baa1f8295ed5e0ba879cf9f620ecd3fb9e74c9fd9ddc3b84bd8396b84e83c4b0c90580754284671b59823bdf596ee470
-  data.tar.gz: f3043409e34d7a6c0b00576e83e3e6eeebb0e9d6e307f6075c157a9c8e4323261fe22c6f6372956be0bab4d9e95cb61935bcec6ce147a005008cdd3a26f1c14a
+  metadata.gz: adaa58f5dbdebc31ed781c93def51a17dce06d8a6134b2d1fdfa72ed046a0beffd9942c9910ad70f39d36c878ba7f532afc6d883fd8578d0bf705589fbfd6654
+  data.tar.gz: '005478448c5c35da3d9eeb0436958a3e58fa4bedacf649526de6331aa495a49429103ed131898681e6f9ac6fc9bd99dbfd8553c692f0512f282334c70226015e'

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,6 +1,5 @@
-<%= content_tag(object.tag,
-                object.tag == "button" ? object.options : object.link_options,
-                **combined_html_options) do %>
+<%= pb_content_tag(object.tag,
+                object.tag == "button" ? object.options : object.link_options) do %>
     <% if object.variant === "reaction" %>
         <% if icon && object.valid_emoji(object.icon) %>
             <%= pb_rails("flex", props:{ align: "center" }) do %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:label, aria: object.aria,
-                        id: object.id,
-                        data: object.data,
-                        class: object.classname,
-                        **combined_html_options
-                ) do %>
+<%= pb_content_tag(:label) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
     <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,9 +1,5 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname + object.error_class,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div,
+    class: object.classname + object.error_class) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -1,19 +1,14 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.label.present? %>
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input 
-            data-default-value="<%= input_default_value %>" 
-            id="dropdown-selected-option" 
-            name="<%= object.name %>" 
-            style="display: none" 
-            <%= object.required ? "required" : ""%> 
+        <input
+            data-default-value="<%= input_default_value %>"
+            id="dropdown-selected-option"
+            name="<%= object.name %>"
+            style="display: none"
+            <%= object.required ? "required" : ""%>
         />
         <% if content.present? %>
             <%= content.presence %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -1,20 +1,15 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
-            <% if content.present? %> 
+            <% if content.present? %>
                 <%= content.presence %>
-            <% else %> 
+            <% else %>
                 <%= pb_rails("list/item", props: {
-                    display: "flex", 
-                    justify_content: "center", 
-                    padding:"xs", 
-                    }) do %> 
+                    display: "flex",
+                    justify_content: "center",
+                    padding:"xs",
+                    }) do %>
                         <%= pb_rails("body", props: {text: "No option"}) %>
                 <% end %>
             <% end %>
-    <% end %>        
-<% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -1,15 +1,10 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.option[:id],
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("list/item", props: {
-        display: "flex", 
-        justify_content: "center", 
-        padding:"none", 
+        display: "flex",
+        justify_content: "center",
+        padding:"none",
         cursor: "pointer"
-        }) do %> 
+        }) do %>
             <div class="dropdown_option_wrapper">
                 <% if content.present? %>
                     <%= content.presence %>
@@ -18,4 +13,4 @@
                 <% end %>
             </div>
     <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -1,21 +1,16 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if content.present? %>
         <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
           <%= content.presence %>
         </div>
     <% else %>
     <%= pb_rails("flex", props: {
-        align: "center", 
-        border_radius:"lg", 
-        classname: object.trigger_wrapper_classes, 
-        cursor: "pointer", 
-        justify: "between", 
-        padding_x:"sm", 
+        align: "center",
+        border_radius:"lg",
+        classname: object.trigger_wrapper_classes,
+        cursor: "pointer",
+        justify: "between",
+        padding_x:"sm",
         padding_y:"xs",
         html_options: {tabindex:"0"}
         }) do %>
@@ -23,7 +18,7 @@
             <%= pb_rails("flex", props: {align: "center"}) do %>
                 <% if object.custom_display.present?  %>
                     <%= pb_rails("flex", props: {align: "center"}) do %>
-                        <div id="dropdown_trigger_custom_display" style="display: none;"> 
+                        <div id="dropdown_trigger_custom_display" style="display: none;">
                             <%= object.custom_display %>
                         </div>
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
@@ -40,4 +35,3 @@
     <% end %>
     <% end %>
 <% end %>
-      

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -35,7 +35,6 @@ type PhoneNumberInputProps = {
   preferredCountries?: string[],
   required?: boolean,
   value?: string,
-  formatAsYouType?: boolean,
 }
 
 enum ValidationError {
@@ -88,7 +87,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     required = false,
     preferredCountries = [],
     value = "",
-    formatAsYouType = false,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -101,8 +99,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   )
 
   const inputRef = useRef<HTMLInputElement>()
-  const itiRef = useRef<any>(null);
   const [inputValue, setInputValue] = useState(value)
+  const [itiInit, setItiInit] = useState<any>()
   const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
@@ -132,12 +130,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     }
   })
 
-  const unformatNumber = (formattedNumber: any) => {
-    return formattedNumber.replace(/\D/g, "")
-  }
-
   const showFormattedError = (reason = '') => {
-    const countryName = itiRef.current.getSelectedCountryData().name
+    const countryName = itiInit.getSelectedCountryData().name
     const reasonText = reason.length > 0 ? ` (${reason})` : ''
     setError(`Invalid ${countryName} phone number${reasonText}`)
     return true
@@ -195,12 +189,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   }
 
   const validateErrors = () => {
-    if (itiRef.current) isValid(itiRef.current.isValidNumber())
-    if (validateOnlyNumbers(itiRef.current)) return
-    if (validateTooLongNumber(itiRef.current)) return
-    if (validateTooShortNumber(itiRef.current)) return
-    if (validateUnhandledError(itiRef.current)) return
-    if (validateMissingAreaCode(itiRef.current)) return
+    if (itiInit) isValid(itiInit.isValidNumber())
+    if (validateOnlyNumbers(itiInit)) return
+    if (validateTooLongNumber(itiInit)) return
+    if (validateTooShortNumber(itiInit)) return
+    if (validateUnhandledError(itiInit)) return
+    if (validateMissingAreaCode(itiInit)) return
   }
 
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
@@ -209,16 +203,10 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(evt.target.value)
-    let phoneNumberData
-    if (formatAsYouType) {
-      const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
-      phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
-    } else {
-      phoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
-    }
+    const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
-    isValid(itiRef.current.isValidNumber())
+    isValid(itiInit.isValidNumber())
   }
 
   // Separating Concerns as React Docs Recommend
@@ -242,11 +230,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       onlyCountries,
       countrySearch: false,
       fixDropdownWidth: false,
-      formatAsYouType: formatAsYouType,
+      formatAsYouType: false,
     })
 
-    itiRef.current = telInputInit;
-
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
       const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
       setSelectedData(phoneNumberData)
@@ -257,11 +243,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
     inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
-    if (formatAsYouType) {
-      inputRef.current?.addEventListener("input", (evt) => {
-        handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
-      });
-    }
+    setItiInit(telInputInit)
   }, [])
 
   let textInputProps: {[key: string]: any} = {

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

@@ -8,12 +8,10 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
-  - phone_number_input_format: Format as You Type
 
   rails:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
-  - phone_number_input_validation: Form Validation
-  - phone_number_input_format: Format as You Type
+  - phone_number_input_validation: Form Validation

data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js

@@ -5,4 +5,3 @@ export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
-export { default as PhoneNumberInputFormat } from './_phone_number_input_format'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -21,8 +21,6 @@ module Playbook
                    default: ""
       prop :value, type: Playbook::Props::String,
                    default: ""
-      prop :format_as_you_type, type: Playbook::Props::Boolean,
-                                default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -34,7 +32,6 @@ module Playbook
           dark: dark,
           disabled: disabled,
           error: error,
-          formatAsYouType: format_as_you_type,
           initialCountry: initial_country,
           label: label,
           name: name,

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, act } from "../utilities/test-utils";
+import { render, screen } from "../utilities/test-utils";
 import PhoneNumberInput from "./_phone_number_input";
 
 const testId = "phoneNumberInput";
@@ -120,22 +120,3 @@ test("should trigger callback", () => {
 
   expect(handleOnValidate).toBeCalledWith(true)
 });
-
-test("should format phone number as '555-555-5555' with formatAsYouType and 'us' country", () => {
-    const props = {
-        initialCountry: 'us',
-        formatAsYouType: true,
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    
-    const input = screen.getByRole("textbox");
-    
-    act(() => {
-        input.value = "5555555555";
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-    });
-
-    expect(input.value).toBe("555-555-5555");
-});

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss

@@ -1,7 +1,7 @@
 @import "../../tokens/screen_sizes";
-@import "../../tokens/border_radius";
 
 .table-responsive-scroll {
+    display: block;
     overflow-x: scroll;
 
     // hides duplicate scroll bar for those that see two (byproduct of repeated table-responsive-scroll class
@@ -27,12 +27,11 @@
     // Responsive Styles
     @media (max-width: 1600px) {
         &[class*="table-responsive-scroll"] {
-                &:has(> table.table-card) {
-                    border-radius: $border_rad_light;
-                    box-shadow: 1px 0 0 0px $border_light,
+            border-radius: 4px;
+            box-shadow: 1px 0 0 0px $border_light,
                         -1px 0 0 0px $border_light
-                }
-            }
+        }
+
         &[class^=pb_table].table-sm.table-card thead tr th:first-child,
         &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
             border-left-width: 0px;