playbook_ui 15.2.0.pre.alpha.advancedtableicons11557 → 15.2.0.pre.alpha.buttonfix11269

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,

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb

@@ -28,9 +28,9 @@
     popoverButton.onclick = () => {
         buttonClicked = !buttonClicked
         if (buttonClicked) {
-            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 5.70312C14.625 5.28125 15.3281 5.28125 15.75 5.70312L24.7969 14.7031C25.2188 15.1719 25.2188 15.875 24.7969 16.2969C24.3281 16.7656 23.625 16.7656 23.2031 16.2969L15 8.09375L6.79688 16.2969C6.32812 16.7656 5.625 16.7656 5.20312 16.2969C4.73438 15.875 4.73438 15.1719 5.20312 14.75L14.2031 5.70312Z" fill="currentColor"/></svg>'
+            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 5.70312C14.625 5.28125 15.3281 5.28125 15.75 5.70312L24.7969 14.7031C25.2188 15.1719 25.2188 15.875 24.7969 16.2969C24.3281 16.7656 23.625 16.7656 23.2031 16.2969L15 8.09375L6.79688 16.2969C6.32812 16.7656 5.625 16.7656 5.20312 16.2969C4.73438 15.875 4.73438 15.1719 5.20312 14.75L14.2031 5.70312Z" fill="currentColor"/></svg>'
         } else {
-            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 19.2969L5.20312 10.2969C4.73438 9.875 4.73438 9.17188 5.20312 8.70312C5.625 8.28125 6.32812 8.28125 6.79688 8.70312L15 16.9531L23.2031 8.75C23.625 8.28125 24.3281 8.28125 24.7969 8.75C25.2188 9.17188 25.2188 9.875 24.7969 10.2969L15.75 19.2969C15.3281 19.7656 14.625 19.7656 14.2031 19.2969Z" fill="currentColor"/></svg>'
+            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 19.2969L5.20312 10.2969C4.73438 9.875 4.73438 9.17188 5.20312 8.70312C5.625 8.28125 6.32812 8.28125 6.79688 8.70312L15 16.9531L23.2031 8.75C23.625 8.28125 24.3281 8.28125 24.7969 8.75C25.2188 9.17188 25.2188 9.875 24.7969 10.2969L15.75 19.2969C15.3281 19.7656 14.625 19.7656 14.2031 19.2969Z" fill="currentColor"/></svg>'
         }
     }
 </script>

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -11,7 +11,7 @@ import { ToolbarTypes } from "./EditorTypes";
 import ToolbarHistoryItems from "./ToolbarHistory";
 import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
 
-const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.ReactElement => {
+const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -33,50 +33,15 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
     },
   ]
 
-  const simpleToolbaritems = [
-    {
-        icon: "bold",
-        text: "Bold",
-        classname:`toolbar_button ${editor.isActive('bold') ? 'is-active' : ''}`,
-        onclick:()=>editor.chain().focus().toggleBold().run(),
-    },
-    {
-        icon: "italic",
-        text: "Italic",
-        classname:`toolbar_button ${editor.isActive('italic') ? 'is-active' : ''}`,
-        onclick:() => editor.chain().focus().toggleItalic().run(),
-    },
-  ]
-
   return (
     <Background backgroundColor="white"
-        className={`toolbar ${sticky ? 'pb_rich_text_editor_tiptap_toolbar_sticky' : ''}`}
-        
+        className="toolbar"
     >
       <Flex flex="0"
           justify="between"
           paddingX="sm"
           paddingY="xxs"
       >
-        {
-          simple ? (
-            <>
-              <Flex className="toolbar_block">
-                {simpleToolbaritems && simpleToolbaritems.map(
-                  ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
-                    <EditorButton
-                        classname={classname}
-                        icon={icon}
-                        key={index}
-                        onclick={onclick}
-                        text={text}
-                    />
-                  )
-                )}
-              </Flex>
-            </>
-          ) : (
-            <>
         <FlexItem className="toolbar_block"
             displayFlex
         >
@@ -104,10 +69,6 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
             }
         </FlexItem>
         <ToolbarHistoryItems editor={editor} />
-        </>
-          )
-        }
-       
       </Flex>
     </Background>
   );

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx

@@ -146,7 +146,6 @@ const popoverReference = (
 
   return (
       <PbReactPopover
-          className='pb_tiptap_toolbar_dropdown_popover'
           closeOnClick='outside'
           padding='none'
           placement="bottom"

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { TrixEditor } from 'react-trix'
 
@@ -77,9 +77,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria),
     dataProps = buildDataProps(data),
-    [editor, setEditor] = useState<Editor>(),
-    [showToolbarOnFocus, setShowToolbarOnFocus] = useState(false),
-    containerRef = useRef<HTMLDivElement>(null)
+    [editor, setEditor] = useState<Editor>()
 
   const htmlProps = buildHtmlProps(htmlOptions)
   
@@ -130,42 +128,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     document.addEventListener('trix-blur', inlineFocus)
   }
 
-  //===========focus prop with advanced editor=================
-  const isClickInPopover = (event: Event): boolean => {
-    return !!(event.target as Element).closest('.pb_tiptap_toolbar_dropdown_popover')
-  }
-
-  const isClickInContainer = (event: Event): boolean => {
-    return !!(containerRef.current && containerRef.current.contains(event.target as Node))
-  }
-
-  useEffect(() => {
-    if (!advancedEditor || !focus) return
-
-    const handleFocus = () => setShowToolbarOnFocus(true)
-    
-    const handleClickOutside = (event: Event) => {
-      if (isClickInContainer(event) || isClickInPopover(event)) return
-      setShowToolbarOnFocus(false)
-    }
-
-    const editorElement = advancedEditor?.view?.dom
-    if (editorElement) {
-      editorElement.addEventListener('focus', handleFocus)
-    }
-
-    document.addEventListener('mousedown', handleClickOutside)
-
-    return () => {
-      if (editorElement) {
-        editorElement.removeEventListener('focus', handleFocus)
-      }
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [advancedEditor, focus])
-
-  //============= end focus prop with advanced editor=================
-
   useEffect(() => {
     if (!editor || !template) return
     editor.loadHTML('')
@@ -186,43 +148,41 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     })
   }, [editor])
 
-  // Generate CSS classes
-  const css = classnames(
-    'pb_rich_text_editor_kit',
-    {
-      simple: simple,
-      'focus-editor-targets': focus,
-      sticky: sticky,
-      inline: inline,
-      'toolbar-bottom': toolbarBottom,
-    },
-    globalProps(props, { maxWidth }),
-    className
+  const richTextEditorClass = 'pb_rich_text_editor_kit',
+    simpleClass = simple ? 'simple' : '',
+    focusClass = focus ? 'focus-editor-targets' : '',
+    stickyClass = sticky ? 'sticky' : '',
+    inlineClass = inline ? 'inline' : '',
+    toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
+
+  let css = classnames(globalProps(props, { maxWidth }), className)
+  css = classnames(
+    richTextEditorClass,
+    simpleClass,
+    focusClass,
+    stickyClass,
+    inlineClass,
+    toolbarBottomClass,
+    css
   )
 
-  // Determine if toolbar should be shown
-  const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
-
   return (
     <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
         className={css}
-        ref={focus ? containerRef : undefined}
     >
       {
         advancedEditor ? (
           <div 
               className={classnames("pb_rich_text_editor_advanced_container", { 
-              ["toolbar-active"]: shouldShowToolbar,
+              ["toolbar-active"]: advancedEditorToolbar,
               })}
           >
-            {shouldShowToolbar && (
+            {advancedEditorToolbar && (
               <EditorToolbar editor={advancedEditor}
                   extensions={extensions}
-                  simple={simple}
-                  sticky={sticky}
               />
             )}
           { children }