playbook_ui 10.21.0.pre.alpha.na1 → 10.21.1.pre.alpha1

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

@@ -1,23 +1,23 @@
 <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
   <span>
-    <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: 'inside-popover-1' }) %>
+    <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: "inside-popover-1" }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "inside",
       trigger_element_id: "inside-popover-1",
       tooltip_id: "inside-tooltip-1",
-      position: 'bottom',
+      position: "bottom",
       offset: true
     }) do %>
       Click on me!
     <% end %>
   </span>
   <span>
-    <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: 'outside-popover-1' }) %>
+    <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: "outside-popover-1" }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "outside",
       trigger_element_id: "outside-popover-1",
       tooltip_id: "outside-tooltip-1",
-      position: 'left',
+      position: "left",
       offset: true
     }) do %>
         Click anywhere but me!
@@ -27,16 +27,16 @@
     <%= pb_rails("button", props: {
       text: "Click Anywhere",
       variant: "secondary",
-      id: 'any-popover-1'
+      id: "any-popover-1"
     }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "any",
       trigger_element_id: "any-popover-1",
       tooltip_id: "any-tooltip-1",
-      position: 'top',
+      position: "top",
       offset: true
     }) do %>
       Click anything!
     <% end %>
   </span>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/index.js

@@ -36,15 +36,14 @@ export default class PbPopover extends PbEnhancedElement {
       }
 
       setTimeout(() => {
-        this.popper.update()
         this.toggleTooltip()
+        this.popper.update()
       }, 0)
     })
   }
 
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target }) => {
-      const isTriggerElement = target.closest(`#${this.triggerElementId}`) !== null
       const isTooltipElement = target.closest(`#${this.tooltipId}`) !== null
 
       switch (this.closeOnClick) {
@@ -52,21 +51,17 @@ export default class PbPopover extends PbEnhancedElement {
         this.hideTooltip()
         break
       case 'outside':
-        if (isTooltipElement) {
-          this.checkCloseTooltip()
-        } else {
+        if (!isTooltipElement) {
           this.hideTooltip()
         }
         break
       case 'inside':
-        if (isTooltipElement || isTriggerElement) {
+        if (isTooltipElement) {
           this.hideTooltip()
-        } else {
-          this.checkCloseTooltip()
         }
         break
       }
-    }, { once: true })
+    }, true)
   }
 
   hideTooltip() {

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -3,7 +3,7 @@
   class: object.classname,
   data: object.data,
   id: object.id) do %>
-  <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+  <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>
     </div>

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type ProgressSimpleProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type ProgressStepProps = {
   className?: string,

data/app/pb_kits/playbook/pb_radio/_radio.jsx

@@ -5,7 +5,7 @@ import React, { forwardRef } from 'react'
 import Body from '../pb_body/_body.jsx'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type RadioProps = {
   aria?: object,

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

@@ -1,11 +1,12 @@
 /* @flow */
+/* eslint-disable react-hooks/rules-of-hooks */
 
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
 
 try {
   const Trix = require('trix')
@@ -15,6 +16,8 @@ try {
   }
 } catch (_e) { /* do nothing */ }
 
+import { TrixEditor } from "react-trix"
+
 type RichTextEditorProps = {
   aria?: object,
   toolbarBottom?: Boolean,
@@ -24,7 +27,7 @@ type RichTextEditorProps = {
   id?: string,
   inline?: boolean,
   name?: string,
-  onChange: (string) => void,
+  onChange: (html: string, text: string) => void,
   placeholder?: string,
   simple?: boolean,
   sticky?: boolean,
@@ -39,129 +42,116 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     className,
     data = {},
     focus = false,
-    id,
     inline = false,
     name,
-    onChange,
+    onChange = noop,
     placeholder,
     simple = false,
     sticky = false,
     template = '',
     value = '',
   } = props
-  const trixRef = useRef()
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
 
-  useEffect(() => {
-    trixRef.current.addEventListener('trix-initialize', (event) => {
-      const element = event.target
+  const ariaProps = buildAriaProps(aria),
+  dataProps = buildDataProps(data),
+  [editor, setEditor] = useState()
 
-      const { toolbarElement, editor } = element
+  const handleOnEditorReady = (editorInstance) => setEditor(editorInstance),
+  element = editor?.element
 
-      const blockCodeButton = toolbarElement.querySelector(
-        '[data-trix-attribute=code]'
-      )
-      const inlineCodeButton = blockCodeButton.cloneNode(true)
+  // DOM manipulation must wait for editor to be ready
+  if (editor) {
+    const toolbarElement = element.parentElement.querySelector('trix-toolbar'),
+    blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]')
 
-      inlineCodeButton.hidden = true
-      inlineCodeButton.dataset.trixAttribute = 'inlineCode'
-      blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
+    let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]')
+    if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true)
 
-      const getCodeFormattingType = () => {
-        if (editor.attributeIsActive('code')) return 'block'
-        if (editor.attributeIsActive('inlineCode')) return 'inline'
+    // set button attributes
+    inlineCodeButton.dataset.trixAttribute = 'inlineCode'
+    blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
 
-        const range = editor.getSelectedRange()
-        if (range[0] == range[1]) return 'block'
+    if (toolbarBottom) editor.element.after(toolbarElement)
 
-        const text = editor.getSelectedDocument().toString().trim()
-        return /\n/.test(text) ? 'block' : 'inline'
-      }
+    const getCodeFormattingType = (): string => {
+      if (editor.attributeIsActive('code')) return 'block'
+      if (editor.attributeIsActive('inlineCode')) return 'inline'
 
-      element.addEventListener('trix-selection-change', () => {
-        const type = getCodeFormattingType()
-        blockCodeButton.hidden = type == 'inline'
-        inlineCodeButton.hidden = type == 'block'
-      })
+      const range = editor.getSelectedRange()
+      if (range[0] == range[1]) return 'block'
 
-      if (toolbarBottom) editor.element.after(toolbarElement)
-    })
-
-    trixRef.current.addEventListener('trix-change', (event) => {
-      onChange && onChange(event.target.innerHTML)
-    })
-  }, [trixRef])
-
-  useEffect(() => {
-    const editor = trixRef.current.editorController.editor
-    if (template) {
-      editor.loadHTML('')
-      editor.setSelectedRange([0, 0])
-      editor.insertHTML(template)
+      const text = editor.getSelectedDocument().toString().trim()
+      return /\n/.test(text) ? 'block' : 'inline'
     }
-  }, [template])
-
-  focus
-    ? (document.addEventListener('trix-focus', useFocus),
-    document.addEventListener('trix-blur', useFocus),
-    useFocus())
-    : null
-
-  document.addEventListener('trix-focus', inlineFocus)
-  document.addEventListener('trix-blur', inlineFocus)
 
-  const handleAnchorElementClick = (clickedElement) => {
-    const trixEditorContainer = clickedElement.closest('.pb_rich_text_editor_kit')
-    if (!trixEditorContainer) return
+    // DOM event listeners
+    element.addEventListener('trix-selection-change', () => {
+      const type = getCodeFormattingType()
+      blockCodeButton.hidden = type == 'inline'
+      inlineCodeButton.hidden = type == 'block'
+    })
 
-    const anchorElement = clickedElement.closest('a')
-    if (!anchorElement) return
+    focus
+      ? (document.addEventListener('trix-focus', useFocus),
+      document.addEventListener('trix-blur', useFocus),
+      useFocus())
+      : null
 
-    if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
+    document.addEventListener('trix-focus', inlineFocus)
+    document.addEventListener('trix-blur', inlineFocus)
   }
 
-  const handleClick = (event) => {
-    handleAnchorElementClick(event.target)
-  }
+  useEffect(() => {
+    if (!editor || !template) return
+    editor.loadHTML('')
+    editor.setSelectedRange([0, 0])
+    editor.insertHTML(template)
+  }, [editor, template])
 
   useEffect(() => {
-    trixRef.current.addEventListener('click', handleClick)
-  }, [])
+    if (!element) return
+    element.addEventListener('click', ({target}) => {
+      const trixEditorContainer = target.closest('.pb_rich_text_editor_kit')
+      if (!trixEditorContainer) return
 
-  const RichTextEditorClass = 'pb_rich_text_editor_kit'
-  const SimpleClass = simple ? 'simple' : ''
-  const FocusClass = focus ? 'focus-editor-targets' : ''
-  const StickyClass = sticky ? 'sticky' : ''
-  const InlineClass = inline ? 'inline' : ''
-  const ToolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
-  const css = classnames(globalProps(props), className)
+      const anchorElement = target.closest('a')
+      if (!anchorElement) return
+
+      if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
+    })
+  }, [element])
+
+  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), className)
+  css = classnames(
+    richTextEditorClass,
+    simpleClass,
+    focusClass,
+    stickyClass,
+    inlineClass,
+    toolbarBottomClass,
+    css
+  )
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(
-        RichTextEditorClass,
-        SimpleClass,
-        FocusClass,
-        StickyClass,
-        InlineClass,
-        ToolbarBottomClass,
-        css
-      )}
+        className={css}
     >
-      <input
-          id={id}
-          name={name}
-          type="hidden"
-          value={value}
-      />
-      <trix-editor
-          input={id}
-          name={name}
+      <TrixEditor
+          className=""
+          fileParamName={name}
+          onChange={onChange}
+          onEditorReady={handleOnEditorReady}
           placeholder={placeholder}
-          ref={trixRef}
+          value={value}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("rich_text_editor", props: {id: "default"}) %>
+<%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx

@@ -1,12 +1,19 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { RichTextEditor } from '../../'
 
-const RichTextEditorDefault = (props) => (
-  <div>
-    <RichTextEditor
-        {...props}
-    />
-  </div>
-)
+const RichTextEditorDefault = (props) => {
+  const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
+  handleOnChange = (html) => setValue(html)
+
+  return (
+    <div>
+      <RichTextEditor
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
 
 export default RichTextEditorDefault

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

@@ -3,7 +3,7 @@
 import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import PbTable from './'
 
 type TableProps = {

data/app/pb_kits/playbook/pb_table/_table_row.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type TableRowPropTypes = {
   aria?: object,

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

@@ -2,7 +2,7 @@
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 import Flex from '../pb_flex/_flex'
@@ -75,6 +75,8 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
     globalProps(props),
     className,
   ])
+  const uniqueTextInputKey = `${id ? id : ''}${Math.ceil(Math.random() * 100000)}`
+
   const addOnIcon = (
     <Icon
         className="add-on-icon"
@@ -89,6 +91,7 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
         className="text_input"
         disabled={disabled}
         id={id}
+        key={uniqueTextInputKey}
         name={name}
         onChange={onChange}
         placeholder={placeholder}

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

@@ -4,12 +4,12 @@
 
 
 [class^=pb_text_input_kit] {
+  margin-bottom: $space_sm;
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;
   }
   .text_input_wrapper {
-    margin-bottom: $space_sm;
     display: block;
     input::placeholder,
     .text_input .placeholder {

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

@@ -75,3 +75,17 @@ test('returns additional class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark error`)
 })
+
+test('returns additional class name', () => {
+  render(
+    <TextInput
+        data={{ testid: testId }}
+        label="First Name"
+        marginBottom="lg"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} mb_lg`)
+})

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -1,4 +1,5 @@
 /* @flow */
+/* eslint-disable react-hooks/rules-of-hooks */
 
 import React, { forwardRef, useEffect, useRef } from 'react'
 import classnames from 'classnames'

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 
 import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
+import { deprecatedProps, globalProps } from '../utilities/globalProps'
 
 type TitleProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_toggle/_toggle.jsx

@@ -10,7 +10,7 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type Props = {
   aria?: object,

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -6,7 +6,7 @@ import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
 import AsyncCreateableSelect from 'react-select/async-creatable'
 import { get, isString, uniqueId } from 'lodash'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 
 import Control from './components/Control'

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type UserBadgeProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.jsx

@@ -6,7 +6,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import Joyride from 'react-joyride'
 import Button from '../pb_button/_button'
 import Flex from '../pb_flex/_flex'

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import Caption from '../pb_caption/_caption'

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -1,6 +1,7 @@
 import Highcharts from 'highcharts'
 
 import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme'
+import { highchartsDarkTheme } from '../pb_dashboard/pbChartsDarkTheme'
 import colors from '../tokens/exports/_colors.scss'
 
 import pie from 'highcharts/modules/variable-pie'
@@ -67,10 +68,14 @@ class pbChart {
     }
   }
 
+  setupTheme() {
+    this.options.dark ? Highcharts.setOptions(highchartsDarkTheme) :  Highcharts.setOptions(highchartsTheme)
+  }
+
   setupGauge(options) {
     highchartsMore(Highcharts)
     solidGauge(Highcharts)
-    Highcharts.setOptions(highchartsTheme)
+    this.setupTheme()
 
     Highcharts.chart(this.defaults.id, {
       chart: {
@@ -140,7 +145,7 @@ class pbChart {
   }
 
   setupPieChart(options) {
-    Highcharts.setOptions(highchartsTheme)
+    this.setupTheme()
     Highcharts.chart(this.defaults.id, {
       title: {
         text: this.defaults.title,
@@ -187,8 +192,7 @@ class pbChart {
   }
 
   setupChart(options) {
-    Highcharts.setOptions(highchartsTheme)
-
+    this.setupTheme()
     const configOptions = {
       title: {
         text: this.defaults.title,

data/app/pb_kits/playbook/utilities/_align_content.scss

@@ -0,0 +1,29 @@
+.align_content_start {
+  display: flex;
+  align-content: start !important;
+}
+
+.align_content_end {
+  display: flex;
+  align-content: end !important;
+}
+
+.align_content_center {
+  display: flex;
+  align-content: center !important;
+}
+
+.align_content_space_between {
+  display: flex;
+  align-content: space-between !important;
+}
+
+.align_content_space_around {
+  display: flex;
+  align-content: space-around !important;
+}
+
+.align_content_space_evenly {
+  display: flex;
+  align-content: space-evenly !important;
+}