playbook_ui 4.18.1 → 5.0.3

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

@@ -1,15 +1,52 @@
 @import "../tokens/positioning";
+@import "../pb_card/card_mixin";
+@import "../tokens/shadows";
 
-[class^="pb_popover_kit"] {
-  .popover_tooltip {
-    display: none;
-    &.show {
-      display: block;
-      z-index: $z_9;
-    }
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
   }
 }
 
+.pb_popover_tooltip {
+  opacity: 0;
+  animation-name: fadeOut;
+  animation-duration: 150ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  visibility: hidden;
+  pointer-events: none;
+  &.show {
+    animation-name: fadeIn;
+    animation-duration: 150ms;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+    visibility: visible;
+    pointer-events: initial;
+    z-index: $z_9;
+  }
+}
+.pb_popover_body {
+  @include pb_card;
+  border: 0;
+  box-shadow: $shadow_deeper;
+  overflow: auto;
+}
+
+
 .pb_popover_reference_wrapper {
   display: inline-block;
 }

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

@@ -0,0 +1,42 @@
+<%= 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("popover", props: {
+      close_on_click: "inside",
+      trigger_element_id: "inside-popover-1",
+      tooltip_id: "inside-tooltip-1",
+      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("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "outside-popover-1",
+      tooltip_id: "outside-tooltip-1",
+      position: 'left',
+      offset: true
+    }) do %>
+        Click anywhere but me!
+      <% end %>
+  </span>
+  <span>
+    <%= pb_rails("button", props: {
+      text: "Click Anywhere",
+      variant: "secondary",
+      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',
+      offset: true
+    }) do %>
+      Click anything!
+    <% end %>
+  </span>
+<% end %>

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

@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Flex,
+  PbReactPopover,
+} from '../..'
+
+const PopoverClose = () => {
+  const [showInsidePopover, setInsideShowPopover] = useState(false)
+  const [showOutsidePopover, setOutsideShowPopover] = useState(false)
+  const [showAnyPopover, setAnyShowPopover] = useState(false)
+
+  const handleInsideShouldClosePopover = (shouldClosePopover) => {
+    setInsideShowPopover(!shouldClosePopover)
+  }
+
+  const handleInsideTogglePopover = () => {
+    setInsideShowPopover(!showInsidePopover)
+  }
+
+  const handleOutsideShouldClosePopover = (shouldClosePopover) => {
+    setOutsideShowPopover(!shouldClosePopover)
+  }
+
+  const handleOutsideTogglePopover = () => {
+    setOutsideShowPopover(!showOutsidePopover)
+  }
+
+  const handleAnyShouldClosePopover = (shouldClosePopover) => {
+    setAnyShowPopover(!shouldClosePopover)
+  }
+
+  const handleAnyTogglePopover = () => {
+    setAnyShowPopover(!showOutsidePopover)
+  }
+
+  const insidePopoverTrigger = (
+    <Button
+        onClick={handleInsideTogglePopover}
+        text="Click Inside"
+        variant="secondary"
+    />
+  )
+
+  const outsidePopoverTrigger = (
+    <Button
+        onClick={handleOutsideTogglePopover}
+        text="Click Outside"
+        variant="secondary"
+    />
+  )
+
+  const anyPopoverTrigger = (
+    <Button
+        onClick={handleAnyTogglePopover}
+        text="Click Anywhere"
+        variant="secondary"
+    />
+  )
+
+  return (
+    <Flex spacing="between">
+      <PbReactPopover
+          closeOnClick="inside"
+          offset
+          placement="bottom"
+          reference={insidePopoverTrigger}
+          shouldClosePopover={handleInsideShouldClosePopover}
+          show={showInsidePopover}
+      >
+        {'Click on me!'}
+      </PbReactPopover>
+
+      <PbReactPopover
+          closeOnClick="outside"
+          offset
+          placement="top"
+          reference={outsidePopoverTrigger}
+          shouldClosePopover={handleOutsideShouldClosePopover}
+          show={showOutsidePopover}
+      >
+        {'Click anywhere but me!'}
+      </PbReactPopover>
+
+      <PbReactPopover
+          closeOnClick="any"
+          offset
+          placement="right"
+          reference={anyPopoverTrigger}
+          shouldClosePopover={handleAnyShouldClosePopover}
+          show={showAnyPopover}
+      >
+        {'Click anything!'}
+      </PbReactPopover>
+    </Flex>
+  )
+}
+
+export default PopoverClose

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

@@ -1,8 +1,20 @@
-<span id='regular-popover-1'>Click Me.</span>
-<%= pb_rails("popover", props: {trigger_element_id: "regular-popover-1", tooltip_id: "tooltip-1", position: 'right', offset: false }) do %>
-    Whoa. I'm a popover.
+<%= pb_rails("flex", props: {
+    orientation: "row",
+    vertical: "center"
+    }) do %>
+    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
+    &nbsp;
+    <%= pb_rails("circle_icon_button", props: {
+        variant: "secondary",
+        icon: "info",
+        id: "regular-popover-1"
+    }) %>
+    <%= pb_rails("popover", props: {
+        trigger_element_id: "regular-popover-1",
+        tooltip_id: "tooltip-1",
+        offset: true,
+        position: "top"
+    }) do %>
+        I'm a popover. I can show content of any size.
+    <% end %>
 <% end %>
-
-
-
-

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

@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
 import {
+  Body,
+  CircleIconButton,
+  Flex,
   PbReactPopover,
 } from '../..'
 
@@ -10,16 +13,29 @@ const PopoverDefault = () => {
     setShowPopover(!showPopover)
   }
   const popoverReference = (
-    <span onClick={handleTogglePopover}>{'Click me.'}</span>
+    <CircleIconButton
+        icon="info"
+        onClick={handleTogglePopover}
+        variant="secondary"
+    />
   )
 
   return (
-    <PbReactPopover
-        reference={popoverReference}
-        show={showPopover}
+    <Flex
+        orientation="row"
+        vertical="center"
     >
-      {'Whoa. I\'m a popover.'}
-    </PbReactPopover>
+      <Body text="Click info for more details" />
+      &nbsp;
+      <PbReactPopover
+          offset
+          placement="top"
+          reference={popoverReference}
+          show={showPopover}
+      >
+        {'I\'m a popover. I can show content of any size.'}
+      </PbReactPopover>
+    </Flex>
   )
 }
 

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

@@ -1,12 +1,13 @@
-<div style="height: 400px; text-align: center;">
-<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", id: 'list' }) %>
-<%= pb_rails("popover", props: {trigger_element_id: "list", tooltip_id: "list-tooltip", position: 'bottom', offset: true }) do %>
-    <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
-    <%= pb_rails("list/item") do %><a>Popularity</a><% end %>
-    <%= pb_rails("list/item") do %><a>Title</a><% end %>
-    <%= pb_rails("list/item") do %><a>Duration</a><% end %>
-    <%= pb_rails("list/item") do %><a>Date Started</a><% end %>
-    <%= pb_rails("list/item") do %><a>Date Ended </a><% end %>
+<%= pb_rails("button", props: { variant: "secondary", id: 'list' }) do %>
+    Filter By
+    <%= pb_rails("icon", props: { icon: "angle-down"}) %>
+<% end %>
+<%= pb_rails("popover", props: {trigger_element_id: "list", tooltip_id: "list-tooltip", position: 'bottom', padding: "none"}) do %>
+    <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, xpadding: true}) do %>
+        <%= pb_rails("list/item") do %><a>Popularity</a><% end %>
+        <%= pb_rails("list/item") do %><a>Title</a><% end %>
+        <%= pb_rails("list/item") do %><a>Duration</a><% end %>
+        <%= pb_rails("list/item") do %><a>Date Started</a><% end %>
+        <%= pb_rails("list/item") do %><a>Date Ended </a><% end %>
     <% end %>
 <% end %>
-</div>

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import {
   Button,
+  Icon,
   List,
   ListItem,
   PbReactPopover,
@@ -16,28 +17,31 @@ const PopoverWithButton = () => {
   const popoverReference = (
     <Button
         onClick={handleTogglePopover}
-        text="Button Secondary"
         variant="secondary"
-    />
+    >
+      {'Filter By'}
+      <Icon
+          fixedWidth
+          icon="angle-down"
+      />
+    </Button>
   )
 
   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>
+    <PbReactPopover
+        padding="none"
+        placement="bottom"
+        reference={popoverReference}
+        show={showPopover}
+    >
+      <List xpadding>
+        <ListItem>{'Popularity'}</ListItem>
+        <ListItem>{'Title'}</ListItem>
+        <ListItem>{'Duration'}</ListItem>
+        <ListItem>{'Date Started'}</ListItem>
+        <ListItem>{'Date Ended'}</ListItem>
+      </List>
+    </PbReactPopover>
   )
 }
 

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

@@ -0,0 +1 @@
+Notice `offset` is not set so the popover is flush with the content.

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

@@ -0,0 +1,24 @@
+<%= pb_rails("button", props: { variant: "secondary", id: 'scroll-height', text: "Click Me" }) %>
+<%= pb_rails("popover", props: {
+    trigger_element_id: "scroll-height",
+    tooltip_id: "scroll-height-1",
+    position: 'top',
+    close_on_click: "any",
+    max_height: "150px",
+    max_width: "240px",
+    offset: true
+    }) do %>
+    <%= pb_rails("body", props: {
+        margin_bottom: "sm",
+        text: "So many people live within unhappy circumstances and yet will
+          not take the initiative to change their situation because they are
+          conditioned to a life of security, conformity, and conservation, all of
+          which may appear to give one peace of mind, but in reality, nothing is
+          more damaging to the adventurous spirit."
+    }) %>
+    <%= pb_rails("title", props: {
+        size: 4,
+        text: "- Christopher McCandless"
+    }) %>
+<% end %>
+      

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

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  PbReactPopover,
+  Title,
+} from '../..'
+
+const PopoverScrollHeight = () => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
+  const popoverTrigger = (
+    <Button
+        onClick={handleTogglePopover}
+        text="Click Me"
+        variant="secondary"
+    />
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="any"
+        maxHeight="150px"
+        maxWidth="240px"
+        offset
+        placement="top"
+        reference={popoverTrigger}
+        shouldClosePopover={handleShouldClosePopover}
+        show={showPopover}
+    >
+      <Body
+          marginBottom="sm"
+          text="So many people live within unhappy circumstances and yet will
+          not take the initiative to change their situation because they are
+          conditioned to a life of security, conformity, and conservation, all of
+          which may appear to give one peace of mind, but in reality, nothing is
+          more damaging to the adventurous spirit."
+      />
+      <Title
+          size={4}
+          text="- Christopher McCandless"
+      />
+
+    </PbReactPopover>
+  )
+}
+
+export default PopoverScrollHeight

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

@@ -0,0 +1,14 @@
+<div style="position: relative; z-index: 2">
+    <%= pb_rails("body", props: {text: "I've got a z-index of 2", margin_bottom: "md"}) %>
+</div>
+<%= pb_rails("button", props: { variant: "secondary", id: 'tooltip-z-index-1', text: "Click Me", }) %>
+<%= pb_rails("popover", props: {
+    trigger_element_id: "tooltip-z-index-1",
+    tooltip_id: "tooltip-z-index",
+    position: 'top',
+    z_index: "3",
+    offset: true
+}) do %>
+    I've got a z-index of 3
+<% end %>
+