playbook_ui 15.6.0.pre.alpha.play265012865 → 15.6.0.pre.rc.0

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "15.6.0"
-  VERSION = "15.6.0.pre.alpha.play265012865"
+  PREVIOUS_VERSION = "15.5.0"
+  VERSION = "15.6.0.pre.rc.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 15.6.0.pre.alpha.play265012865
+  version: 15.6.0.pre.rc.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-12-05 00:00:00.000000000 Z
+date: 2025-11-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -487,7 +487,6 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_image.md
 - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_light.md
 - app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_overlay.md
 - app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
@@ -1331,8 +1330,6 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb
@@ -2250,8 +2247,6 @@ files:
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md
-- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx
-- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md
 - app/pb_kits/playbook/pb_multiple_users/docs/example.yml
 - app/pb_kits/playbook/pb_multiple_users/docs/index.js
 - app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb
@@ -3655,9 +3650,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
@@ -3799,7 +3791,6 @@ files:
 - app/pb_kits/playbook/tokens/exports/_typography.module.scss
 - app/pb_kits/playbook/tokens/exports/exports.d.ts
 - app/pb_kits/playbook/tokens/index.scss
-- app/pb_kits/playbook/utilities/DEPRECATION_WARNINGS.md
 - app/pb_kits/playbook/utilities/_background_colors.scss
 - app/pb_kits/playbook/utilities/_border_radius.scss
 - app/pb_kits/playbook/utilities/_colors.scss
@@ -3823,7 +3814,6 @@ files:
 - app/pb_kits/playbook/utilities/_truncate.scss
 - app/pb_kits/playbook/utilities/_vertical_align.scss
 - app/pb_kits/playbook/utilities/_width.scss
-- app/pb_kits/playbook/utilities/deprecated.ts
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_content.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_items.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_self.scss
@@ -3863,7 +3853,7 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-Mjy3POtc.js
+- dist/chunks/_typeahead-kRdz5zPn.js
 - dist/chunks/lazysizes-B7xYodB-.js
 - dist/chunks/lib-CgpqUb6l.js
 - dist/chunks/vendor.js

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

@@ -1 +0,0 @@
-By default, the Background kit sets background color to 'light' as seen here. 

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx

@@ -1,180 +0,0 @@
-import React, { useState } from "react";
-
-import Flex from '../../pb_flex/_flex'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
-import Badge from '../../pb_badge/_badge'
-import Title from '../../pb_title/_title'
-import Caption from '../../pb_caption/_caption'
-import Card from '../../pb_card/_card'
-import FlexItem from '../../pb_flex/_flex_item'
-import Avatar from '../../pb_avatar/_avatar'
-import Body from '../../pb_body/_body'
-
-// Initial groups to drag between
-const containers = ["To Do", "In Progress", "Done"];
-
-// Initial items to be dragged
-const data = [
-  {
-    id: "11",
-    container: "To Do",
-    title: "Task 1",
-    description: "Bug fixes",
-    assignee_name: "Terry Miles",
-    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
-  },
-  {
-    id: "12",
-    container: "To Do",
-    title: "Task 2",
-    description: "Documentation",
-    assignee_name: "Sophia Miles",
-    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
-  },
-  {
-    id: "13",
-    container: "In Progress",
-    title: "Task 3",
-    description: "Add a variant",
-    assignee_name: "Alice Jones",
-    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
-  },
-  {
-    id: "14",
-    container: "To Do",
-    title: "Task 4",
-    description: "Add jest tests",
-    assignee_name: "Mike James",
-    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
-  },
-  {
-    id: "15",
-    container: "Done",
-    title: "Task 5",
-    description: "Alpha testing",
-    assignee_name: "James Guy",
-    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
-  },
-  {
-    id: "16",
-    container: "In Progress",
-    title: "Task 6",
-    description: "Release",
-    assignee_name: "Sally Jones",
-    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
-  },
-];
-
-const DraggableMultipleContainersDropzone = (props) => {
-  const [initialState, setInitialState] = useState(data);
-
-  const badgeProperties = (container) => {
-    switch (container) {
-      case "To Do":
-        return { text: "queue", color: "warning" };
-      case "In Progress":
-        return { text: "progress", color: "primary" };
-      default:
-        return { text: "done", color: "success" };
-    }
-  };
-
-  return (
-    <DraggableProvider 
-        dropZone={{type: "outline"}}
-        enableCrossContainerPreview
-        initialItems={data}
-        onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
-          console.log(`Dragged Item ID: ${draggedItemId}`);
-          console.log(`Final Container: ${finalContainer}`);
-          console.log(`Original Container: ${originalContainer}`);
-          console.log('Item Above:', itemAbove);
-          console.log('Item Below:', itemBelow);
-        }}
-        onDrop={(draggedItemId, droppedContainer, originalContainer, item, itemAbove, itemBelow) => {
-          console.log(`Dragged Item ID: ${draggedItemId}`);
-          console.log(`Dropped Container: ${droppedContainer}`);
-          console.log(`Original Container: ${originalContainer}`);
-          console.log('Dropped Item:', item);
-          console.log('Item Above:', itemAbove);
-          console.log('Item Below:', itemBelow);
-        }}
-        onReorder={(items) => setInitialState(items)}
-    >
-      <Flex
-          justifyContent="center"
-          {...props}
-      >
-          {containers?.map((container) => (
-            <Draggable.Container 
-                container={container}
-                htmlOptions={{style:{ width: "200px", height: "70vh"}}}
-                key={container} 
-                padding="sm"
-            >
-                <Caption textAlign="center">{container}</Caption>
-                <Flex 
-                    alignItems="stretch"
-                    gap="sm"
-                    orientation="column" 
-                >
-                  {initialState
-                    .filter((item) => item.container === container)
-                    .map(
-                      ({
-                        assignee_img,
-                        assignee_name,
-                        description,
-                        id,
-                        title,
-                      }) => (
-                        <Draggable.Item 
-                            container={container}
-                            dragId={id} 
-                            key={id}
-                        >
-                          <Card
-                              padding="sm"
-                              {...props}
-                          >
-                            <Flex justify="between">
-                              <FlexItem>
-                                <Flex>
-                                  <Avatar
-                                      imageUrl={assignee_img}
-                                      name={assignee_name}
-                                      size="xxs"
-                                  />
-                                  <Title paddingLeft="xs" 
-                                      size={4}
-                                      text={title}
-                                      {...props}
-                                  />
-                                </Flex>
-                              </FlexItem>
-                              <Badge
-                                  marginLeft="sm"
-                                  rounded
-                                  text={badgeProperties(container).text}
-                                  variant={badgeProperties(container).color}
-                                  {...props}
-                              />
-                            </Flex>
-                            <Body paddingTop="xs"
-                                text={description} 
-                                {...props}
-                            />
-                          </Card>
-                        </Draggable.Item>
-                      )
-                    )}
-                </Flex>
-            </Draggable.Container>
-          ))}
-      </Flex>
-    </DraggableProvider>
-  );
-};
-
-export default DraggableMultipleContainersDropzone;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md

@@ -1,22 +0,0 @@
-The multiple container functionality also supports customized dropzone styling as shown here. 
-
-In addition to this, the `enableCrossContainerPreview` prop can be used on the `DraggableProvider` as shown here to enable dropzone preview for cross-container dragging. 
-
-With `enableCrossContainerPreview`, the `onDrop` and `onDragEnd` event listeners will also provide several arguments to allow developers more context from the drag event.
-
-The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
-
-- `draggedItemId` - The ID of the item that was dragged
-- `droppedContainer` - The container where the item was dropped
-- `originalContainer` - The container where the drag started
-- `item` - The complete item object with all properties (including the updated container)
-- `itemAbove` - The item directly above the dropped item in the final position (null if at the top)
-- `itemBelow` - The item directly below the dropped item in the final position (null if at the bottom)
-
-The `onDragEnd` callback is triggered when a drag operation ends, whether it was dropped or cancelled. It provides the following arguments:
-
-- `draggedItemId` - The ID of the item that was dragged
-- `finalContainer` - The container where the item ended up (could be same as original if drag was cancelled)
-- `originalContainer` - The container where the drag started
-- `itemAbove` - The item directly above the dragged item in the final position (null if at the top)
-- `itemBelow` - The item directly below the dragged item in the final position (null if at the bottom)

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import MultipleUsers from '../../pb_multiple_users/_multiple_users'
-
-const MultipleUsersWithTooltip = (props) => {
-    return (
-        <div>
-            <MultipleUsers
-                users={[
-                    {
-                        name: 'Patrick Welch',
-                        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
-                        tooltip: "Patrick Welch - Online"
-                    },
-                    {
-                        name: 'Lucille Sanchez',
-                        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
-                        tooltip: "Lucille Sanchez - Offline"
-                    },
-                    {
-                        name: 'Beverly Reyes',
-                        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
-                        tooltip: "Beverly Reyes - Online"
-                    },
-                    {
-                        name: 'Keith Craig',
-                        imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
-                        tooltip: "Keith Craig - Away"
-                    },
-                    {
-                        name: 'Alicia Cooper',
-                        imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
-                        tooltip: "Alicia Cooper - Busy"
-                    },
-                ]}
-                withTooltip
-                {...props}
-            />
-        </div>
-    )
-}
-``
-export default MultipleUsersWithTooltip

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md

@@ -1 +0,0 @@
-Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb

@@ -1,30 +0,0 @@
-<% 
-options = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
-  { label: 'Yellow', value: '#FFFF00' },
-  { label: 'Purple', value: '#800080' },
-  { label: 'Cyan', value: '#00FFFF' },
-  { label: 'Magenta', value: '#FF00FF' }
-] 
-%>
-
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-input-display-none",
-    label: "With Input Display None",
-    options: options,
-    name: :foo,
-    input_display: "none",
-    })
-%>
-<br/>
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-input-display-pills",
-    label: "With Input Display Pills (Default)",
-    options: options,
-    name: :foo,
-    pills: true,
-    })
-%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx

@@ -1,37 +0,0 @@
-import React from 'react'
-
-import Typeahead from '../_typeahead'
-
-const options = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
-  { label: 'Yellow', value: '#FFFF00' },
-  { label: 'Purple', value: '#800080' },
-  { label: 'Cyan', value: '#00FFFF' },
-  { label: 'Magenta', value: '#FF00FF' }
-]
-
-const TypeaheadInputDisplay = (props) => {
-  return (
-    <>
-      <Typeahead
-          inputDisplay="none"
-          isMulti
-          label="With Input Display None"
-          options={options}
-          {...props}
-      />
-      <br/>
-      <Typeahead
-          isMulti
-          label="With Input Display Pills (Default)"
-          options={options}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default TypeaheadInputDisplay

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md

@@ -1,3 +0,0 @@
-Use the `inputDisplay`/`input_display` prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default. 
-
-**NOTE**: `inputDisplay`/`input_display` should only be used with typeaheads that allow multi selection.

data/app/pb_kits/playbook/utilities/DEPRECATION_WARNINGS.md

@@ -1,82 +0,0 @@
-# Deprecation Warning System for React Kits
-
-## Overview
-
-This system provides runtime console warnings when deprecated Playbook kits are used in development mode. It helps developers identify deprecated kit usage in Nitro, Tempo, Runway, and other apps without impacting production builds.
-
-## How It Works
-
-### Key Features
-
-✅ **Once per page load**: Each deprecated kit logs exactly one warning per page load, preventing spam on re-renders  
-✅ **Dev mode only**: No warnings in production builds (`process.env.NODE_ENV === 'production'`)  
-✅ **Platform-specific**: Can warn only for React or Rails, or both  
-✅ **Customizable messages**: Default or custom deprecation messages
-
-## Usage
-
-### Step 1: Import the utility
-
-In your kit's main React component file (e.g., `_bar_graph.tsx`):
-
-```tsx
-import { deprecatedKitWarning } from "../utilities/deprecated";
-```
-
-### Step 2: Add the warning in a useEffect hook
-
-Add a `useEffect` hook that calls the warning once when the component mounts:
-
-```tsx
-const YourKit = (props: YourKitProps): React.ReactElement => {
-
-  useEffect(() => {
-    deprecatedKitWarning('YourKitName', 'Optional custom message');
-  }, []); // Empty dependency array ensures it runs once
-
-  // rest of component
-};
-```
-
-
-## API Reference
-
-### `deprecatedKitWarning(kitName, message?)`
-
-**Parameters:**
-- `kitName` (string, required): Name of the deprecated kit (e.g., 'BarGraph')
-- `message` (string, optional): Custom deprecation message. If omitted, uses default.
-
-**Default message format:**
-```
-[Playbook] The "{kitName}" kit is deprecated and will be removed in a future version. Please migrate to the recommended alternative.
-```
-
-**Behavior:**
-- Only logs in development mode (`process.env.NODE_ENV !== 'production'`)
-- Tracks warned kits in a Set to prevent duplicate warnings
-- Silent in production builds
-
-
-## Best Practices
-
-### 1. Place the warning early in the component lifecycle
-```tsx
-useEffect(() => {
-  deprecatedKitWarning('YourKit');
-}, []); // Run once on mount
-```
-
-### 2. Provide helpful migration messages
-```tsx
-deprecatedKitWarning(
-  'BarGraph', 
-  '[Playbook] The "BarGraph" kit is deprecated. Please use "PbBarGraph" instead.'
-);
-```
-
-### 3. Check menu.yml before applying
-Always verify the kit's status in `playbook-website/config/menu.yml` to ensure it's actually deprecated for React.
-
-### 4. Don't over-warn
-The utility handles deduplication, but keep it to one `deprecatedKitWarning` call per kit component.

data/app/pb_kits/playbook/utilities/deprecated.ts

@@ -1,65 +0,0 @@
-/**
- * Tracks which deprecated kits have already logged warnings in this session
- * to ensure we only log once per page load per kit
- */
-const warnedKits = new Set<string>();
-
-/**
- * Logs a deprecation warning for a Playbook kit
- * - Only logs once per kit per page load (prevents spam on re-renders)
- * - Only logs in development mode (not in production or test environments)
- * 
- * @param kitName - The name of the deprecated kit (e.g., 'BarGraph', 'RichTextEditor')
- * @param message - Optional custom deprecation message. If not provided, uses a default message.
- * 
- * @example
- * // In your kit component:
- * useEffect(() => {
- *   deprecatedKitWarning('BarGraph');
- * }, []);
- */
-export const deprecatedKitWarning = (
-  kitName: string,
-  message?: string
-): void => {
-  // Skip in test environments (Jest sets NODE_ENV to 'test')
-  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {
-    return;
-  }
-
-  // In browser environments, check if we're on localhost/dev
-  if (typeof window !== 'undefined') {
-    const hostname = window.location?.hostname;
-    const isLocalDev = hostname === 'localhost' || 
-                       hostname === '127.0.0.1' ||
-                       hostname?.endsWith('.local') ||
-                       hostname?.includes('local.') ||
-                       !hostname; // file:// protocol
-    
-    // Only show warnings in local development
-    if (!isLocalDev) {
-      return;
-    }
-  }
-
-  // Only warn once per kit per page load
-  if (warnedKits.has(kitName)) {
-    return;
-  }
-
-  // Mark this kit as warned
-  warnedKits.add(kitName);
-
-  // Log the warning
-  const defaultMessage = `[PLAYBOOK] The "${kitName}" kit is deprecated and will be removed in a future version. Please migrate to the recommended alternative.`;
-  
-  console.warn(message || defaultMessage);
-};
-
-/**
- * Resets the warned kits tracker (useful for testing)
- * @internal
- */
-export const resetDeprecationWarnings = (): void => {
-  warnedKits.clear();
-};