playbook_ui 7.10.0 → 7.12.1

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx

@@ -1,23 +1,26 @@
 import React from 'react'
 import { TitleDetail } from '../../'
 
-const TitleDetailDefault = () => (
+const TitleDetailDefault = (props) => (
   <div>
     <TitleDetail
         detail="Commits data and history"
         title="Email Notifications"
+        {...props}
     />
 
     <TitleDetail
         align="center"
         detail="Commits data and history"
         title="Email Notifications"
+        {...props}
     />
 
     <TitleDetail
         align="right"
         detail="Commits data and history"
         title="Email Notifications"
+        {...props}
     />
 
   </div>

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;
@@ -49,11 +51,9 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       border-style: solid;
       border-width: 10px;
       margin-bottom: 50px;
-      margin-left: -10px;
     }
     &.show {
       opacity: 1;
-      display: block;
       z-index: $z_9;
       margin-bottom: $space_sm;
       background-color: $white;
@@ -89,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);
     }
@@ -103,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 {
@@ -116,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/_tooltip_white.html.erb

@@ -6,4 +6,4 @@
   position: 'top'
 }) do %>
     Whoa. I'm a white tooltip.
-<% end %>
+<% end %>

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

@@ -0,0 +1,10 @@
+<%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_id: "result-1-sample-email-link",
+  tooltip_id: "sample-email-tooltip-result-1",
+  position: "top",
+  dark: true
+}) do %>
+  Send Email
+<% end %>

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

@@ -2,4 +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,
         )

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

@@ -100,7 +100,16 @@
       }
       &_value_container {
         flex-grow: 1;
+        position: relative;
       }
     }
+    .placeholder {
+      position: absolute;
+      margin-right: 2px;
+      margin-left: 2px;
+      top: 50%;
+      transform: translateY(-50%);
+      box-sizing: border-box;
+    }
   }
 }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx

@@ -10,11 +10,12 @@ const options = [
   { label: 'Blue', value: '#0000FF' },
 ]
 
-const TypeaheadDefault = () => {
+const TypeaheadDefault = (props) => {
   return (
     <Typeahead
         label="Colors"
         options={options}
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -10,7 +10,7 @@ const options = [
   { label: 'Roofs', value: '#0000FF' },
 ]
 
-const TypeaheadWithPills = () => {
+const TypeaheadWithPills = (props) => {
   return (
     <>
       <Typeahead
@@ -18,6 +18,7 @@ const TypeaheadWithPills = () => {
           label="Colors"
           options={options}
           placeholder=""
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -45,7 +45,7 @@ const promiseOptions = (inputValue) =>
     }
   })
 
-const TypeaheadWithPillsAsync = () => {
+const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
   const handleOnChange = (value) => setUsers(value)
 
@@ -55,6 +55,7 @@ const TypeaheadWithPillsAsync = () => {
         <Caption
             marginBottom="xs"
             text="State (Users)"
+            {...props}
         />
         <For
             each="user"
@@ -66,6 +67,7 @@ const TypeaheadWithPillsAsync = () => {
               marginBottom="md"
               name={user.label}
               orientation="horizontal"
+              {...props}
           />
         </For>
       </If>
@@ -78,6 +80,7 @@ const TypeaheadWithPillsAsync = () => {
           loadOptions={promiseOptions}
           onChange={handleOnChange}
           placeholder="type the name of a Github user"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx

@@ -46,7 +46,7 @@ const promiseOptions = (inputValue) =>
     }
   })
 
-const TypeaheadWithPillsAsyncUsers = () => {
+const TypeaheadWithPillsAsyncUsers = (props) => {
   const [users, setUsers] = useState([])
   const handleOnChange = (value) => setUsers(value)
 
@@ -67,6 +67,7 @@ const TypeaheadWithPillsAsyncUsers = () => {
         <Caption
             marginBottom="xs"
             text="State (Users)"
+            {...props}
         />
         <For
             each="user"
@@ -79,6 +80,7 @@ const TypeaheadWithPillsAsyncUsers = () => {
               marginBottom="md"
               name={user.label}
               orientation="horizontal"
+              {...props}
           />
         </For>
       </If>
@@ -90,6 +92,7 @@ const TypeaheadWithPillsAsyncUsers = () => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
+          {...props}
       />
     </>
   )