playbook_ui 15.5.0 → 15.6.0.pre.alpha.PLAY2686contactkittextonly13049

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

@@ -0,0 +1,30 @@
+<% 
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,3 @@
+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/pb_typeahead/docs/example.yml

@@ -5,6 +5,7 @@ examples:
     - typeahead_default_options: With Default Options
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
+    - typeahead_input_display: Input Display
     - typeahead_without_pills: Without Pills (Single Select)
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
@@ -26,6 +27,7 @@ examples:
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
+    - typeahead_input_display: Input Display
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)

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

@@ -17,4 +17,5 @@ export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
 export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
 export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
-export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
+export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
+export { default as TypeaheadInputDisplay } from './_typeahead_input_display.jsx'

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -25,6 +25,10 @@ module Playbook
       prop :is_multi, type: Playbook::Props::Boolean,
                       default: true
 
+      prop :input_display, type: Playbook::Props::Enum,
+                           values: %w[none pills],
+                           default: "pills"
+
       prop :pills, type: Playbook::Props::Boolean,
                    default: false
 
@@ -78,7 +82,7 @@ module Playbook
       end
 
       def is_react?
-        pills || !is_multi || wrapped
+        pills || !is_multi || wrapped || input_display == "none"
       end
 
       def typeahead_react_options
@@ -91,6 +95,7 @@ module Playbook
           id: id,
           inline: inline,
           isMulti: is_multi,
+          inputDisplay: input_display,
           label: label,
           marginBottom: margin_bottom,
           multiKit: multi_kit,

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -139,7 +139,8 @@ $text_colors: (
   text_lt_lighter:    $text_lt_lighter,
   text_dk_default:    $text_dk_default,
   text_dk_light:      $text_dk_light,
-  text_dk_lighter:    $text_dk_lighter
+  text_dk_lighter:    $text_dk_lighter,
+  text_dk_success_sm:  $text_dk_success_sm
 );
 
 /* Data colors ------------------------*/

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

@@ -0,0 +1,73 @@
+/**
+ * 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);
+
+  // Build the warning message
+  const baseMessage = `PLAYBOOK DEPRECATION WARNING
+  ----------------------------
+  The "${kitName}" kit is deprecated and will be removed in a future version.`;
+  
+  const fullMessage = message 
+    ? `${baseMessage} ${message}`
+    : `${baseMessage} Please migrate to the recommended alternative
+ 
+  `;
+  
+  console.warn(fullMessage);
+};
+
+/**
+ * Resets the warned kits tracker (useful for testing)
+ * @internal
+ */
+export const resetDeprecationWarnings = (): void => {
+  warnedKits.clear();
+};