playbook_ui_docs 16.0.0.pre.alpha.PLAY2722advancedtableinlinerowloadingrails13598 → 16.0.0.pre.alpha.PLAY2744dropdownquickpickpt113758

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 29354927436c796ae7baa3b87c13e829b6a4ebe898e9726c268652de0a34e586
-  data.tar.gz: 3179fc9fa7cff40ef2c4aa08e4e624fc94185723b3c00b2442ef0049d08553f8
+  metadata.gz: 8237bdc8b6814deb10c38ac0ceae85a547317f0656e8c181a926200b73651d46
+  data.tar.gz: e824d0f4d6ce60e8c628b20d0e9a0d4904851e8da104087f1550871886d7f39a
 SHA512:
-  metadata.gz: '049e8324f8769dea0031cdd58949de387823d86c48f853fb3100598822cddef8d87b95d8b340a154b685d57ee6db0551a956135f29e07ab8b02d821930b6145a'
-  data.tar.gz: d21fe4352e541395ecaca6313eadc7ccf3e75d078aa4ce81ae6a3608e9f0b20f505be4d3c68aaa1d812714fd08c2edf922ab703e24e9f47a9a77b47b4ca9455a
+  metadata.gz: da439f58ae9c2dbeb906a924d155ed7bb3c6672d0fa492d6feec094a1295110759991059f3f20b1718ec07dc3018f99b3e8a0b24cde8ace1566f35bb1fdaaf3c
+  data.tar.gz: 5f839ec37945d4750c238b8c1b7919c2b36d1c890652477cb6ede775137c3ccddd9af640ca68a30f81923080af7a771bd0e4bbb2a5d34bce2791a88a3f719784

data/app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import Background from '../../pb_background/_background'
+
+const BackgroundResponsive = (props) => (
+  <>
+    <Background
+        alt="colorful background"
+        backgroundColor={{ xs: "primary", sm: "warning", md: "success", lg: "error", xl: "category_1" }}
+        className="background lazyload"
+        padding="xl"
+        {...props}
+    />
+    <br/>
+    <Background
+        alt="colorful background"
+        className="background lazyload"
+        imageUrl={{
+          xs: "https://unsplash.it/500/400/?image=633",
+          sm: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
+          md: "https://unsplash.it/500/400/?image=633",
+          lg: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
+          xl: "https://unsplash.it/500/400/?image=633"
+        }}
+        padding="xl"
+        {...props}
+    />
+  </>
+)
+
+export default BackgroundResponsive

data/app/pb_kits/playbook/pb_background/docs/_background_responsive.md

@@ -0,0 +1 @@
+The `backgroundColor`, `backgroundSize`, `backgroundPosition`, `backgroundRepeat`, and `imageUrl` props support responsive sizes. To use them, pass an object to the prop containing your values relative to responsive break points. To test this here, resize your browser window to responsively change these Backgrounds' `backgroundColor` and `imageUrl`.

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

@@ -20,3 +20,4 @@ examples:
   - background_category: Category
   - background_size: Size
   - background_overlay: Overlay
+  - background_responsive: Responsive

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

@@ -7,3 +7,4 @@ export { default as BackgroundStatusSubtle } from './_background_status_subtle.j
 export { default as BackgroundCategory } from './_background_category.jsx'
 export { default as BackgroundSize } from './_background_size.jsx'
 export { default as BackgroundOverlay } from './_background_overlay.jsx'
+export { default as BackgroundResponsive } from './_background_responsive.jsx'

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md

@@ -0,0 +1,3 @@
+The `blank_selection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
+
+The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md

@@ -0,0 +1,3 @@
+The `blankSelection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
+
+The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb

@@ -0,0 +1,52 @@
+<% 
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: {
+  id: "date-range-quickpick-reset-closeable",
+  label: "Quick Pick",
+  variant: "quickpick",
+  clearable: false
+}) %>
+
+<%= pb_rails("button", props: {
+  margin_y: "md",
+  text: "Reset",
+  html_options: {
+    onclick: "handleReset()"
+  }
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  id: "closeable-default",
+  options: options,
+  clearable: false,
+  default_value: options.last,
+  margin_bottom: "md",
+  label: "Default"
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  id: "closeable-subtle",
+  options: options,
+  clearable: false,
+  default_value: options.second,
+  variant: "subtle",
+  separators: false,
+  label: "Subtle"
+}) %>
+
+<script>
+  function handleReset() {
+    const dropdown = document.querySelector("#date-range-quickpick-reset-closeable[data-pb-dropdown]");
+    const instance = dropdown?._pbDropdownInstance;
+    
+    if (instance) {
+      instance.clearSelection();
+    }
+  }
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx

@@ -0,0 +1,72 @@
+import React, { useRef } from 'react'
+
+import Button from '../../pb_button/_button'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownWithClearable = (props) => {
+    const dropdownRef = useRef(null)
+
+    const options = [
+        {
+            label: "United States",
+            value: "unitedStates",
+            id: "us"
+        },
+        {
+            label: "Canada",
+            value: "canada",
+            id: "ca"
+        },
+        {
+            label: "Pakistan",
+            value: "pakistan",
+            id: "pk"
+        }
+    ]
+
+    const handleReset = () => {
+        if (dropdownRef.current) {
+            dropdownRef.current.clearSelected()
+        }
+    }
+
+    return (
+        <>
+            <Dropdown
+                clearable={false}
+                label="Quick Pick"
+                onSelect={() => {}}
+                ref={dropdownRef}
+                variant="quickpick"
+                {...props}
+            />
+            <Button
+                marginY="md"
+                onClick={handleReset}
+                text="Reset"
+            />
+
+            <Dropdown
+                clearable={false}
+                defaultValue={options[options.length - 1]}
+                label="Default"
+                marginBottom="md"
+                options={options}
+                variant="default"
+                {...props}
+            />
+
+            <Dropdown
+                clearable={false}
+                defaultValue={options[1]}
+                label="Subtle"
+                options={options}
+                separators={false}
+                variant="subtle"
+                {...props}
+            />
+        </>
+    )
+}
+
+export default DropdownWithClearable

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md

@@ -0,0 +1,5 @@
+The `clearable` prop controls whether the clear (X) button appears in the dropdown. When set to `false`, the clear button is hidden.
+
+This is useful in two scenarios:
+1. When you have a separate "Reset" or "Defaults" button that handles clearing the selection (as shown in the Quick Pick example)
+2. When you don't want to provide any way to clear the selection (as shown in the Default and Subtle examples)

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb

@@ -0,0 +1,9 @@
+<% 
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: { options: options, placeholder: "Choose a country" }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownWithPlaceholder = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ];  
+
+  return (
+    <Dropdown
+        options={options}
+        placeholder="Choose a country"
+        {...props}
+    />
+  )
+}
+
+export default DropdownWithPlaceholder

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md

@@ -0,0 +1,3 @@
+The `placeholder` prop allows you to customize the placeholder text that appears when no option is selected in the dropdown.
+
+The placeholder prop works with all dropdown variants (`default`, `subtle`, and `quickpick`). When no option is selected, the placeholder text is displayed. When an option is selected, the placeholder is replaced by the selected option's label. The default placeholder text is "Select..." if no placeholder is provided.

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

@@ -21,7 +21,9 @@ examples:
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_with_placeholder: Placeholder
   - dropdown_separators_hidden: Separators Hidden
+  - dropdown_with_clearable: Clearable
   - dropdown_quickpick_rails: Quick Pick Variant
   - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
@@ -52,7 +54,9 @@ examples:
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_with_placeholder: Placeholder
   - dropdown_clear_selection: Clear Selection
+  - dropdown_with_clearable: Clearable
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
   - dropdown_quickpick: Quick Pick Variant

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

@@ -11,6 +11,7 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
+export { default as DropdownWithPlaceholder } from './_dropdown_with_placeholder.jsx'
 export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
 export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
 export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
@@ -27,4 +28,5 @@ export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
 export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
 export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
 export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
-export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
+export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
+export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'

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

@@ -1,6 +1,8 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
@@ -11,4 +13,4 @@
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb

@@ -0,0 +1,74 @@
+<% 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",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-input-display-none",
+    name: :foo,
+    tree_data: treeData,
+    input_display: "none",
+    return_all_selected: true,
+    })
+%>

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

@@ -0,0 +1,87 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "people",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "talentAcquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "businessAffairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "learningAndDevelopment",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "peopleExperience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "contactCenter",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "appointmentManagement",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "customerService",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectInputDisplay = (props) => {
+  return (
+    <MultiLevelSelect
+        id="multi-level-select-input-display-none"
+        inputDisplay="none"
+        onSelect={(selectedNodes) =>
+          console.log("Selected Items", selectedNodes)
+        }
+        returnAllSelected
+        treeData={treeData}
+        {...props}
+    />
+  );
+};
+
+export default MultiLevelSelectInputDisplay;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_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` is particularly useful for larger trees that may return many pill selections, helping to keep the input field clean and compact. This prop should not be used with the Single Select variant.

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

@@ -1,37 +1,39 @@
 examples:
   rails:
-  - multi_level_select_default: Default
-  - multi_level_select_single: Single Select
-  - multi_level_select_single_children_only: Single Select w/ Hidden Radios
-  - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_selected_ids: Selected Ids
-  - multi_level_select_with_form: With Form
-  - multi_level_select_color: With Pills (Custom Color)
-  - multi_level_select_reset: Reset Selection
-  - multi_level_select_label: With Label
-  - multi_level_select_error: Error
-  - multi_level_select_disabled: Disabled Input
-  - multi_level_select_disabled_options_default: Disabled Options (Default)
-  - multi_level_select_disabled_options: Disabled Options (Return All Selected)
-  - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
-  - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
-  - multi_level_select_single_disabled: Disabled Options (Single Select)
+    - multi_level_select_default: Default
+    - multi_level_select_single: Single Select
+    - multi_level_select_single_children_only: Single Select w/ Hidden Radios
+    - multi_level_select_return_all_selected: Return All Selected
+    - multi_level_select_input_display: With Input Display None
+    - multi_level_select_selected_ids: Selected Ids
+    - multi_level_select_with_form: With Form
+    - multi_level_select_color: With Pills (Custom Color)
+    - multi_level_select_reset: Reset Selection
+    - multi_level_select_label: With Label
+    - multi_level_select_error: Error
+    - multi_level_select_disabled: Disabled Input
+    - multi_level_select_disabled_options_default: Disabled Options (Default)
+    - multi_level_select_disabled_options: Disabled Options (Return All Selected)
+    - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
+    - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
+    - multi_level_select_single_disabled: Disabled Options (Single Select)
 
   react:
-  - multi_level_select_default: Default
-  - multi_level_select_react_hook: React Hook
-  - multi_level_select_single: Single Select
-  - multi_level_select_single_children_only: Single Select w/ Hidden Radios
-  - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_selected_ids_react: Selected Ids
-  - multi_level_select_color: With Pills (Custom Color)
-  - multi_level_select_with_children: Checkboxes With Children
-  - multi_level_select_with_children_with_radios: Single Select With Children
-  - multi_level_select_label: With Label
-  - multi_level_select_error: Error
-  - multi_level_select_disabled: Disabled Input
-  - multi_level_select_disabled_options_default: Disabled Options (Default)
-  - multi_level_select_disabled_options: Disabled Options (Return All Selected)
-  - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
-  - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
-  - multi_level_select_single_disabled: Disabled Options (Single Select)
+    - multi_level_select_default: Default
+    - multi_level_select_react_hook: React Hook
+    - multi_level_select_single: Single Select
+    - multi_level_select_single_children_only: Single Select w/ Hidden Radios
+    - multi_level_select_return_all_selected: Return All Selected
+    - multi_level_select_input_display: With Input Display None
+    - multi_level_select_selected_ids_react: Selected Ids
+    - multi_level_select_color: With Pills (Custom Color)
+    - multi_level_select_with_children: Checkboxes With Children
+    - multi_level_select_with_children_with_radios: Single Select With Children
+    - multi_level_select_label: With Label
+    - multi_level_select_error: Error
+    - multi_level_select_disabled: Disabled Input
+    - multi_level_select_disabled_options_default: Disabled Options (Default)
+    - multi_level_select_disabled_options: Disabled Options (Return All Selected)
+    - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
+    - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
+    - multi_level_select_single_disabled: Disabled Options (Single Select)

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

@@ -4,6 +4,7 @@ export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_se
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
 export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
+export { default as MultiLevelSelectInputDisplay } from './_multi_level_select_input_display.jsx'
 export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
 export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
 export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedRequiredIndicator = (props) => {
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Add your text here. You can format your text, add links, quotes, and bullets."
+    })
+      if (!editor) {
+        return null
+      }
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          label="Label"
+          requiredIndicator
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedRequiredIndicator

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_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_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("rich_text_editor", props: {
+  id: "required-indicator",
+  input_options: {
+    id: 'hidden_input_id',
+    name: "hidden_input_name"
+  },
+  label: "Label",
+  required_indicator: true,
+  value: "Add your text here. You can format your text, add links, quotes, and bullets."
+}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+
+const RichTextEditorRequiredIndicator = (props) => {
+  const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
+  handleOnChange = (html) => setValue(html)
+
+  return (
+    <div>
+      <RichTextEditor
+          label="Label"
+          onChange={handleOnChange}
+          requiredIndicator
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default RichTextEditorRequiredIndicator

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_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_rich_text_editor/docs/example.yml

@@ -9,6 +9,7 @@ examples:
   - rich_text_editor_templates: Templates
   # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
+  - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_preview: Preview
 
   react:
@@ -31,5 +32,7 @@ examples:
   - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_advanced_height: Advanced Height
   - rich_text_editor_advanced_min_height: Advanced Min Height
+  - rich_text_editor_required_indicator: Required Indicator
+  - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
   - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview

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

@@ -19,3 +19,5 @@ export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_adv
 export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
 export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
 export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
+export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
+export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'

data/app/pb_kits/playbook/pb_table/docs/_sections.yml

@@ -0,0 +1,68 @@
+sections:
+  - title: "Size & Density"
+    examples:
+      - table_sm
+      - table_md
+      - table_lg
+      - table_multiline
+      - table_single_line
+      - table_outer_padding
+
+  - title: "Layout & Structure"
+    examples:
+      - table_responsive_table
+      - table_with_subcomponents
+      - table_with_subcomponents_as_divs
+      - table_with_background_kit
+
+
+  - title: "Sticky & Positional Behaviors"
+    examples:
+      - table_sticky
+      - table_sticky_left_columns
+      - table_sticky_right_columns
+      - table_sticky_columns
+      - table_alignment_row
+      - table_alignment_column
+      - table_alignment_shift_row
+      - table_alignment_shift_data
+      - table_side_highlight
+      - table_container
+
+  - title: "Collapsible & Nested Behaviors"
+    examples:
+      - table_with_collapsible
+      - table_with_dynamic_collapsible
+      - table_with_collapsible_with_custom_click
+      - table_with_collapsible_with_custom_content
+      - table_with_collapsible_with_nested_rows
+      - table_with_collapsible_with_nested_table
+
+  - title: "Data Presentation"
+    examples:
+      - table_data_table
+      - table_vertical_border
+      - table_striped
+
+  - title: "Header Variants"
+    examples:
+      - table_header
+      - table_with_header_style_borderless
+      - table_with_header_style_floating
+
+  - title: "Interactive Tables"
+    examples:
+      - table_with_clickable_rows
+      - table_with_selectable_rows
+      - table_with_filter_variant
+      - table_with_filter_variant_with_pagination
+      - table_disable_hover
+
+  - title: "Table Actions"
+    examples:
+      - table_one_action
+      - table_two_actions
+      - table_two_plus_actions
+      - table_action_middle
+      - table_icon_buttons
+      

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

@@ -0,0 +1,39 @@
+<%= pb_rails("textarea", props: { 
+  label: "ID on Container", 
+  id: "container-id",
+  name: "comment",
+  rows: 4
+}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { 
+  label: "ID on Textarea via input_options", 
+  input_options: { id: "textarea-id" },
+  name: "comment",
+  rows: 4
+}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { 
+  label: "Both Container and Textarea IDs", 
+  id: "container-id-2",
+  input_options: { id: "textarea-id-2" },
+  name: "comment",
+  rows: 4
+}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { 
+  label: "Data and ARIA Attributes", 
+  name: "description",
+  rows: 4,
+  input_options: {
+    'aria-label': "Enter description",
+    'aria-describedby': "help-text",
+    data: { controller: "textarea", action: "focus->handleFocus" },
+    id: "description-textarea"
+  }
+}) %>

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

@@ -0,0 +1,3 @@
+Use the `input_options` / `inputOptions` prop to pass additional attributes directly to the underlying `<textarea>` element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, ARIA attributes, or other HTML attributes that need to be on the textarea element itself.
+
+Additional HTML attributes (e.g. data or ARIA attributes) can also be passed directly to the `<textarea>` via `input_options`.

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

@@ -0,0 +1,5 @@
+<%= pb_rails("textarea", props: {
+  label: "Label",
+  placeholder: "Placeholder text",
+  required_indicator: true
+}) %>

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

@@ -0,0 +1,25 @@
+import React, {useState} from 'react'
+
+import Textarea from '../_textarea'
+
+const TextareaRequiredIndicator = (props) => {
+  const [value, setValue] = useState('Default value text')
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+  return (
+    <div>
+      <Textarea
+          label="Label"
+          name="comment"
+          onChange={(e) => handleChange(e)}
+          placeholder="Placeholder text"
+          requiredIndicator
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextareaRequiredIndicator

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_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_textarea/docs/example.yml

@@ -8,6 +8,8 @@ examples:
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
+  - textarea_required_indicator: Required Indicator
+  - textarea_input_options: Input Options
 
   react:
   - textarea_default: Default
@@ -17,8 +19,9 @@ examples:
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
+  - textarea_required_indicator: Required Indicator
 
   swift:
   - textarea_default_swift: Default
   - textarea_error_swift: Textarea w/ Error
-  - textarea_props_swift: ""
+  - textarea_props_swift: ""

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

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.0.0.pre.alpha.PLAY2722advancedtableinlinerowloadingrails13598
+  version: 16.0.0.pre.alpha.PLAY2744dropdownquickpickpt113758
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-01-19 00:00:00.000000000 Z
+date: 2026-01-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -231,6 +231,8 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_light.md
 - app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_overlay.md
+- app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_responsive.md
 - app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_size.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_size.md
@@ -838,6 +840,8 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/index.js
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
@@ -899,6 +903,9 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
@@ -929,6 +936,9 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb
@@ -1409,6 +1419,9 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
@@ -1909,6 +1922,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
@@ -1926,6 +1941,9 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
@@ -2126,6 +2144,7 @@ files:
 - app/pb_kits/playbook/pb_stat_value/docs/example.yml
 - app/pb_kits/playbook/pb_stat_value/docs/index.js
 - app/pb_kits/playbook/pb_table/docs/_description.md
+- app/pb_kits/playbook/pb_table/docs/_sections.yml
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
@@ -2324,7 +2343,12 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error_swift.md
 - 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.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
 - app/pb_kits/playbook/pb_textarea/docs/example.yml