playbook_ui 14.24.0.pre.alpha.testingwithoutlazyload9529 → 14.24.0.pre.rc.0

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -369,28 +369,4 @@ test("defaultValue works with multiSelect", () => {
     const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
     const firstOpt = options[0].label
     expect(option2[0]).not.toHaveTextContent(firstOpt)
-  })
-
-test("applies activeStyle backgroundColor and fontColor when selected", () => {
-    render(
-      <Dropdown
-          activeStyle={{
-            backgroundColor: "bg_light",
-            fontColor: "primary",
-          }}
-          data={{ testid: testId }}
-          options={options}
-      />
-    )
-  
-    const kit = screen.getByTestId(testId)
-    const option = kit.querySelectorAll(".pb_dropdown_option_list")[1]
-  
-    fireEvent.click(option)
-  
-    const selected = kit.querySelector(".pb_dropdown_option_selected")
-
-    expect(selected).toBeInTheDocument()
-    expect(selected).toHaveClass("bg-bg_light")
-    expect(selected).toHaveClass("font-primary")
   })

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -41,7 +41,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
   } = props;
 
   const {
-    activeStyle,
     filteredOptions,
     filterItem,
     focusedOptionIndex,
@@ -60,6 +59,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
    ? selected.some((item) => item.label === option?.label)
    : (selected as GenericObject)?.label === option?.label;
 
+  
   if (!isItemMatchingFilter(option) || (multiSelect && isSelected)) {
     return null;
   }
@@ -70,14 +70,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
 
   const selectedClass = isSelected ? "selected" : "list";
 
-
-  const bgTokenClass = activeStyle?.backgroundColor
-      ? `bg-${activeStyle.backgroundColor}`
-      : "";
-  const fontTokenClass = activeStyle?.fontColor
-    ? `font-${activeStyle.fontColor}`
-    : "";
-
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
@@ -87,8 +79,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
       selectedClass,
       focusedClass,
     ),
-    bgTokenClass, 
-    fontTokenClass,
     globalProps(props),
     className
   );

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -52,7 +52,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
   } = props;
 
   const returnedIcon = icon || iconMap[status]
-  const iconClass = icon && icon !== "none" ? "custom_icon" : ""
+  const iconClass = icon ? "custom_icon" : ""
 
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
@@ -92,7 +92,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
             onClick={handleClick}
             {...htmlProps}
         >
-          {returnedIcon && icon !== "none" && (
+          {returnedIcon && (
             <Icon
                 className="pb_icon"
                 fixedWidth

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

@@ -8,7 +8,6 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
-  - fixed_confirmation_toast_no_icon: No Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -18,7 +17,6 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
-  - fixed_confirmation_toast_no_icon: No Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -5,4 +5,3 @@ export { default as FixedConfirmationToastPositions } from './_fixed_confirmatio
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
 export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'
-export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,7 +1,6 @@
 <%= pb_content_tag do %>
-    <% if object.icon_value && object.icon_value != "none" %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
-    <% end %>
+
     <% if content %>
         <%= content %>
     <% elsif object.show_text? %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -56,7 +56,7 @@ module Playbook
       end
 
       def icon_class
-        icon.present? && icon != "none" ? " custom_icon" : ""
+        icon.present? ? " custom_icon" : ""
       end
 
       def classname

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -56,12 +56,6 @@ test('renders custom icon when provided', () => {
     expect(container.querySelector('.custom_icon')).toBeInTheDocument();
 });
 
-test("renders no icon when icon prop is 'none'", () => {
-    const { container } = render(<FixedConfirmationToast icon="none" />);
-    expect(container.querySelector('.pb_icon')).not.toBeInTheDocument();
-    expect(container.querySelector('.custom_icon')).not.toBeInTheDocument();
-});
-
 test('renders correctly with multiLine prop', () => {
     const { container } = render(<FixedConfirmationToast multiLine />);
     expect(container.querySelector('._multi_line')).toBeInTheDocument();

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

@@ -143,8 +143,7 @@ export const recursiveCheckParent = (
 
 export const getExpandedItems = (
   treeData: { [key: string]: string }[],
-  selectedIds: string[],
-  showCheckedChildren = true
+  selectedIds: string[]
 ): any[] => {
   const expandedItems: any[] = [];
 
@@ -153,27 +152,19 @@ export const getExpandedItems = (
       const item = items[i];
       const itemAncestors = [...ancestors, item];
 
-      // Always honor explicit expanded: true
       if (item.expanded) {
         expandedItems.push(item.id);
       }
-
-      // Only expand based on selected items if showCheckedChildren is true
-      if (showCheckedChildren) {
-        if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
-          expandedItems.push(...itemAncestors.map((ancestor: any) => ancestor.id));
-        }
-        if (Array.isArray(item.children)) {
-          const hasCheckedChildren = item.children.some(
-            (child: { [key: string]: string }) => child.checked
-          );
-          if (hasCheckedChildren) {
-            expandedItems.push(...itemAncestors.map((ancestor: any) => ancestor.id));
-          }
-        }
+      if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
+        expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
       }
-
       if (Array.isArray(item.children)) {
+        const hasCheckedChildren = item.children.some(
+          (child: { [key: string]: string }) => child.checked
+        );
+        if (hasCheckedChildren) {
+          expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
+        }
         traverse(item.children, itemAncestors);
       }
     }

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

@@ -47,7 +47,6 @@ type MultiLevelSelectProps = {
   name?: string
   required?: boolean
   returnAllSelected?: boolean
-  showCheckedChildren?: boolean
   treeData?: { [key: string]: string; }[] | any
   onChange?: (event: { target: { name?: string; value: any } }) => void
   onSelect?: (prop: { [key: string]: any }) => void
@@ -72,7 +71,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     label,
     required = false,
     returnAllSelected = false,
-    showCheckedChildren = true,
     treeData,
     onChange = () => null,
     onSelect = () => null,
@@ -106,7 +104,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   // State for default return
   const [defaultReturn, setDefaultReturn] = useState([]);
   // Get expanded items from treeData
-  const initialExpandedItems = getExpandedItems(treeData, selectedIds, showCheckedChildren);
+  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
   // Initialize state with expanded items
   const [expanded, setExpanded] = useState(initialExpandedItems);
 

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

@@ -13,4 +13,4 @@ export { default as MultiLevelSelectDisabledOptions } from './_multi_level_selec
 export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level_select_disabled_options_parent.jsx'
 export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
 export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
-export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'
+export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -32,8 +32,6 @@ module Playbook
                    default: ""
       prop :label, type: Playbook::Props::String,
                    default: ""
-      prop :show_checked_children, type: Playbook::Props::Boolean,
-                                   default: true
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -56,7 +54,6 @@ module Playbook
           variant: variant,
           pillColor: pill_color,
           wrapped: wrapped,
-          showCheckedChildren: show_checked_children,
         }
       end
     end

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import classnames from 'classnames'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -123,13 +123,6 @@ const Pagination = ( props: PaginationProps) => {
     
     return buttons;
   };
-
-  // Sync internal state with external current prop
-  useEffect(() => {
-    if (current >= 1 && current <= total) {
-      setCurrentPage(current);
-    }
-  }, [current, total]);
   
 
   const ariaProps = buildAriaProps(aria)
@@ -141,10 +134,6 @@ const Pagination = ( props: PaginationProps) => {
     className
   )
 
-  if (total <= 1) {
-    return null;
-  }
-
   return (
     <div 
         {...ariaProps}

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

@@ -3,6 +3,4 @@ Our Pagination kit depends on the <a href="https://github.com/mislav/will_pagina
 
 Once you have perfomed the paginated query in your controller file you can use our kit (see code example below) instead of `<%= will_paginate @users %>` in your view file.
 
-You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.
-
-Note: If the total page count is 0 or 1, the Pagination kit will not be displayed as there aren't multiple pages to navigate.
+You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.

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

@@ -1,3 +1 @@
-The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
-
-Note: If the `total` pages prop is 0 or 1, the Pagination component will not be displayed, as there aren't multiple pages to navigate.
+The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.

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

@@ -6,4 +6,3 @@ examples:
   react:
   - pagination_default: Default
   - pagination_page_change: Page Change
-  - pagination_external_control: External Control

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

@@ -1,3 +1,2 @@
 export { default as PaginationDefault } from './_pagination_default.jsx'
 export { default as PaginationPageChange } from './_pagination_page_change.jsx'
-export { default as PaginationExternalControl } from './_pagination_external_control.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -197,22 +197,13 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateMissingAreaCode = (itiInit: any) => {
-    if (!itiInit) return
+    if (!required || !itiInit) return
     if (itiInit.getValidationError() === ValidationError.MissingAreaCode) {
       showFormattedError('missing area code')
       return true
     }
   }
 
-  const validateRepeatCountryCode = (itiInit: any) => {
-    if (!itiInit) return
-    const countryDialCode = itiInit.getSelectedCountryData().dialCode;
-    if (unformatNumber(inputValue).startsWith(countryDialCode)) {
-      return showFormattedError('repeat country code')
-    }
-  }
-
-
   const validateErrors = () => {
     if (!hasTyped && !error) return
 
@@ -222,7 +213,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     if (validateTooShortNumber(itiRef.current)) return
     if (validateUnhandledError(itiRef.current)) return
     if (validateMissingAreaCode(itiRef.current)) return
-    if (validateRepeatCountryCode(itiRef.current)) return
   }
 
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {

data/app/pb_kits/playbook/pb_select/select.rb

@@ -24,9 +24,7 @@ module Playbook
       prop :validation_message, type: Playbook::Props::String, default: ""
 
       def classnames
-        ([classname] + [inline_class, compact_class, show_arrow_class])
-          .reject(&:empty?)
-          .join(" ")
+        classname + inline_class + compact_class + show_arrow_class
       end
 
       def all_attributes
@@ -46,7 +44,7 @@ module Playbook
       end
 
       def inline_class
-        inline ? "inline" : ""
+        inline ? " inline " : " "
       end
 
       def compact_class

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb

@@ -19,7 +19,6 @@
                     value: "checkbox-value",
                     name: "main-checkbox-selectable",
                     indeterminate_main: true,
-                    indeterminate_main_labels: ["", ""],
                     id: "checkbox-selectable"
                 }) %>
             <% end %>

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -7,7 +7,7 @@
     thead tr:not(:first-child) th {
       border-right: 1px solid $border_light !important;
     }
-
+    
     @media screen and (min-width: $screen-xs-min) {
       tr:hover, .pb_table_tr:hover {
         td:last-child, .pb_table_td:last-child {
@@ -15,53 +15,5 @@
         }
       }
     }
-
-    // Firefox-specific fix for sticky elements
-    @-moz-document url-prefix() {
-      // Target sticky headers
-      &.sticky-header {
-        th:not(:last-child) {
-          border-right: none !important;
-          box-shadow: 1px 0 0 0 $border_light !important;
-        }
-
-        .pb_advanced_table_body {
-          .pinned-row {
-            td:not(:first-child):not(:last-child) {
-              border-right: none !important;
-              box-shadow: 1px 0 0 0 $border_light !important;
-            }
-          }
-        }
-      }
-
-      // Target sticky left columns
-      &.sticky-left-column {
-        td[style="left"], th[style="left"] {
-          border-right: none !important;
-          box-shadow: 1px 0 0 0 $border_light !important;
-        }
-      }
-
-      // Target sticky right columns
-      &.sticky-right-column {
-        td[style="right"], th[style="right"] {
-          border-right: none !important;
-          box-shadow: 1px 0 0 0 $border_light !important;
-        }
-      }
-
-      // Handle hover states in Firefox
-      @media screen and (min-width: $screen-xs-min) {
-        tr:hover, .pb_table_tr:hover {
-          td:last-child, .pb_table_td:last-child {
-            &[style="left"], &[style="right"] {
-              border-right: none !important;
-              box-shadow: 1px 0 0 0 darken($border_light, 10%) !important;
-            }
-          }
-        }
-      }
-    }
   }
 }

data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx

@@ -0,0 +1,202 @@
+/* eslint-disable react/no-multi-comp */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import Joyride, { TooltipRenderProps } from 'react-joyride'
+import Button from '../pb_button/_button'
+import Flex from '../pb_flex/_flex'
+import SectionSeparator from '../pb_section_separator/_section_separator'
+import Title from '../pb_title/_title'
+
+type WalkthroughProps = {
+  aria?: { [key: string]: string },
+  callback?: () => void,
+  className?: string,
+  continuous?: boolean,
+  data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  run?: boolean,
+  steps?: [],
+  stepIndex?: number,
+  debug?: boolean,
+  disableCloseOnEsc?: boolean,
+  disableOverlay?: boolean,
+  disableOverlayClose?: boolean,
+  disableScrolling?: boolean,
+  floaterProps?: Record<string, unknown>,
+  hideBackButton?: boolean,
+  hideCloseButton?: boolean,
+  showProgress?: boolean,
+  showSkipButton?: boolean,
+  spotlightClicks?: boolean,
+  spotlightPadding?: number,
+  styles?: {
+    options: {
+      beaconSize?: number,
+      arrowColor?: string,
+      backgroundColor?: string,
+      primaryColor?: string,
+      overlayColor?: string,
+      spotlightShadow?: string,
+      width?: number,
+      zIndex?: number,
+    },
+  },
+}
+
+type TooltipProps = {
+  continuous?: boolean,
+  className?: string,
+  index?: number,
+  isLastStep?: boolean,
+  size?: number,
+  step: {
+    title?: string,
+    content?: React.ReactNode[] | React.ReactNode | string,
+    target: string,
+    disableBeacon?: boolean,
+  },
+  skip?: boolean,
+  backProps?: Record<string, unknown>,
+  closeProps?: Record<string, unknown>,
+  primaryProps?: Record<string, unknown>,
+  skipProps?: Record<string, unknown>,
+  tooltipProps?: Record<string, unknown>,
+}
+
+// eslint-disable-next-line react/display-name
+const Tooltip = React.forwardRef((props: TooltipProps) => (
+<div
+    className="pb_card_kit_border_none p_none"
+    {...props.tooltipProps}
+>
+  {props.step.title && <div>
+  <Flex
+      align="center"
+      justify="between"
+      padding="xs"
+  >
+      <Title
+          paddingLeft="xs"
+          size={4}
+      >
+      {props.step.title}
+      </Title>
+      {props.skip && (
+      <Button
+          {...props.skipProps}
+          id="skip"
+          text="Skip Tour"
+          variant="link"
+      />
+      )}
+      <Button
+          {...props.skipProps}
+          id="skip"
+          text="Skip Tour"
+          variant="link"
+      />
+  </Flex>
+  <SectionSeparator />
+  </div>}
+
+  <Flex padding="sm">{props.step.content}</Flex>
+  <SectionSeparator />
+  <Flex
+      justify={props.index == 0 ? 'end' : 'between'}
+      padding="xs"
+  >
+
+  {props.index > 0 && (
+      <Button
+          {...props.backProps}
+          id="back"
+          text="Back"
+      />
+  )}
+
+  {props.continuous && !props.isLastStep &&
+      <Button
+          {...props.primaryProps}
+          id="next"
+          text="Next"
+      />
+  }
+
+  {!props.continuous &&
+      <Button
+          {...props.closeProps}
+          id="close"
+          text="Close"
+      />
+  }
+
+  {!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
+      <Button
+          {...props.closeProps}
+          id="close"
+          text="Close"
+      />
+  }
+  </Flex>
+</div>
+)) as unknown as React.ForwardRefRenderFunction<HTMLDivElement, TooltipRenderProps>
+
+const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
+  const {
+    aria = {},
+    callback,
+    className,
+    continuous = false,
+    data = {},
+    disableOverlay,
+    floaterProps = {
+      offset: 50,
+    },
+    htmlOptions = {},
+    id,
+    run = false,
+    steps,
+    styles = {
+      options: {
+        zIndex: 20000,
+      },
+    },
+    showSkipButton,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const classes = classnames(buildCss('pb_walkthrough'), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+    >
+      <Joyride
+          callback={callback}
+          continuous={continuous}
+          disableOverlay={disableOverlay}
+          disableScrolling
+          floaterProps={floaterProps}
+          run={run}
+          showSkipButton={showSkipButton}
+          steps={steps}
+          styles={styles}
+          tooltipComponent={Tooltip}
+          {...props}
+      />
+    </div>
+
+  )
+}
+
+export default Walkthrough