playbook_ui 10.22.0 → 10.23.0.pre.cachetest

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx

@@ -3,7 +3,7 @@
 import Highlighter from 'react-highlight-words'
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 
 type HighlightProps = {
   className?: string,

data/app/pb_kits/playbook/pb_icon/_icon.jsx

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

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx

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

data/app/pb_kits/playbook/pb_image/{_image.tsx → _image.jsx}

@@ -1,22 +1,24 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-type ImageType = {
+type ImageProps = {
   alt?: string,
-  aria?: {[key: string]: string},
+  aria?: object,
   className?: string,
-  data?: {[key: string]: string},
+  data?: object,
   id?: string,
-  onError?: () => void,
-  size?: "xs" | "sm" | "md" | "lg" | "xl",
+  onError?: () => {},
+  size: "xs" | "sm" | "md" | "lg" | "xl",
   rounded?: boolean,
-  transition?: "blur" | "fade" | "scale",
-  url?: string,
-} & GlobalProps
+  transition: "blur" | "fade" | "scale",
+  url: string,
+}
 
-const Image = (props: ImageType) => {
+const Image = (props: ImageProps) => {
   const {
     alt = '',
     aria = {},
@@ -32,7 +34,7 @@ const Image = (props: ImageType) => {
 
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_image_kit', size ? `size_${size}` : null),
+    buildCss('pb_image_kit', size),
     'lazyload',
     transition,
     { rounded },
@@ -50,7 +52,9 @@ const Image = (props: ImageType) => {
         data-src={url}
         id={id}
         onError={onError}
+        rounded={+rounded}
         src={url}
+        transition={transition}
     />
   )
 }

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -14,7 +14,7 @@ $image-sizes: (
   object-fit: cover;
 
   @each $name, $size in $image-sizes {
-    &[class*=size_#{$name}] {
+    &[class*=_#{$name}] {
       width: $size;
       height: $size;
       object-fit: cover;
@@ -35,7 +35,7 @@ $image-sizes: (
         transition: opacity 300ms ease-in;
       }
     }
-
+    
     &.blur {
       filter: blur(5px);
       &.lazyloaded {
@@ -44,7 +44,7 @@ $image-sizes: (
         transition: filter 300ms ease-in;
       }
     }
-
+    
     &.scale {
       opacity: 0;
       transform: scale(0.9);

data/app/pb_kits/playbook/pb_image/image.rb

@@ -27,7 +27,7 @@ module Playbook
       end
 
       def size_class
-        size == "none" ? nil : "_size_#{size}"
+        size == "none" ? nil : "_#{size}"
       end
 
       def transition_class

data/app/pb_kits/playbook/pb_image/image.test.js

@@ -26,7 +26,7 @@ test('default classname', () => {
 
 test('size = xs', () => {
   const kit = renderKit(Image, props, { size: 'xs' })
-  expect(kit).toHaveClass('pb_image_kit_size_xs lazyload')
+  expect(kit).toHaveClass('pb_image_kit_xs lazyload')
 })
 
 test('transition = blur', () => {

data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx

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

data/app/pb_kits/playbook/pb_layout/_layout.jsx

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

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -3,12 +3,11 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 import pbChart from '../plugins/pb_chart'
 
 type LineGraphProps = {
   axisTitle?: string,
-  dark?: Boolean,
   xAxisCategories: array,
   yAxisMin: number,
   yAxisMax: number,
@@ -32,7 +31,6 @@ type LineGraphProps = {
 export default class LineGraph extends React.Component<LineGraphProps> {
   static defaultProps = {
     className: 'pb_bar_graph',
-    dark: false,
     gradient: false,
     type: 'line',
     legend: false,
@@ -42,7 +40,6 @@ export default class LineGraph extends React.Component<LineGraphProps> {
   componentDidMount() {
     const {
       axisTitle,
-      dark,
       xAxisCategories,
       yAxisMin,
       yAxisMax,
@@ -63,7 +60,6 @@ export default class LineGraph extends React.Component<LineGraphProps> {
       axisTitle: axisTitle,
       chartData: chartData,
       colors: colors,
-      dark,
       id: id,
       pointStart: pointStart,
       subtitle: subTitle,

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx

@@ -11,7 +11,6 @@ const LineGraphDefault = (props) => (
     <LineGraph
         axisTitle="Number of Employees"
         chartData={data}
-        height="300px"
         id="line-fixed-height"
         title="Fixed Height (300px)"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -32,7 +32,6 @@ module Playbook
           id: id,
           className: classname,
           chartData: chart_data,
-          dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
           subtitle: subtitle,

data/app/pb_kits/playbook/pb_list/_list.jsx

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

data/app/pb_kits/playbook/pb_list/_list_item.jsx

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

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 
 import Avatar from '../pb_avatar/_avatar'
 

data/app/pb_kits/playbook/pb_online_status/{_online_status.tsx → _online_status.jsx}

@@ -1,16 +1,18 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 type OnlineStatusProps = {
-  aria?: {[key: string]: string},
+  aria?: object,
   className?: string,
-  data?: {[key: string]: string | number},
+  data?: object,
   id?: string,
   status?: "online" | "offline" | "away",
-} & GlobalProps
+}
 
 const OnlineStatus = (props: OnlineStatusProps) => {
   const {

data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx

@@ -1,11 +1,10 @@
 /* @flow */
-/* eslint-disable react-hooks/rules-of-hooks */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 
 import useZxcvbn from './useZxcvbn'
 import useHaveIBeenPwned from './useHaveIBeenPwned'

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -5,7 +5,7 @@ import React from 'react'
 import classnames from 'classnames'
 import Title from '../pb_title/_title.jsx'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 
 type PillProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -13,7 +13,7 @@ import {
 import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
 
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 
 type PbPopoverProps = {
   aria?: object,
@@ -150,14 +150,16 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
       const targetIsReference =
         target.closest('.pb_popover_reference_wrapper') !== null
 
+      if (targetIsReference) return
+
       switch (closeOnClick) {
       case 'outside':
-        if (!targetIsPopover || targetIsReference) {
+        if (!targetIsPopover) {
           shouldClosePopover(true)
         }
         break
       case 'inside':
-        if (targetIsPopover || targetIsReference) {
+        if (targetIsPopover) {
           shouldClosePopover(true)
         }
         break

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,14 +36,15 @@ export default class PbPopover extends PbEnhancedElement {
       }
 
       setTimeout(() => {
-        this.toggleTooltip()
         this.popper.update()
+        this.toggleTooltip()
       }, 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) {
@@ -51,17 +52,21 @@ export default class PbPopover extends PbEnhancedElement {
         this.hideTooltip()
         break
       case 'outside':
-        if (!isTooltipElement) {
+        if (isTooltipElement) {
+          this.checkCloseTooltip()
+        } else {
           this.hideTooltip()
         }
         break
       case 'inside':
-        if (isTooltipElement) {
+        if (isTooltipElement || isTriggerElement) {
           this.hideTooltip()
+        } else {
+          this.checkCloseTooltip()
         }
         break
       }
-    }, true)
+    }, { once: 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 hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+  <div class="pb_popover_tooltip" 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 type RadioProps = {
   aria?: object,

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

@@ -1,5 +1,4 @@
 /* @flow */
-/* eslint-disable react-hooks/rules-of-hooks */
 
 import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
@@ -130,10 +129,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     trixRef.current.addEventListener('click', handleClick)
   }, [])
 
-  useEffect(() => {
-    trixRef.current.editor.loadHTML(value)
-  }, [value])
-
   const RichTextEditorClass = 'pb_rich_text_editor_kit'
   const SimpleClass = simple ? 'simple' : ''
   const FocusClass = focus ? 'focus-editor-targets' : ''

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'
+import { globalProps } from '../utilities/globalProps.js'
 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 import Flex from '../pb_flex/_flex'
@@ -75,8 +75,6 @@ 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"
@@ -91,7 +89,6 @@ 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,17 +75,3 @@ 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,5 +1,4 @@
 /* @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'
+import { globalProps } from '../utilities/globalProps.js'
 
 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'
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../utilities/globalProps.js'
 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../utilities/globalProps.js'
 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'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import Caption from '../pb_caption/_caption'