RubyGems - playbook_ui - Versions diffs - 14.18.0.pre.rc.4 → 14.18.1.pre.rc.0 - Mend

playbook_ui 14.18.0.pre.rc.4 → 14.18.1.pre.rc.0

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

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

@@ -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 CHANGED Viewed

@@ -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_popover/docs/_popover_append_to.html.erb ADDED Viewed

@@ -0,0 +1,46 @@
+<%= pb_rails("flex", props: {
+    dark: true,
+    orientation: "row",
+    vertical: "center",
+    margin_bottom: "md"
+    }) do %>
+    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
+    &nbsp;
+    <%= pb_rails("circle_icon_button", props: {
+        variant: "secondary",
+        icon: "info",
+        id: "append-to-popover-1"
+    }) %>
+    <%= pb_rails("popover", props: {
+        trigger_element_id: "append-to-popover-1",
+        tooltip_id: "append-to-tooltip-1",
+        offset: true,
+        position: "top",
+        append_to: "parent",
+    }) do %>
+        I'm a popover. I have been appended to my parent element.
+    <% end %>
+<% end %>
+<%= pb_rails("flex", props: {
+    dark: true,
+    orientation: "row",
+    vertical: "center"
+    }) do %>
+    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
+    &nbsp;
+    <%= pb_rails("circle_icon_button", props: {
+        variant: "secondary",
+        icon: "info",
+        id: "append-to-popover-2"
+    }) %>
+    <%= pb_rails("popover", props: {
+        trigger_element_id: "append-to-popover-2",
+        tooltip_id: "append-to-tooltip-2",
+        offset: true,
+        position: "top",
+        append_to: ".kit-show-wrapper",
+    }) do %>
+        I'm a popover. I have been appended to the .kit-show-wrapper.
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `append_to` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

data/app/pb_kits/playbook/pb_popover/docs/example.yml CHANGED Viewed

@@ -6,6 +6,7 @@ examples:
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
+    - popover_append_to: Append To
   react:
     - popover_default: Default

data/app/pb_kits/playbook/pb_popover/index.ts CHANGED Viewed

@@ -13,7 +13,15 @@ export default class PbPopover extends PbEnhancedElement {
   }
   moveTooltip() {
-    document.querySelector('body').appendChild(this.tooltip)
+    let container: HTMLElement | null;
+    if (this.appendTo === "parent") {
+      container = this.element.parentElement;
+    } else if (this.appendTo) {
+      container = document.querySelector(this.appendTo);
+    }
+    (container || document.body).appendChild(this.tooltip);
   }
   connect() {
@@ -108,4 +116,8 @@ export default class PbPopover extends PbEnhancedElement {
   get closeOnClick() {
     return this.element.dataset.pbPopoverCloseOnClick
   }
+  get appendTo() {
+    return this.element.dataset.pbPopoverAppendTo;
+  }
 }

data/app/pb_kits/playbook/pb_popover/popover.rb CHANGED Viewed

@@ -3,6 +3,7 @@
 module Playbook
   module PbPopover
     class Popover < Playbook::KitBase
+      prop :append_to, type: Playbook::Props::String, default: "body"
       prop :position, type: Playbook::Props::Enum,
                       values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
                       default: "left"
@@ -47,6 +48,7 @@ module Playbook
       def data
         Hash(values[:data]).merge(
+          pb_popover_append_to: append_to,
           pb_popover_kit: true,
           pb_popover_position: position,
           pb_popover_trigger_element_id: trigger_element_id,

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import React from 'react'
 import Body from '../../pb_body/_body'
 import Select from '../../pb_select/_select'
+import Icon from '../../pb_icon/_icon'
 const SelectError = (props) => {
   const options = [
@@ -18,10 +19,14 @@ const SelectError = (props) => {
     },
   ]
+  const error = (<>
+    <Icon icon="warning" /> Please make a valid selection
+  </>)
   return (
     <div>
       <Select
-          error="Please make a valid selection"
+          error={error}
           label="Favorite Food"
           name="food"
           options={options}
@@ -29,7 +34,7 @@ const SelectError = (props) => {
           {...props}
       />
       <Body
-          error="Please make a valid selection"
+          error={error}
           status="negative"
           {...props}
       />

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import TextInput from '../_text_input'
+import Icon from '../../pb_icon/_icon'
 const TextInputError = (props) => {
   const [email, setEmail] = useState('')
@@ -8,11 +9,18 @@ const TextInputError = (props) => {
   const handleUpdateEmail = ({ target }) => {
     setEmail(target.value)
   }
+  const error = (
+    <>
+      <Icon icon="warning" /> Please enter a valid email address
+    </>
+  )
   return (
     <div>
       <TextInput
           addOn={{ icon: 'user', alignment: 'left', border: true }}
-          error="Please enter a valid email address"
+          error={error}
           label="Email Address"
           onChange={handleUpdateEmail}
           placeholder="Enter email address"

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx CHANGED Viewed

@@ -1,15 +1,21 @@
 import React, {useState} from 'react'
 import Textarea from '../../pb_textarea/_textarea'
+import Icon from '../../pb_icon/_icon'
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')
   const handleChange = (event) => {
     setValue(event.target.value)
   }
+  const error = (
+    <>
+        <Icon icon="warning" /> This field has an error!
+    </>
+  )
   return (
     <div>
       <Textarea
-          error="This field has an error!"
+          error={error}
           label="Label"
           name="comment"
           onChange={(e)=> handleChange(e)}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import Typeahead from '../_typeahead'
+import Icon from '../../pb_icon/_icon'
 const options = [
   { label: 'Orange', value: '#FFA500' },
@@ -10,7 +11,10 @@ const options = [
 ]
 const TypeaheadErrorState = (props) => {
-  const [errorState, setErrorState] = useState("Please make a valid selection");
+  const error = (<>
+    <Icon icon="warning" /> Please make a valid selection
+  </>)
+  const [errorState, setErrorState] = useState(error);
   const [searchValue, setSearchValue] = useState(null);
   const handleOnChange = (value) => setSearchValue(value)
@@ -19,7 +23,7 @@ const TypeaheadErrorState = (props) => {
       if(searchValue) {
         setErrorState("")
       } else {
-        setErrorState("Please make a valid selection")
+        setErrorState(error)
       }
     }, [searchValue])