playbook_ui 4.6.1 → 4.7.0

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

@@ -0,0 +1,14 @@
+<%= pb_rails("button", props: { text: "Click me then 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: 'right',
+  offset: false
+}) do %>
+    Whoa. I'm a popover that can be closed by clicking outside of me.
+<% end %>
+
+
+
+

data/app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  PbReactPopover,
+} from '../..'
+
+const PopoverClickOutside = () => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
+  const popoverTrigger = (
+    <Button
+        onClick={handleTogglePopover}
+        text="Button Secondary"
+        variant="secondary"
+    />
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="outside"
+        offset
+        placement="bottom"
+        reference={popoverTrigger}
+        shouldClosePopover={handleShouldClosePopover}
+        show={showPopover}
+    >
+      {'Whoa. I\'m a popover.'}
+    </PbReactPopover>
+  )
+}
+
+export default PopoverClickOutside

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx

@@ -1,29 +1,26 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   PbReactPopover,
 } from '../..'
 
-export default class PopoverDefault extends React.Component {
-  state = {
-    showPopover: false,
-  }
+const PopoverDefault = () => {
+  const [showPopover, setShowPopover] = useState(false)
 
-  handleTogglePopover = () => {
-    this.setState({ showPopover: !this.state.showPopover })
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
   }
+  const popoverReference = (
+    <span onClick={handleTogglePopover}>{'Click me.'}</span>
+  )
 
-  render() {
-    const popoverReference = (
-      <span onClick={this.handleTogglePopover}>{'Click me.'}</span>
-    )
-
-    return (
-      <PbReactPopover
-          reference={popoverReference}
-          show={this.state.showPopover}
-      >
-        {'Whoa. I\'m a popover.'}
-      </PbReactPopover>
-    )
-  }
+  return (
+    <PbReactPopover
+        reference={popoverReference}
+        show={showPopover}
+    >
+      {'Whoa. I\'m a popover.'}
+    </PbReactPopover>
+  )
 }
+
+export default PopoverDefault

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   Button,
   List,
@@ -6,41 +6,39 @@ import {
   PbReactPopover,
 } from '../..'
 
-export default class PopoverWithButton extends React.Component {
-  state = {
-    showPopover: false,
-  }
+const PopoverWithButton = () => {
+  const [showPopover, setShowPopover] = useState(false)
 
-  handleTogglePopover = () => {
-    this.setState({ showPopover: !this.state.showPopover })
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
   }
 
-  render() {
-    const popoverReference = (
-      <Button
-          onClick={this.handleTogglePopover}
-          text="Button Secondary"
-          variant="secondary"
-      />
-    )
+  const popoverReference = (
+    <Button
+        onClick={handleTogglePopover}
+        text="Button Secondary"
+        variant="secondary"
+    />
+  )
 
-    return (
-      <div style={{ height: '400px', textAlign: 'center' }}>
-        <PbReactPopover
-            offset
-            placement="bottom"
-            reference={popoverReference}
-            show={this.state.showPopover}
-        >
-          <List>
-            <ListItem>{'Popularity'}</ListItem>
-            <ListItem>{'Title'}</ListItem>
-            <ListItem>{'Duration'}</ListItem>
-            <ListItem>{'Date Started'}</ListItem>
-            <ListItem>{'Date Ended'}</ListItem>
-          </List>
-        </PbReactPopover>
-      </div>
-    )
-  }
+  return (
+    <div style={{ height: '400px', textAlign: 'center' }}>
+      <PbReactPopover
+          offset
+          placement="bottom"
+          reference={popoverReference}
+          show={showPopover}
+      >
+        <List>
+          <ListItem>{'Popularity'}</ListItem>
+          <ListItem>{'Title'}</ListItem>
+          <ListItem>{'Duration'}</ListItem>
+          <ListItem>{'Date Started'}</ListItem>
+          <ListItem>{'Date Ended'}</ListItem>
+        </List>
+      </PbReactPopover>
+    </div>
+  )
 }
+
+export default PopoverWithButton

data/app/pb_kits/playbook/pb_popover/docs/_popover_portal.jsx

@@ -1,36 +1,34 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   Button,
   PbReactPopover,
 } from '../..'
 
-export default class PopoverPortal extends React.Component {
-  state = {
-    showPopover: false,
-  }
+const PopoverPortal = () => {
+  const [showPopover, setShowPopover] = useState(false)
 
-  handleTogglePopover = () => {
-    this.setState({ showPopover: !this.state.showPopover })
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
   }
 
-  render() {
-    const popoverReference = (
-      <Button
-          onClick={this.handleTogglePopover}
-          text="Button Secondary"
-          variant="secondary"
-      />
-    )
+  const popoverReference = (
+    <Button
+        onClick={handleTogglePopover}
+        text="Button Secondary"
+        variant="secondary"
+    />
+  )
 
-    return (
-      <PbReactPopover
-          placement="bottom"
-          reference={popoverReference}
-          show={this.state.showPopover}
-          usePortal
-      >
-        {'Whoa. I\'m a portal popover.'}
-      </PbReactPopover>
-    )
-  }
+  return (
+    <PbReactPopover
+        placement="bottom"
+        reference={popoverReference}
+        show={showPopover}
+        usePortal
+    >
+      {'Whoa. I\'m a portal popover.'}
+    </PbReactPopover>
+  )
 }
+
+export default PopoverPortal

data/app/pb_kits/playbook/pb_popover/docs/_popover_with_button.jsx

@@ -1,36 +1,34 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   Button,
   PbReactPopover,
 } from '../..'
 
-export default class PopoverWithButton extends React.Component {
-  state = {
-    showPopover: false,
-  }
+const PopoverWithButton = () => {
+  const [showPopover, setShowPopover] = useState(false)
 
-  handleTogglePopover = () => {
-    this.setState({ showPopover: !this.state.showPopover })
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
   }
 
-  render() {
-    const popoverReference = (
-      <Button
-          onClick={this.handleTogglePopover}
-          text="Button Secondary"
-          variant="secondary"
-      />
-    )
+  const popoverReference = (
+    <Button
+        onClick={handleTogglePopover}
+        text="Button Secondary"
+        variant="secondary"
+    />
+  )
 
-    return (
-      <PbReactPopover
-          offset
-          placement="bottom"
-          reference={popoverReference}
-          show={this.state.showPopover}
-      >
-        {'Whoa. I\'m a popover.'}
-      </PbReactPopover>
-    )
-  }
+  return (
+    <PbReactPopover
+        offset
+        placement="bottom"
+        reference={popoverReference}
+        show={showPopover}
+    >
+      {'Whoa. I\'m a popover.'}
+    </PbReactPopover>
+  )
 }
+
+export default PopoverWithButton

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

@@ -3,9 +3,15 @@ examples:
     - popover_default: Default
     - popover_with_button: With Button
     - popover_list: With any children
+    - popover_click_outside: Close on click outside
+    - popover_click_inside: Close on click inside
+    - popover_click_any: Close on click anywhere
 
   react:
     - popover_default: Default
     - popover_with_button: With Button
     - popover_list: With any children
-    - popover_portal: Use with `portal` option
+    - popover_portal: Use with `portal` option
+    - popover_click_outside: Close on click outside
+    - popover_click_inside: Close on click inside
+    - popover_click_any: Close on click anywhere

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

@@ -2,3 +2,6 @@ export { default as PopoverDefault } from './_popover_default.jsx'
 export { default as PopoverWithButton } from './_popover_with_button.jsx'
 export { default as PopoverList } from './_popover_list.jsx'
 export { default as PopoverPortal } from './_popover_portal.jsx'
+export { default as PopoverClickOutside } from './_popover_click_outside.jsx'
+export { default as PopoverClickInside } from './_popover_click_inside.jsx'
+export { default as PopoverClickAny } from './_popover_click_any.jsx'

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

@@ -18,12 +18,56 @@ export default class PbPopover extends PbEnhancedElement {
       },
     })
 
-    this.triggerElement.addEventListener('click', () => {
-      this.tooltip.classList.toggle('show')
-      this.popper.scheduleUpdate()
+    this.triggerElement.addEventListener('click', (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+
+      if (!this.tooltip.classList.contains('show')) {
+        this.checkCloseTooltip()
+      }
+
+      setTimeout(() => {
+        this.popper.scheduleUpdate()
+        this.tooltip.classList.toggle('show')
+      }, 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) {
+      case 'any':
+        this.hideTooltip()
+        break
+      case 'outside':
+        if (isTooltipElement) {
+          this.checkCloseTooltip()
+        } else {
+          this.hideTooltip()
+        }
+        break
+      case 'inside':
+        if (isTooltipElement || isTriggerElement) {
+          this.hideTooltip()
+        } else {
+          this.checkCloseTooltip()
+        }
+        break
+      }
+    }, { once: true })
+  }
+
+  hideTooltip() {
+    this.tooltip.classList.remove('show')
+  }
+
+  toggleTooltip() {
+    this.tooltip.classList.toggle('show')
+  }
+
   get triggerElement() {
     return this._triggerElement = (this._triggerElement || document.querySelector(`#${this.triggerElementId}`))
   }
@@ -47,4 +91,8 @@ export default class PbPopover extends PbEnhancedElement {
   get offset() {
     return this.element.dataset.pbPopoverOffset === 'true' ? POPOVER_OFFSET_Y : '0,0'
   }
+
+  get closeOnClick() {
+    return this.element.dataset.pbPopoverCloseOnClick
+  }
 }

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -10,6 +10,9 @@ module Playbook
       prop :trigger_element_id
       prop :tooltip_id
       prop :offset, type: Playbook::Props::Boolean, default: false
+      prop :close_on_click, type: Playbook::Props::Enum,
+                            values: %w[none outside inside any],
+                            default: "none"
 
       def classname
         generate_classname("pb_popover_kit")
@@ -22,6 +25,7 @@ module Playbook
           pb_popover_trigger_element_id: trigger_element_id,
           pb_popover_tooltip_id: tooltip_id,
           pb_popover_offset: offset,
+          pb_popover_close_on_click: close_on_click
         )
       end
     end

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -167,7 +167,7 @@ $status_color_text: (
   error:              $error,
   info:               $info,
   neutral:            darken($neutral, 15%),
-  primary:            lighten($primary, 10%)
+  primary:            $primary
 );
 
 // Link colors ------------------------

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "4.6.1"
+  VERSION = "4.7.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 4.6.1
+  version: 4.7.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-03-09 00:00:00.000000000 Z
+date: 2020-03-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -439,6 +439,7 @@ files:
 - app/pb_kits/playbook/packs/kits/pb_distribution_bar.js
 - app/pb_kits/playbook/packs/kits/pb_fixed_confirmation_toast.js
 - app/pb_kits/playbook/packs/kits/pb_flex.js
+- app/pb_kits/playbook/packs/kits/pb_form_pill.js
 - app/pb_kits/playbook/packs/kits/pb_hashtag.js
 - app/pb_kits/playbook/packs/kits/pb_highlight.js
 - app/pb_kits/playbook/packs/kits/pb_home_address_street.js
@@ -826,6 +827,16 @@ files:
 - app/pb_kits/playbook/pb_form/form_builder/simple_form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/typeahead_field.rb
 - app/pb_kits/playbook/pb_form/pb_form_validation.js
+- app/pb_kits/playbook/pb_form_pill/_form_pill.html.erb
+- app/pb_kits/playbook/pb_form_pill/_form_pill.jsx
+- app/pb_kits/playbook/pb_form_pill/_form_pill.scss
+- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb
+- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx
+- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb
+- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx
+- app/pb_kits/playbook/pb_form_pill/docs/example.yml
+- app/pb_kits/playbook/pb_form_pill/docs/index.js
+- app/pb_kits/playbook/pb_form_pill/form_pill.rb
 - app/pb_kits/playbook/pb_hashtag/_hashtag.html.erb
 - app/pb_kits/playbook/pb_hashtag/_hashtag.jsx
 - app/pb_kits/playbook/pb_hashtag/_hashtag.scss
@@ -848,9 +859,11 @@ files:
 - app/pb_kits/playbook/pb_highlight/docs/example.yml
 - app/pb_kits/playbook/pb_highlight/docs/index.js
 - app/pb_kits/playbook/pb_highlight/highlight.rb
+- app/pb_kits/playbook/pb_home_address_street/_city_emphasis.html.erb
 - app/pb_kits/playbook/pb_home_address_street/_home_address_street.html.erb
 - app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx
 - app/pb_kits/playbook/pb_home_address_street/_home_address_street.scss
+- app/pb_kits/playbook/pb_home_address_street/_street_emphasis.html.erb
 - app/pb_kits/playbook/pb_home_address_street/docs/_description.md
 - app/pb_kits/playbook/pb_home_address_street/docs/_footer.md
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.html.erb
@@ -858,6 +871,9 @@ files:
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.md
+- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb
+- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx
+- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.html.erb
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.jsx
 - app/pb_kits/playbook/pb_home_address_street/docs/example.yml
@@ -1138,6 +1154,12 @@ files:
 - app/pb_kits/playbook/pb_popover/_popover.jsx
 - app/pb_kits/playbook/pb_popover/_popover.scss
 - app/pb_kits/playbook/pb_popover/docs/_description.md
+- app/pb_kits/playbook/pb_popover/docs/_popover_click_any.html.erb
+- app/pb_kits/playbook/pb_popover/docs/_popover_click_any.jsx
+- app/pb_kits/playbook/pb_popover/docs/_popover_click_inside.html.erb
+- app/pb_kits/playbook/pb_popover/docs/_popover_click_inside.jsx
+- app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.html.erb
+- app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb