playbook_ui_docs 16.2.0.pre.alpha.PLAY2798idvsinputoptionsidfortextarea14471 → 16.2.0.pre.alpha.PLAY2806emailcampaignmlsfix14645

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 86257cae5e7d87dcfcf61181debc44fcd932178f83095afeb7cd39c98bdf74b2
-  data.tar.gz: 9419c6db216b2ebd0f04e097361a67729e82b7717c3b452ed80698cd6bfd4ed7
+  metadata.gz: 2bf4fb0c830c54bf2ef95bcec1be207cc04aabdcb0756eeb57f1af09696b6269
+  data.tar.gz: c1158e25f118274b53e42f6d633bbb2d9b07dba642c529eacf6811f8e84749ec
 SHA512:
-  metadata.gz: 9d43d2a65d93cea51e1c4255dcff236b8b14f5b5f9707e68fa2d29fe0f071688c94153246adeddb1d4f043a020c3dd1effd17901080a6dda2763a7571140516a
-  data.tar.gz: eaf3e5afa8b9aa3262d27d9158a4c44edbd2411a9c6aedebd673c36736f98072689a9bae9ac68dfe87dbd2728ef5a2bbec2f8f06d09e7d2e1d404a442750fcba
+  metadata.gz: 2194022c2b7187e68975345ff5655eb2652a65a72c62a0148548ae552cc26e286e76b9f371d8d49e59fc02746fba884bec9bdbd037665f13fd1dad5cb5a6e82a
+  data.tar.gz: 7045605fac49bb4bf46e96f1a0b5b02d66eb051248c399ee101e3675bca814d4c4e09bf7ce42330698febcb6de37e6f57718dbb302b703b5bdbe4b20df724e0e

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb

@@ -1,4 +1,6 @@
-<%= pb_rails("caption", props: { text: "Test colors" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "success" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "error" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "link" }) %>
+<%= pb_rails("caption", props: { text: "Caption light" }) %>
+<%= pb_rails("caption", props: { text: "Caption default", color: "default" }) %>
+<%= pb_rails("caption", props: { text: "Caption lighter", color: "lighter" }) %>
+<%= pb_rails("caption", props: { text: "Caption success", color: "success" }) %>
+<%= pb_rails("caption", props: { text: "Caption error", color: "error" }) %>
+<%= pb_rails("caption", props: { text: "Caption link", color: "link" }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx

@@ -4,23 +4,33 @@ import Caption from "../../pb_caption/_caption"
 const CaptionColors = (props) => {
   return (
     <div>
+      <Caption 
+          text="Caption light"
+          {...props}
+      />
+      <Caption
+          color="default"
+          text="Caption default"
+          {...props}
+      />
       <Caption
-          text="Test colors"
+          color="lighter"
+          text="Caption lighter"
           {...props}
       />
       <Caption
           color="success"
-          text="Test colors"
+          text="Caption success"
           {...props}
       />
       <Caption
           color="error"
-          text="Test colors"
+          text="Caption error"
           {...props}
       />
       <Caption
           color="link"
-          text="Test colors"
+          text="Caption link"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.html.erb

@@ -1,24 +1,6 @@
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "default"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "lighter"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "link"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "error"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "success"
-}) %>
+<%= pb_rails("detail", props: { text: "I am a detail kit" }) %>
+<%= pb_rails("detail", props: { text: "I am a detail kit", color: "default" }) %>
+<%= pb_rails("detail", props: { text: "I am a detail kit", color: "lighter" }) %>
+<%= pb_rails("detail", props: { text: "I am a detail kit", color: "link" }) %>
+<%= pb_rails("detail", props: { text: "I am a detail kit", color: "error" }) %>
+<%= pb_rails("detail", props: { text: "I am a detail kit", color: "success" }) %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx

@@ -1,38 +1,40 @@
 import React from 'react'
 import Detail from '../../pb_detail/_detail'
 
-const DetailColors = (props) => (
-  <div>
-    <Detail
-        color="default"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="lighter"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="link"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="error"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="success"
-        text="I am a detail kit"
-        {...props}
-    />
-  </div>
-)
+const DetailColors = (props) => {
+  return (
+    <div>
+      <Detail
+          text="I am a detail kit"
+          {...props}
+      />
+      <Detail
+          color="default"
+          text="I am a detail kit"
+          {...props}
+      />
+      <Detail
+          color="lighter"
+          text="I am a detail kit"
+          {...props}
+      />
+      <Detail
+          color="link"
+          text="I am a detail kit"
+          {...props}
+      />
+      <Detail
+          color="error"
+          text="I am a detail kit"
+          {...props}
+      />
+      <Detail
+          color="success"
+          text="I am a detail kit"
+          {...props}
+      />
+    </div>
+  )
+}
 
 export default DetailColors

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.jsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import MultiLevelSelect from "../_multi_level_select";
+import { Button } from "playbook-ui";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "people",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "talentAcquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "businessAffairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "learningAndDevelopment",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "peopleExperience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "contactCenter",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "appointmentManagement",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "customerService",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectReactResetKey = (props) => {
+  const [resetKey, setResetKey] = useState(0);
+
+  const handleReset = () => {
+    setResetKey((k) => k + 1);
+  };
+
+  return (
+    <>
+      <MultiLevelSelect
+          {...props}
+          id="multi-level-select-reset-example"
+          key={`multi-level-select-reset-${resetKey}`}
+          name="my_array"
+          returnAllSelected
+          treeData={treeData}
+      />
+      <Button
+          id="multilevelselect-reset-button"
+          marginTop="lg"
+          onClick={handleReset}
+          text="Reset"
+      />
+    </>
+  );
+};
+
+export default MultiLevelSelectReactResetKey;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.md

@@ -0,0 +1 @@
+When a parent resets a Multi Level Select (e.g., “Default” or “Clear”), the kit needs a `key` that changes with the selection because React uses the `key` to determine component identity and whether to preserve internal state. If the `key` doesn’t change, React reuses the existing instance and may keep showing the old selection instead of resetting to the new one.

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

@@ -39,3 +39,4 @@ examples:
     - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
     - multi_level_select_single_disabled: Disabled Options (Single Select)
     - multi_level_select_required_indicator: Required Indicator
+    - multi_level_select_react_reset_key: Reset with Key (React)

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

@@ -17,3 +17,4 @@ export { default as MultiLevelSelectDisabledOptionsDefault } from "./_multi_leve
 export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.jsx"
 export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
 export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_required_indicator.jsx"
+export { default as MultiLevelSelectReactResetKey } from "./_multi_level_select_react_reset_key.jsx"

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx

@@ -9,7 +9,7 @@ const PaginationDefault = (props) => {
         <Pagination
             current={1}
             range={5}
-            total={10}
+            total={1000}
             {...props}
           />
       </>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.jsx

@@ -2,19 +2,17 @@ import React from 'react'
 
 import TextInput from '../_text_input'
 
-class TextInputDisabled extends React.Component {
-  render(props) {
-    return (
-      <div>
-        <TextInput
-            disabled
-            label="Last Name"
-            placeholder="Enter last name"
-            {...props}
-        />
-      </div>
-    )
-  }
+const TextInputDisabled = (props) => {
+  return (
+    <div>
+      <TextInput
+          disabled
+          label="Last Name"
+          placeholder="Enter last name"
+          {...props}
+      />
+    </div>
+  )
 }
 
 export default TextInputDisabled

data/app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb

@@ -1,4 +1,6 @@
 <%= pb_rails("title", props: { text: "Default Color", tag: "h1", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "light" }) %>
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "lighter" }) %>
 <%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "link" }) %> 
 <%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "success" }) %>
 <%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "error" }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_colors.jsx

@@ -9,6 +9,20 @@ const TitleColors = (props) => {
           text="Default Color"
           {...props}
       />
+      <Title
+          color="light"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
+      <Title
+          color="lighter"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
       <Title
           color="link"
           size={3}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.2.0.pre.alpha.PLAY2798idvsinputoptionsidfortextarea14471
+  version: 16.2.0.pre.alpha.PLAY2806emailcampaignmlsfix14645
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-17 00:00:00.000000000 Z
+date: 2026-02-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -1449,6 +1449,8 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.jsx
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.md