playbook_ui 7.11.0.pre.alpha1 → 7.11.0

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx

@@ -1,17 +1,25 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   TextInput,
 } from '../..'
 
-const TextInputError = () => (
-  <div>
-    <TextInput
-        error="Please enter a valid email address"
-        label="Email Address"
-        placeholder="Enter email address"
-        type="email"
-    />
-  </div>
-)
+const TextInputError = () => {
+  const [email, setEmail] = useState('')
 
+  const handleUpdateEmail = ({ target }) => {
+    setEmail(target.value)
+  }
+  return (
+    <div>
+      <TextInput
+          error="Please enter a valid email address"
+          label="Email Address"
+          onChange={handleUpdateEmail}
+          placeholder="Enter email address"
+          type="email"
+          value={email}
+      />
+    </div>
+  )
+}
 export default TextInputError

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

@@ -0,0 +1,77 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import TextInput from './_text_input'
+
+const testId = 'text-input1',
+  kitClass = 'pb_text_input_kit'
+
+test('returns namespaced class name', () => {
+  render(
+    <TextInput
+        data={{ testid: testId }}
+        label="First Name"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(kitClass)
+})
+
+test('returns additional class name', () => {
+  render(
+    <TextInput
+        className="additional_class"
+        data={{ testid: testId }}
+        label="First Name"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} additional_class`)
+})
+
+test('returns additional class name', () => {
+  render(
+    <TextInput
+        dark
+        data={{ testid: testId }}
+        label="First Name"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark`)
+})
+
+test('returns additional class name', () => {
+  render(
+    <TextInput
+        data={{ testid: testId }}
+        error="Please enter a valid email"
+        label="First Name"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} error`)
+})
+
+test('returns additional class name', () => {
+  render(
+    <TextInput
+        dark
+        data={{ testid: testId }}
+        error="Please enter a valid email"
+        label="First Name"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark error`)
+})

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react'
+import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 import { Body, Caption } from '../'
 import type { InputCallback } from '../types.js'
@@ -9,7 +9,6 @@ import { globalProps } from '../utilities/globalProps.js'
 type TextareaProps = {
   className?: string,
   children?: array<React.ReactChild>,
-  data?: string,
   disabled?: boolean,
   error?: string,
   id?: string,
@@ -39,7 +38,7 @@ const Textarea = ({
   rows = 4,
   value,
   ...props
-}: TextareaProps) => {
+}: TextareaProps, ref: React.ElementRef<"textarea">) => {
   const errorClass = error ? 'error' : null
   const resizeClass = `resize_${resize}`
   const classes = classnames('pb_textarea_kit', errorClass, resizeClass, globalProps(props), className)
@@ -53,15 +52,16 @@ const Textarea = ({
         {children}
         <Else />
         <textarea
-            {...props}
             className="pb_textarea_kit"
             disabled={disabled}
             name={name}
             onChange={onChange}
             placeholder={placeholder}
+            ref={ref}
             required={required}
             rows={rows}
             value={value}
+            {...props}
         />
         <If condition={error}>
           <Body
@@ -74,4 +74,4 @@ const Textarea = ({
   )
 }
 
-export default Textarea
+export default forwardRef(Textarea)

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -24,9 +24,11 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
 [class^="pb_tooltip_kit"] {
   .tooltip_tooltip {
-    display: none;
+    display: block;
     opacity: 0;
-    left: 0;
+    position: absolute;
+    left: -9999px;
+    top: 0;
     animation-name: fadeIn;
     animation-duration: 150ms;
     animation-timing-function: linear;
@@ -52,7 +54,6 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     }
     &.show {
       opacity: 1;
-      display: block;
       z-index: $z_9;
       margin-bottom: $space_sm;
       background-color: $white;
@@ -88,12 +89,14 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
 // Right
 [class^="pb_tooltip_kit"] .tooltip_tooltip {
+  $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
 
-  &[x-placement="right"] {
+  &[data-popper-placement="right"] {
     box-shadow: -8px 0 28px 0 $tooltip_shadow;
     margin: 0 0 0 $space_sm;
     .arrow {
       left: -#{$space_xs};
+      top: $arrow_vertical_offset;
       margin-bottom: 0;
       transform: rotate(90deg);
     }
@@ -102,7 +105,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     }
   }
 
-  &[x-placement="bottom"] {
+  &[data-popper-placement="bottom"] {
     box-shadow: 0 -12px 28px 0 $tooltip_shadow;
     margin: $space_sm 0 0 0;
     .arrow {
@@ -115,13 +118,14 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     }
   }
 
-  &[x-placement="left"] {
+  &[data-popper-placement="left"] {
     box-shadow: 8px 0 28px 0 $tooltip_shadow;
     margin: 0 $space_sm 0 0;
     .arrow {
       margin-bottom: 0;
       right: -18px;
       left: auto;
+      top: $arrow_vertical_offset;
       transform: rotate(270deg);
     }
     &.flipped .arrow {

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -3,7 +3,7 @@
     <span id='regular-tooltip-1'>Hover here (Top)</span>
 
     <%= pb_rails("tooltip", props: {
-      trigger_element_id: "regular-tooltip-1",
+      trigger_element_selector: "#regular-tooltip-1",
       tooltip_id: "tooltip-1",
       position: 'top'
     }) do %>
@@ -14,7 +14,7 @@
   <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
     <span id='regular-tooltip-2'>Hover here (Bottom)</span>
     <%= pb_rails("tooltip", props: {
-      trigger_element_id: "regular-tooltip-2",
+      trigger_element_selector: "#regular-tooltip-2",
       tooltip_id: "tooltip-2",
       position: 'bottom'
     }) do %>
@@ -25,7 +25,7 @@
   <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
     <span id='regular-tooltip-3'>Hover here (Right)</span>
     <%= pb_rails("tooltip", props: {
-      trigger_element_id: "regular-tooltip-3",
+      trigger_element_selector: "#regular-tooltip-3",
       tooltip_id: "tooltip-3",
       position: 'right'
     }) do %>
@@ -36,7 +36,7 @@
   <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
     <span id='regular-tooltip-4'>Hover here (Left)</span>
     <%= pb_rails("tooltip", props: {
-      trigger_element_id: "regular-tooltip-4",
+      trigger_element_selector: "#regular-tooltip-4",
       tooltip_id: "tooltip-4",
       position: 'left'
     }) do %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb

@@ -0,0 +1,17 @@
+<%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-example-trigger", text: "Example 1"}) %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-example-trigger", text: "Example 1"}) %>
+  <% end %>
+
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-example-trigger",
+      tooltip_id: "example-tooltip",
+      position: 'top'
+    }) do %>
+        Whoa. I'm a re-useable tooltip.
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md

@@ -0,0 +1,3 @@
+## Re-using Tooltip Instances
+
+You can re-use Tooltip by sending `trigger_element_selector` as a HTML `class=` attribute.

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

@@ -2,5 +2,6 @@ examples:
 
   rails:
   - tooltip_default: Default
+  - tooltip_selectors: Using Common Selectors
   - tooltip_white: White
   - tooltip_with_icon_circle: Icon Circle Tooptip

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

@@ -1,7 +1,13 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import Popper from 'popper.js'
 
-const TOOLTIP_OFFSET = '0,0'
+import {
+  createPopperLite as createPopper,
+  flip,
+  offset,
+  preventOverflow,
+} from '@popperjs/core'
+
+const TOOLTIP_OFFSET = [0, 20]
 const TOOLTIP_TIMEOUT = 250
 
 export default class PbTooltip extends PbEnhancedElement {
@@ -10,56 +16,96 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   connect() {
-    this.popper = new Popper(this.triggerElement, this.tooltip, {
-      placement: this.position,
-      modifiers: {
-        offset: {
-          offset: TOOLTIP_OFFSET,
-        },
-        arrow: {
-          element: `#${this.tooltipId}-arrow`,
-        },
-      },
-      onUpdate: (p) => {
-        p.instance.popper.classList.toggle('flipped', p.flipped)
-      },
-    })
+    this.triggerElements.forEach((trigger) => {
+      trigger.addEventListener('mouseenter', () => {
+        this.mouseenterTimeout = setTimeout(() => {
+          this.showTooltip(trigger)
+          this.checkCloseTooltip(trigger)
+        }, TOOLTIP_TIMEOUT)
 
-    this.tooltip.addEventListener('mouseleave', () => {
-      this.hideTooltip()
-    })
-
-    this.triggerElement.addEventListener('mouseenter', () => {
-      this.mouseenterTimeout = setTimeout(() => {
-        this.popper.scheduleUpdate()
-        this.showTooltip()
-      }, TOOLTIP_TIMEOUT)
+        trigger.addEventListener('mouseleave', () => {
+          clearTimeout(this.mouseenterTimeout)
 
-      this.triggerElement.addEventListener('mouseleave', (event) => {
-        clearTimeout(this.mouseenterTimeout)
-        if (event.target.closest(`#${this.tooltipId}`) !== this.tooltip) {
           setTimeout(() => {
             this.hideTooltip()
           }, 0)
-        }
-      }, { once: true })
+        }, { once: true })
+      })
+    })
+
+    this.tooltip.addEventListener('mouseenter', () => {
+      clearTimeout(this.mouseenterTimeout)
     })
+    this.tooltip.addEventListener('mouseleave', () => {
+      this.hideTooltip()
+    })
+  }
+
+  checkCloseTooltip(trigger) {
+    document.querySelector('body').addEventListener('click', ({ target }) => {
+      const isTooltip = target.closest(`#${this.tooltipId}`) === this.tooltip
+      const isTrigger = target.closest(this.triggerElementSelector) === trigger
+      if (isTrigger || isTooltip) {
+        this.checkCloseTooltip(trigger)
+      } else {
+        this.hideTooltip()
+      }
+    }, { once: true })
   }
 
-  showTooltip() {
+  showTooltip(trigger) {
+    this.popper = createPopper(trigger, this.tooltip, {
+      placement: this.position,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: TOOLTIP_OFFSET,
+          },
+        },
+        {
+          name: 'arrow',
+          options: {
+            element: document.querySelector(`#${this.tooltipId}-arrow`),
+          },
+        },
+        offset,
+        preventOverflow,
+        flip,
+      ],
+    })
     this.tooltip.classList.add('show')
   }
 
   hideTooltip() {
-    this.tooltip.classList.remove('show')
+    this.tooltip.classList.add('fade_out')
+    setTimeout(() => {
+      if (!this.popper) return
+      this.popper.destroy()
+      this.tooltip.classList.remove('show')
+      this.tooltip.classList.remove('fade_out')
+    }, TOOLTIP_TIMEOUT)
   }
 
-  toggleTooltip() {
-    this.tooltip.classList.toggle('show')
-  }
+  get triggerElements() {
+    let triggerEl
+
+    if (this.triggerElementId) {
+      triggerEl = document.querySelector(`#${this.triggerElementId}`) //deprecated
+    } else {
+      const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
+      triggerEl = selectorIsId ? document.querySelector(`${this.triggerElementSelector}`) :
+        document.querySelectorAll(`${this.triggerElementSelector}`)
+    }
 
-  get triggerElement() {
-    return this._triggerElement = (this._triggerElement || document.querySelector(`#${this.triggerElementId}`))
+    if (!triggerEl) {
+      /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+      console.error('Tooltip Kit: an invalid or unavailable DOM reference was provided!')
+      return []
+    }
+
+    if (!triggerEl.length) triggerEl = [triggerEl]
+    return this._triggerElements = (this._triggerElements || triggerEl)
   }
 
   get tooltip() {
@@ -77,4 +123,8 @@ export default class PbTooltip extends PbEnhancedElement {
   get tooltipId() {
     return this.element.dataset.pbTooltipTooltipId
   }
+
+  get triggerElementSelector() {
+    return this.element.dataset.pbTooltipTriggerElementSelector
+  }
 }

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -7,7 +7,8 @@ module Playbook
       partial "pb_tooltip/tooltip"
 
       prop :position
-      prop :trigger_element_id
+      prop :trigger_element_selector
+      prop :trigger_element_id, deprecated: true
       prop :tooltip_id
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
@@ -20,6 +21,7 @@ module Playbook
         Hash(values[:data]).merge(
           pb_tooltip_kit: true,
           pb_tooltip_position: position,
+          pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
         )