playbook_ui 7.8.3 → 7.11.0

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.jsx

@@ -27,6 +27,8 @@ type Props = {
   async?: boolean,
   label?: string,
   loadOptions?: noop | string,
+  getOptionLabel?: () => any,
+  getOptionValue?: () => any,
   name?: string,
 }
 
@@ -38,7 +40,6 @@ type Props = {
 const Typeahead = (props: Props) => {
   const selectProps = {
     cacheOptions: true,
-    defaultOptions: true,
     components: {
       Control,
       ClearIndicator,
@@ -50,6 +51,7 @@ const Typeahead = (props: Props) => {
       Placeholder,
       ValueContainer,
     },
+    defaultOptions: true,
     id: 'react-select-input',
     isClearable: true,
     isSearchable: true,
@@ -58,6 +60,8 @@ const Typeahead = (props: Props) => {
   }
 
   if (typeof(props.loadOptions) === 'string') selectProps.loadOptions = get(window, props.loadOptions)
+  if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
+  if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
 
   const Tag = props.async ? AsyncSelect : Select
 

data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx

@@ -10,7 +10,6 @@ import {
 const Option = (props: any) => {
   const {
     imageUrl,
-    label,
   } = props.data
 
   return (
@@ -21,12 +20,12 @@ const Option = (props: any) => {
             <User
                 align="left"
                 avatarUrl={imageUrl}
-                name={label}
+                name={props.label}
                 orientation="horizontal"
             />
           </When>
           <When condition={!imageUrl}>
-            {label}
+            {props.label}
           </When>
         </Choose>
       </div>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb

@@ -1,4 +1,13 @@
-<%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptions', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
+<%= pb_rails("typeahead", props: {
+  async: true,
+  get_option_label: 'getOptionLabel',
+  get_option_value: 'getOptionValue',
+  load_options: 'asyncPillsPromiseOptions',
+  label: "Github Users",
+  name: :foo,
+  pills: true,
+  placeholder: "type the name of a Github user"
+}) %>
 
 <!-- This section is an example of how to provide load_options prop for using dynamic options -->
 <%= javascript_tag defer: "defer" do %>
@@ -7,8 +16,8 @@
   const filterResults = function(results) {
     return results.items.map(function(result) {
       return {
-        label: result.login,
-        value: result.id,
+        name: result.login,
+        id: result.id,
       }
     })
   }
@@ -27,4 +36,11 @@
       }
     })
   }
+
+  window.getOptionLabel = function(option) {
+    return option.name;
+  }
+  window.getOptionValue = function(option) {
+    return option.id;
+  }
 <% end %>

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

@@ -20,8 +20,8 @@ import {
 const filterResults = (results) =>
   results.items.map((result) => {
     return {
-      label: result.login,
-      value: result.id,
+      name: result.login,
+      id: result.id,
     }
   })
 
@@ -71,6 +71,8 @@ const TypeaheadWithPillsAsync = () => {
       </If>
       <Typeahead
           async
+          getOptionLabel={(option) => option.name}
+          getOptionValue={(option) => option.id}
           isMulti
           label="Github Users"
           loadOptions={promiseOptions}

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

@@ -4,8 +4,16 @@
 
 The prop `load_options`, when used in conjunction with `async: true` and `pills: true`, points to a JavaScript function located within the global window namespace. This function should return a `Promise` which resolves with the list of formatted options as described in prior examples above. This function is identical to the function provided to the React version of this kit. See the code example for more details.
 
-#### React: `loadOptions`
+#### React
+
+##### `loadOptions`
 
 **Additional required props: ** `async: true`
 
-[As outlined in the react-select Async docs](https://react-select.com/async), `loadOptions` expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.
+[As outlined in the react-select Async docs](https://react-select.com/async), `loadOptions` expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.
+
+##### `getOptionLabel` + `getOptionValue`
+
+If your server returns data that requires differing field names other than `label` and `value`
+
+See `react-select` docs for more information: https://react-select.com/advanced#replacing-builtins