playbook_ui 14.4.0.pre.alpha.PLAY1547reactzoompanpinchlightbox3613893 → 14.4.0.pre.alpha.PLAY1562highchartsbump3819

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a38cf7800d4c1c252a9fcde5c4763139929a99660c62d174def22cb8d6a77b3
-  data.tar.gz: 3170f05f36d97eb22893262015962d73107934843fbc57d4eff4a35355896e63
+  metadata.gz: 97228845b448a163135025419bb6c223b4c4b0f37f4aad4cf239f9d3bf21639a
+  data.tar.gz: cbb30004b258be8f9bf2cc04e0f4d594bc90f94d89aeb97b57e8927c590d4daf
 SHA512:
-  metadata.gz: 34d6d6a426deea35ac5c5cba2101ff1edba460c7b8733a21845b2e6217a4bb8024837e72fa4d73e500ed470894d3a167575beada2bdd3588d0976b821a5181ba
-  data.tar.gz: 95ee571a2abf4d30ca88ea2d64351f7189b14e81abf5992ec2325042fa1bf876525b7f97b065f382fa39d0d70050fd305732e8d12146536020ae8d797ae93d67
+  metadata.gz: a95c812b64ce4a792bbb8f5b433cef7cb74b20b4224ae8e81ba83d6379c60f839f2c089afc077f9ca189a2ba9e074a9e5943318cd6e54c66df71080fe401294d
+  data.tar.gz: 10edc2d87a52fab3c7de13169df6606146410f83fd47e3bc2c0497856166dd9283444b44c5119e4978c2c30dbaf2884375a16f7122f336f623733da1c6a6b243

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_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_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_radio/_radio.tsx

@@ -1,30 +1,28 @@
-/*eslint-disable react/no-multi-comp */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef } from 'react'
 import Body from '../pb_body/_body'
-import Flex from '../pb_flex/_flex'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 type RadioProps = {
-  aria?: { [key: string]: string },
+  aria?: {[key: string]: string},
   alignment?: string,
   checked?: boolean,
   children?: React.ReactChild[] | React.ReactChild,
-  customChildren?: boolean,
   className?: string,
   dark?: boolean,
-  data?: { [key: string]: string },
+  data?: {[key: string]: string},
   disabled?: boolean,
   error?: boolean,
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label: string,
   name?: string,
   value?: string,
   text?: string,
-  onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
+  onChange: (event: React.FormEvent<HTMLInputElement> | null)=>void,
 } & GlobalProps
 
 const Radio = ({
@@ -32,11 +30,10 @@ const Radio = ({
   alignment,
   children,
   className,
-  customChildren = false,
   dark = false,
+  data = {},
   disabled = false,
   error = false,
-  data = {},
   htmlOptions = {},
   id,
   label,
@@ -46,28 +43,17 @@ const Radio = ({
   onChange = () => { void 0 },
   ...props
 }: RadioProps, ref: any) => {
-  const radioRef = useRef(null);
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_radio_kit', alignment),
-    dark ? 'dark' : null,
-    error ? 'error' : null,
+    buildCss('pb_radio_kit', alignment ),
+    dark ? 'dark': null, error ? 'error': null,
     globalProps(props),
-    className
-  );
-
-  const classesCustom = classnames(
-    dark ? 'dark' : null,
-    error ? 'error' : null,
-    globalProps(props),
-    className
-  );
+    className)
 
   const displayRadio = (props: RadioProps & any) => {
-    if (children && customChildren == false)
+    if (children)
       return (children)
     else
     return (
@@ -84,69 +70,24 @@ const Radio = ({
     />
   )}
 
-  const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
-    if (event) {
-      const target = event.target as HTMLElement;
-      if (
-        target.id === 'pb-radio-children-wrapper' ||
-        target.closest('#pb-radio-children-wrapper')
-      ) {
-        radioRef.current?.click();
-      }
-    }
-  };
-
   return (
-    customChildren ? (
-      <Flex 
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          align='center'
-          className={classesCustom}
-          cursor='pointer'
-          htmlFor={id}
-          htmlOptions={{
-            onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-              handleContainerClick(event);
-            }) as unknown as () => void
-          }}
-          id="radio-container"
-      >
-        <label className={buildCss('pb_radio_kit', alignment)}>
-        <input
-            disabled={disabled}
-            id={id}
-            name={name}
-            onChange={onChange}
-            ref={radioRef}
-            type="radio"
-            value={value}
-            {...props}
-        />
-          <span className="pb_radio_button" />
-        </label>
-        <div id="pb-radio-children-wrapper"> {children} </div>
-      </Flex>
-    ) : (
-        <label
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            htmlFor={id}
-        >
-        <>{displayRadio(props)}</>
-        <span className="pb_radio_button" />
-        <Body
-            dark={dark}
-            status={error ? 'negative' : null}
-            text={label}
-            variant={null}
-        />
-      </label>
-    )
-  );
-};
+    <label
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        htmlFor={id}
+    >
+    <>{displayRadio(props)}</>
+    <span className="pb_radio_button" />
+    <Body
+        dark={dark}
+        status={error ? 'negative' : null}
+        text={label}
+        variant={null}
+    />
+    </label>
+  )
+}
 
-export default forwardRef(Radio);
+export default forwardRef(Radio)

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

@@ -15,7 +15,6 @@ examples:
   - radio_error: With Error
   - radio_alignment: Alignment
   - radio_disabled: Disabled
-  - radio_custom_children: Custom Children
 
   swift:
   - radio_default_swift: Default

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

@@ -3,4 +3,3 @@ export { default as RadioCustom } from './_radio_custom.jsx'
 export { default as RadioError } from './_radio_error.jsx'
 export { default as RadioAlignment } from './_radio_alignment.jsx'
 export { default as RadioDisabled } from './_radio_disabled.jsx'
-export { default as RadioCustomChildren } from './_radio_custom_children.jsx'