playbook_ui 14.9.0.pre.alpha.play1742globalheightfixes4925 → 14.9.0.pre.alpha.play17004992

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 65c48523db92e25026da29dafc1e1d48373dd867a8d467a8a57eaaae093f26a0
-  data.tar.gz: b6044dcebf4a60671de1db8ed4a6252426679eceb2946a6eea71b4b944710dae
+  metadata.gz: 585093eef9e79407e25a130a2a77f097c248bc2884116fc21bc9946c53b4cfe0
+  data.tar.gz: 82327cf34bd6c8b448e67549d84243c17622d2382ee07efa8730e13544c36be1
 SHA512:
-  metadata.gz: c60478ac6a44d1ac360a61be53aace6afe588dc0f1ac47d595b0344ad08dbf1b49e3b76a8c2c7fbf6378dd90832f6244534671a389927faffac43044eac87b74
-  data.tar.gz: a8b5110687957cd2879660f4617e1ed2b764d905d0bae7e17543c31dfb8f406d7704cd43fc18bcb466d893e89d28e408f2d35d9b6794557861fe813099138fa9
+  metadata.gz: e62d590332efe256a1464c1a2dfb104cb6078ddae7003114d656b016921f4252537ce52c78265b8ab27c4bca5e1dd0c93344d32080bfc2183e75cad551d1ace0
+  data.tar.gz: 6935b07d0cadec5f1156367e0488ce352aaf2cacbe7d9310b10b064db8428e4801e4ba7805c66a53dc68a313c5ea2be87219684465c0a4f09712c5fcc057c1a3

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -287,6 +287,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
               {...ariaProps}
               {...dataProps}
               {...htmlProps}
+              style={dynamicInlineProps}
               className={classnames(drawerClassNames.base, {
               [drawerClassNames.afterOpen]:
                 animationState === "afterOpen",
@@ -295,7 +296,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
             })}
               id={id}
               onClick={(e) => e.stopPropagation()}
-              style={dynamicInlineProps}
           >
             {children}
           </div>
@@ -306,6 +306,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classes}
+            style={dynamicInlineProps}
         >
           {isModalVisible && (
             <div
@@ -326,7 +327,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
                     animationState === "beforeClose",
                 })}
                   onClick={(e) => e.stopPropagation()}
-                  style={dynamicInlineProps}
               >
                 {children}
               </div>

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -24,37 +24,34 @@ type LayoutPropTypes = {
 type LayoutSideProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-} & GlobalProps
+}
 
 type LayoutBodyProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-} & GlobalProps
+}
 
 type LayoutItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   size?: "sm" | "md" | "lg"
-} & GlobalProps
+}
 
 type LayoutHeaderProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-} & GlobalProps
+}
 
 type LayoutFooterProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-} & GlobalProps
+}
 
+// Side component
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_sidebar', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_sidebar', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -63,12 +60,8 @@ const Side = (props: LayoutSideProps) => {
 // Body component
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_body', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_body', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -78,12 +71,8 @@ const Body = (props: LayoutBodyProps) => {
 const Item = (props: LayoutItemProps) => {
   const { children, className, size = 'sm' } = props
   const sizeClass = `size_${size}`
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_item', sizeClass, globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_item', sizeClass, globalProps(props), className)}>
       {children}
     </div>
   )
@@ -92,12 +81,8 @@ const Item = (props: LayoutItemProps) => {
 // Header component
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_header', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_header', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -106,12 +91,8 @@ const Header = (props: LayoutHeaderProps) => {
 // Footer component
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_footer', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_footer', globalProps(props), className)}>
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -19,8 +19,11 @@ $section_colors_dark: (
   align-items: center;
   position: relative;
   span {
-    padding: 0 $space_xs;
+    padding: 0;
     display: flex;
+    [class*="pb_caption_kit"] {
+      padding: 0 $space_xs;
+    }
   }
   &::before {
     content: "";

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

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, ChangeEvent } from 'react'
 import classnames from 'classnames'
 
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
@@ -10,6 +10,8 @@ import Caption from '../pb_caption/_caption'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
 
+import { INPUTMASKS } from './inputMask'
+
 type TextInputProps = {
   aria?: { [key: string]: string },
   className?: string,
@@ -22,6 +24,7 @@ type TextInputProps = {
   inline?: boolean,
   name: string,
   label: string,
+  mask?: 'currency' | 'zipCode' | 'postalCode' | 'ssn',
   onChange: (e: React.FormEvent<HTMLInputElement>) => void,
   placeholder: string,
   required?: boolean,
@@ -47,6 +50,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     htmlOptions = {},
     id,
     inline = false,
+    mask = null,
     name,
     label,
     onChange = () => { void 0 },
@@ -90,6 +94,33 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     />
   )
 
+  const isMaskedInput = mask && mask in INPUTMASKS
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (isMaskedInput) {
+      const inputValue = e.target.value
+
+      let cursorPosition = e.target.selectionStart;
+      const isAtEnd = cursorPosition === inputValue.length;
+      
+      const formattedValue = INPUTMASKS[mask].format(inputValue)
+      e.target.value = formattedValue
+      
+      // Keep cursor position
+      if (!isAtEnd) {
+        // Account for extra characters (e.g., commas added/removed in currency)
+        if (formattedValue.length - inputValue.length === 1) {
+          cursorPosition = cursorPosition + 1
+        } else if (mask === "currency" && formattedValue.length - inputValue.length === -1) {
+          cursorPosition = cursorPosition - 1
+        }
+        e.target.selectionStart = e.target.selectionEnd = cursorPosition
+      }
+    }
+    
+    onChange(e)
+  }
+
   const childInput = children ? children.type === "input" : undefined
 
   const textInput = (
@@ -101,8 +132,9 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         id={id}
         key={id}
         name={name}
-        onChange={onChange}
-        placeholder={placeholder}
+        onChange={isMaskedInput ? handleChange : onChange}
+        pattern={isMaskedInput ? INPUTMASKS[mask]?.pattern : undefined}
+        placeholder={placeholder || (isMaskedInput ? INPUTMASKS[mask]?.placeholder : undefined)}
         ref={ref}
         required={required}
         type={type}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react'
+
+import Caption from '../../pb_caption/_caption'
+import TextInput from '../../pb_text_input/_text_input'
+import Title from '../../pb_title/_title'
+
+const TextInputMask = (props) => {
+  const [ssn, setSSN] = useState('')
+  const handleOnChangeSSN = ({ target }) => {
+    setSSN(target.value)
+  }
+  const ref = React.createRef()
+
+  const [formFields, setFormFields] = useState({
+    currency: '',
+    zipCode: '',
+    postalCode: '',
+    ssn: '',
+  })
+
+  const handleOnChangeFormField =  ({ target }) => {
+    const { name, value } = target
+    setFormFields({ ...formFields, [name]: value })
+  }
+
+  return (
+    <div>
+      <TextInput
+          label="Currency"
+          mask="currency"
+          name="currency"
+          onChange={handleOnChangeFormField}
+          value={formFields.currency}
+          {...props}
+      />
+      <TextInput
+          label="Zip Code"
+          mask="zipCode"
+          name="zipCode"
+          onChange={handleOnChangeFormField}
+          value={formFields.zipCode}
+          {...props}
+      />
+      <TextInput
+          label="Postal Code"
+          mask="postalCode"
+          name="postalCode"
+          onChange={handleOnChangeFormField}
+          value={formFields.postalCode}
+          {...props}
+      />
+      <TextInput
+          label="SSN"
+          mask="ssn"
+          name="ssn"
+          onChange={handleOnChangeFormField}
+          value={formFields.ssn}
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <Title>{'Event Handler Props'}</Title>
+
+      <br />
+      <Caption>{'onChange'}</Caption>
+
+      <br />
+
+      <TextInput
+          label="SSN"
+          mask="ssn"
+          onChange={handleOnChangeSSN}
+          placeholder="Enter SSN"
+          ref={ref}
+          value={ssn}
+          {...props}
+      />
+
+      {ssn !== '' && (
+        <React.Fragment>{`SSN is: ${ssn}`}</React.Fragment>
+      )}
+    </div>
+  )
+}
+
+export default TextInputMask

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

@@ -16,6 +16,7 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
+  - text_input_mask: Mask
 
   swift:
     - text_input_default_swift: Default

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

@@ -5,3 +5,4 @@ export { default as TextInputDisabled } from './_text_input_disabled.jsx'
 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'

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

@@ -0,0 +1,64 @@
+type InputMask = {
+    format: (value: string) => string
+    pattern: string
+    placeholder: string
+}
+
+type InputMaskDictionary = {
+    [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
+}
+
+const formatCurrency = (value: string): string => {
+    const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
+
+    if (!numericValue) return ''
+
+    const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2))
+    if (dollars === 0) return ''
+
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 2,
+    }).format(dollars)
+}
+
+const formatBasicPostal = (value: string): string => {
+    return value.replace(/\D/g, '').slice(0, 5)
+}
+
+const formatExtendedPostal = (value: string): string => {
+    const cleaned = value.replace(/\D/g, '').slice(0, 9)
+    return cleaned.replace(/(\d{5})(?=\d)/, '$1-')
+}
+
+const formatSSN = (value: string): string => {
+    const cleaned = value.replace(/\D/g, '').slice(0, 9)
+    return cleaned
+        .replace(/(\d{5})(?=\d)/, '$1-')
+        .replace(/(\d{3})(?=\d)/, '$1-')
+}
+
+export const INPUTMASKS: InputMaskDictionary = {
+    currency: {
+        format: formatCurrency,
+        // eslint-disable-next-line no-useless-escape
+        pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
+        placeholder: '$0.00',
+    },
+    zipCode: {
+        format: formatBasicPostal,
+        pattern: '\\d{5}',
+        placeholder: '12345',
+    },
+    postalCode: {
+        format: formatExtendedPostal,
+        pattern: '\\d{5}-\\d{4}',
+        placeholder: '12345-6789',
+    },
+    ssn: {
+        format: formatSSN,
+        pattern: '\\d{3}-\\d{2}-\\d{4}',
+        placeholder: '123-45-6789',
+    },
+} 

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -1,5 +1,5 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
+import React, { useState } from 'react'
+import { render, screen, fireEvent, within } from '../utilities/test-utils'
 
 import TextInput from './_text_input'
 
@@ -89,3 +89,140 @@ test('returns additional class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} mb_lg`)
 })
+
+
+const TextInputCurrencyMask = (props) => {
+  const [currency, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="currency"
+        onChange={handleOnChange}
+        value={currency}
+        {...props}
+    />
+  )
+}
+
+test('returns masked currency value', () => {
+  render(
+    <TextInputCurrencyMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox');
+
+  fireEvent.change(input, { target: { value: '123456' } });
+
+  expect(input.value).toBe('$1,234.56')
+
+  fireEvent.change(input, { target: { value: '1' } });
+
+  expect(input.value).toBe('$0.01')
+
+  fireEvent.change(input, { target: { value: '' } });
+
+  expect(input.value).toBe('')
+})
+
+const TextInputZipCodeMask = (props) => {
+  const [zipCode, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="zipCode"
+        onChange={handleOnChange}
+        value={zipCode}
+        {...props}
+    />
+  )
+}
+
+test('returns masked zip code value', () => {
+  render(
+    <TextInputZipCodeMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox');
+
+  fireEvent.change(input, { target: { value: '123456' } });
+
+  expect(input.value).toBe('12345')
+})
+
+const TextInputPostalCodeMask = (props) => {
+  const [postalCode, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="postalCode"
+        onChange={handleOnChange}
+        value={postalCode}
+        {...props}
+    />
+  )
+}
+
+test('returns masked postal code value', () => {
+  render(
+    <TextInputPostalCodeMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox');
+
+  fireEvent.change(input, { target: { value: '123456789' } });
+
+  expect(input.value).toBe('12345-6789')
+})
+
+const TextInputSSNMask = (props) => {
+  const [ssn, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="ssn"
+        onChange={handleOnChange}
+        value={ssn}
+        {...props}
+    />
+  )
+}
+
+test('returns masked ssn value', () => {
+  render(
+    <TextInputSSNMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox');
+
+  fireEvent.change(input, { target: { value: '123456789' } });
+
+  expect(input.value).toBe('123-45-6789')
+})