playbook_ui_docs 16.2.0.pre.alpha.play2753dropdownaddedclosingprops14377 → 16.2.0.pre.alpha.play2762formkithandlenil14473

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c57af69daca09d632f1e5ad684fa60e0e12b297c8f79b2fd6c7e3f6c6fba830
-  data.tar.gz: 8513facdc1f475564f4257e11d0380888068e4a05c900bca6c342bdc078eb072
+  metadata.gz: 97d46241e667c4dc4652dbf70748286ef8751ca28ea05d6ef7a9b40899a0cb89
+  data.tar.gz: 3cb461d0cf45f3b8c9c28741d473dcb98036a28bbe0c48806246d725f02c6150
 SHA512:
-  metadata.gz: 0e56139cde0b70d66007354146c7786d68757675711d165beb86cdf81d279c63ceaa55406e3ab580da940c50f6ad89b0ae2a498660bc846f1439cfb1d360f165
-  data.tar.gz: fa9198940b70efe81f9e1edfba8e97786943f248ac1958331461a946063067d36e3443a2e41b35d16c7fe3a60bfff8ef308f2618b2b086880b4d53e80715f75b
+  metadata.gz: 302a5f0b98de24651defde3d4539ed53ba81c658456b2284e950a91d19c9dd506569f5252fe51ff4d3034097194bd2faf28ef6a1f2799ee1e7251791f28404ce
+  data.tar.gz: 70e6b64737f0527b27187abcd7c58815977b8eda163db594ebf2363c5ef0aca192858539f4aa1a4256dc72506176d74c841f69dd53bfe9f3ee2b11be05d87e7e

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md

@@ -1,6 +1,7 @@
 Datepicker supports `position` options from [Flatpickr Options Documentation](https://flatpickr.js.org/options/). There are multiple positioning options to choose from.
 
 **Note:** In order for the above prop to work properly, you must also send `staticPosition={false}` to your Datepicker kit instance.
+If you are using the Datepicker within a Dialog, you cannot use the `staticPosition`/`static_position` prop.
 
 #### Affix Datepicker Upon Scrolling
 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md

@@ -1,4 +1,6 @@
 The dialog kit also supports customizing your dialog with a [compound component](https://kentcdodds.com/blog/compound-components-with-react-hooks) structure.
 This allows for greater flexibility and more complex dialogs.
 
-For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.
+For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.
+
+If you are using the datepicker within the Rails dialog, do not use the `static_position` prop on the datepicker.

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -92,7 +92,8 @@
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: true, hidden_inputs: true} %>
+  <%= form.intl_telephone :example_intl_telephone, props: { label: true, hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb

@@ -146,6 +146,8 @@
   <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
   <%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
   <%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Custom Date Picker Label", required: true, required_indicator: true } %>
+  <%= form.select :example_select_required_indicator, [["Yes", 1], ["No", 2]], props: { label: true, required: true, required_indicator: true } %>
+  <%= form.select :example_select_required_indicator_2, [["Yes", 1], ["No", 2]], props: { label: "Example Select Field", required: true, required_indicator: true } %>
   <%= form.multi_level_select :example_multi_level_select_required_indicator, props: {
     label: true,
     margin_y: 'sm',

data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx

@@ -4,7 +4,37 @@ import Link from '../../pb_link/_link'
 const LinkUnderline = (props) => (
   <div>
     <Link
-        href="#underline"
+        href="#underline1"
+        text="link example"
+        underline
+        {...props}
+    />
+
+    <br />
+
+    <Link
+        color="body"
+        href="#underline2"
+        text="link example"
+        underline
+        {...props}
+    />
+
+    <br />
+
+    <Link
+        color="muted"
+        href="#underline3"
+        text="link example"
+        underline
+        {...props}
+    />
+
+    <br />
+
+    <Link
+        color="destructive"
+        href="#underline4"
         text="link example"
         underline
         {...props}

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Snacks",
+  name: "food",
+  required_indicator: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Popcorn",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Chips",
+    },
+    {
+      value: "3",
+      value_text: "Twizzlers",
+    },
+    {
+      value: "4",
+      value_text: "Cookies",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { Select } from "playbook-ui";
+
+const SelectRequiredIndicator = () => {
+  const options = [
+    {
+      value: "1",
+      text: "Popcorn",
+    },
+    {
+      value: "2",
+      text: "Chips",
+    },
+    {
+      value: "3",
+      text: "Twizzlers",
+    },
+  ];
+
+  return (
+    <div>
+      <Select
+          label="Favorite Snack"
+          name="food"
+          options={options}
+          requiredIndicator
+      />
+    </div>
+  );
+};
+
+export default SelectRequiredIndicator;

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

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (\*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

@@ -16,7 +16,7 @@ examples:
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
   - select_input_options: Input Options
-
+  - select_required_indicator: Required Indicator
 
 
   react:
@@ -35,8 +35,9 @@ examples:
   - select_multiple: Select Multiple
   - select_react_hook: React Hook
   - select_input_options: Input Options
+  - select_required_indicator: Required Indicator
 
   swift:
   - select_default_swift: Default
   - select_error_swift: Error
-  - select_props_table: ""
+  - select_props_table: ""

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

@@ -13,3 +13,4 @@ export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
 export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'
 export { default as SelectInputOptions } from './_select_input_options.jsx'
+export { default as SelectRequiredIndicator } from './_select_required_indicator.jsx'

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_disabled.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("textarea", props: { label: "Disabled", rows: 4, id: "disabled-example-1", disabled: true }) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: {
+  label: "Disabled with Placeholder",
+  placeholder: "Placeholder text",
+  id: "disabled-example-2",
+  disabled: true
+}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_disabled.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import Textarea from '../_textarea'
+
+const TextareaDefault = (props) => {
+  return (
+    <>
+      <Textarea
+          disabled
+          id="disabled-example"
+          label="Disabled"
+          {...props}
+          rows={4}
+      />
+      <Textarea
+          disabled
+          id="disabled-example-with-placeholder"
+          label="Disabled with Placeholder"
+          placeholder="Content goes here"
+          {...props}
+          rows={4}
+      />
+    </>
+  )
+}
+
+export default TextareaDefault

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

@@ -10,6 +10,7 @@ examples:
   - textarea_emoji_mask: Emoji Mask
   - textarea_required_indicator: Required Indicator
   - textarea_input_options: Input Options
+  - textarea_disabled: Disabled
 
   react:
   - textarea_default: Default
@@ -20,6 +21,7 @@ examples:
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
   - textarea_required_indicator: Required Indicator
+  - textarea_disabled: Disabled
 
   swift:
   - textarea_default_swift: Default

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

@@ -1,4 +1,5 @@
 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'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.2.0.pre.alpha.play2753dropdownaddedclosingprops14377
+  version: 16.2.0.pre.alpha.play2762formkithandlenil14473
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-12 00:00:00.000000000 Z
+date: 2026-02-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -2060,6 +2060,9 @@ files:
 - app/pb_kits/playbook/pb_select/docs/_select_react_hook.md
 - app/pb_kits/playbook/pb_select/docs/_select_required.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_required.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_required_indicator.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_required_indicator.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_required_indicator.md
 - app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_value_text_same.jsx
 - app/pb_kits/playbook/pb_select/docs/example.yml
@@ -2374,6 +2377,8 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_disabled.html.erb
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_disabled.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.md