playbook_ui 15.4.0 → 15.5.0.pre.alpha.PLAY2581aggressivevalidation12651

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
 
 const data = [{ name: "Name", y: 67 }]
 

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.md

@@ -1,5 +1,5 @@
 Highcharts allows for any custom colors to be used. Custom data colors allow for color customization to match the needs of business requirements.
 
-For React, pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
+For React, pass the option `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
 
-For Rails, the prop `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.
+For Rails, the option `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.jsx

@@ -7,7 +7,8 @@ import Caption from '../../pb_caption/_caption'
 import Body from '../../pb_body/_body'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
 import Title from '../../pb_title/_title'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 const data = [{ name: "Name", y: 10 }];
 

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.md

@@ -0,0 +1 @@
+In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 const data = [{ name: "Capacity", y: 75 }]
 

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 const chartOptions = {
   title: {

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 const data = [{ name: "Rating", y: 4.5 }]
 

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 
 const data1 = [

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md

@@ -1,3 +1,5 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
+
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
-import { colors } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
 
 const data = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.md

@@ -0,0 +1 @@
+In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.html.erb

@@ -37,7 +37,7 @@
     },
   } %>
 
-<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("title", props: {size: 4, text: "align | verticalAlign", padding_top: "sm", padding_bottom: "sm"})%>
 <%= pb_rails("pb_line_graph", props: {options: chartOptionsFirst}) %>
 
   <% chartOptionsSecond = {

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

@@ -110,14 +110,30 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const inputRef = useRef<HTMLInputElement | null>(null)
   const itiRef = useRef<any>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const [inputValue, setInputValue] = useState(value)
+  // Handle value prop - it might be a string or an object with number property (from react-hook-form)
+  const getValueString = (val: any): string => {
+    if (typeof val === 'string') return val
+    if (val?.number) return val.number
+    return ""
+  }
+  const [inputValue, setInputValue] = useState(getValueString(value))
   const [error, setError] = useState(props.error || "")
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
+  const [hasBlurred, setHasBlurred] = useState(false)
   const [formSubmitted, setFormSubmitted] = useState(false)
   const [hasStartedValidating, setHasStartedValidating] = useState(false)
 
+  // Sync value prop when it changes (e.g., from react-hook-form)
+  useEffect(() => {
+    const newValue = getValueString(props.value)
+    if (newValue !== inputValue) {
+      setInputValue(newValue)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.value])
+
   // Only sync initial error from props, not continuous updates
   // Once validation starts, internal validation takes over
   useEffect(() => {
@@ -143,9 +159,13 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   // Determine which error to display
-  // Show internal errors on blur (hasTyped) or on form submission (formSubmitted)
-  const shouldShowInternalError = (hasTyped || formSubmitted) && required && error
+  // Show internal errors only after blur (hasBlurred) or on form submission (formSubmitted)
+  const shouldShowInternalError = (hasBlurred || formSubmitted) && error
   const displayError = shouldShowInternalError ? error : ""
+  
+  // Only show error prop after blur (to prevent showing react-hook-form errors while typing)
+  const shouldShowPropError = hasBlurred || formSubmitted
+  const propError = shouldShowPropError ? (props.error || "") : ""
 
   useEffect(() => {
     const hasError = (error ?? '').length > 0
@@ -259,7 +279,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       return
     }
 
-     if (!hasTyped && !error) return
+     // Only validate if field has been blurred or form has been submitted
+     if (!hasBlurred && !formSubmitted && !error) return
 
     // Run validation checks
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
@@ -305,6 +326,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         setInputValue("")
         setError("")
         setHasTyped(false)
+        setHasBlurred(false)
         setFormSubmitted(false)
         setHasStartedValidating(false)
         // Only clear validation state if field was required
@@ -418,9 +440,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     onChange(phoneNumberData)
     isValid(itiRef.current.isValidNumber())
 
-    // Trigger validation after onChange for React Hook Form
-    // This ensures validation state is up-to-date
-    setTimeout(() => validateErrors(), 0)
+    // Don't validate on change - only validate on blur or form submission
   }
 
   // Separating Concerns as React Docs Recommend
@@ -492,12 +512,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error: hasTyped ? error : props.error || displayError,
+    error: displayError || propError,
     type: 'tel',
     id,
     label,
     name,
-    onBlur: validateErrors,
+    onBlur: () => {
+      setHasBlurred(true)
+      validateErrors()
+    },
     onChange: formatAsYouType ? undefined : handleOnChange,
     value: inputValue
   }

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
+import PbReactPopover from "../_popover";
+import Body from "../../pb_body/_body";
+import Flex from "../../pb_flex/_flex";
+import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button";
 
 const PopoverAppendTo = (props) => {
   const [showParentPopover, setShowParentPopover] = useState(false);