playbook_ui 15.6.0.pre.alpha.play2552collapsibleiconrefactor12903 → 15.6.0.pre.alpha.play265012910

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b56117c9b815041948a7dc894ebad0caebf095ff1da7801e06ed7fec18da7eeb
-  data.tar.gz: 8e9f82470ea23ae8863567c8df94451dd927cdcbbaa7cf9d174a5fcd2ee627b7
+  metadata.gz: e093a237701012d80b9c37c5be72e74df5c14e15a001d45a812b6cec3ffe341d
+  data.tar.gz: 410e0352979d11d39b3d43111e0403641a33c8e42a3e3002ab70eda18b9bbb71
 SHA512:
-  metadata.gz: 58c7104cca8322ba83b49875a68bc2a0a49ed6334337bf4a0e00bfa6d8c062bc45b8aadbe2644592a9dc358348cd972b47fef79efb89fbf32135c2f345f6bbd0
-  data.tar.gz: 1c1933805f799e9aeca540a29d3ac0861de4c8c8900ecfb62c7e1ea5eb1800e0df5d7dd4164afffb92788d84d19ed486921d7a572afcf4cf5823c5eeb64d5784
+  metadata.gz: 8b8a92fec8ea139d05795845db08d04c0d82163ba45d3eb3504a10c34df8918ae96f95a24225e3823b450e36143051c49668d71605bc811395d2dc29f595fc78
+  data.tar.gz: 9e3d30a64b3e8700789c63334252114f7070eaac866af69f183a40d89d8e456ffc413d9bd3fc66cb0177b6fa5515e6b4131e1ee92020012950c5371e55121015

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { deprecatedKitWarning } from "../utilities/deprecated";
 
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
@@ -168,6 +169,11 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
 
   const [options, setOptions] = useState({});
 
+  useEffect(() => {
+    // Warn about deprecated kit (only once per page load, dev mode only)
+    deprecatedKitWarning('BarGraph', 'Please use "PbBarGraph" instead.');
+  }, []);
+
   useEffect(() => {
     setOptions(merge(staticOptions, customOptions));
   }, [chartData]);

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -25,11 +25,11 @@ exports[`html structure is correct 1`] = `
           >
             <div
               class="icon_wrapper"
-              style="vertical-align: middle;"
+              style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
               <svg
                 aria-label="chevron-down icon"
-                class="pb_custom_icon svg-inline--fa color_text_lt_lighter svg_lg svg_fw"
+                class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
                 color="currentColor"
                 fill="none"
                 height="auto"

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx

@@ -27,12 +27,12 @@ type colorMap = {
 };
 
 const colorMap = {
-  default:"text_lt_default",
-  light: "text_lt_light",
-  lighter: "text_lt_lighter",
-  link: "primary",
-  error: "error",
-  success: "text_dk_success_sm",
+  default: "#242B42",
+  light: "#687887",
+  lighter: "#C1CDD6",
+  link: "#0056CF",
+  error: "#FF2229",
+  success: "#00CA74",
 };
 
 const CollapsibleIcon = ({
@@ -68,10 +68,9 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[0] : "chevron-down"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle"}}
+              style={{ verticalAlign: "middle", color: color }}
           >
             <Icon
-                color={color}
                 icon={icon ? showIcon(icon)[0] : "chevron-down"}
                 size={iconSize}
             />
@@ -81,10 +80,9 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[1] : "chevron-up"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle" }}
+              style={{ verticalAlign: "middle", color: color }}
           >
             <Icon
-                color={color}
                 icon={icon ? showIcon(icon)[1] : "chevron-up"}
                 size={iconSize}
             />

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -7,6 +7,7 @@ const CollapsibleIcons = (props) => {
   <>
   <Collapsible
       icon={['plus','minus']}
+      iconColor='white'
   >
     <Collapsible.Main {...props}>
       <div>{'Main Section'}</div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx

@@ -22,6 +22,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -40,6 +41,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -58,6 +60,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm" 

data/app/pb_kits/playbook/pb_legend/_legend.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { deprecatedKitWarning } from '../utilities/deprecated'
 
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
@@ -32,6 +33,10 @@ const Legend = (props: LegendProps) => {
     text,
   } = props
 
+  useEffect(() => {
+    deprecatedKitWarning('Legend')
+  }, [])
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_legend/legend.html.erb

@@ -1,3 +1,4 @@
+<%== deprecated_kit_warning('Legend') %>
 <%= pb_content_tag do %>
   <%= pb_rails("body", props: {color: object.body_color}) do %>
     <span style="<%= object.custom_color %>" class=<%= object.custom_color_class %>></span>

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.md

@@ -1 +1 @@
-Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Error shows that the radio option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_select/docs/_select_error.md

@@ -1 +1 @@
-Select w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Select w/ Error shows that an option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md

@@ -1 +1 @@
-Text Input w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Text Input w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md

@@ -1 +1 @@
-Textarea w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Textarea w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).

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

@@ -139,8 +139,7 @@ $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_success_sm:  $text_dk_success_sm
+  text_dk_lighter:    $text_dk_lighter
 );
 
 /* 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();
+};