playbook_ui 15.3.0.pre.alpha.PLAY258611978 → 15.3.0.pre.alpha.PLAY260211773

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a1a62cafaa16e4da926d69ebca037e59cce874784adfe55e1650cd94f7152f08
-  data.tar.gz: c3689d869441ef31917edf4c5e124e0a0a1b42f66d9753fea748897b15a20d2e
+  metadata.gz: 726cf539b5bde924b845f08e1881a6f9f4fa5e3c7688be607e88166f35dc9974
+  data.tar.gz: a1b68b3ff4c39332a3a6eee2833863211675a1de5faf892e440f35fb23b54eba
 SHA512:
-  metadata.gz: f1274d98903345d89ebb1ab7cf7aa5d07f138aa90fd36e6f5d6fdee3ce3ca242999a02b4f97bfc338408d1f33628c01c0d0277a266ce1abe50b8518c7d298eb7
-  data.tar.gz: be5e89b4822ed1af5030fa5abcc219e36c6cb97fd95b6b414ac91c2e4814686ad834e7b8dca0da3cdaaf0e7ba27abb27911b5247ce54381bf5385f199fb34c81
+  metadata.gz: 2f050d36d6fe2270f6cc72c74cfdfef0756e3bf82fa27f029c7d2ed39517868ed41ca17deef93e00236963c8432e4c878ff2e8a3bba4ca3e20998cc93b05ee82
+  data.tar.gz: 1bc4774947204bcd9162c3ab12fc7254ccb90c5592b1c094175bb7b2f6ea26b52fefef39d65fa63ee68d8e966e8378a6cfa53ebaedee0239949ad5ee7dc02b95

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -12,6 +12,7 @@ import {
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
 import { createCellFunction } from "../Utilities/CellRendererUtils";
+import { inline } from '@floating-ui/react';
 
 interface UseTableStateProps {
   tableData: GenericObject[];
@@ -250,16 +251,16 @@ export function useTableState({
     }
   }, [pagination, inlineRowLoading, paginationProps?.pageIndex, paginationProps?.pageSize]);
 
-  // Call the callback with the new page index when localPagination.pageIndex changes (with inlineRowLoading)
+  // Call the callback with the new page index when localPagination.pageIndex changes (for inlineRowLoading)
   useEffect(() => {
-    if (pagination && inlineRowLoading && paginationProps?.onPageChange) {
+    if (pagination && inlineRowLoading && paginationProps) {
       paginationProps.onPageChange(localPagination.pageIndex);
     }
   }, [localPagination.pageIndex, pagination, inlineRowLoading, paginationProps]);
 
-  // Call the callback with the new page index when localPagination.pageIndex changes (without inlineRowLoading)
+  // Call the callback with the new page index when table pagination state changes (for default pagination)
   useEffect(() => {
-    if (pagination && !inlineRowLoading && paginationProps?.onPageChange) {
+    if (pagination && !inlineRowLoading && paginationProps) {
       const currentPageIndex = table.getState().pagination.pageIndex;
       paginationProps.onPageChange(currentPageIndex);
     }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md

@@ -1,3 +1,3 @@
 The borders of column groups can be set to a different color using the `columnGroupBorderColor` prop.  In order for these borders to be visible, this prop must be used with `tableProps` and `verticalBorder` set to true.
 
-The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/tokens/colors).
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md

@@ -1,3 +1,3 @@
 The borders of column groups can be set to a different color using the `column_group_border_color` prop. In order for these borders to be visible, this prop must be used with `table_props` and `vertical_border` set to true.
 
-The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/tokens/colors).
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md

@@ -1,7 +1,7 @@
 To achieve a sticky header AND sticky columns together, in addition to the `stickyLeftColumn` logic outlined above, you can:
 
 - Set `sticky: true` via `tableProps`
-- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud//global_props/max_height) global prop. 
+- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
 
 **NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the column stickiness.
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md

@@ -1,4 +1,4 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md

@@ -1,4 +1,4 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
 
 **NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 

data/app/pb_kits/playbook/pb_background/docs/_background_category.md

@@ -1 +1 @@
-Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.
+Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_background.md

@@ -1 +1 @@
-Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
+Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_light.md

@@ -1 +1 @@
-Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>  
+Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>  

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

@@ -85,8 +85,6 @@ module Playbook
                              default: ""
       prop :sync_end_with, type: Playbook::Props::String,
                            default: ""
-      prop :cursor, type: Playbook::Props::String,
-                    default: "pointer"
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

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

@@ -350,14 +350,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   if (syncStartWith) {
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
-        const element = document.querySelector(`#${syncStartWith}`) as any;
-        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
-        if (element?._dropdownRef?.current) {
-          element._dropdownRef.current.clearSelected();
-        } else {
-          const quickpick = element?._flatpickr;
-          quickpick?.clear();
-        }
+        const quickpick = (document.querySelector(`#${syncStartWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
       }
     });
   }
@@ -366,14 +360,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   if (syncEndWith) {
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
-        const element = document.querySelector(`#${syncEndWith}`) as any;
-        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
-        if (element?._dropdownRef?.current) {
-          element._dropdownRef.current.clearSelected();
-        } else {
-          const quickpick = element?._flatpickr;
-          quickpick?.clear();
-        }
+        const quickpick = (document.querySelector(`#${syncEndWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
       }
     });
   }

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

@@ -48,8 +48,7 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
-  # - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
-  - date_picker_and_dropdown_range: Range with Dropdown and 2 Date Pickers
+  - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -26,5 +26,4 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
-export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
-export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
+export { default as DatePickerRangePattern } from './_date_picker_range_pattern'

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/token/colors) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -12,7 +12,6 @@
 
 .pb_dropdown_default,
 .pb_dropdown_subtle,
-.pb_dropdown_quickpick,
 .pb_dropdown_default_separators_hidden,
 .pb_dropdown_subtle_separators_hidden {
   .dropdown_wrapper {

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -12,7 +12,6 @@ import DropdownContext from "./context";
 import DropdownOption from "./subcomponents/DropdownOption";
 import DropdownTrigger from "./subcomponents/DropdownTrigger";
 import useDropdown from "./hooks/useDropdown";
-import  getQuickPickOptions from "./quickpick";
 
 import {
     separateChildComponents,
@@ -37,12 +36,9 @@ type DropdownProps = {
     label?: string;
     multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
-    options?: GenericObject;
+    options: GenericObject;
     separators?: boolean;
-    variant?: "default" | "subtle" | "quickpick";
-    rangeEndsToday?: boolean;
-    controlsStartId?: string;
-    controlsEndId?: string;
+    variant?: "default" | "subtle";
     activeStyle?: {
       backgroundColor?: string;
       fontColor?: string;
@@ -75,9 +71,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         formPillProps,
         onSelect,
         options,
-        rangeEndsToday = false,
-        controlsStartId,
-        controlsEndId,
         separators = true,
         variant = "default",
         activeStyle,
@@ -92,25 +85,11 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         globalProps(props),
         className
     );
-    // ------------- Quick Pick ---------------------------------
-    // Use QuickPick options when variant is "quickpick"
-    const dropdownOptions = variant === "quickpick" 
-        ? getQuickPickOptions(rangeEndsToday) 
-        : (options || []);
-    // ----------------------------------------------------------
 
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
     const [filterItem, setFilterItem] = useState("");
     const initialSelected = useMemo(() => {
-      // Handle quickpick variant with string defaultValue (e.g., "This Month")
-      if (variant === "quickpick" && typeof defaultValue === "string" && defaultValue) {
-        const matchedOption = dropdownOptions.find(
-          (opt: GenericObject) => opt.label?.toLowerCase() === (defaultValue as string).toLowerCase()
-        );
-        return matchedOption || {};
-      }
-      
       if (multiSelect) {
         if (Array.isArray(defaultValue)) return defaultValue;
         return defaultValue && Object.keys(defaultValue).length
@@ -118,7 +97,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
           : [];
       }
       return defaultValue || {};
-    }, [multiSelect, defaultValue, variant, dropdownOptions]);
+    }, [multiSelect, defaultValue]);
 
     const [selected, setSelected] = useState<GenericObject | GenericObject[]>(
       initialSelected
@@ -172,7 +151,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     }, [isClosed])
 
     const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
-    const optionsWithBlankSelection = blankSelectionOption.concat(dropdownOptions);
+    const optionsWithBlankSelection = blankSelectionOption.concat(options);
 
     const availableOptions = useMemo(()=> {
         if (!multiSelect) return optionsWithBlankSelection;
@@ -224,21 +203,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                    setFilterItem("");
                    setIsDropDownClosed(true);
                    onSelect && onSelect(clickedItem);
-                   
-                   // Sync with DatePickers if this is a quickpick variant
-                   if (variant === "quickpick" && Array.isArray(clickedItem.value)) {
-                       const [start, end] = clickedItem.value;
-                       
-                       if (controlsStartId) {
-                           const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-                           startPicker?.setDate(start, true);
-                       }
-                       
-                       if (controlsEndId) {
-                           const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-                           endPicker?.setDate(end, true);
-                       }
-                   }
             }
              };
 
@@ -255,19 +219,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setSelected({});
         onSelect && onSelect(null);
         setFocusedOptionIndex(-1);
-        
-        // Clear linked DatePickers as well if this is a quickpick variant with controls
-        if (variant === "quickpick") {
-          if (controlsStartId) {
-            const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-            startPicker?.clear();
-          }
-          
-          if (controlsEndId) {
-            const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-            endPicker?.clear();
-          }
-        }
       }
     };
 
@@ -281,8 +232,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         dark
     });
 
-    // Create an internal ref object that holds the imperative handle methods
-    const imperativeRef = useRef({
+    useImperativeHandle(ref, () => ({
       clearSelected: () => {
         if (multiSelect) {
           setSelected([]);
@@ -294,61 +244,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setFilterItem("");
         setIsDropDownClosed(true);
       },
-    });
-
-    // Update imperativeRef whenever dependencies change
-    // (needed for external clearing of normal Dropdown + DatePicker-synced QuickPick Dropdown)
-    useEffect(() => {
-      imperativeRef.current = {
-        clearSelected: () => {
-          if (multiSelect) {
-            setSelected([]);
-            onSelect && onSelect([]);
-          } else {
-            setSelected({});
-            onSelect && onSelect(null);
-          }
-          setFilterItem("");
-          setIsDropDownClosed(true);
-        },
-      };
-    }, [multiSelect, onSelect, setSelected, setFilterItem, setIsDropDownClosed]);
-
-    useImperativeHandle(ref, () => imperativeRef.current);
-
-    // Create a ref to the outer div to attach the dropdown ref for DatePicker sync
-    const outerDivRef = useRef<HTMLDivElement>(null);
-    
-    useEffect(() => {
-      // Attach the ref to the DOM element so DatePicker can access it
-      if (outerDivRef.current && variant === "quickpick" && id) {
-        (outerDivRef.current as any)._dropdownRef = imperativeRef;
-      }
-    }, [variant, id]);
-
-    // Sync defaultValue with DatePickers on mount when 3 input pattern is used
-    useEffect(() => {
-      if (variant === "quickpick" && initialSelected && typeof initialSelected === "object" && !Array.isArray(initialSelected)) {
-        const value = initialSelected.value;
-        
-        if (Array.isArray(value) && value.length === 2) {
-          const [start, end] = value;
-          
-          // Wait for DatePickers to be initialized
-          setTimeout(() => {
-            if (controlsStartId) {
-              const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-              startPicker?.setDate(start, true);
-            }
-            
-            if (controlsEndId) {
-              const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-              endPicker?.setDate(end, true);
-            }
-          }, 0);
-        }
-      }
-    }, [variant, initialSelected, controlsStartId, controlsEndId]);
+    }));
 
     return (
         <div {...ariaProps}
@@ -356,7 +252,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             {...htmlProps}
             className={classes}
             id={id}
-            ref={outerDivRef}
             style={{position: "relative"}}
         >
             <DropdownContext.Provider

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md

@@ -1,4 +1,4 @@
 The `activeStyle` prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: `backgroundColor` sets the background color of the selected item (and its hover state); `fontColor` sets the font color of the selected item.
 
 `backgroundColor` **Type**: String | **Values**: bg_light | white | **Default**: (no selection) is primary
-`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/global_props/colors) | **Default**: (no selection) is white
+`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white

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

@@ -49,9 +49,4 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
-  - dropdown_quickpick: Quick Pick Variant
-  - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
-  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
-  - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
-
 

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

@@ -22,8 +22,4 @@ export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_sel
 export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
 export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
 export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
-export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
-export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
-export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
-export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
-export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
+export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React from "react"
 import { render, screen, fireEvent } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
@@ -393,150 +393,4 @@ test("applies activeStyle backgroundColor and fontColor when selected", () => {
     expect(selected).toBeInTheDocument()
     expect(selected).toHaveClass("bg-bg_light")
     expect(selected).toHaveClass("font-primary")
-  })
-
-test("renders quickpick variant with auto-generated options", () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_dropdown_quickpick')
-  
-  // Check that quickpick options are generated
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  expect(options.length).toBe(10)
-  expect(options[0]).toHaveTextContent("Today")
-})
-
-test("quickpick variant accepts string defaultValue", () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        defaultValue="This Month"
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  
-  expect(trigger).toHaveTextContent("This Month")
-})
-
-test("quickpick attaches _dropdownRef to DOM element when id is provided", () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        id="test-quickpick"
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  
-  // Check that the element has the _dropdownRef attached
-  expect(kit._dropdownRef).toBeDefined()
-  expect(kit._dropdownRef.current).toBeDefined()
-  expect(kit._dropdownRef.current.clearSelected).toBeDefined()
-})
-
-test("quickpick clears selection when clicking X icon", () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        defaultValue="This Week"
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  
-  expect(trigger).toHaveTextContent("This Week")
-  
-  const clearIcon = kit.querySelector('[aria-label="times icon"]')
-  expect(clearIcon).toBeInTheDocument()
-  
-  fireEvent.click(clearIcon.parentElement)
-  
-  expect(trigger).toHaveTextContent("Select...")
-})
-
-test("quickpick returns date array values when option selected", () => {
-  const TestComponent = () => {
-    const [selected, setSelected] = useState(null)
-    return (
-      <>
-        <Dropdown
-            data={{ testid: testId }}
-            onSelect={(item) => setSelected(item)}
-            variant="quickpick"
-        />
-        {selected && (
-          <div data-testid="selected-value">
-            {JSON.stringify({
-              label: selected.label,
-              hasValue: !!selected.value,
-              isArray: Array.isArray(selected.value),
-              valueLength: selected.value?.length
-            })}
-          </div>
-        )}
-      </>
-    )
-  }
-
-  render(<TestComponent />)
-  
-  const kit = screen.getByTestId(testId)
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  
-  fireEvent.click(options[0])
-  
-  const selectedValue = screen.getByTestId('selected-value')
-  const data = JSON.parse(selectedValue.textContent)
-  
-  expect(data.label).toBe("Today")
-  expect(data.hasValue).toBe(true)
-  expect(data.isArray).toBe(true)
-  expect(data.valueLength).toBe(2)
-})
-
-test("quickpick option values are Date objects", () => {
-  const onSelectMock = jest.fn()
-  
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        onSelect={onSelectMock}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  
-  const thisMonthOption = Array.from(options).find(opt => opt.textContent === 'This Month')
-  fireEvent.click(thisMonthOption)
-  
-  const selectedItem = onSelectMock.mock.calls[0][0]
-  
-  expect(selectedItem.label).toBe("This Month")
-  expect(selectedItem.value).toBeDefined()
-  expect(Array.isArray(selectedItem.value)).toBe(true)
-  expect(selectedItem.value.length).toBe(2)
-  
-  const [startDate, endDate] = selectedItem.value
-  
-  expect(startDate instanceof Date).toBe(true)
-  expect(endDate instanceof Date).toBe(true)
-  
-  expect(startDate.getTime()).not.toBeNaN()
-  expect(endDate.getTime()).not.toBeNaN()
-  
-  expect(endDate.getTime()).toBeGreaterThanOrEqual(startDate.getTime())
-})
+  })

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md

@@ -1 +1 @@
-Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>
+Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md

@@ -1,3 +1,3 @@
-For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
 
 __NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md

@@ -1 +1 @@
-For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md

@@ -1 +1 @@
-Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 
+Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md

@@ -1 +1 @@
-Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `orange` `purple` `teal` `red` `yellow` `green`
+Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `blue` `orange` `purple` `teal` `red` `yellow` `green`