playbook_ui 14.4.0.pre.alpha.PBNTR490multilevelselect3832 → 14.4.0.pre.alpha.PLAY1529removefaeasy3876

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f63133f4211356171c4c337c6b6f88ccd124ece3c656cc910f6992c02d4b8307
-  data.tar.gz: 46024fefb2d3bec396aa702f3e869c57cc68a0afcaa065519b795b0f850953fd
+  metadata.gz: c0a3c2bfca37d4cbb4e43aafccb7e441db17fdbf67839df44bdc2565a49b148b
+  data.tar.gz: 266b08d55a69c7edb4dbed36d28c9ce54d63db403f13153f54d6b79687d4832e
 SHA512:
-  metadata.gz: 67a1506b06a726ef4fad99dd67f5f8d846744d2baf483888b8603895921b3141ebecd9c6a21c4d14c855f145a6fbe9ce730cf68beb9895a86dd4770ef173d9c9
-  data.tar.gz: 3bf8db9e45660e3a7101584ee3f2f7dc9ea37d62c9cad61254300c52f80cb9172dc35d7cab3da1da50ced33488bbeed7f40ce45275f75f92c617769c7a52ac39
+  metadata.gz: 204d81fe1f4a2ba955520454023d19d60725e860a5e73deb1c4e5953f075da3f241667c27b8f7044a109d0cc1c4e8c4cee931468722e376e730aa061ae12fb2f
+  data.tar.gz: 5548d760095f0a86b47de09358bd621ed73342fe56432678b5842df5505cf6081f5f571954392c46c3bdd4b98d8aec59ca0fb04424d1e36ad4d5395931105dd8

data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx

@@ -4,6 +4,7 @@ import { Header } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 
 import Icon from "../../pb_icon/_icon"
+import { getAllIcons } from "../../utilities/icons/allicons"
 
 import { displayIcon } from "../Utilities/IconHelpers"
 
@@ -11,21 +12,39 @@ type SortIconButtonProps = {
   header: Header<GenericObject, unknown>
   sortIcon?: string | string[]
 }
+
 export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
 
+const firstIcon = displayIcon(sortIcon)[0] 
+const secondIcon = displayIcon(sortIcon)[1] 
+const upIcon = getAllIcons()["arrowUpShortWide"].icon as unknown as { [key: string]: SVGElement }
+const downIcon = getAllIcons()["arrowDownShortWide"].icon as unknown as { [key: string]: SVGElement }
+
   return (
     <>
       {header.column.getIsSorted() === "desc" ? (
         <div className="sort-button-icon" 
-            key={displayIcon(sortIcon)[0]}
+            key={firstIcon}
         >
-          <Icon icon={displayIcon(sortIcon)[0]} />
+        { firstIcon === "arrow-up-short-wide" ? (
+          <Icon 
+              className="svg-inline--fa"
+              customIcon={upIcon}
+          /> ) : (
+          <Icon icon={firstIcon} />
+        )}
         </div>
       ) : (
         <div className="sort-button-icon" 
-            key={displayIcon(sortIcon)[1]}
+            key={secondIcon}
         >
-          <Icon icon={displayIcon(sortIcon)[1]} />
+        { secondIcon === "arrow-down-short-wide" ? (
+          <Icon 
+              className="svg-inline--fa"
+              customIcon={downIcon}
+          /> ) : (
+          <Icon icon={secondIcon} />
+        )}
         </div>
       )}
     </>

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -116,11 +116,15 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
   const content = (
     <span className="pb_button_content">
       {icon && !iconRight && (
-        <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon`} />
+        <Icon className='button_with_icon'
+            icon={icon}
+        />
       )}
       <span>{text || children}</span>
       {icon && iconRight && (
-        <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon_right`} />
+        <Icon className='button_with_icon_right'
+            icon={icon}
+        />
       )}
     </span>
   )

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -7,6 +7,7 @@ import { globalProps } from '../utilities/globalProps'
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import Icon from '../pb_icon/_icon'
+import { getAllIcons } from "../utilities/icons/allicons"
 
 const contactTypeMap: { [key: string]: string } = {
   'cell': 'mobile',
@@ -18,6 +19,8 @@ const contactTypeMap: { [key: string]: string } = {
   'wrong-phone': 'phone-slash',
 }
 
+const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
+
 const formatContact = (contactString: string, contactType: string) => {
   if (contactType === 'email') return contactString
 
@@ -91,11 +94,20 @@ const Contact = (props: ContactProps): React.ReactElement => {
           dark={dark}
           tag="span"
       >
-        <Icon
-            dark={dark}
-            fixedWidth
-            icon={contactTypeMap[contactType] || 'phone'}
-        />
+          {contactType === 'email' ? (
+            <Icon 
+                className="svg-inline--fa envelope"
+                customIcon={envelopeIcon} 
+                dark={dark} 
+                fixedWidth 
+            />
+          ) : (
+            <Icon
+                dark={dark}
+                fixedWidth
+                icon={contactTypeMap[contactType] || 'phone'}
+            />
+          )}
         {` ${formatContact(contactValue, contactType)} `}
         {contactDetail && (
           <Caption

data/app/pb_kits/playbook/pb_contact/contact.html.erb

@@ -4,12 +4,20 @@
         classname: "pb_contact_kit", 
         color: "light",
         dark: object.dark
-      }) do %>
-    <%= pb_rails("icon", props: { 
-          icon: object.contact_icon, 
-          fixed_width: true,
-          dark: object.dark
-        }) %>
+  }) do %>
+    <% if contact_type == "email" %>
+      <%= pb_rails("icon", props: { 
+            custom_icon: Playbook::Engine::root.join(envelope_path),
+            fixed_width: true,
+            dark: object.dark
+      }) %>
+    <% else %>
+      <%= pb_rails("icon", props: { 
+            icon: object.contact_icon, 
+            fixed_width: true,
+            dark: object.dark
+      }) %>
+    <% end %>
     <%= object.formatted_contact_value if object.contact_value %>
 
     <%= pb_rails("caption", props: { 

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -44,6 +44,10 @@ module Playbook
         end
       end
 
+      def envelope_path
+        "app/pb_kits/playbook/utilities/icons/envelope.svg"
+      end
+
     private
 
       def formatted_value

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -79,7 +79,7 @@ test('returns correct icon', () => {
   expect(screen.getByTestId('test-home').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
   expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
   expect(screen.getByTestId('test-work-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-laptop')
-  expect(screen.getByTestId('test-email').querySelector('.pb_icon_kit')).toHaveClass('fa-envelope')
+  expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toHaveClass('envelope')
   expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-slash')
   expect(screen.getByTestId('test-wrong-type').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
   expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
+import { getAllIcons } from "../utilities/icons/allicons"
 
 import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
@@ -161,7 +162,7 @@ useEffect(() => {
     }
     return base
   }
-
+  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   return (
     <div
@@ -231,8 +232,8 @@ useEffect(() => {
                     id={`${pickerId}-angle-down`}
                 >
                   <Icon
-                      className="angle_down_icon"
-                      icon="angle-down"
+                      className="angle_down_icon svg-inline--fa"
+                      customIcon={angleDown}
                   />
                 </div>
               </div>

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -61,7 +61,7 @@
       >
         <%= pb_rails("icon", props: {
           classname: "angle_down_icon",
-          icon: "angle-down"
+          custom_icon: Playbook::Engine::root.join(angle_down_path)
         }) %>
       </div>
     <% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -118,6 +118,10 @@ module Playbook
         class_string += error_class
         class_string
       end
+
+      def angle_down_path
+        "app/pb_kits/playbook/utilities/icons/angle-down.svg"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -5,6 +5,9 @@ import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 import timeSelectPlugin from './plugins/timeSelect'
 import quickPickPlugin from './plugins/quickPick'
+import { getAllIcons } from '../utilities/icons/allicons';
+
+const angleDown = getAllIcons().angleDown.string
 
 const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -256,10 +259,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
-  // Adding dropdown icons to year and month selects
-  dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
+  // Adding dropdown icons to year and month select
+  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
   if (picker.monthElements[0].parentElement) {
-    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')}
+    return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDown}</i>`)}
   // if (picker.weekElements[0].parentElement){
   //   return  picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   // }

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -14,4 +14,4 @@
     }
     fpInline.config.onChange.push(showAngleDownHandler)
   })
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss

@@ -76,7 +76,11 @@
   pointer-events: none;
   color: $text_lt_light;
 }
-
+.year-dropdown-icon svg, .month-dropdown-icon svg {
+  width: 16px;
+  margin-top: 6px;
+  margin-left: -2px;
+}
 // Left - Right Arrow Styling
 .flatpickr-prev-month {
   display: flex;
@@ -113,4 +117,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -187,6 +187,8 @@
 
   &_close_icon {
     cursor: pointer;
+    font-size: $font_base;
+    line-height: $lh_normal;
   }
 
   &_overlay {

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -2,7 +2,7 @@
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 
-            <button class="dialog-button-class" type="button" data-close-dialog= <%= object.id %> >
+            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
                 <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
             </button>
         <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -30,7 +30,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>
@@ -64,7 +68,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb

@@ -35,7 +35,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb

@@ -30,7 +30,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb

@@ -69,7 +69,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb

@@ -24,7 +24,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb

@@ -22,7 +22,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb

@@ -23,7 +23,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb

@@ -29,7 +29,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_map/_map_controls.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Button from "../pb_button/_button";
 import Icon from "../pb_icon/_icon";
 import Flex from "../pb_flex/_flex";
+import { getAllIcons } from "../utilities/icons/allicons"
 
 type MapControlTypes = {
   zoomBtns?: boolean, 
@@ -12,6 +13,8 @@ type MapControlTypes = {
   children?: React.ReactNode | React.ReactNode[]
 }
 
+const eyeIcon = getAllIcons()["eye"]
+
 const MapControls = ({
   zoomBtns,
   zoomInClick,
@@ -42,7 +45,10 @@ const MapControls = ({
             <Button className="map-flyto-button"
                 onClick={flyToClick}
             >
-              <Icon icon="eye" />
+              <Icon 
+                  className="svg-inline--fa"
+                  customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }} 
+              />
             </Button>
           ) : null}
         </>

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx

@@ -22,6 +22,16 @@ const PaginationPageChange = (props) => {
 
     return (
       <div className="App">
+      <Pagination
+          current={activePage}
+          key={`pagination-top-${activePage}`}
+          marginBottom="xs"
+          onChange={onPageChange}
+          range={5}
+          total={totalPages}
+          {...props}
+      />
+
       <Table 
           marginBottom="xs"
           responsive="none" 
@@ -49,7 +59,8 @@ const PaginationPageChange = (props) => {
       </Table>
  
       <Pagination
-          current={1}
+          current={activePage}
+          key={`pagination-bottom-${activePage}`}
           onChange={onPageChange}
           range={5}
           total={totalPages}

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md

@@ -1 +1,3 @@
-You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
+You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
+
+To ensure synchronization between multiple pagination components on a single page, use unique, dynamic keys for each pagination instance. Each Pagination component should have its own dynamic key that reflects the current active page: this example uses `pagination-top-${activePage}` and `pagination-bottom-${activePage}`.

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -12,6 +12,7 @@ import Icon from '../pb_icon/_icon'
 import PbReactPopover from '../pb_popover/_popover'
 import TextInput from '../pb_text_input/_text_input'
 import { GenericObject } from "../types"
+import { getAllIcons } from "../utilities/icons/allicons"
 
 type PassphraseProps = {
   aria?: { [key: string]: string },
@@ -96,6 +97,9 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
     />
   )
 
+  const shieldIcon = getAllIcons()["shieldCheck"]
+  const eyeIcon = getAllIcons()["eye"]
+
   return (
     <div
         {...ariaProps}
@@ -135,7 +139,8 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
                         size="xs"
                     >
                       <Icon
-                          icon="shield-check"
+                          className="svg-inline--fa"
+                          customIcon={shieldIcon.icon as unknown as { [key: string]: SVGElement }}
                           marginRight="xs"
                       />
                       {tip}
@@ -173,7 +178,10 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
                 color="light"
                 dark={dark}
             >
-              <Icon icon="eye" />
+            <Icon  
+                className="svg-inline--fa"
+                customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }}
+            />
             </Body>
           </span>
         </div>

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

@@ -1,8 +1,10 @@
 <%= pb_rails("button", props: { variant: "secondary", id: 'list' }) do %>
     <%= pb_rails("flex", props: {align: "center"}) do %>
-        Filter By 
+        Filter By
         <%= pb_rails("flex/flex_item", props: {margin_left: "xxs"}) do %>
-        <div id="arrow-icon" style="display: flex"></div>
+            <div id="arrow-icon" style="display: flex">
+                <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true }) %>
+            </div>
         <% end %>
     <% end %>
 <% end %>
@@ -18,18 +20,17 @@
 
 
 <script type="text/javascript">
-const button = document.querySelector("#list")
-let buttonClicked = false
+    const popoverButton = document.querySelector("#list")
+    let buttonClicked = false
 
-const arrowDiv = document.querySelector("#arrow-icon")
-arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
+    const arrowDiv = document.querySelector("#arrow-icon")
 
-button.onclick = () => {
-    buttonClicked = !buttonClicked    
-    if (buttonClicked) {
-        arrowDiv.innerHTML = '<i class="far fa-angle-up"></i>'
-    } else {
-        arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
+    popoverButton.onclick = () => {
+        buttonClicked = !buttonClicked
+        if (buttonClicked) {
+            arrowDiv.innerHTML = '<i class="far fa-angle-up"></i>'
+        } else {
+            arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
+        }
     }
-}
 </script>

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

@@ -26,10 +26,10 @@ const PopoverWithButton = (props) => {
             className={showPopover ? "fa-flip-vertical" : ""}
             display="inline_flex"
         >
-          <Icon 
-              fixedWidth 
-              icon="angle-down" 
-              margin-left="xxs" 
+          <Icon
+              fixedWidth
+              icon="angle-down"
+              margin-left="xxs"
           />
         </Flex>
       </Flex>