RubyGems - playbook_ui - Versions diffs - 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469 → 14.18.0.pre.rc.0 - Mend

playbook_ui 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469 → 14.18.0.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 (189) hide show

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

@@ -139,22 +139,3 @@ 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/example.yml CHANGED Viewed

@@ -6,7 +6,6 @@ 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,15 +13,7 @@ export default class PbPopover extends PbEnhancedElement {
   }
   moveTooltip() {
-    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);
+    document.querySelector('body').appendChild(this.tooltip)
   }
   connect() {
@@ -116,8 +108,4 @@ 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,7 +3,6 @@
 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"
@@ -48,7 +47,6 @@ 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,7 +1,6 @@
 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 = [
@@ -19,14 +18,10 @@ const SelectError = (props) => {
     },
   ]
-  const error = (<>
-    <Icon icon="warning" /> Please make a valid selection
-  </>)
   return (
     <div>
       <Select
-          error={error}
+          error="Please make a valid selection"
           label="Favorite Food"
           name="food"
           options={options}
@@ -34,7 +29,7 @@ const SelectError = (props) => {
           {...props}
       />
       <Body
-          error={error}
+          error="Please make a valid selection"
           status="negative"
           {...props}
       />

data/app/pb_kits/playbook/pb_table/_table.tsx CHANGED Viewed

@@ -84,8 +84,8 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftColumn.length,
-            'sticky-right-column': stickyRightColumn.length,
+            'sticky-left-column': stickyLeftColumn,
+            'sticky-right-column': stickyRightColumn,
             'striped': striped,
             'header-borderless': headerStyle === 'borderless',
             'header-floating': headerStyle === 'floating',

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md CHANGED Viewed

@@ -1,5 +1,3 @@
 The `collapsibleContent` can display any content, including nested Table Rows.
-Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default.
-**NOTE**: We advise against using the `disableHover` Table prop when nesting Table Rows within a Table.
+Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md CHANGED Viewed

@@ -1,5 +1,3 @@
 The `collapsible_content` can display any content, including nested Table Rows.
-Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
-**NOTE**: We advise against using the `disable_hover` Table prop when nesting Table Rows within a Table.
+Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md CHANGED Viewed

@@ -1,3 +1 @@
-The `collapsibleContent` can also be used to display nested Tables within each Row.
-**NOTE**: We advise against using the `disableHover` Table prop when nesting Tables within a Table.
+The `collapsibleContent` can also be used to display nested Tables within each Row.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md CHANGED Viewed

@@ -1,3 +1 @@
-The `collapsible_content` can also be used to display nested Tables within each Row.
-**NOTE**: We advise against using the `disable_hover` Table prop when nesting Tables within a Table.
+The `collapsible_content` can also be used to display nested Tables within each Row.

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss CHANGED Viewed

@@ -48,4 +48,4 @@
   .border-active {
     border-bottom: 1px;
   }
-}
+}

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx CHANGED Viewed

@@ -25,7 +25,7 @@ type TextInputProps = {
   name: string,
   label: string,
   mask?: 'currency' | 'zipCode' | 'postalCode' | 'ssn',
-  onChange: (e: React.FormEvent<HTMLInputElement>, sanitizedValue?: string) => void,
+  onChange: (e: React.FormEvent<HTMLInputElement>) => void,
   placeholder: string,
   required?: boolean,
   type: string,
@@ -102,16 +102,10 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
       let cursorPosition = e.target.selectionStart;
       const isAtEnd = cursorPosition === inputValue.length;
       const formattedValue = INPUTMASKS[mask].format(inputValue)
-      let sanitizedValue = formattedValue;
-      if (INPUTMASKS[mask].sanitize) {
-        sanitizedValue = INPUTMASKS[mask].sanitize(formattedValue)
-      }
       e.target.value = formattedValue
       // Keep cursor position
       if (!isAtEnd) {
         // Account for extra characters (e.g., commas added/removed in currency)
@@ -122,11 +116,9 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         }
         e.target.selectionStart = e.target.selectionEnd = cursorPosition
       }
-      onChange(e, sanitizedValue);
-    } else {
-      onChange(e)
     }
+    onChange(e)
   }
   const childInput = children ? children.type === "input" : undefined

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

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import TextInput from '../_text_input'
-import Icon from '../../pb_icon/_icon'
 const TextInputError = (props) => {
   const [email, setEmail] = useState('')
@@ -9,18 +8,11 @@ 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={error}
+          error="Please enter a valid email address"
           label="Email Address"
           onChange={handleUpdateEmail}
           placeholder="Enter email address"

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

@@ -18,8 +18,6 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_mask: Mask
-  - text_input_sanitize: Sanitized Masked Input
   swift:
     - text_input_default_swift: Default

data/app/pb_kits/playbook/pb_text_input/docs/index.js CHANGED Viewed

@@ -6,4 +6,3 @@ export { default as TextInputAddOn } from './_text_input_add_on.jsx'
 export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
 export { default as TextInputMask } from './_text_input_mask.jsx'
-export { default as TextInputSanitize } from './_text_input_sanitize.jsx'

data/app/pb_kits/playbook/pb_text_input/inputMask.ts CHANGED Viewed

@@ -3,7 +3,6 @@ type InputMask = {
     formatDefaultValue: (value: string) => string
     pattern: string
     placeholder: string
-    sanitize?: (value: string) => string;
 }
 type InputMaskDictionary = {
@@ -74,41 +73,35 @@ export const INPUTMASKS: InputMaskDictionary = {
         // eslint-disable-next-line no-useless-escape
         pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
         placeholder: '$0.00',
-        sanitize: (value: string) => value.replace(/[$,]/g, ''),
     },
     zipCode: {
         format: formatBasicPostal,
         formatDefaultValue: formatBasicPostal,
         pattern: '\\d{5}',
         placeholder: '12345',
-        sanitize: (value: string) => value,
     },
     postalCode: {
         format: formatExtendedPostal,
         formatDefaultValue: formatExtendedPostal,
         pattern: '\\d{5}-\\d{4}',
         placeholder: '12345-6789',
-        sanitize: (value: string) => value.replace(/-/g, ''),
     },
     ssn: {
         format: formatSSN,
         formatDefaultValue: formatSSN,
         pattern: '\\d{3}-\\d{2}-\\d{4}',
         placeholder: '123-45-6789',
-        sanitize: (value: string) => value.replace(/-/g, ''),
     },
     creditCard: {
         format: formatCreditCard,
         formatDefaultValue: formatCreditCard,
         pattern: '\\d{4} \\d{4} \\d{4} \\d{4}',
         placeholder: '1234 5678 9012 3456',
-        sanitize: (value: string) => value.replace(/\s/g, ''),
     },
     cvv: {
         format: formatCVV,
         formatDefaultValue: formatCVV,
         pattern: '\\d{3,4}',
         placeholder: '123',
-        sanitize: (value: string) => value,
     },
-}
+}

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

@@ -1,21 +1,15 @@
 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={error}
+          error="This field has an error!"
           label="Label"
           name="comment"
           onChange={(e)=> handleChange(e)}

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

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