playbook_ui 15.2.0.pre.alpha.testingquickpick11606 → 15.2.0.pre.alpha.testingtiptap11313

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -75,14 +75,4 @@ test('renders position when provided', () => {
         />
     );
     expect(container.querySelector('.positioned_toast')).toBeInTheDocument();
-});
-
-test('renders max zIndex by default', () => {
-    const { container } = render(<FixedConfirmationToast />);
-    expect(container.querySelector('.z_index_max')).toBeInTheDocument();
-});
-
-test('applies custom zIndex when provided', () => {
-    const { container } = render(<FixedConfirmationToast zIndex={10} />);
-    expect(container.querySelector('.z_index_10')).toBeInTheDocument();
 });

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -101,7 +101,7 @@
   <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
   <%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react"
 import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps, buildCss, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
 import Highcharts from "highcharts"
 import HighchartsReact from "highcharts-react-official"
 
@@ -18,25 +18,23 @@ type PbBarGraphProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)};
 }
 
-const PbBarGraph = ( props: PbBarGraphProps): React.ReactElement => {
-const {
+const PbBarGraph = ({
   aria = {},
   data = {},
   id,
   htmlOptions = {},
   options,
-  className,
-} = props
+  className = "pb_pb_bar_graph",
+}: PbBarGraphProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(buildCss('pb_pb_bar_graph'), globalProps(props), className)
 
   const mergedOptions = useMemo(() => {
     if (!options || typeof options !== "object") {
       // eslint-disable-next-line no-console
-      console.error("❌ Invalid options passed to <PbBarGraph />", options)
+      console.error("❌ Invalid options passed to <BarGraph />", options)
       return {}
     }
 
@@ -48,7 +46,7 @@ const {
     <div>
       <HighchartsReact
           containerProps={{
-                  className: classnames(classes),
+                  className: classnames(globalProps, className),
                   id: id,
                   ...ariaProps,
                   ...dataProps,

data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb

@@ -4,21 +4,24 @@ module Playbook
   module PbPbBarGraph
     class PbBarGraph < ::Playbook::KitBase
       prop :options, default: {}
+      prop :container_props, default: {}
 
       def react_props
         {
-          className: classname,
-          data: data,
           options: options,
-          id: id,
+          containerProps: container_props_hash,
         }
       end
 
+      def container_props_hash
+        container_props.merge({
+                                id: id,
+                                className: classname,
+                              }).compact
+      end
+
       def classname
-        # Highcharts react needs classname attached to the container div,
-        # we pass an empty string here to avoid conflicts, classname is built in the TSX
-        # We still need generate_classnames to retain ability to pass in custom classnames or global props
-        generate_classname("")
+        generate_classname("pb_pb_bar_graph")
       end
     end
   end

data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx

@@ -15,41 +15,6 @@ afterEach(() => {
   console.warn.mockRestore();
 });
 
-const chartData = [{
-    name: 'Installation',
-    data: [1475, 200, 3000, 654, 656],
-  }, {
-    name: 'Manufacturing',
-    data: [4434, 524, 2320, 440, 500],
-  }, {
-    name: 'Sales & Distribution',
-    data: [3387, 743, 1344, 434, 440],
-  }, {
-    name: 'Project Development',
-    data: [3227, 878, 999, 780, 1000],
-  }, {
-    name: 'Other',
-    data: [1111, 677, 3245, 500, 200],
-  }]
-
-  const chartOptions = {
-    series: chartData,
-    title: {
-      text: 'Solar Employment Growth by Sector, 2010-2016',
-    },
-    subtitle: {
-      text: 'Source: thesolarfoundation.com',
-    },
-    xAxis: {
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-    },
-    yAxis: {
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-  }
-
 const testId = 'bargraph1';
 
 test('bargraph uses exact classname', () => {
@@ -58,46 +23,9 @@ test('bargraph uses exact classname', () => {
         className='super_important_class'
         data={{ testid: testId }}
         id='bar-default'
-        options={chartOptions}
     />
   );
  
   const kit = screen.getByTestId(testId);
   expect(kit).toHaveClass('super_important_class');
-});
-
-test('Kit to apply base classname', () => {
-  render(
-    <PbBarGraph
-        data={{testid: testId}} 
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_bar_graph')
-})
-
-
-test('Kit to apply global props', () => {
-  render(
-    <PbBarGraph
-        data={{testid: testId}} 
-        margin="lg"
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
-})
-
-test('kit to apply id', () => {
-  render(
-    <PbBarGraph
-        data={{testid: testId}} 
-        id='bar-graph-id'
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'bar-graph-id')
-})
+});

data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx

@@ -46,7 +46,7 @@ const PbCircleChart = (props: PbCircleChartProps) => {
     <div>
       <HighchartsReact
           containerProps={{
-                  className: classnames(classes),
+                  className: classnames(globalProps, className),
                   id: id,
                   ...ariaProps,
                   ...dataProps,

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb

@@ -4,21 +4,24 @@ module Playbook
   module PbPbCircleChart
     class PbCircleChart < ::Playbook::KitBase
       prop :options, default: {}
+      prop :container_props, default: {}
 
       def react_props
         {
-          className: classname,
-          data: data,
           options: options,
-          id: id,
+          containerProps: container_props_hash,
         }
       end
 
+      def container_props_hash
+        container_props.merge({
+                                id: id,
+                                className: classname,
+                              }).compact
+      end
+
       def classname
-        # Highcharts react needs classname attached to the container div,
-        # we pass an empty string here to avoid conflicts, classname is built in the TSX
-        # We still need generate_classnames to retain ability to pass in custom classnames or global props
-        generate_classname("")
+        generate_classname("pb_pb_circle_chart")
       end
     end
   end

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx

@@ -49,50 +49,3 @@ test('Kit to exist', () => {
   expect(screen.getByTestId(testId)).toBeInTheDocument()
 })
 
-test('Kit to apply base classname', () => {
-  render(
-    <PbCircleChart
-        data={{testid: testId}} 
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_circle_chart')
-})
-
-test('Kit to have custom class', () => {
-  render(
-    <PbCircleChart
-        className='custom-class'
-        data={{testid: testId}} 
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('custom-class')
-})
-
-test('Kit to apply global props', () => {
-  render(
-    <PbCircleChart
-        data={{testid: testId}} 
-        margin="lg"
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
-})
-
-test('kit to apply id', () => {
-  render(
-    <PbCircleChart
-        data={{testid: testId}} 
-        id='circle-chart-id'
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'circle-chart-id')
-})
-

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

@@ -111,7 +111,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const inputRef = useRef<HTMLInputElement | null>(null)
   const itiRef = useRef<any>(null);
   const [inputValue, setInputValue] = useState(value)
-  const [error, setError] = useState(props.error || "")
+  const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
@@ -124,6 +124,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     }
   }, [error, onValidate])
 
+  /*
+    useImperativeHandle exposes the kit's input element to a parent component via a ref.
+    See the Playbook docs for use cases.
+    Read: https://react.dev/reference/react/useImperativeHandle
+  */
+  useImperativeHandle(ref, () => {
+    return {
+      clearField() {
+        setInputValue("")
+        setError("")
+        setHasTyped(false)
+      },
+      inputNode() {
+        return inputRef.current
+      }
+    }
+  })
+
   const unformatNumber = (formattedNumber: any) => {
     return formattedNumber.replace(/\D/g, "")
   }
@@ -146,13 +164,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateTooShortNumber = (itiInit: any) => {
     if (!itiInit) return
-
-    // If field is empty, don't show "too short" error
-    if (!inputValue || inputValue.trim() === '') {
-      setError('')
-      return false
-    }
-
     if (itiInit.getValidationError() === ValidationError.TooShort) {
       return showFormattedError('too short')
     } else {
@@ -172,7 +183,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateUnhandledError = (itiInit: any) => {
-    if (!itiInit) return
+    if (!required || !itiInit) return
     if (itiInit.getValidationError() === ValidationError.SomethingWentWrong) {
       if (inputValue.length === 1) {
         return showFormattedError('too short')
@@ -195,27 +206,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateRepeatCountryCode = (itiInit: any) => {
     if (!itiInit) return
-    const countryDialCode = itiRef.current.getSelectedCountryData().dialCode;
+    const countryDialCode = itiInit.getSelectedCountryData().dialCode;
     if (unformatNumber(inputValue).startsWith(countryDialCode)) {
       return showFormattedError('repeat country code')
     }
   }
 
-  const validateRequiredField = () => {
-    if (!inputValue || inputValue.trim() === '') {
-      setError('Missing phone number')
-      return true
-    }
-    return false
-  }
 
   const validateErrors = () => {
-    // If field is empty, show error message
-    if (!inputValue || inputValue.trim() === '') {
-      if (validateRequiredField()) return
-      return
-    }
-
     if (!hasTyped && !error) return
 
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
@@ -227,87 +225,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     if (validateRepeatCountryCode(itiRef.current)) return
   }
 
-  /*
-    useImperativeHandle exposes the kit's input element to a parent component via a ref.
-    See the Playbook docs for use cases.
-    Read: https://react.dev/reference/react/useImperativeHandle
-  */
-  useImperativeHandle(ref, () => {
-    return {
-      clearField() {
-        setInputValue("")
-        setError("")
-        setHasTyped(false)
-      },
-      inputNode() {
-        return inputRef.current
-      },
-      // Expose validation method for React Hook Form
-      validate() {
-        // Run validation and return error message or true
-        const isEmpty = !inputValue || inputValue.trim() === ''
-
-        if (isEmpty) {
-          // Show missing phone number error
-          const errorMessage = 'Missing phone number'
-          setError(errorMessage)
-          setHasTyped(true)
-          // Only return error for React Hook Form if field is required
-          return required ? errorMessage : true
-        }
-
-        if (!itiRef.current) {
-          return true
-        }
-
-        // Check for repeat country code first
-        const countryDialCode = itiRef.current.getSelectedCountryData().dialCode;
-        if (unformatNumber(inputValue).startsWith(countryDialCode)) {
-          const countryName = itiRef.current.getSelectedCountryData().name
-          const errorMessage = `Invalid ${countryName} phone number (repeat country code)`
-          setError(errorMessage)
-          setHasTyped(true)
-          return errorMessage
-        }
-
-        // Check if it only contains valid characters
-        if (!containOnlyNumbers(inputValue)) {
-          const countryName = itiRef.current.getSelectedCountryData().name
-          const errorMessage = `Invalid ${countryName} phone number (enter numbers only)`
-          setError(errorMessage)
-          setHasTyped(true)
-          return errorMessage
-        }
-
-        // Check if valid number
-        if (!itiRef.current.isValidNumber()) {
-          const countryName = itiRef.current.getSelectedCountryData().name
-          const validationError = itiRef.current.getValidationError()
-          let errorMessage = ''
-
-          if (validationError === ValidationError.TooShort) {
-            errorMessage = `Invalid ${countryName} phone number (too short)`
-          } else if (validationError === ValidationError.TooLong) {
-            errorMessage = `Invalid ${countryName} phone number (too long)`
-          } else if (validationError === ValidationError.MissingAreaCode) {
-            errorMessage = `Invalid ${countryName} phone number (missing area code)`
-          } else {
-            errorMessage = `Invalid ${countryName} phone number`
-          }
-
-          setError(errorMessage)
-          setHasTyped(true)
-
-          return errorMessage
-        }
-
-        // Clear error if valid
-        setError('')
-        return true
-      }
-    }
-  })
-
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
     return { ...itiInit.getSelectedCountryData(), number: inputValue }
   }
@@ -383,7 +300,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error: hasTyped ? error : props.error,
+    error,
     type: 'tel',
     id,
     label,