playbook_ui_docs 16.2.0.pre.alpha.play2762formkithandlenil14473 → 16.2.0.pre.alpha.play2780dropdownkitremoveXonblank14671

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 97d46241e667c4dc4652dbf70748286ef8751ca28ea05d6ef7a9b40899a0cb89
-  data.tar.gz: 3cb461d0cf45f3b8c9c28741d473dcb98036a28bbe0c48806246d725f02c6150
+  metadata.gz: b744692e6b1a3201c78f3d822c5ada862d9d5b2abefd6fcd1240a817898ff351
+  data.tar.gz: fbd1b7a9b8cc30868468878ef9139eb2a55b9398deeab3c035346529a87b48e2
 SHA512:
-  metadata.gz: 302a5f0b98de24651defde3d4539ed53ba81c658456b2284e950a91d19c9dd506569f5252fe51ff4d3034097194bd2faf28ef6a1f2799ee1e7251791f28404ce
-  data.tar.gz: 70e6b64737f0527b27187abcd7c58815977b8eda163db594ebf2363c5ef0aca192858539f4aa1a4256dc72506176d74c841f69dd53bfe9f3ee2b11be05d87e7e
+  metadata.gz: 694419a2366f2f0b1f9723f761684a91c69f921b653bc10d9cff4cac3c382fb42247185e0d06c0f89be741a59b8e29c6139704734506979cc23c8a03e0a30132
+  data.tar.gz: cb1c64d05a5fda34a8eaf18da19d863a2f2e2c4643132d109117123582e188f0c66689db8191285a4abe83398a7267a5caba5c275243e7a5b2c90bc0ea6868a7

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_textarea/docs/_textarea_input_options.jsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react"
+
+import Textarea from "../_textarea"
+
+const TextareaInputOptions = (props) => {
+  const [value1, setValue1] = useState("")
+  const [value2, setValue2] = useState("")
+  const [value3, setValue3] = useState("")
+  const [value4, setValue4] = useState("")
+
+  return (
+    <div>
+      <Textarea
+          id="container-id"
+          label="ID on Container"
+          name="comment"
+          onChange={(e) => setValue1(e.target.value)}
+          rows={4}
+          value={value1}
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          inputOptions={{ id: "textarea-id" }}
+          label="ID on Textarea via inputOptions"
+          name="comment"
+          onChange={(e) => setValue2(e.target.value)}
+          rows={4}
+          value={value2}
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          id="container-id-2"
+          inputOptions={{ id: "textarea-id-2" }}
+          label="Both Container and Textarea IDs"
+          name="comment"
+          onChange={(e) => setValue3(e.target.value)}
+          rows={4}
+          value={value3}
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          inputOptions={{
+          "aria-label": "Enter description",
+          "aria-describedby": "help-text",
+          data: { controller: "textarea", action: "focus->handleFocus" },
+          id: "description-textarea"
+        }}
+          label="Data and ARIA Attributes"
+          name="description"
+          onChange={(e) => setValue4(e.target.value)}
+          rows={4}
+          value={value4}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextareaInputOptions

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

@@ -21,6 +21,7 @@ examples:
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
   - textarea_required_indicator: Required Indicator
+  - textarea_input_options: Input Options
   - textarea_disabled: Disabled
 
   swift:

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

@@ -1,9 +1,10 @@
-export { default as TextareaDefault } from './_textarea_default.jsx'
+export { default as TextareaDefault } from "./_textarea_default.jsx"
 export { default as TextareaDisabled } from './_textarea_disabled.jsx'
-export { default as TextareaResize } from './_textarea_resize.jsx'
-export { default as TextareaCustom } from './_textarea_custom.jsx'
-export { default as TextareaError } from './_textarea_error.jsx'
-export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
-export { default as TextareaInline } from './_textarea_inline.jsx'
-export { default as TextareaEmojiMask } from './_textarea_emoji_mask.jsx'
-export { default as TextareaRequiredIndicator } from './_textarea_required_indicator.jsx'
+export { default as TextareaResize } from "./_textarea_resize.jsx"
+export { default as TextareaCustom } from "./_textarea_custom.jsx"
+export { default as TextareaError } from "./_textarea_error.jsx"
+export { default as TextareaCharacterCounter } from "./_textarea_character_counter.jsx"
+export { default as TextareaInline } from "./_textarea_inline.jsx"
+export { default as TextareaEmojiMask } from "./_textarea_emoji_mask.jsx"
+export { default as TextareaRequiredIndicator } from "./_textarea_required_indicator.jsx"
+export { default as TextareaInputOptions } from "./_textarea_input_options.jsx"

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.play2762formkithandlenil14473
+  version: 16.2.0.pre.alpha.play2780dropdownkitremoveXonblank14671
 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-25 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
@@ -2389,6 +2391,7 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb