playbook_ui 14.18.0.pre.alpha.play2042addturbosupporttopopoverkit7423 → 14.18.0.pre.alpha.play2149overlaykitdynamicbug7619

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import PhoneNumberInput from '../_phone_number_input'
+
+const PhoneNumberInputCountrySearch = (props) => (
+    <>
+        <PhoneNumberInput
+            countrySearch
+            id='country-search'
+            {...props} 
+        />
+        <PhoneNumberInput
+            countrySearch
+            id='country-search-limited'
+            onlyCountries={["br", "us", "ph", "gb"]}
+            {...props} 
+        />
+    </>
+)
+
+export default PhoneNumberInputCountrySearch

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md

@@ -0,0 +1 @@
+Set `country_search` / `countrySearch` to true to allow users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.

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

@@ -9,6 +9,7 @@ examples:
   - 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
+  - phone_number_input_country_search: Country Search
 
   rails:
   - phone_number_input_default: Default
@@ -18,4 +19,5 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
   - phone_number_input_hidden_inputs: Hidden Inputs
+  - phone_number_input_country_search: Country Search
   

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

@@ -6,3 +6,4 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
 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'
+export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'

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

@@ -25,6 +25,8 @@ module Playbook
                                 default: false
       prop :hidden_inputs, type: Playbook::Props::Boolean,
                            default: false
+      prop :country_search, type: Playbook::Props::Boolean,
+                            default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -45,6 +47,7 @@ module Playbook
           preferredCountries: preferred_countries,
           required: required,
           value: value,
+          countrySearch: country_search,
         }
       end
     end

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

@@ -139,3 +139,22 @@ test("should format phone number as '555-555-5555' with formatAsYouType and 'us'
 
     expect(input.value).toBe("555-555-5555");
 });
+
+test("should pass countrySearch prop to component", () => {
+    window.intlTelInput = jest.fn(() => ({
+      getSelectedCountryData: jest.fn(() => ({})),
+      isValidNumber: jest.fn(() => true),
+      getValidationError: jest.fn(() => 0),
+    }));
+    
+    const props = {
+      id: testId,
+      countrySearch: true,
+      data: { testid: 'phone-input-with-search' }
+    };
+  
+    render(<PhoneNumberInput {...props} />);
+    
+    const wrapper = screen.getByTestId('phone-input-with-search');
+    expect(wrapper).toBeInTheDocument();
+});

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -143,6 +143,16 @@
       select {
         font-size: 12px;
       }
+      .pb_select_kit_wrapper.error {
+        .pb_select_kit_caret {
+          top: 13.7px;
+        }
+      }
+    }
+    .pb_select_kit_wrapper.error {
+      .pb_select_kit_caret {
+        top: 16.2px;
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("select", props: {
-  error: "Please make a valid selection",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
   label: "Favorite Food",
   name: "food",
   options: [

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx

@@ -8,7 +8,7 @@ const TableWithCollapsibleWithCustomClick = (props) => {
 
   const Content = () => {
     return (
-      <Card 
+      <Card
           borderNone
           borderRadius="none"
           padding="md"
@@ -37,7 +37,7 @@ return (
 
         </Table.Head>
         <Table.Body>
-          <Table.Row collapsible 
+          <Table.Row collapsible
               collapsibleContent={<Content/>}
               toggleCellId="cell-1"
               {...props}
@@ -47,7 +47,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
+            <Table.Cell cursor="pointer"
                 id="cell-1"
                 textAlign="right"
             >
@@ -59,7 +59,7 @@ return (
             </Table.Cell>
 
           </Table.Row>
-          <Table.Row collapsible 
+          <Table.Row collapsible
               collapsibleContent={<Content/>}
               toggleCellId="cell-2"
               {...props}
@@ -69,7 +69,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
+            <Table.Cell cursor="pointer"
                 id="cell-2"
                 textAlign="right"
             >
@@ -81,7 +81,7 @@ return (
             </Table.Cell>
 
           </Table.Row>
-          <Table.Row collapsible 
+          <Table.Row collapsible
               collapsibleContent={<Content/>}
               toggleCellId="cell-3"
               {...props}
@@ -91,7 +91,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
+            <Table.Cell cursor="pointer"
                 id="cell-3"
                 textAlign="right"
             >

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -55,7 +55,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   const sideHighlightClass =
     sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
-  
+
   const [isCollapsed, setIsCollapsed] = useCollapsible(true);
 
   const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
@@ -83,14 +83,14 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
       target instanceof SVGElement &&
       (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
 
-        if (clickedCell || isIconClick) { 
+        if (clickedCell || (clickedCell && isIconClick)) {
       setIsCollapsed(!isCollapsed);
       }
     } else {
       setIsCollapsed(!isCollapsed);
     }
   };
-    
+
   return (
     <>
       {collapsible ? (
@@ -116,7 +116,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
                   tag="td"
               >
                 <tr/>
-                <Collapsible.Content 
+                <Collapsible.Content
                     className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
                     dark={dark}
                     margin="none"
@@ -149,7 +149,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
                   tag="td"
               >
                 <tr/>
-                <Collapsible.Content 
+                <Collapsible.Content
                     className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
                     dark={dark}
                     margin="none"

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb

@@ -4,7 +4,7 @@
     border: true,
     icon: "user"
   },
-  error: "Please enter a valid email address",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please enter a valid email address"),
   label: "Email Address",
   placeholder: "Enter email address",
   type: "email"

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb

@@ -1 +1,5 @@
-<%= pb_rails("textarea", props: { error: "This field has an error!", label: "Label", rows: 4}) %>
+<%= pb_rails("textarea", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " This field has an error!"),
+  label: "Label",
+  rows: 4
+}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb

@@ -8,7 +8,14 @@
 
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-error-example", options: options, error: "Please make a valid selection", label: "Products", name: :foo, is_multi: false }) %>
+<%= pb_rails("typeahead", props: {
+  id: "typeahead-error-example",
+  options: options,
+  error: "Please make a valid selection",
+  label: "Products",
+  name: :foo,
+  is_multi: false
+}) %>
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>