playbook_ui 14.22.0 → 14.23.0.pre.alpha.PLAY2243customindeterminatemaincheckboxlabels9046

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx

@@ -1,15 +1,31 @@
-import React, { useState } from 'react'
-
+import React, { useState, useRef } from 'react'
 import Button from '../../pb_button/_button'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
 const GaugeLiveData = (props) => {
   const [value, setValue] = useState(50)
   const [name, setName] = useState('Name')
+  const chartRef = useRef(null)
+
+  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
 
   const updateValue = () => {
-    setValue(Math.floor(Math.random() * 100))
+    const newValue = Math.floor(Math.random() * 100)
+    setValue(newValue)
+
+    const chart = chartRef.current?.chart
+    if (chart) {
+      chart.series[0].points[0].update(newValue)
+    }
   }
+
   const updateName = () => {
     let index = namesArray.indexOf(name)
     if (namesArray.indexOf(name) == 5) {
@@ -18,8 +34,23 @@ const GaugeLiveData = (props) => {
       index += 1
     }
     setName(namesArray[index])
+
+    const chart = chartRef.current?.chart
+    if (chart) {
+      chart.series[0].points[0].update({ name: namesArray[index] })
+    }
   }
-  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
+
+  const options = Highcharts.merge({}, gaugeTheme,
+    {
+      title: {
+        text: name,
+      },
+      series: [{
+        data: [{ name: name, y: value }]
+      }]
+    }
+  )
 
   return (
     <div>
@@ -33,10 +64,10 @@ const GaugeLiveData = (props) => {
           text="Update Name"
           {...props}
       />
-      <Gauge
-          chartData={[{ name: name, value: value }]}
-          id="gauge-live-data"
-          {...props}
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+          ref={chartRef}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx

@@ -1,22 +1,54 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
-const data = [{
-  name: 'Rating', value: 4.5,
-}]
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-const GaugeMinMax = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        id="gauge-min-max"
-        max={5}
-        min={0}
-        showLabels
-        title="Product Rating"
-        {...props}
-    />
-  </div>
-)
+const data = [{ name: "Rating", y: 4.5 }]
 
-export default GaugeMinMax
+const baseOptions = {
+  title: {
+    text: "Product Rating",
+  },
+  yAxis: {
+    min: 0,
+    max: 5,
+    lineWidth: 0,
+    tickWidth: 0,
+    minorTickInterval: null,
+    tickAmount: 2,
+    tickPositions: [0, 5],
+    labels: {
+      y: 26,
+      enabled: true,
+      style: {
+        color: colors.neutral,
+        fontFamily: typography.font_family_base,
+        fontWeight: typography.bold,
+      }
+    },
+  },
+  series: [{ data: data }],
+};
+
+const GaugeMinMax = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          id="gauge-min-max"
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugeMinMax;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx

@@ -2,7 +2,14 @@ import React from 'react'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
 const GaugeSizing = (props) => (
   <div>
@@ -17,10 +24,11 @@ const GaugeSizing = (props) => (
           shrink
           {...props}
       >
-        <Gauge
-            chartData={[ { name: 'Point 1', value: 100 } ]}
-            id="gauge-sizing4"
-            {...props}
+        <HighchartsReact
+            highcharts={Highcharts}
+            options={Highcharts.merge({}, gaugeTheme, {
+              series: [{ data: [{ name: "Point 1", y: 100 }] }],
+            })}
         />
       </FlexItem>
       <FlexItem
@@ -29,10 +37,11 @@ const GaugeSizing = (props) => (
           shrink
           {...props}
       >
-        <Gauge
-            chartData={[ { name: 'Point 2', value: 75 } ]}
-            id="gauge-sizing3"
-            {...props}
+        <HighchartsReact
+            highcharts={Highcharts}
+            options={Highcharts.merge({}, gaugeTheme, {
+              series: [{ data: [{ name: "Point 2", y: 75 }] }],
+            })}
         />
       </FlexItem>
       <FlexItem
@@ -41,10 +50,11 @@ const GaugeSizing = (props) => (
           shrink
           {...props}
       >
-        <Gauge
-            chartData={[ { name: 'Point 3', value: 50 } ]}
-            id="gauge-sizing2"
-            {...props}
+        <HighchartsReact
+            highcharts={Highcharts}
+            options={Highcharts.merge({}, gaugeTheme, {
+              series: [{ data: [{ name: "Point 3", y: 50 }] }],
+            })}
         />
       </FlexItem>
       <FlexItem
@@ -53,11 +63,14 @@ const GaugeSizing = (props) => (
           shrink
           {...props}
       >
-        <Gauge
-            chartData={[ { name: 'Point 4', value: 25 } ]}
-            height="100%"
-            id="gauge-sizing1"
-            {...props}
+        <HighchartsReact
+            highcharts={Highcharts}
+            options={Highcharts.merge({}, gaugeTheme, {
+              chart: {
+                height: "100%",
+              },
+              series: [{ data: [{ name: "Point 4", y: 25 }] }],
+            })}
         />
       </FlexItem>
     </Flex>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx

@@ -1,21 +1,38 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
 
-const data = [
-  { name: 'Score', value: 780 },
-]
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-const GaugeTitle = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        id="gauge-title"
-        max={850}
-        min={300}
-        title="Credit Score"
-        {...props}
-    />
-  </div>
-)
+const data = [{ name: "Score", y: 780 }]
 
-export default GaugeTitle
+const baseOptions = {
+  title: {
+    text: "Credit Score",
+  },
+  yAxis: {
+    min: 300,
+    max: 850,
+  },
+  series: [{ data: data }],
+};
+
+const GaugeTitle = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          id="gauge-title"
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugeTitle;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx

@@ -1,31 +1,72 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
+
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
 const data1 = [
-  { name: 'Data Used', value: 32 },
+  { name: 'Data Used', y: 32 },
 ]
 const data2 = [
-  { name: 'Sales to Date', value: 65 },
+  { name: 'Sales to Date', y: 65 },
 ]
 
-const GaugeUnits = (props) => (
-  <div>
-    <Gauge
-        chartData={data1}
-        id="gauge-units1"
-        suffix="GB"
-        title="Data Usage"
-        {...props}
-    />
-    <Gauge
-        chartData={data2}
-        id="gauge-units2"
-        prefix="$"
-        suffix="k"
-        title="Sales Goal"
-        {...props}
-    />
-  </div>
-)
+const baseOptions1 = {
+  title: {
+    text: "Data Usage",
+  },
+  series: [{ data: data1 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">GB</span>`,
+      },
+    },
+  },
+};
+const baseOptions2 = {
+  title: {
+    text: "Sales Goal",
+  },
+  series: [{ data: data2 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span y="28" style="fill: ${colors.text_lt_light}; font-size: ${typography.text_base};">$</span>` +
+          `<span class="fix" y="38">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">k</span>`,
+      },
+    },
+  },
+};
+
+const GaugeUnits = () => {
+  const options1 = Highcharts.merge({}, gaugeTheme, baseOptions1);
+  const options2 = Highcharts.merge({}, gaugeTheme, baseOptions2);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          id="gauge-units1"
+          options={options1}
+      />
+      <HighchartsReact
+          highcharts={Highcharts}
+          id="gauge-units2"
+          options={options2}
+      />
+    </div>
+  );
+};
 
-export default GaugeUnits
+export default GaugeUnits;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units_react.md

@@ -0,0 +1 @@
+Use custom CSS with classes or inline styles (as shown in these docs) to customize the appearance of prefix and suffix units.

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

@@ -15,7 +15,6 @@ examples:
 
   react:
   - gauge_default: Default
-  - gauge_pb_styles: Playbook Styles
   - gauge_disable_animation: Disable Animation
   - gauge_title: Title
   - gauge_units: Units

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

@@ -1,5 +1,4 @@
 export { default as GaugeDefault } from './_gauge_default.jsx'
-export { default as GaugePbStyles } from './_gauge_pb_styles.jsx'
 export { default as GaugeDisableAnimation } from './_gauge_disable_animation.jsx'
 export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
 export { default as GaugeHeight } from './_gauge_height.jsx'

data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts

@@ -2,7 +2,13 @@ import colors from '../tokens/exports/_colors.module.scss'
 import typography from '../tokens/exports/_typography.module.scss'
 
 const gaugeTheme = {
-  title: { text: "" },
+  title: { 
+    text: "",
+    style: {
+      fontFamily: typography.font_family_base,
+      fontSize: typography.text_larger,
+    },
+  },
   chart: {
     type: "solidgauge",
     events: {

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

@@ -68,7 +68,7 @@ const containOnlyNumbers = (value: string) => {
   return /^[()+\-\ .\d]*$/g.test(value)
 }
 
-const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
+const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>) => {
   const {
     aria = {},
     className,
@@ -106,15 +106,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     className
   )
 
-  const inputRef = useRef<HTMLInputElement>()
+  const inputRef = useRef<HTMLInputElement | null>(null)
   const itiRef = useRef<any>(null);
   const [inputValue, setInputValue] = useState(value)
   const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
+  const [hasTyped, setHasTyped] = useState(false)
 
   useEffect(() => {
-    if (error?.length > 0) {
+    if ((error ?? '').length > 0) {
       onValidate(false)
     } else {
       onValidate(true)
@@ -131,6 +132,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       clearField() {
         setInputValue("")
         setError("")
+        setHasTyped(false)
       },
       inputNode() {
         return inputRef.current
@@ -201,6 +203,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   }
 
   const validateErrors = () => {
+    if (!hasTyped && !error) return
+
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
     if (validateOnlyNumbers(itiRef.current)) return
     if (validateTooLongNumber(itiRef.current)) return
@@ -214,6 +218,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   }
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    if (!hasTyped) setHasTyped(true)
     setInputValue(evt.target.value)
     let phoneNumberData
     if (formatAsYouType) {
@@ -259,16 +264,17 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
 
     itiRef.current = telInputInit;
 
-    inputRef.current.addEventListener("countrychange", (evt: Event) => {
-      const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
-      setSelectedData(phoneNumberData)
-      onChange(phoneNumberData)
-      validateErrors()
-    })
-
-    inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
-    inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
+    if (inputRef.current) {
+      inputRef.current.addEventListener("countrychange", (evt: Event) => {
+        const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
+        setSelectedData(phoneNumberData)
+        onChange(phoneNumberData)
+        validateErrors()
+      })
 
+      inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
+      inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
+    }
     if (formatAsYouType) {
       inputRef.current?.addEventListener("input", (evt) => {
         handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
@@ -303,12 +309,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
         {...htmlProps}
     >
       <TextInput
-          ref={
-            inputNode => {
-              ref ? ref.current = inputNode : null
-              inputRef.current = inputNode
+          ref={inputNode => {
+            if (ref) {
+              if (typeof ref === 'function') {
+                ref(inputNode)
+              } else {
+                (ref as React.MutableRefObject<HTMLInputElement | null>).current = inputNode
+              }
             }
-          }
+            inputRef.current = inputNode
+          }}
           {...textInputProps}
       />
     </div>

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

@@ -104,8 +104,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyLeftColumn.forEach((colId, index) => {
                 const isLastColumn = index === stickyLeftColumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');
@@ -155,8 +155,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyRightColumnReversed.forEach((colId, index) => {
                 const isLastColumn = index === stickyRightColumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx

@@ -11,7 +11,7 @@ const TableStickyColumns = () => {
         >
             <thead>
                 <tr>
-                    <th id="a">{'Column 1'}</th>
+                    <th data-sticky-id="a">{'Column 1'}</th>
                     <th>{'Column 2'}</th>
                     <th>{'Column 3'}</th>
                     <th>{'Column 4'}</th>
@@ -25,12 +25,12 @@ const TableStickyColumns = () => {
                     <th>{'Column 12'}</th>
                     <th>{'Column 13'}</th>
                     <th>{'Column 14'}</th>
-                    <th id="b">{'Column 15'}</th>
+                    <th data-sticky-id="b">{'Column 15'}</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -44,10 +44,10 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -61,10 +61,10 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -78,7 +78,7 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
             </tbody>
         </Table>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md

@@ -1,3 +1,3 @@
 The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
 
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.
+Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using props.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx

@@ -10,9 +10,9 @@ const TableStickyLeftColumns = () => {
         >
             <thead>
                 <tr>
-                    <th id="1">{'Column 1'}</th>
-                    <th id="2">{'Column 2'}</th>
-                    <th id="3">{'Column 3'}</th>
+                    <th data-sticky-id="1">{'Column 1'}</th>
+                    <th data-sticky-id="2">{'Column 2'}</th>
+                    <th data-sticky-id="3">{'Column 3'}</th>
                     <th>{'Column 4'}</th>
                     <th>{'Column 5'}</th>
                     <th>{'Column 6'}</th>
@@ -29,9 +29,9 @@ const TableStickyLeftColumns = () => {
             </thead>
             <tbody>
                 <tr>
-                    <td id="1">{'Value 1'}</td>
-                    <td id="2">{'Value 2'}</td>
-                    <td id="3">{'Value 3'}</td>
+                    <td data-sticky-id="1">{'Value 1'}</td>
+                    <td data-sticky-id="2">{'Value 2'}</td>
+                    <td data-sticky-id="3">{'Value 3'}</td>
                     <td>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>
@@ -46,9 +46,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="1">{'Value 1'}</td>
-                    <td id="2">{'Value 2'}</td>
-                    <td id="3">{'Value 3'}</td>
+                    <td data-sticky-id="1">{'Value 1'}</td>
+                    <td data-sticky-id="2">{'Value 2'}</td>
+                    <td data-sticky-id="3">{'Value 3'}</td>
                     <td>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>
@@ -63,9 +63,9 @@ const TableStickyLeftColumns = () => {
                     <td>{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="1">{'Value 1'}</td>
-                    <td id="2">{'Value 2'}</td>
-                    <td id="3">{'Value 3'}</td>
+                    <td data-sticky-id="1">{'Value 1'}</td>
+                    <td data-sticky-id="2">{'Value 2'}</td>
+                    <td data-sticky-id="3">{'Value 3'}</td>
                     <td>{'Value 4'}</td>
                     <td>{'Value 5'}</td>
                     <td>{'Value 6'}</td>