playbook_ui 14.4.0.pre.alpha.PLAY1529removefaeasy3900 → 14.4.0.pre.alpha.PLAY1546highchartsbump3822

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: daa69bf76ff90f75d1d1d7878399ac427ad72967559164f6690c483a9d2f9063
-  data.tar.gz: 5947313b00c26ed61cf12e4c57ba2548ae879514608e1fbb36f83717b2a26608
+  metadata.gz: 6bd72cfd66776d778ac938b9a8ec226a1602efc6e7bc5866784d2482987d62c7
+  data.tar.gz: cca369aa47b32f074ee1fe1f79a2a40a39f2aad530281f075aaf9ff4e77141b4
 SHA512:
-  metadata.gz: 46b261d11549358667e5add1185823ddc13006d05aa4700f4ed819bb55a1ed9a92876e38a89e3fbd263ebf342fd5b2684eab8d06b51bc79ac4b836b10da498c8
-  data.tar.gz: 21f26ae6fc6bed185f7b48577bc0611820b93caf06b1b45b90bbce8e355a3edadfc3e1de746e808baccee7984c9e08c1e7adcfa9cd6b130299826ff0f7a6b352
+  metadata.gz: 2479effd762ab25da0d9613c637e8ee745b8fdb3c58d2e8e078ef356380eecdf15d625b4b97f03d9fd60458365328d4f1eecf81ad5f801c36281e7c0772fb4e4
+  data.tar.gz: c7d558d46052c0ebdccc46edafe1b3ace9e259dd242b2aaaaafa602639a2309302edf5f50e08e0f35551dc0c168d61720a396b6fa2ac0509cb60ab04f2dcb9d6

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

@@ -4,7 +4,6 @@ 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"
 
@@ -12,39 +11,21 @@ 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={firstIcon}
+            key={displayIcon(sortIcon)[0]}
         >
-        { firstIcon === "arrow-up-short-wide" ? (
-          <Icon 
-              className="svg-inline--fa"
-              customIcon={upIcon}
-          /> ) : (
-          <Icon icon={firstIcon} />
-        )}
+          <Icon icon={displayIcon(sortIcon)[0]} />
         </div>
       ) : (
         <div className="sort-button-icon" 
-            key={secondIcon}
+            key={displayIcon(sortIcon)[1]}
         >
-        { secondIcon === "arrow-down-short-wide" ? (
-          <Icon 
-              className="svg-inline--fa"
-              customIcon={downIcon}
-          /> ) : (
-          <Icon icon={secondIcon} />
-        )}
+          <Icon icon={displayIcon(sortIcon)[1]} />
         </div>
       )}
     </>

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

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

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

@@ -7,7 +7,6 @@ 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',
@@ -19,8 +18,6 @@ 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
 
@@ -94,20 +91,11 @@ const Contact = (props: ContactProps): React.ReactElement => {
           dark={dark}
           tag="span"
       >
-          {contactType === 'email' ? (
-            <Icon 
-                className="svg-inline--fa envelope"
-                customIcon={envelopeIcon} 
-                dark={dark} 
-                fixedWidth 
-            />
-          ) : (
-            <Icon
-                dark={dark}
-                fixedWidth
-                icon={contactTypeMap[contactType] || 'phone'}
-            />
-          )}
+        <Icon
+            dark={dark}
+            fixedWidth
+            icon={contactTypeMap[contactType] || 'phone'}
+        />
         {` ${formatContact(contactValue, contactType)} `}
         {contactDetail && (
           <Caption

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

@@ -4,20 +4,12 @@
         classname: "pb_contact_kit", 
         color: "light",
         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 %>
+      }) do %>
+    <%= pb_rails("icon", props: { 
+          icon: object.contact_icon, 
+          fixed_width: true,
+          dark: object.dark
+        }) %>
     <%= object.formatted_contact_value if object.contact_value %>
 
     <%= pb_rails("caption", props: { 

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

@@ -44,10 +44,6 @@ 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_custom_icon')).toHaveClass('envelope')
+  expect(screen.getByTestId('test-email').querySelector('.pb_icon_kit')).toHaveClass('fa-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,7 +3,6 @@ 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'
@@ -162,7 +161,7 @@ useEffect(() => {
     }
     return base
   }
-  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
+
 
   return (
     <div
@@ -232,8 +231,8 @@ useEffect(() => {
                     id={`${pickerId}-angle-down`}
                 >
                   <Icon
-                      className="angle_down_icon svg-inline--fa"
-                      customIcon={angleDown}
+                      className="angle_down_icon"
+                      icon="angle-down"
                   />
                 </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",
-          custom_icon: Playbook::Engine::root.join(angle_down_path)
+          icon: "angle-down"
         }) %>
       </div>
     <% end %>

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

@@ -118,10 +118,6 @@ 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,9 +5,6 @@ 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
@@ -259,10 +256,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
-  // Adding dropdown icons to year and month select
-  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
+  // Adding dropdown icons to year and month selects
+  dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   if (picker.monthElements[0].parentElement) {
-    return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDown}</i>`)}
+    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></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,11 +76,7 @@
   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;
@@ -117,4 +113,4 @@
       }
     }
   }
-}
+}

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

@@ -187,8 +187,6 @@
 
   &_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 pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
+            <button class="dialog-button-class" 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,11 +30,7 @@
     <%= 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: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>
@@ -68,11 +64,7 @@
     <%= 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: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>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,11 +35,7 @@
     <%= 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: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>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,11 +30,7 @@
     <%= 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: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>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,11 +69,7 @@
     <%= 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: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>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,11 +24,7 @@
     <%= 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: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>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,11 +22,7 @@
     <%= 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: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>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,11 +23,7 @@
     <%= 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: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>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,11 +29,7 @@
     <%= 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: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>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,7 +2,6 @@ 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, 
@@ -13,8 +12,6 @@ type MapControlTypes = {
   children?: React.ReactNode | React.ReactNode[]
 }
 
-const eyeIcon = getAllIcons()["eye"]
-
 const MapControls = ({
   zoomBtns,
   zoomInClick,
@@ -45,10 +42,7 @@ const MapControls = ({
             <Button className="map-flyto-button"
                 onClick={flyToClick}
             >
-              <Icon 
-                  className="svg-inline--fa"
-                  customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }} 
-              />
+              <Icon icon="eye" />
             </Button>
           ) : null}
         </>

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -88,9 +88,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     item: []
   })
 
-  const arrowDownElementId = `arrow_down_${id}`
-  const arrowUpElementId = `arrow_up_${id}`
-
   const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
     if (!Array.isArray(tree)) {
       return
@@ -176,12 +173,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   useEffect(() => {
     // Function to handle clicks outside the dropdown
     const handleClickOutside = (event: any) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target) &&
-        event.target.id !== arrowDownElementId &&
-        event.target.id !== arrowUpElementId
-      ) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsDropdownClosed(true)
       }
     }
@@ -268,6 +260,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
   const handleInputWrapperClick = (e: any) => {
+    e.stopPropagation()
     if (
       e.target.id === "multiselect_input" ||
       e.target.classList.contains("pb_form_pill_tag")
@@ -525,20 +518,16 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           </div>
 
           {isDropdownClosed ? (
-            <div id={arrowDownElementId}
-                key="chevron-down">
+            <div key="chevron-down">
               <Icon
                   icon="chevron-down"
-                  id={arrowDownElementId}
                   size="xs"
               />
             </div>
           ) : (
-            <div id={arrowUpElementId}
-                key="chevron-up">
+            <div key="chevron-up">
               <Icon
                   icon="chevron-up"
-                  id={arrowUpElementId}
                   size="xs"
               />
             </div>

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

@@ -22,16 +22,6 @@ 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" 
@@ -59,8 +49,7 @@ const PaginationPageChange = (props) => {
       </Table>
  
       <Pagination
-          current={activePage}
-          key={`pagination-bottom-${activePage}`}
+          current={1}
           onChange={onPageChange}
           range={5}
           total={totalPages}

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

@@ -1,3 +1 @@
-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}`.
+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.

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

@@ -12,7 +12,6 @@ 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 },
@@ -97,9 +96,6 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
     />
   )
 
-  const shieldIcon = getAllIcons()["shieldCheck"]
-  const eyeIcon = getAllIcons()["eye"]
-
   return (
     <div
         {...ariaProps}
@@ -139,8 +135,7 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
                         size="xs"
                     >
                       <Icon
-                          className="svg-inline--fa"
-                          customIcon={shieldIcon.icon as unknown as { [key: string]: SVGElement }}
+                          icon="shield-check"
                           marginRight="xs"
                       />
                       {tip}
@@ -178,10 +173,7 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
                 color="light"
                 dark={dark}
             >
-            <Icon  
-                className="svg-inline--fa"
-                customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }}
-            />
+              <Icon icon="eye" />
             </Body>
           </span>
         </div>

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

@@ -1,10 +1,8 @@
 <%= 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">
-                <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true }) %>
-            </div>
+        <div id="arrow-icon" style="display: flex"></div>
         <% end %>
     <% end %>
 <% end %>
@@ -20,17 +18,18 @@
 
 
 <script type="text/javascript">
-    const popoverButton = document.querySelector("#list")
-    let buttonClicked = false
+const button = document.querySelector("#list")
+let buttonClicked = false
 
-    const arrowDiv = document.querySelector("#arrow-icon")
+const arrowDiv = document.querySelector("#arrow-icon")
+arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
 
-    popoverButton.onclick = () => {
-        buttonClicked = !buttonClicked
-        if (buttonClicked) {
-            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 5.70312C14.625 5.28125 15.3281 5.28125 15.75 5.70312L24.7969 14.7031C25.2188 15.1719 25.2188 15.875 24.7969 16.2969C24.3281 16.7656 23.625 16.7656 23.2031 16.2969L15 8.09375L6.79688 16.2969C6.32812 16.7656 5.625 16.7656 5.20312 16.2969C4.73438 15.875 4.73438 15.1719 5.20312 14.75L14.2031 5.70312Z" fill="currentColor"/></svg>'
-        } else {
-            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 19.2969L5.20312 10.2969C4.73438 9.875 4.73438 9.17188 5.20312 8.70312C5.625 8.28125 6.32812 8.28125 6.79688 8.70312L15 16.9531L23.2031 8.75C23.625 8.28125 24.3281 8.28125 24.7969 8.75C25.2188 9.17188 25.2188 9.875 24.7969 10.2969L15.75 19.2969C15.3281 19.7656 14.625 19.7656 14.2031 19.2969Z" fill="currentColor"/></svg>'
-        }
+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>'
     }
+}
 </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>